|
Utilisez l'image ci contre pour réaliser ce tutorial.
|
|
Nous n'aurons besoin que des deux outils pour ce tutoriel. Prenez l'outil tranche pour commencer.
|
|
Avant de vous embarquer dans un découpage "freestyle" il faut
bien réfléchir à la manière dont vous voulez procéder
et ne pas vous jeter sur des tranches dans tout les sens.
Pour ce design de test nous pouvons voir l'architecture suivante : une colonne
à droite et une colonne à gauche , un block à gauche et
un block de news à droite.
Nous allons donc dans un premier temps découper le design en 4 parties
(cliquez sur la fenetre ci contre). Utilisez l'outil tranche et tracez 4 rectangles comme ci contre.
|
|
Maintenant que nous avons nos 4 rectangles , nous allons pouvoir nous attarder
sur les blocks menu et news. En effet, les colonnes à droite et gauche seront en arrière plan
d'une cellule de tableau donc nous en avons fini avec ces colonnes.
Pour pouvoir découper ces blocks, il faut imaginer comment le texte apparaitra dans ceux-ci
Nous avons le "toit" (tranche 2 photo ci contre) les deux colonnes de blocks (tranche 5 et 7) et la tranche 6 est celle qui accueillera le contenu des blocks.
Faites exactement la meme chose avec la tranche des news.
|
Une fois vos tranches réalisés faites Fichier → Enregistrer
pour le web. Photoshop va vous proposer de nommer un fichier HTML, mettez par
exemple design.htm puis enregitrez le à la racine de votre disque dur.
Une fois l'enregistrement terminé, dirigez vous vers la racine de votre disque dur. Photoshop vous a créé un fichier "design.htm" mais vous a également créé un repertoire "images" dans lequelle figure toutes les tranches/images de votre design.
Beaucoup d'entre vous me demande comment on peut ecrire dans les blocks, je vais tenter de vous l'expliquer simplement.
Editez votre fichier design.htm.
Chaque image a été placée en html , cependant pour pouvoir ecrire dans une cellule de tableau il faut que l'image soit placé dans la cellule en tant qu'arrière plan (background).
La ou vous désirez écrire, il y a par exemple :
<td><
img src="design_06.jpg"
widht="180"></td>
Vous devez remplacer cette portion de code par :
<td
background="design_06.jpg" widht="180">
Votre
Texte</td>
Voila , vous avez ici tous les outils pour réussir votre découpage
de design.