11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n étant pas encore fonctionnels. Lorsque nous commençons à optimiser et à exporter les images, la maquette devrait être complète et tous les aspects devraient être dimensionnés de manière appropriée. Ce qui signifie que si nous prévoyons d utiliser une image de page web de 300px par 300px, elle devrait faire cette taille dans le document de conception (dans Photoshop ou un autre programme graphique). Par exemple, la Figure 11-1 montre une image de titre pour le site d une école construit avec Wordpress. Le modèle Wordpress nécessite une image de titre de 920 pixels de largeur par 175 pixels de hauteur. Nous avons utilisé Photoshop pour créer l image, nous assurons de placer les dimensions correctes dès le début (comme le montre la Figure 11-2). Figure 11-1:: Image de titre de site web sous Photoshop Figure 11-2: Image de titre de site web sous Photoshp > Redimensionner (Resize). Tirer les bords de la boîte de transformation jusqu à être satisfait de la nouvelle taille. Pour conserver les proportions de l image originale, maintenez la touche Shift enfoncée tout en tirant. Pressez Entrée/Retour pour terminer la transformation. Pour redimensionner une image entière sans Photoshop, rendez-vous sur http://www.resize.it et suivez les invites de commande. Pièces du puzzle Pour traduire vos conceptions parfaitement dimensionnées en des pages web totalement fonctionnelles, nous devons prendre des décisions supplémentaires en ce qui concerne la manière dont elles sont optimisées et exportées. Mais si vous aviez, par mégarde, créé une image à la mauvaise taille? Toutes les options suivantes vous permettront de redimensionner l image avant de l exporter : Pour redimensionner l image entière sous Photoshop, choisissez Image > Taille d image (Image Size) et suivrez les fenêtres d invite. Pour redimensionner une partie d une image sous Photoshop, naviguer vers la couche appropriée, puis pressez Control-t (Command-t sur un Mac) ou choisissez Édition (Edit) > Transformation (Transform) Figure 11-3: Le site web du Hershey Park 84 2012 Excel With Business
Les pages web sont comme des puzzles non terminés : lorsque vous visualisez une page dans un navigateur, il n est habituellement que trop évident où se trouvent les bords des pièces individuelles. Pour voir ce que nous voulons dire, comparez les Figures 11-1 et 11-2. Examinez le site du Hershey Park (Figure 11-3). Pouvez-vous facilement identifier les images individuelles utilisées pour créer toute la page? Si nous regardons de nouveau le site avec les images désactivées (Figure 11-4), nous avons quelques indices. Même si vous pouviez avoir déjà deviné que les photographies étaient des images et que la majorité du texte n en était pas, aviez-vous identifié le pied de page comme basé image? Et la boîte de recherche dans le coin en haut à droite? (Notez que les deux ont disparus dans la Figure 11-4.) Souvent, certains éléments de page tels que les textures, les arrièreplans et les modèles doivent également être sauvés en tant que petites images, puis incorporées dans la page via le HTML et/ou CSS. Avec ceci à l esprit, notre première étape pour déterminer comment produire un design de page consiste à identifier les pièces individuelles devant être exportées. 11.1 Slices or 11.1 Tranches (Slices) ou objets-images (Sprites)? Si nous créons tous les éléments d une page dans un document de conception unique comme le font de nombreux concepteurs nous possédons quelques options en termes de livraison des images finales à l utilisateur. La méthode avérée et testée consiste à sauver chaque élément de la page en tant que sa propre tranche (slice) du puzzle. Chaque tranche est ensuite sauvée dans un format d image adapté à la toile et référencée depuis code. Figure 11-4: Le site du Hershey Park avec les images désactivées Figure 11-5: Un bloc d objetsimages utilisés sur Facebook Mais de nombreux concepteurs modernes suivent une approche légèrement différente en stockant des groupes de tranches liées à l intérieur d une image unique. Cette image plus grosse est référencée depuis le code, avec des morceaux d informations supplémentaires : coordonnées de la partie que nous voulons montrer à n importe quel moment. 85 2012 Excel With Business
Vous avez probablement rencontré cela sans le réaliser, spécialement si vous êtes un utilisateur de Facebook. Facebook possède de nombreuses icônes dans la barre de navigation et partout ailleurs sur le site. Au lieu de toutes les sauver en tant que petites images individuelles, les développeurs du site les ont sauvées en block, appelés objets-images (sprites). La Figure 11-5 monte un exemple d un bloc d objetsimages, tous contenus à l intérieur d un fichier image unique. Dès qu un de ces objets-images est référencé dans une page, les coordonnées de cette pièce particulière de l image sont spécifiées dans la feuille de style, en utilisant la propriété d arrière-plan. Les dimensions de l objet-image sont déterminées par les propriétés de largeur et de hauteur, le navigateur sait donc exactement combien afficher de l image totale pour chaque cas. Voici un exemple de ce à quoi le code peut ressembler dans une feuille de style: #likebutton { } width: 18px; height: 17px; background:url( icons- sprites.png ) 238 102; Dans ce cas, les propriétés de largeur et de hauteur déterminent la taille de l ouverture de la fenêtre, pour ainsi dire, et les dimensions à la fin de la propriété d arrière-plan (background) identifient l emplacement des points de départ sur les axes x et y. La Figure 11-6 montre quelle partie de l image-objet de Facebook serait affichée avec ce code. Si la pensée d avoir à déterminer toutes les dimensions et toutes les coordonnées pour chaque image-objet individuel est décourageante, détendez-vous. Il existe une application qui fait ça pour vous! Spritebox (http://www.spritebox.net) est un outil gratuit en ligne qui génère rapidement et facilement le code nécessaire. Conceptions en tranches Une alternative à l utilisation d objets-images consiste à sauver chaque pièce individuelle du puzzle en tant que sa propre image. Avant que Photoshop ajoute l outil Tranches (Slice), les concepteurs devaient rogner les parties individuelles d un design puis sauver ces pièces en tant que fichiers uniques. Le processus était non seulement fastidieux et chronophage, mais il rendait difficile la maintenance ultérieure des images. Heureusement, l outil Tranche accélère le processus entier tout en laissant intact le design général pour une maintenance facile. En fait, Photoshop possède plusieurs outils intégrés pour rendre les processus de découpage et de quadrillage plutôt indolores. Au final, l outil que nous utilisons dépend de la manière dont nous construisons notre conception. Si chaque image à venir individuelle se trouve sur sa propre couche, nous choisissons Couche (Layer) > Nouvelle tranche d après un calque (New Layer Based Slice) et Photoshop crée une tranche basée sur les contenus de la couche actuellement choisie. Si notre design est plutôt basé sur une grille, nous pouvons dessiner quelques repères, choisir l outil Tranche et cliquer sur «Tranches d après les repères» dans la barre d option, comme montré dans la Figure 11-7. Figure 11-6: Le cercle rouge identifie la portion de l image affichée avec l exemple de code précédent Si aucune de ces méthodes automatisées ne convient pour une conception, nous pouvons dessiner nos propres tranches. Choisissez simplement l outil Tranche, puis cliquez et glissez autour le contour de chaque image que vous souhaitez trancher. Dans la Figure 11-8, nous dessinons des tranches autour de 86 2012 Excel With Business
chacun des éléments que nous souhaitons sauver en tant qu images individuelles. (L unique exception est l image d arrière-plan, qui doit être sauvée séparément puisque Photoshop n autorise pas le chevauchement des tranches). 11.2 Choisir le meilleur format de fichier pour le travail Une fois que la conception est tranchée, il est temps de déterminer le meilleur format de fichier pour chaque image. Pour ce faire, examinons les trois formats de fichier image adaptés au web les plus communs. Figure 11-7: Tranches créées depuis des repères GIF GIF, qui signifie Graphic Interchange Format, pour Format d échange d image (et qui est principalement Figure 11-8: Tranches créées avec l outil Tranche 87 2012 Excel With Business
Caractéristiques GIF JPG PNG Mode de couleur 8-bit (pas plus de 256 couleurs) 24-bit (des millions de couleurs) Peut être 8-bit, 24-bit ou 32-bit Méthode de compression Sans perte (lossless) Avec perte, lossy (plus le niveau de compression est grand, plus la qualité de l image est basse) Sans perte Support d animation Oui Non Non Support de transparence Oui (couleur unique seulement) Non Oui (Options multiples disponibles) Support d entrelacement Oui (unidimensionnel) Oui (unidimensionnel) Oui (bidimensionnel) Convient le mieux pour : Des graphismes simples avec des couleurs limitées, où la version GIF est d une taille de fichier plus petite que la version PNG Images photographiques avec des millions de couleurs, où la version JPG d une taille de fichier plus petite que la version PNG N importe quelle image web pour laquelle la version GIF ou JPG n est pas plus petite en taille de fichier ; toute image ayant besoin d options de transparence multiples Table 11-1: Comparaison des formats web de fichiers image prononcé avec un son j), a été introduit en 1987 en tant que nouveau format de fichier image conçu pour les graphismes web. Ses caractéristiques le rendent compatibles pour la sauvegarde d images basées texte, dessiner des lignes, des bandes dessinées et dessins animés ainsi que les graphismes en aplat. Le Tableau 11-1 expose les caractéristiques du GIF et les compare à celles des deux autres formats de fichiers évoqués ici. JPG Le format de fichier JPEG a été créé par le Joint Photographic Experts Group (d où l acronyme) qui avait pour tâche de développer un jeu de normes pour un format de fichier web photographique. La première sortie publique de la norme JPEG date de 1992. (Note : parce que de nombreux ordinateurs ne pouvaient gérer que des extensions de fichier à trois lettres, le format JPEG a reçu le suffixe raccourci JPG.) Les images de nature photographique, telles que celles possédant d importantes variations de couleur, conviennent bien au format de fichier JPG. Voir le Tableau 11-1 pour des détails additionnels à propos de ses caractéristiques. PNG Portable Network Graphics, ou PNG, signifiant Graphique réseau portable, est le plus récent des trois formats discutés ici. Il a été développé, à l origine, pour remplacer le format GIF extrêmement désuet, mais a pris plus longtemps que prévu à devenir largement adopté. Il reçoit désormais le support total de tous les navigateurs modernes et il n y a aucune raison de ne pas tirer parti de ce format de fichier versatile. Le Tableau 11-1 compare ses caractéristiques avec celles du JPG et du GIF. 11.3 Exporter des fichiers prêts pour la toile Peu importe le type de fichier de conception créé une simple planche de tendances, une tuile de style ou une maquette complète ou le fait que nous ayons, au final, sauvé les images individuellement ou en groupes, l image (ou les images) doit être exportée lorsque nous sommes prêt à commencer la construction de la fonctionnalité de la page. 88 2012 Excel With Business
La fonction Enregistrer pour le web (Save for Web) de Photoshop permet d en faire une formalité. Lorsque vous êtes prêt à exporter vos images depuis Photoshop, choisissez Fichier (File) > Enregistrer pour le web et les périphériques (Save for Web & Devices). Ceci ouvre une fenêtre similaire à celle montrée dans la Figure 11-9. Dans cet exemple, nous avons choisi la première tranche sous le logo (entourée de jaune sur la capture d écran). Ensuite, nous avons choisi l option JPEG Élevé (High) depuis Figure 11-9 : Fonction Enregistrer pour le web de Photoshop Figure 11-10: La fonction Enregistrer pour le web de Photoshop, utilisant la vue à 4 images 89 2012 Excel With Business
le menu Prédéfini (Preset) situé dans le coin en haut à droite, pour voir à quoi ressemblera le résultat. En utilisant cette option préétablie, la taille de l image finale dépassera juste 10k (comme montré dans le coin en bas à gauche de la fenêtre). En utilisant PNG, la taille du fichier grimpe à plus de 38k! Parce que l objectif consiste à obtenir l image la plus belle possible pour une taille de fichier la plus petite possible, nous restons avec la version JPEG de cette image. Pour exporter des tranches multiples, nous choisissons simplement chaque tranche dans la fenêtre Enregistrer pour le web et les périphériques, nous personnalisons les options en utilisant les menus sur la droite. Lorsque nous avons terminé de personnaliser les tranches, nous pressons le bouton Enregistrer du bas. (Note : si vous choisissez d exporter toutes les tranches de l image, il n est pas besoin de choisir aucune d entre elle auparavant en cliquant sur le bouton de sauvegarde. Mais si vous ne voulez exporter que quelques-unes des tranches, assurez-vous de choisir ces tranches avec Shift-Sélectionner avant de cliquer sur Enregistrer. Choisissez ensuite «Tranches sélectionnées» (Selected Slices) depuis le menu Tranche dans la fenêtre de sauvegarde.) Vous pouvez également tirer parti des options 2-Up ou 4-Up pour obtenir une comparaison côte-àcôte de la manière dont les réglages d optimisation affectent une image. La Figure 11-10 montre la vue 4-Up des parties de trois tranches d une maquette. Ici, nous avons Shift-sélectionné trois tranches, puis choisi différents critères préétablis dans les menus de droite. La section en haut à gauche vous montre les résultats de l utilisation du réglage PNG-24, alors que celle en bas à gauche utilise PNG-8. L image en bas à droite utilise un JPEG de basse qualité et l image en haut à droite affiche les options que nous avons choisies la qualité JPEG à 60%. Cette option est optimum pour ces images parce qu elle nous offre la plus petite taille de fichier avec la meilleure qualité. PROCHAINE L UNITÉ 12 Publication (FTP & Tests) 90 2012 Excel With Business