Méthodes recommandées pour la création de graphismes web

Illustrator propose une grande variété d’outils de création de mise en page Web, ou d’optimisation des images Web. Par exemple, utilisez des couleurs web sécurisées, ajustez la qualité de l’image en fonction de la taille de fichier souhaitée, puis choisissez le format de fichier de votre image. Les images web peuvent bénéficier des avantages des tranches et des cartes-images, et vous pouvez utiliser de nombreuses options d’optimisation de façon à vous assurer que vos fichiers s’afficheront correctement sur Internet.

Lors de la conception d’images pour le web, vous devez prendre en considération d’autres éléments que lors de la conception pour l’impression. 

Si vous souhaitez prendre les meilleures décisions concernant vos images web, tenez compte des trois instructions suivantes :

Utilisez des couleurs Web sécurisées.

La couleur est souvent un aspect essentiel de l’illustration. Cependant, les couleurs de votre illustration ne seront pas nécessairement identiques dans un navigateur web sur un autre système. Vous pouvez éviter les soucis de tramage (simulation des couleurs non disponibles) ou autres problèmes de couleur en prenant deux mesures préventives lors de la création d’images web. Tout d’abord, travaillez toujours en mode RVB. Ensuite, utilisez des couleurs garanties sur le web.

Trouvez le juste équilibre entre la qualité de l’image et la taille du fichier.

Lorsque vous distribuez des images sur le web, il est essentiel de créer des fichiers image de petite taille afin de faciliter leur transmission et leur stockage sur les serveurs web, et d’accélérer leur téléchargement. Vous pouvez voir la taille et la durée de téléchargement estimée d’une image web dans la boîte de dialogue Enregistrer pour le web et les appareils.

Choisissez le format le mieux adapté à votre image.

Les différents types d’image doivent être enregistrés dans différents formats de fichier pour un affichage optimal et afin de créer une taille de fichier adaptée au web. Pour plus de détails sur les formats spécifiques, reportez-vous à la section Options d’optimisation des images web.

A propos du mode Aperçu en pixels

La propriété d’alignement en pixels, qui fait son apparition dans Illustrator, confère aux concepteurs de sites web une précision au pixel près. Dès lors que cette propriété est activée pour un objet, tous les segments horizontaux et verticaux qui le composent sont alignés sur la grille en pixels. On observe ainsi des contours à l’aspect précis. Pour tout type de transformation, dans la mesure où cette propriété est définie pour l’objet, celui-ci est réaligné sur la grille en pixels en fonction de ses nouvelles coordonnées. Vous pouvez activer cette propriété en sélectionnant l’option Aligner sur la grille en pixels dans le panneau Transformation. Illustrator propose également l’option Aligner les nouveaux objets sur la grille en pixels, spécifique au document et activée par défaut pour les documents web. Dès l’activation de cette option, la propriété d’alignement en pixels est définie par défaut pour tout nouvel objet que vous dessinez.

Pour plus d’informations, reportez-vous à la section Tracés alignés sur la grille en pixels dans des flux de production web.

Lorsque vous enregistrez une illustration dans un format bitmap, tel que JPEG, GIF ou PNG, Illustrator la pixellise à 72 pixels par pouce. Vous pouvez prévisualiser la manière dont les objets apparaîtront une fois pixellisés en choisissant la commande Affichage > Aperçu en pixels. Cela apparaît particulièrement utile pour contrôler le positionnement précis, la taille et le lissage des objets dans un graphisme pixellisé .

Pour comprendre la manière dont Illustrator divise des objets en pixels, ouvrez un fichier contenant des objets vectoriels, choisissez la commande Affichage > Aperçu en pixels, puis agrandissez l’illustration pour voir ses différents pixels. Le positionnement des pixels est déterminé par la grille en pixels qui divise le plan de travail en incréments de 1 point (1/72 pouce). La grille en pixels est visible après un agrandissement de l’affichage à 600 %. Si vous déplacez, ajoutez ou transformez un objet, il s’ancre sur la grille en pixels. Par conséquent, le lissage sur les contours « ancrés » de l’objet (généralement les bords gauche et supérieur) disparaît. Désélectionnez alors la commande Affichage > Magnétisme du pixel, puis déplacez l’objet. Cette fois, vous pourrez positionner l’objet entre les lignes de la grille. Notez l’impact de cette opération sur le lissage de l’objet. Comme vous pouvez le constater, de très légers  ajustements peuvent affecter la manière dont l’objet est pixellisé.

Conseils pour créer des images Illustrator pour les appareils mobiles

Pour optimiser un contenu graphique pour les appareils mobiles, enregistrez l’illustration créée dans Illustrator dans un format de type SVG comme le format SVG-t, spécialement conçu pour les appareils mobiles.

Suivez les conseils ci-dessous pour vous assurer que les images créées dans Illustrator s’affichent correctement sur les appareils mobiles :

• Utilisez le standard SVG pour créer le contenu. L’utilisation du format SVG pour la publication de graphismes vectoriels sur les appareils mobiles permet d’avoir un fichier de taille plus petite, une meilleure autonomie de l’affichage, un meilleur contrôle des couleurs, une possibilité de zoom et du texte modifiable (dans le code source). Le standard SVG étant basé sur XML, vous pouvez incorporer une interactivité dans les images, comme le dégradé en trompe-l’œil, les info-bulles, les effets spéciaux, l’audio et les animations.

• Travaillez dès le début dans les dimensions finales de votre ou vos appareils mobiles cibles. Le standard SVG étant évolutif, le fait de travailler sur la taille appropriée permet de s’assurer que les graphismes finaux sont optimisés en termes de qualité et de taille pour le ou les appareils cibles.

• Définissez le mode colorimétrique d’Illustrator sur RVB. Le format SVG peut être affiché sur les appareils à balayage de trame RVB, comme les écrans.

• Pour réduire la taille du fichier, essayez de réduire le nombre d’objets (et de groupes) ou rendez-les moins complexes (moins de points). Réduire le nombre de points permet de réduire de manière significative le nombre d’informations textuelles nécessaires pour décrire l’illustration dans le fichier SVG. Pour réduire le nombre de points, sélectionnez Objet > Tracé > Simplifier et essayez différentes combinaisons pour trouver le meilleur compromis entre la qualité et le nombre de points.

• Si possible, utilisez des symboles. Les symboles définissent les vecteurs décrivant un objet une seule fois, plutôt que plusieurs fois. Ceci est très utile si l’illustration contient des objets comme des arrière-plans de bouton qui sont réutilisés.

• Pour des graphismes animés, limitez le nombre d’objets utilisés et essayez, si possible, de réutiliser les objets pour réduire la taille du fichier. Appliquez les animations aux groupes d’objets plutôt qu’aux objets individuels pour éviter toute répétition de code.

• Utilisez le standard SVGZ, la version « gzippée » du standard SVG. La compression peut réellement réduire la taille du fichier, suivant son contenu. En règle générale, le texte peut être compressé, mais la compression des contenus codés sous forme binaire, comme les pixels intégrés (fichiers JPEG, PNG ou GIF) n’est pas réellement efficace. Les fichiers SVGZ peuvent être décompressés par toutes les applications qui peuvent ouvrir les fichiers compressés avec gzip. Pour utiliser SGVZ avec succès, vérifiez que votre appareil mobile cible peut décompresser les fichiers gzip.