Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci tout sélectionner : Ctrl A




Les tutoriaux: Index » Photoshop » Interface » Découper son Design

Introduction

  • Tutoriel posté par Sky
  • 8744 lectures
  • Mis en ligne le
  • Dernière mise à jour le
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir dans ce tutorial comment découper son design sous Adobe Photoshop.

Les outils

...


Méthodologie
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.

Notes

  Evaluez le tutorial (90 Votes)

45
25
20

Je finirais en vous disant que l'outil tranche permet de tracer des tranches et de redimmensionner la tranche selectionnée,
Cet outil ne vous permet pas de selectionner une tranche déja tracé, vous devez utiliser l'autre outil pour faire cela (selection de tranche).

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Photoshop] Découper son Design

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com