Anthilemoon

Vous en avez assez de prendre vos designs sur des sites de graphisme, et aimeriez bien avoir quelque chose de vraiment personnalisé ? Comme on dit, on est jamais mieux servi que par soit même.
Ce tutorial vous propose de suivre étape par étape la création d’un layout en div. Évidement, il est très simple, mais il vous sera ensuite permis de vous améliorer quand vous aurez compris le principe !

Logiciels nécessaires :
- Photoshop CS2 9.0
- Bloc-note

PARTIE I – Le design

Ouvrez votre Photoshop et créez un nouveau fichier [Ctrl+N]. Comme options, choisissez : Largeur [750 pixels], Hauteur [600 pixels], Fond [Blanc].
Choisissez une image, de préférence un PNG transparent, et ouvrez le. Copiez-collez la sur votre fond blanc.

Grâce à l’outil « Transformation Manuelle », dans le menu Edition, recadrez l’image pour qu’elle soit située de cette façon :

Avec l’outil pipette sélectionnez une couleur sur votre image. J’ai choisis ce rose.
Choisissez maintenant l’outil de sélection rectangulaire et seclectionnez deux cadres en utilisant la touche « Maj » comme ci-dessous :

Puis remplissez avec ceci les deux caddres, ce qui donne ceci :

Prenez maintenant une autre couleur, positionnez vous sur le fond, et répétez la même opération de remplissage.
Vous pouvez ensuite ajouter tous les effets de texture, de transparence ou de brushes que vous voulez, ajouter du texte à votre guise, etc.

Voici ce que j’obtiens :

Grâce à l’outil de découpage séparez le layout horizontalement en plusieurs images. Faites click droit, puis « diviser la tranche ». Choisissez le nombre de tranches que vous souhaitez, c’est indifférent.

Enregistrez pour le web le tout, avec des images en JPEG et une qualité de 60. Nommez le fichier « index.html ».

La première partie est terminée !

PARTIE II – Le codage

Ouvrez index.html. Juste après

<!-- ImageReady Slices --> copiez collez ceci :

<div style="position: absolute; top: XXXpx;<br /> left: XXXpx; top: XXXpx; width: XXXpx"><br /> Tes liens ici</p> </div> <div style="position: absolute; top: XXXpx;<br /> left: XXXpx; top: XXXpx; width: XXXpx"><br /> Ton texte ici</p> </div> <p>

Maintenant, retournez sur Photoshop. Selectionnez la zone où vous voulez voir apparaitre votre menu grâce à l’outil selection rectangulaire . Regardez dans la fenêtre info les nombres qui apparaissent.

Remplacez les XXX du code donné ci-dessus par les nombres correspondants :
Top : Y
Left : X
Width : L

Faites de même pour le rectangle de contenu.

Maintenant, ajoutez ce code dans la balise « body » :

background=&nbsp;&raquo;images/fond.jpg&nbsp;&raquo;

Retournez de nouveau sur Photoshop, et utilisiez l’outil de sélection rectangulaire pour sélectionnez une ligne tout en bas de votre design. Copiez-collez la dans un nouveau document et enregistrez-là sous « fond.jpg » dans le dossier Images.

Il faut maintenant que ce fond se répète. Pour cela, insérez le code suivant juste avant la balise « head » :

<br /> <style> body { background-repeat: repeat-y; } </style> <p>

Modifiez la couleur de fond ici :

bgcolor=&nbsp;&raquo;#000000&#8243;

Le tour est joué !

Si vous rencontrez un problème avec ce tutorial, n’hésitez pas à me laisser un commentaire !

Cette entrée a été publiée le Mardi 19 septembre2006 à 22 h 19 min, et rangée dans Ressources et Tutos. Vous pouvez suivre les réponses à cette entrée via son flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un rétrolien depuis votre site.