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 (
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é : 
respectivement cette page en css et cette page en tableaux.
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.
pour supprimer les images monochromes, ils nous suffit de :
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 html1. 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).
|
| 2. Passons au designIl 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 | . 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'optimisationOccupons nous pour commencer de cette page html :
| largeurhauteur), bien sûr à ce stade les sauts de ligne ne sont pas conservés. A ce stade il nous manque les titres blanc, nous allons les fabriquer à la prochaine étape 7.Titres image blancOuvrez 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 | largeurhauteurImage -> largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight | largeurhauteurImageDupliquez... Nous utilisons ensuite l'indispensablewidthheight | largeurhauteurImageDupliquez...Crop Tool) raccourci largeurhauteurimagescellulenous avons rajouté un bordure indispensablewidthheight | 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 | largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight | 8. Optimisation du poidNotre page contient encore beaucoup d'image, il est encore possible d'alléger tout ca !Ouvrez cette page html : Gràce à l'indispensablewidthheight | largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight | largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight | 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 | largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight | cette page html et un indispensablewidthheight | largeurhauteurImageDupliquez...Crop Tool'CPour le titre indispensablewidthheight | 9. Finitionscette page html avec indispensablewidthheight | Ainsi cette page html cette page html cette page html encore avec la balise indispensablewidthheight | Mise en page en CSS (2/2)IntroductionCe 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 CSSReprenons 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 designIl 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'HTMLDans 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 pasindispensableIntroduction et pasindispensableIntroductionAlors de quoi s'agit-il ? sont entourés de la balise pasindispensableIntroductionAlors de quoi s'agit-il ? Les listes sont entre pasindispensableIntroductionAlors de quoi s'agit-il ?
#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 ?
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 ?
4. CSSPuis 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 آخر مواضيع منتدى نقاش المغرب العربي محاربو الصحراء مستعدون لمواجهة سلوفينيا كابيلو متفائل ويفكر في التضحية بالحارس الصحف الإنجليزية تهاجم غرين حارس المرى وتحمله مسؤولية التعثر تشكيلة المنتخب الوطني لمواجهة سلوفينيا |
Aucun commentaire:
Enregistrer un commentaire