Tutoriaux - Créer une charte graphique

Fireworks

Fireworks est un complément de Dreamweaver. En effet, celui-ci permet de retoucher et d'optimiser les images directement lors de la création de vos pages. De plus, ce logiciel permet un meilleur gestion des images en PNG ainsi qu'une meilleure optimisation de la compression des images en JPG.

Etape 1 : création du document

  1. Ouvrez Fireworks 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.

Pour un récapitulatif des résolutions d'écran, cliquez ici

Etape 2 : Ajouter des repères

RepèresCes 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+Alt+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, utilisez la fonction d'importation du logiciel pour intégrer les images directement comme calque.
  • Préférez 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és, 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, la sélection de la couleur se fait uniquement dans la palette du nuancier.

Etape 4 : La découpe

Découpe

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.

Ne définissez pas les zones sans découpes (les zones où il y aura du texte), elles seront créer automatiquement avec une image transparente lors de la génération finale.

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 à 72 en fonction de la qualité souhaitée.
  • Vous pouvez personnaliser la couleur des différentes tranche.
  • 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 la qualité des différentes découpe en faisant régulièrement un apperçu de votre image.

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, utilisez la fonction "Exporter". Sélectionnez les options suivante : "Document HTML et Images", "Exporter le fichier HTML", "Exporter les découpes". Vérifier que l'option "Exporter les zones sans découpes" est cochée. Placez, éventuellement, les images dans des sous-dossiers. Dans le menu d'Options, assurez-vous que les extensions des fichiers soit en minuscule.

Maintenant, vous avez un fichier HTML que vous allez pouvoir importer directement dans Dreamweaver en tant que HTML Fireworks (le tableau généré sera directement intégré dans la page en cours).

Haut de page

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