Découper un design web avec Photoshop

Introduction

Ce tutoriel en plusieurs parties encore en cours d'écriture a pour objet de vous apprendre à découper un design de site Internet réalisé avec Photoshop. Il est directement inspiré de l'article Tables Vs. CSS du site pompage.net.
Pour suivre ce tutoriel, il vous faut connaitres les fondamentaux d'HTML (, , ,
, ,etc) et avoir des bonnes notions de CSS. Vous réaliserez ainsi à titre d'exemple une page, soit avec une mise en page grâce aux tableaux () et soit une page XHTML avec une mise en page en CSS. La durée pour la réalisation de ce tutoriel est variable. 

1. Récupérez votre design

Ouvrez votre design réalisé sous Photoshop. (version 100%) Pour avoir une bonne idée du rendu final, il ne faut pas hésiter à ajouter des textes même temporaires et les bordures du futur navigateur (utilisez alors 'Impr écr') Vous reconnaîtrez une utilisation massive de l'effet du tutoriel effet Aqua si vous avez un peu trainé dans nos tutoriaux.

---

2. Etude de la structure graphique

Nous avons donc un document .psd avec encore tous ses calques. Le but sera de transformer tout cela en une interface de site Web composée de balises HTML, de texte, d' images et peut être de CSS Et justement le challenge va être de mettre le moins d'image possible car ce sont les images qui pèsent lourd dans une page Web. On peut déjà supposer que tous les applats de couleur n'ont aucune raison d'être des images. Il suffira de coder la couleur en html/css avec un code couleur. Le code pour le noir est #000000 en héxadécimal ou RVB(0,0,0) et pour ce bleu electrique : #90C5D5 ou RVB(144,197,213) Comme vous l'avez peut être remarqué, nous avons pris le soin de ne pas Anti-Aliaser certains calques textes du .psd qui seront en texte brute avec derrière le fond bleu ou noir. Tandis que les titres blancs seront eux des images. Ils sont donc Anti-Aliasés. Donc finalement les futures images de la page Web sont assez clairement définit : On peut remarquer qu'un texte (ZeGoodies) chevauche notre image. Pour ne pas poser de problème dans notre découpage, il faudra alors soit décaler le texte vers le haut, soit réduire la hauteur de l'image (d'autres solutions existent notamment en xthml/css mais nous ne les traiterons pas) Nous n'avons pas délimité les images précisément, le découpage pourra varier en peu. C'est une première étape pour dégrossir la future mise en page. Par contre un problème se pose déjà. la page Web sera plus ou moins haute en fonction de la longeur des paragraphes de texte. Ainsi si il y a beaucoup de paragraphe, l'image verticale qui sert de séparation entre la zone bleu et la zone noire devra être trés haute. Pour résoudre ce problème, il suffira d'utiliser une image de fond. C'est une image qui sera répétée verticalement et/ou horizontalement (un peu comme un motif (Patern)) pour finir la colonne vers le bas. D'un point de vue technique en mise en page tableau HTML on pourra définir une cellulle avec comme paramètre :

background="image.gif"

et en mise en page CSS on pourra définir sur un élément (par exemple un

) une propriété :

background-image: url(image.gif);

ce qui donne avec cette image respectivement cette page en css et cette page en tableaux.

---

3. L'outil Tranche

Vous aurez besoin pour découper votre interface Web que d'un seul outil particulier de Photoshop : L'Outil Tranche qui comme son nom l'indique tranche ! (l outil est aussi présent dans Image Ready) Voici un exemple de son utilisation : Si vous découpez dans votre document .psd avec cet outil, au moment de la sauvegarde ('Ctrl+Alt+Shift+S' puis Enregistrer en spécifiant bien HTML et images (*.html)) vous pourrez produire une page html avec plusieurs images collées et callées dans un tableau pour reconstituer l'apparence du psd. Voici ce que Photoshop produit pour l'exemple ci dessus. On voit très bien les différentes images en modifiant légérement l'espace entre les cellules du tableau Dans ce petit exemple que nous venons de créer, seule cette image doit être conservée. les autres seront remplacés par le code couleur #8B4E4E Dans une mise en page en html tableau, nous pourons garder l'html produit par Photoshop et nous le transformerons petit à petit. Dans une mise en page en css, nous ne conserverons que les images pertinentes et les codes couleurs des images non pertinentes. 

Mise en page en tableau html (2/2)

Introduction

Ce tutoriel a pour objet de vous apprendre à faire une mise en page en tableau Vous réaliserez ainsi à titre d'exemple cette page html Pour suivre ce tutoriel, il est indispensable d'avoir suivi la premiere partie : cette page html

1. Principe de la mise en page en tableau HTML

Reprenons notre cette page html: pour supprimer les images monochromes, ils nous suffit de :

• Transférer les dimensions des images aux cellules. Il ne faudrais pas que la disparition de l'image réduise la taille de la cellule. Ce qui ce fait en transférent les propriétés indispensablewidth (largeur) et indispensablewidthheight (largeurhauteur)
  des balises indispensablewidthheight (largeurhauteurimages) vers les balises indispensablewidthheight

(largeurhauteurimagescellule). Puis supprimer les balises images indispensablewidthheight

inutiles. Ce qui donne cette page html, (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus claire). Ajouter la propriété indispensablewidthheight

border="1"bgcolor="#8B4E4E" pour remplir les cellules de la bonne couleur. , cette page html (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordure) (Pour récupérer le code couleur, utilisez l'outil indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipette (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool) raccourci largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I' ou le indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleur) 2. Passons au design Il est temps de rentrer dans le vif du sujet et de découper notre design. Suite à nos réfléxions précédentes nous allons créer ces tranches dans le document : Comme vous pouvez le voir, nous n'avons pas simplement délimité les images, nous avons définit une structure pour la page entière. Mettre les éléments les un en dessous des autres sera facile dans chaque tranche avec un largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I . Les tableaux nous servent surtout à placer les éléments horizontalement les uns par rapport aux autres. Regardons la cette page html (nous avons encore une fois retiré les commentaires). Comme dans notre exemple, il y a des manipulations à réaliser sur cette page. 6. Principe de l'optimisation Occupons nous pour commencer de cette page html : cette page html cette page html cette page html, avec une balise pour le mettre en forme (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteur), bien sûr à ce stade les sauts de ligne ne sont pas conservés. cette page html, pour coller le texte vers le haut et ajouter des retours à la ligne. cette page html. A ce stade il nous manque les titres blanc, nous allons les fabriquer à la prochaine étape 7.Titres image blanc Ouvrez cette page html dans Photoshop : Nous dupliquons le document (c'est plus sûr...). Dans les menus du haut faites largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImage -> largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez... Nous utilisons ensuite l'indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrement (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool) raccourci largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'C' pour isoler un titre. Ce qui donne : On utilise la même méthode pour l'autre titre : Ouvrez cette page html dans Photoshop : et faites encore de même (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives : nous avons donné un coup de pinceau en bleu #90C5D5 pour enlever le texte) Maintenant que nous avons tous les titres, cette page html 8. Optimisation du poid Notre page contient encore beaucoup d'image, il est encore possible d'alléger tout ca ! Ouvrez cette page html : Gràce à l'indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrement (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives : nous avons donné un coup de pinceau en bleu #90C5D5 pour enlever le texteCrop Tool) raccourci largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives : nous avons donné un coup de pinceau en bleu #90C5D5 pour enlever le texteCrop Tool'C' créez cette page html dans Photoshop : Comme expliqué précédement, cette page html avec la propriété : background="adressedelimage.gif" Ouvrez ensuite : cette page html et créez : 1)cette page html et 2)cette page html cette page html (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives : nous avons donné un coup de pinceau en bleu #90C5D5 pour enlever le texteCrop Tool'Cen n'oubliant pas de changer les valeurs de width et de height) cette page html et un indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top" sur la cellule (largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight

border="1" et supprimé les informations relatives à la compression de l'image pour y voir plus clairenous avons retiré la bordureEyedropper tool'I largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives : nous avons donné un coup de pinceau en bleu #90C5D5 pour enlever le texteCrop Tool'Cen n'oubliant pas de changer les valeurs de width et de heighttd) 9. Finitions cette page html avec indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top"bgcolor="#000000" sur la balise On enrobe ensuite toute notre page d'un grand tableau de taille indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top"bgcolor="#000000"100% et gràce à indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top"bgcolor="#000000"100%align et indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top"bgcolor="#000000"100%alignvalign Ainsi cette page html cette page html cette page html encore avec la balise indispensablewidthheight

border="1"bgcolor="#8B4E4E"Pipettesélectionneur de couleurwidthheight

bgcolor="#90C5D5"valign="top"Outils recadrementArchives :Outils recadrementvalign="top"bgcolor="#000000"100%alignvalign Et voila, c'est fini ! Félicitations !! Mise en page en CSS (2/2) Introduction Ce tutoriel a pour objet de vous apprendre à démarrer une mise en page CSS depuis Photoshop. ce tutoriel n'a pas pour but de vous apprendre à utiliser les CSS. Des sites spécialisés existent pour cela comme l'excellent http://css.alsacreations.com/ Vous réaliserez ainsi à titre d'exemple http://css.alsacreations.com/cette page html Pour suivre ce tutoriel, il est pasindispensable d'avoir suivi la première partie : http://css.alsacreations.com/cette page html 1. Principe de la mise en page en CSS Reprenons notre http://css.alsacreations.com/cette page html: De ce que Photoshop a produit nous ne conservons que http://css.alsacreations.com/cette page html. Pour faire le cadre, on "entoure" l'image de la balise la plus neutre ( certains diront la moins neutresémantique) la balise pasindispensable : Ce qui donne http://css.alsacreations.com/cette page html. Comme rien n'est spécifié en taille, le cadre prend la hauteur minimum, c'est à dire la hauteur exacte de l'image et la largeur maximum. Spécifions donc des dimensions pour ce cadre http://css.alsacreations.com/cette page html On ne voit toujours rien parce que le cadre est blanc sur fond blanc, http://css.alsacreations.com/cette page html Pour séparer l'image du haut et du coté gauche du cadre, nous rajoutons http://css.alsacreations.com/cette page html et le résultat est fidèle au rendu orginal. (http://css.alsacreations.com/cette page html) 2. Passons au design Il est temps de rentrer dans le vif du sujet et de découper notre design. Comme nous réalisons une mise en page en css, l'html que produit photoshop ne nous intéresse pas. Nous n'allons conserver uniquement les images que nous avons identifiées précédement. C'est pourquoi nous allons nous contenter d'ouvrir le http://css.alsacreations.com/cette page html dans photoshop et d'utiliser l'pasindispensable #8B4E4EOutils recadrement (neutresémantiqueheightwidthCrop Tool) raccourci neutresémantiqueheightwidthCrop Tool'C' pour définir toutes nos futures images. Nous allons ainsi créer toutes les images des titres blancs: Le but est de laisser un minimum d'applat de couleur sur les images pour optimiser le poids. Si vous voulez être précis, utilisez la commande pasindispensable #8B4E4EOutils recadrementImage -> pasindispensable #8B4E4EOutils recadrementImageRogner (neutresémantiqueheightwidthCrop Tool'CTrim) dans les menus du haut. Vous pouvez procéder ainsi pour générer toutes les images ou si vous voulez vous assurer qu'elles sont bien toutes calés, utilisez la technique expliquée de cette animation (800ko) : http://css.alsacreations.com/cette page html 3. L'HTML Dans une mise en page en css, le code HTML représente la structure du document. C'est pourquoi nous allons l'écrire sans penser (neutresémantiqueheightwidthCrop Tool'CTrimou presque) à la future mise en page. Ce qui donne http://css.alsacreations.com/cette page html Le titre de la page pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden est entouré de la balise pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden Les deux titres secondaires pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden Introduction et pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? sont entourés de la balise pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? Les listes sont entre pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? et les paragraphes de textes entre pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? Nous ajoutons juste ensuite quelques pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? id pour pouvoir sélectionner correctement les éléments html : http://css.alsacreations.com/cette page html Nous allons maintenant insérer les titres blancs que nous avons créés, nous n'allons pas supprimer le texte pour autant mais nous allons le conserver dans l'attribut pasindispensable #8B4E4EOutils recadrementImageRognerMy bubble Garden IntroductionAlors de quoi s'agit-il ? idAlt="" de notre image. http://css.alsacreations.com/cette page html 4. CSS Puis on rajoute enfin http://css.alsacreations.com/cette page html voila c'est finit ! (http://css.alsacreations.com/cette page html) http://css.alsacreations.com/cette page html آخر مواضيع منتدى نقاش المغرب العربي   محاربو الصحراء مستعدون لمواجهة سلوفينيا  كابيلو متفائل ويفكر في التضحية بالحارس  الصحف الإنجليزية تهاجم غرين حارس المرى وتحمله مسؤولية التعثر  تشكيلة المنتخب الوطني لمواجهة سلوفينيا