Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte et les tailles d objet
Création de maquette web avec Photoshop Il faut travailler en 72dpi et en pixels, en RVB Choisir dans les préférences : unités et règles en pixels
Voir la grille 960 Fondée sur 960 pixels, avec des variantes de 12 et 16 colonnes, ou plus. 960.gs à télécharger
Intégration avec Fireworks et Photoshop
Analyser le fichier pour déterminer ce qui sera de l image, ce qui sera stylé en css. Photos, décorations en images Pour les ombres, typos «exotiques», coins arrondis, choisir entre images ou CSS3 Pour les besoins pédagogiques de ce tutoriel, nous choisirons images plutôt que CSS3
Ici 9 éléments à récupérer un morceau de l arrière plan du menu logo arrière plan du pavé l étoile 4 photos un morceau de l arrière plan du détail
Création des tranches
Le principe des tranches est de découper ce qui est visible à l écran. Il faut masquer les calques qui se superposent. Pour la partie supérieure : le logo et le pavé noir doivent être sur un fond transparent.
Il y a deux façons de créer les tranches. Première façon: on souhaite avoir comme tranche le contenu du calque entier, comme pour le logo et le pavé noir. Clic droit sur le fond jaune du logo > Insérer une tranche rectangulaire
Nommer la tranche ainsi créée Soit dans l inspecteur des propriétés de la tranche, soit dans le dossier «calque web» Attention! Les noms choisis pour les tranches seront les noms des images gif, jpg ou png utilisées dans vos pages web. Pas d espace, d accents...
Une tranche apparaît sur le bloc Tranche insérée avec le nom choisi. Ne pas se préoccuper de l extension qui apparaît à ce moment
Il y a deux façons de créer les tranches. Deuxième façon On souhaite avoir comme tranche un morceau du calque comme l arrière-plan du menu, qui se répètera en x Choisir l outil tranche Dessiner la tranche sur l objet Nommer la tranche comme précédemment
Modifications des tranches Une fois les tranches créées, il est possible de les déplacer avec le curseur, ou en changeant les valeurs x et y dans l inspecteur de propriétés et de changer la largeur et la hauteur aussi en plaçant le curseur sur les bords ou en utilisant l inspecteur des propriétés
Optimisation des images gif, jpg ou png? Pour le web, le mode de couleurs est un mode RougeVertBleu. le mode d'affichage des couleurs sur un moniteur.
Le format JPEG Format avec perte de données. Basé sur une compression ajustable de 0 (qualité minimum) à 100 (qualité maximum). Il permet d'afficher des images 16bits, c'est à dire en millions de couleurs. Le format est JPEG est particulièrement adapté aux images photo-numériques. Et de manière plus générale, aux images contenant un très grand nombre de couleurs (images contenant un dégradé radial ou linéaire par exemple). compression à 80% Une compression trop forte a tendance à pixelliser l'aspect de la photo, à rendre les contours des formes moins lisses et le texte peu lisible. compression à 13%
Le format GIF Format sans perte de données mais avec indexation des couleurs dans une palette. Le format GIF fonctionne sur 8 bits. Elle existe plusieurs types de palette, qui conserve de manière plus ou moins efficace les couleurs de l'image originale. Le format GIF est particulièrement adapté aux images «géométriques», ayant un aspect vectoriel. Toutes les images en aplats de couleurs, comme le texte, les illustrations, les boutons, les logos réagissent parfaitement à l'optimisation GIF. gif 16 couleurs 949 octets Le lissage est bien conservé. A qualité proche, le format JPEG génère un poids de fichier plus important pour une même image. jpg 83% 3.48 k
Les Palettes : GIF entrelacé : Le GIF «entrelacé» permet un affichage progressif de l'image parallèlement à son téléchargement dans la mémoire du navigateur. GIF transparent : De plus, le GIF permet de rendre transparente une couleur présente dans l'image. Néanmoins, il s'agit de La couleur transparente est toujours en opacité 0%! Cela oblige à ajouter un cache (couleur de détourage) autour de la forme détourée pour conserver le lissage du texte ou de la forme. GIF animé : Le GIF permet la réalisation d'images animées. Longtemps utilisé pour créer des bannières publicitaires, il semble être abandonné progressivement face à une utilisation croissante des animations FLASH
Les Palettes : Perception Palette qui conserve un maximum de couleurs auxquelles l'œil humain est sensible. Théoriquement la palette qui restituera le plus fidèlement les couleurs de l'image originale. Web : Palette qui indexe sur les 216 couleurs web sécurisées. Les couleurs web ont été définies à l'origine pour rendre l'affichage des couleurs compatible entre MAC et PC. Problème, certaines couleurs de l'image originale sont remplacées par des couleurs web. Il en résulte parfois de véritables pertes de couleurs. Sélective : Compromis entre Perception et Web... Adaptative : Palette qui favorise la conserve d'un nombre important de nuances de couleurs dans une partie du spectre RVB.
Le format PNG PNG 8 8 veut dire 8bits. Il gère jusqu à 256 couleurs, comme le GIF et utilise une compression sans perte de qualité. Il a la transparence d index et la transparence alpha. (Pas dans Photoshop, uniquement dans Fireworks) Utilisable comme le GIF pour des aplats de couleurs, des logos, il ne conviendra pas aux dégradés ni au photos PNG 8 dans Fireworks transparence alpha PNG 8 dans Photoshop pas de transparence alpha
Le format PNG Le PNG 24 ne gère pas la transparence, il n a que 3 canaux (RVB) Dans un PNG 32 il y a aussi le canal alpha, qui enregistre en mode 32 bits PNG 32 png dans Fireworks Photoshop ne le propose pas mais propose un PNG24 qui est en fait de PNG32, sans le dire. Firewoks propose les 3. PNG 32 est la plus haute qualité possible, mais aussi un poids en conséquence. Il gère la transparence alpha. png dans Photoshop
Transparence alpha et transparence index. La transparence d index ne permet de rendre transparente qu une seule couleur. La transparence alpha offre plusieurs niveaux de transparence qui donneront un effet beaucoup plus doux aux courbes et coins arrondis. En résumé pour la transparence alpha : Dans Photoshop : choisir PNG 24 (qui est en fait du PNG 32) Dans Fireworks : choisir PNG 8 s il n y a pas beaucoup de couleurs 832octets choisir PNG 32 s il a beaucoup de couleurs 21.68ko
Optimiser les images correspondant aux tranches Nous allons optimiser les tranches une par une, puis les exporter en une seule fois Afficher l aperçu 2 en1 (en haut et à gauche du document)
Sélectionner le calque web «logo» ou cliquer sur le logo dans la partie droite du document Afficher la fenêtre «optimisation» dans le menu «fenêtre»
Choisir dans le menu déroulant le format (ici png32, car il y a des dégradés et nous voulons une transparence alpha) Recommencer pour chaque tranche Transparence alpha avec beaucoup de couleurs : png32 Photos : jpg Peu de couleurs : gif
Firewoks mémorise les formats choisis pour chaque tranche Sélectionner toutes les tranches (dans la fenêtre des calques, par exemple) Puis aller dans le menu «fichier» «exporter»
Faisons d abord quelques règlages, car Fireworks va renommer nos tranches en y ajoutant des tirets etc Ne pa se préocupper du nom donné ici, par défaut le nom du fichier ouvert cliquer sur «options»
Aller dans l onglet «propre au document» Ici les ajouts faits par FW
Choisir «Aucune» ou supprimer les contenus de tout sauf «nom.doc» nom final de la tranche Cliquer sur «ok»
Nous revenons à cette fenêtre Défiler pour trouver
Fenêtre «exporter» avec images uniquement Ne pas se préocuper de ce nom de fichier qui n apparaîtra nulle part sur votre disque dur décocher «inclure les zones sans tranches» Choisir l endroit où vous souhaitez récupérer vos gif, jpg et png. Cliquer sur «exporter»
Aller dans le dossier de destination où vous avez enregistré vos images
Pour enregistrer une seule tranche, il est plus simple de faire un clic droit sur la tranche dans la partie gauche du document, après l avoir optimisée puis exporter la tranche sélectionnée
Pour garder le fichier avec les calques Web, enregistrer «sous» l extension native de Fireworks est «png» Pour pouvoir ouvrir le fichier avec tous les calques dans photoshop, «enregistrer sous» et choisissez dans la liste déroulante : photoshop
Création et optimisation des tranches depuis Photoshop Ouvrons notre fichier enregistré depuis Fireworks, en psd. Nous retrouvons tous les calques
Nous avons récupéré tous les calques dans un dossier Calque Pour faire des tranches dans Photoshop il faut aller dans les outils, sous l outil «recadrage» Il y a l outil «tranche» et l outil «sélection de tranche»
Comme dans Fireworks il y a deux façons de faire les tranches. Soit on veut récupérer le contenu d un calque. Il faut alors sélectionner le calque et aller dans le menu «calque» Choisir «Nouvelle tranche d après un calque» Photoshop crée automatiquement des tranches autour de celle que nous venons de créer. Elles sont numérotées. En gris les tranches faites par Photoshop, en bleu, celle que nous avons faite
Pour renommer la tranche qui vient d être créée : Double cliquer sur celle-ci. Si vous avez cliqué ailleurs entre temps, il suffit de choisir l outil «sélection de tranche» Nommer la tranche ici La tranche faite d après le calque ne peut être modifiée. Les paramètres sont grisés
Pour créer une tranche qui ne comprend qu un morceau de calque Choisir l outil «tranche» et dessiner sur l objet. Double cliquer sur la tranche pour la nommer. Nommer la tranche ici La tranche créée avec l outil tranche peut être modifiée dans cette fenêtre, ou en cliquant sur les bords de la tranche pour changer les dimensions, ou en utilisant les flèches du clavier pour la déplacer
Optimiser les tranches dans Photoshop Sans rien sélectionner, aller dans le menu «fichier» «exporter pour le Web et les périphériques», choisir 2 vignettes.
Optimiser les tranches dans Photoshop Choisir dans le menu déroulant le format choisi ici PNG24 pour la transparence. Rappel : il s agit en fait d un PNG32 poids de l image optimisée Recommencer pour chaque tranche
Sélectionner toutes les tranches en cliquant dessus avec l outil tranche et la touche «shift» poids de toues les tranches sélectionnées Mixte dit qu il y a plusieurs formats d images cliquer sur «enregistrer»
Choisir uniqument les images à exporter Choisir dans le menu déroulant Images Choisir dans le menu déroulant Paramètres Autre Cette dernière opération va nous permettre de choisir (comme dans FW) le nom de nos tranches sans ajouts
Changement du nom des tranches Choisir dans le menu déroulant Enregistrement des fichiers ne garder que nom de la tranche et ext nom final des tranches Cette opération va nous permettre de choisir (comme dans FW) le nom de nos tranches sans ajouts. Cliquer sur «ok»
Choisir le dossier de destination Ne pas se préocuper de ce nom de fichier Il n apparaîtra pas dans votre disque dur. Enregistrer Vous récupérer les gif, jpg et png dans votre dossier de destination Choisir dans le menu déroulant Tranches sélectionnées
Erreurs courantes Vous avez toutes les tranches dans votre dossier de destination vous n aviez pas sélectionné les tranches que vous vouliez récupérer ou vous avez oublié de cocher «tranches sélectionnées». Vos images s appellent dans Photoshop Les paramètres de sortie n ont pas été mémorisés. Retourner dans «paramètres» autres» «enregistrement des fichiers» avant d enregistrer. Vos images s appellent dans Fireworks Les paramètres de sortie n ont pas été mémorisés. Retourner dans «document HTML et Images», «options» «propre au document», changer les paramètres