Comment découper un design web pour le faire rentrer sur une page web ?

 

par yannb04 |

     
Comment découper un design web pour le faire rentrer sur une page web ?

Il faut savoir que sur une page web, l'image que l'on voit est le plus souvent constituée d'un assemblage d'images carrées ou rectangulaires posées les unes à côté des autres. Vous allez donc devoir créer un design puis le "charcuter" pour qu'il puisse être inséré dans du code HTML.

Quelles sont les fournitures nécessaires ?

  • Adobe Photoshop

Étapes de réalisation

1.

Commencez par concevoir le design de votre page web sur un seul document, idéalement de grande taille (ex. 1000 x 1000 px). Généralement, le design couvre l'en-tête du site, la barre de menus, quelques fioritures réparties de chaque côté du corps de la page et parfois même le pied de page.

2.

Une fois le design terminé, utilisez l'outil Tranche qui permet de découper proprement et au pixel près le design. Faîtes des formes rectangulaires que vous collerez les unes aux autres.

3.

Dans Fichier, choisissez "Enregistrer pour le web" et sélectionnez le format d'image adéquat. De là, un dossier et une page web seront créés. Vous n'aurez généralement besoin que des images qui contiennent votre graphisme, les autres sont des carrés blancs ou transparents générés automatiquement.

4.

Placez les images qui vous conviennent dans le dossier Images de votre site.

5.

Pour insérez les images sur votre page, il suffit d'utiliser les balises <div id=""> et </div>. Il faudra en prévoir une par image. Ensuite, tout se passe sur la feuille CSS où vous pourrez attribuer à chaque id une image puis jouer entre autres sur les marges et la commande "float" pour reconstituer votre design d'origine.

Astuces et mises en garde

Astuce(s) :

The Gimp (gratuit) dispose de la même fonctionnalité, elle se trouve dans le menu "Filtre > Web > Tranche"

Certains webmasters préfèrent conserver le design en une seule image qu'ils basculent ensuite en arrière-plan.

Mise(s) en garde :

Attention au format d'image (ex. le format jpg ne gère pas la transparence).

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on