Tutoriaux - Créer une charte graphique

Photoshop et ImageReady

Je vais parler de Photoshop et ImageReady pour une seule raison, Photophop permet de créer le visuel de la charte graphique, la découpe, ImageReady permet de définir l'optimisation de chacune des découpes.
SchémaPhotoshop pourrait également le faire tout seul, mais comme cette fonctionnalité d'optimisation et d'export est un peut mieux implémentée dans imageReady et surtout, les deux logiciels sont complémentaires et, installés ensembles, alors pourquoi ne pas les utiliser tous les deux et surtout, chacun dans leurs spécialités.

Pensez à faire des croquis du ou des visuels de votre charte afin de vous guider lors de sa réalisation.

Etape 1 : création du document

  1. Ouvrez Photoshop et créez un nouveau document.
  2. Définissez une hauteur et une largeur.
  3. La résolution doit être de 72 pixels/pouces.
  4. Préférez un arrière plan transparent à une couleur de fond.
  5. Si vous pouvez sélectionner le mode de couleur, choisissez le RVB.

Voici un récapitulatif des références de tailles pouvant être utilisées :

  • 760x420 pour un affichage en 800x600
  • 795x470 pour un affichage en 832x624
  • 954x600 pour un affichage en 1024x768

La largeur de la zone de travail doit être inférieur à la résolution écran pour la simple raison qu'il faut prévoir l'espace prévu par l'ascenseur dans le cas ou la page est plus haute que l'écran.
La hauteur est indicative si vous souhaitez afficher le maximum de votre charte sur un écran sans ascenseur.

L'idéal pour travaillé sur une bonne référence "de votre écran", c'est de faire une capture d'écran avec votre navigateur lancé.

Attention !!! Pour réaliser une capture d'écran, appuyez sur la touche "Impr. écran" de votre clavier, dans Photoshop faite "Nouveau" et "coller".

GabaritDans cette exemple, la résolution écran est de 1024x768 pixels.

La zone d'affichage (en rouge) pour un navigateur agrandi) et de 1018x564 pixels (sans compter l'ascenseur verticale).

L'ascenseur est large de 18 pixels.

Faite le calcul, la largeur réelle pour correctement afficher votre page doit être inférieur à 1000 pixels.
Concernant la hauteur, cela reste assez subjectif, car la valeur réelle dont on dispose vraiement est liée à : la barre de menu de Windows (qui est du double de la hauteur normal) ainsi que des différentes barres outils du navigateurs, qui sont assez hautes.
Pensez également que le mode d'affichage plein écran est peut être disponible (attention, Firefox conserve une barre de menu qu'Internet Explorer peut masquer).

Etape 2 : Ajouter des repères

Repères Ces repères vont servir à délimiter la largeur de chaque colonnes et également la hauteur du bandeau du haut et du bas.
Commencer par affichez les règles [Ctrl+R], placer ensuite votre curseur sur la règle du haut (pour les repères horizontaux) ou sur la règle de gauche (pour les repères verticaux), cliquez sur le bouton droit et tout en le maintenant enfoncé, déplacez ensuite votre souris vers la droite ou vers le bas. Relacher la pression quand vous pensez avoir atteint la bonne position. Vous avez la possibilité de corriger la position des repères en cliquant dessus et en les déplaçants. Pensez à Zoomer si vous souhaitez afiner la position au pixel près.

Etape 3 : La charte graphique

Maintenant vous pouvez créer votre charte en vous aidant des repères pour réaliser vos différents éléments graphiques.

Quelques conseils pour la réalisation de votre charte graphique :

  • Lors de l'insertion d'éléments comme des images, préférer l'importation d'images de grande taille (utilisez, si c'est possible, la taille originale de l'image) que vous redimensionnerez dans votre espace de travail, plutôt que des images déjà à la bonne taille. Cela permet de conserver, à l'image, toute sa qualité après réduction et éviter ainsi certaine dégradation de la pixelisation.
  • Pour les images où vous souhaitez effacer les contours, n'utilisez pas l'outils gomme.
    Préférez une sélection de toute la zone à effacer et utiliser les masques de fusion.
    L'intérêt de cette méthode, l'image de base n'étant pas altérée, il est toujours possible de modifier le masque pour augmenter ou diminuer la zone masquée à l'aide de la gomme ou du pinceau.
  • Créez des groupes pour classer les différents éléments graphiques se rapportant à chaque zone de votre charte.
  • Ne fusionnez pas les différents calque sauf si c'est vraiment nécessaire, et dans ce cas faites des copies des ces derniers avant la fusion pour pouvoir modifier le résultat obtenu si il ne vous convient pas.
  • Sauvegarder régulièrement.
  • Si vous utilisez des dégradé, faite attention au résultat après optimisation, en général pour les images GIF ou JPG de qualité moyenne, le dégradé "en prend un coup", dans ce cas la, testez en une version en n'utilisant que des couleurs web. Pour cela, lors de la sélection de la couleur dans la palette correspondante, un icône vous indique qu'il existe une couleur web proche de celle désigné, cliquez dessus pour la sélectionner. Valider.

Etape 4 : La découpe

DécoupeLa découpe peut se réalisez soit dans photoshop soit dans ImageReady.
L'avantage d'ImageReady, c'est qu'il vous permettra de paramétrer l'optimisation de vos images en même temps et que vous pourrez également créer les effets de survol de vos boutons.

Pour déterminer chaque découpes, il faut faire un peut de gymnastique.
Définissez en premier temps les grandes zones (celle ou il y aura du texte, des menus...), ensuite sélectionnez les éléments plus petits qui font partie des détails visuel de la charte (les zones d'ombres, les coins arrondis...). Pour finir ajouter les zones manquantes et éventuellement, ajuster les zones existantes. Vérifiez, en zoomant s'il le faut, que des zones de découpe supplémentaires ne se sont pas insérées lors de votre découpage, cela aurait pour effet d'augmenter encore plus le nombre d'image. Ces zones supplémentaires et involontaires sont en générale des zones intermédiaires en deux découpes qui ne se joigne pas correctement.

Si vous avez des menus complexes (zone d'arrière plan s'adaptant au nombre de menu par exemple), ne créer pas de découpe pour ces derniers. Masquez-les et définisser une zone de découpe plus grande (par exemple sur la totalité de la colonne si c'est un menu latéral), ce qui vous permettra d'insérer ultérieurement les menus.
Pour obtenir une découpe des différents éléments d'un menu, faite une copie de votre image d'origine est ajouter les zones de découpe manquantes avant de générer un nouveau fichier.

  • Pour les images au format JPG, choisissez une qualité de 60.
  • Pour les zones où il n'y a que du texte et aucune image d'arrière plan, sélectionnez l'option de la tranche "Pas d'image", une couleur de fond pourra alors être définie (pas obligatoire).
  • Vous pouvez donner un nom à chaque tranche (cela aura pour effet de donnez ce nom à l'image générée).
  • Si vous utilisez une image de fond, masquez le calque qui la contient, car il faudra la travailler à part.
  • Faite de même avec le logo si vous souhaitez disposer d'une image que vous pourrez changer ultérieurement.
  • Pensez à vérifier avec l'onglet Optimiser de la qualité des différentes images.

Une fois tous les éléments paramétrés, sauvegarder votre image pour conserver vos paramètres d'optimisation.

Maintenant, il va falloir générer les découpes et le fichier HTML. Pour cela, dans un premier temps, vérifiez les paramètres de sortie HTML.
Modifier les paramètres de base pour que :

  1. La casse des balises et des attributs soit en minuscule.
  2. Les atrtributs soient toujours placés entre guillement.
  3. L'attribut ALT soit ajouté.
  4. La fermeture des balises soit activée, uniquement si vous souhaitez travailler dans un document XML ou XHTML.

Dans les paramètres de Tranches, vous pourrez choisir si vous souhaitez générer un tableau ou alors des DIV utilisant les CSS pour les informations de positionnement.

Générez le fichier, sélectionnez "Enregistrer une copie optimisé sous", sélectionnez le répertoire de destination, vérifiez que l'option "HTML et Images" soit sélectionnée ainsi que l'option "toutes les tranches" et cliquez sur enregistrer.

Vous disposez maintenant d'un fichier (X)HTML et un dossier "Images" contenant les différentes découpes.

Haut de page

Vérifier la validité de cette page xhtml1-transitional Vérifier la validité de la feuille de styles CCS 2