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 et travailler avec Device Central de façon à vous assurer que vos fichiers s’afficheront correctement sur Internet.

A propos des images web

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 le tramage (simulation des couleurs non disponibles) et d’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 web sécurisées.

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 périphériques.

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.

Remarque :

De nombreux modèles Illustrator sont spécifiquement conçus pour le web, notamment des pages web et des bannières. Choisissez la commande Fichier > Nouveau d’après un modèle pour ouvrir un modèle.

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 graphiquepixellisé.

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é.

Aperçu en pixels désactivé (en haut) et activé (en bas)
Aperçu en pixels désactivé (en haut) et activé (en bas)

Remarque :

La grille en pixels respecte l’origine de la règle (0,0). Si vous déplacez l’origine de la règle, cela modifie la manière dont Illustrator pixellise l’illustration.

Utilisation d’Adobe Device Central avec Illustrator

Device Central permet aux utilisateurs d’Illustrator de prévisualiser l’affichage et le fonctionnement des fichiers Illustrator sur différents périphériques mobiles.

Par exemple, un concepteur graphique peut utiliser Illustrator pour dessiner un papier peint pour téléphones portables. Après avoir créé le fichier, le concepteur peut très facilement le tester sur différents téléphones. Il peut ensuite apporter des modifications, comme le modifier afin qu’il s’affiche correctement sur de nombreux téléphones, ou créer deux fichiers séparés adaptés aux tailles d’écrans des téléphones les plus populaires.

Accès à Illustrator à partir d’Adobe Device Central

  1. Lancez Device Central.
  2. Sélectionnez la commande Fichier > Nouveau document dans > Illustrator.

    Dans Device Central, le panneau Nouveau document affiche les options correctes permettant de créer un document mobile dans l’application sélectionnée.

  3. Apportez les modifications nécessaires, comme la sélection d’une version de Player, de la taille d’affichage, de la version de Flash ou d’un type de contenu.
  4. Utilisez l’une des méthodes suivantes :
    • Sélectionnez l’option Personnaliser la taille pour tous les périphériques sélectionnés et ajoutez une largeur et une hauteur (en pixels).

    • Sélectionnez un ou plusieurs périphériques dans la liste Ensembles de périphériques ou dans la liste Périphériques disponibles.

  5. Si vous sélectionnez plusieurs périphériques, Device Central sélectionne une taille pour vous. Si vous voulez sélectionner une taille différente, cliquez sur un périphérique ou un ensemble de périphériques différent.
  6. Cliquez sur Créer.

    L’application sélectionnée s’ouvre, avec un nouveau document mobile prêt à être édité.

Création d’un contenu mobile avec Adobe Device Central et Illustrator

  1. Sous Illustrator, sélectionnez la commande Fichier > Nouveau.
  2. Dans Nouveau profil de document, sélectionnez Mobile et périphériques.
  3. Cliquez sur Device Central pour fermer la boîte de dialogue dans Illustrator et ouvrir Device Central.
  4. Sélectionnez un type de contenu.

    La liste des périphériques disponibles, sur la gauche, est mise à jour et affiche les périphériques qui prennent en charge le type de contenu sélectionné.

  5. Dans Device Central, sélectionnez un périphérique, plusieurs périphériques ou un ensemble de périphériques.

    Suivant le ou les périphériques sélectionnés et le type de contenu, Device Central suggère la création d’une ou plusieurs tailles de plan de travail. Pour créer un document à la fois, sélectionnez une taille de document suggérée (ou sélectionnez l’option Personnaliser la taille pour tous les périphériques sélectionnés et entrez des valeurs personnalisées pour la largeur et la hauteur).

  6. Cliquez sur Créer.

    Un fichier AI vide, de la taille spécifiée, s’ouvre dans Illustrator. Les paramètres suivants sont définis par défaut pour le nouveau fichier :

    • Mode couleur : RVB

    • Résolution de pixels : 72 ppp

  7. Alimentez le fichier AI vide avec le contenu dans Illustrator.
  8. Lorsque vous avez terminé, sélectionnez Fichier > Enregistrer pour le web et les périphériques.
  9. Dans la boîte de dialogue Enregistrer pour le web et les périphériques, sélectionnez le format souhaité et modifiez, si nécessaire, les autres paramètres d’exportation.
  10. Cliquez sur Device Central.

    Un fichier temporaire, comportant les réglages d’exportation spécifiés, s’affiche dans l’onglet Emulateur de Device Central. Pour poursuivre le test, cliquez deux fois sur le nom d’un autre périphérique dans les listes Ensembles de périphériques ou Périphériques disponibles.

  11. Si, après avoir affiché un aperçu du fichier dans Device Central, vous devez apporter des modifications au fichier, revenez dans Illustrator.
  12. Dans la boîte de dialogue Enregistrer pour le web et les périphériques d’Illustrator, apportez les modifications souhaitées, comme la sélection d’un format différent ou d’une qualité différente pour l’exportation.
  13. Pour tester à nouveau le fichier avec les nouveaux paramètres d’exportation, cliquez sur le bouton Device Central.
  14. Lorsque les résultats vous conviennent, cliquez sur le bouton Enregistrer de la boîte de dialogue Enregistrer pour le web et les périphériques d’Illustrator.

    Remarque :

    Pour simplement ouvrir Device Central à partir de Illustrator (sans créer ni tester de fichier), sélectionnez Fichier > Device Central.

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

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

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

  • Utilisez le standard SVG pour créer le contenu. L’utilisation du format SVG pour la publication de graphiques vectoriels sur les périphériques mobiles permet d’avoir un fichier de taille plus petite, une 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 sur les dimensions finales de votre ou vos périphériques mobiles cibles. Le standard SVG étant évolutif, le fait de travailler sur la taille appropriée permet de s’assurer que les graphiques finaux sont optimisés en termes de qualité et de taille pour le ou les périphériques cibles.

  • Définissez le mode de couleur d’Illustrator sur RVB. Le format SVG peut être affiché sur les dispositifs à 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). L’utilisation de moins 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 les 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 graphiques 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 périphérique mobile cible peut décompresser les fichiers gzip.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne