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

  1. Guide de l’utilisateur d’Illustrator
  2. Découverte d’Illustrator
    1. Présentation d’Illustrator
      1. Nouveautés d’Illustrator
      2. Questions fréquentes
      3. Configuration requise pour Illustrator
      4. Illustrator pour Apple Silicon
    2. Espace de travail
      1. Principes de base sur les espaces de travail
      2. Création de documents
      3. OutilsRaccourcis clavier par défaut | Illustrator
      4. Personnalisation des raccourcis clavier
      5. Plans de travail
      6. Personnalisation de l’espace de travail
      7. Panneau Propriétés
      8. Définition des préférences de la mémoire
      9. Espace de travail Tactile
      10. Prise en charge de Microsoft Surface Dial dans Illustrator
      11. Récupération, annulation et automatisation
      12. Faire pivoter l’affichage
      13. Règles, grilles et repères
      14. Accessibilité dans Illustrator
      15. Mode sans échec
      16. Affichage des illustrations
      17. Utilisation de la Touch Bar avec Illustrator
      18. Fichiers et modèles
      19. Synchronisation des paramètres à l’aide d’Adobe Creative Cloud
    3. Outils dans Illustrator
      1. Sélection
        1. Présentation
        2. Sélection
        3. Sélection directe
        4. Lasso
      2. Navigation
        1. Présentation
        2. Zoom
        3. Faire pivoter l’affichage
      3. Peinture
        1. Présentation
        2. Dégradé de couleurs
        3. Concepteur de forme
      4. Texte
        1. Présentation
        2. Texte
        3. Texte sur tracé
  3. Illustrator sur iPad
    1. Introduction à Illustrator sur iPad
      1. Présentation d’Illustrator sur iPad
      2. FAQ sur Illustrator sur iPad
      3. Configuration requise | Illustrator sur iPad
      4. Ce que vous pouvez ou ne pouvez pas faire dans Illustrator sur iPad
    2. Espace de travail
      1. Espace de travail Illustrator sur iPad
      2. Raccourcis et mouvements tactiles
      3. Raccourcis clavier pour Illustrator sur iPad
      4. Gestion des paramètres de votre application
    3. Documents
      1. Travailler avec des documents dans Illustrator sur iPad
      2. Importer des documents Photoshop et Fresco
    4. Sélectionner et organiser des objets
      1. Créer des objets répétés
      2. Fusionner des objets
    5. Dessin
      1. Dessiner et modifier des tracés
      2. Dessin et modification de formes
    6. Texte
      1. Travailler avec du texte et des polices
      2. Créer des compositions de texte sur un tracé
      3. Ajouter vos propres polices
    7. Utilisation d’images
      1. Utilisation d’images
    8. Couleur
      1. Appliquer des couleurs et des dégradés
  4. Documents en ligne
    1. Fonctionnalités de base
      1. Travailler avec des documents en ligne Illustrator
      2. Partage et collaboration sur des documents en ligne Illustrator
      3. Mettre à niveau l’espace de stockage pour Adobe Illustrator
      4. Documents en ligne Illustrator | Questions fréquentes
    2. Résolution des problèmes
      1. Résoudre les problèmes de création ou d’enregistrement de documents en ligne Illustrator
      2. Résoudre les problèmes sur les documents en ligne Illustrator
  5. Ajout et modification de contenu
    1. Dessin
      1. Concepts de base sur le dessin
      2. Modifier les tracés
      3. Dessiner des illustrations ultra précises
      4. Dessiner avec l’outil Stylo, Courbure ou Crayon
      5. Dessiner des lignes et formes simples
      6. Vectoriser l’image
      7. Simplifier un tracé
      8. Définir des grilles de perspective
      9. Outils de symbolisme et jeux de symboles
      10. Modification des segments de tracé
      11. Créer une fleur en 5 étapes faciles
      12. Dessiner avec la perspective
      13. Symboles
      14. Dessiner des tracés alignés sur les pixels dans des workflows web
    2. Effets 3D et matières Adobe Substance
      1. À propos des effets 3D dans Illustrator
      2. Créer des graphiques 3D
      3. Créer des objets 3D
      4. Créer du texte 3D
    3. Couleur
      1. À propos de la couleur
      2. Sélectionner des couleurs
      3. Utiliser et créer des nuanciers
      4. Corriger les couleurs
      5. Utiliser le panneau Thèmes Adobe Color
      6. Groupes de couleurs (harmonies)
      7. Panneau Thèmes de couleur
      8. Redéfinir les couleurs de l’illustration
    4. Peinture
      1. À propos de la peinture
      2. Peinture avec les fonds et les contours
      3. Groupes de peinture dynamique
      4. Dégradés
      5. Formes
      6. Transparence et modes de fusion
      7. Application d’un contour sur un objet
      8. Créer et modifier des motifs
      9. Filets
      10. Motifs
    5. Sélectionner et organiser des objets
      1. Sélection d’objets
      2. Calques
      3. Associer et développer des objets
      4. Déplacement, alignement et répartition d’objets
      5. Superposer des objets    
      6. Verrouillage, masquage et suppression d’objets
      7. Dupliquer des objets
      8. Appliquer des rotations et symétries aux objets
    6. Remodelage d’objets
      1. Recadrer des images
      2. Transformer des objets
      3. Combinaison d’objets
      4. Couper, diviser et rogner des objets
      5. Déformation de la marionnette
      6. Mettre à l’échelle, déformer et distordre des objets
      7. Fusionner des objets
      8. Modeler à l’aide d’enveloppes
      9. Remodeler des objets à l’aide d’effets
      10. Créer des formes avec les outils Mise en forme et Concepteur de forme
      11. Utiliser des angles dynamiques
      12. Amélioration des flux de modelage avec prise en charge des commandes tactiles
      13. Modifier des masques d’écrêtage
      14. Formes dynamiques
      15. Créer des formes à l’aide de l’outil Concepteur de forme
      16. Modifier globalement
    7. Texte
      1. Créer du texte
      2. Polices et typographie
      3. Mise en forme de texte
      4. Importer et exporter du texte
      5. Mise en forme des paragraphes
      6. Caractères spéciaux
      7. Création de texte curviligne
      8. Styles de caractère et de paragraphe
      9. Onglets
      10. Texte et typographie
      11. Rechercher des polices manquantes (flux de travaux Typekit)
      12. Mettre à jour du texte provenant d’Illustrator 10
      13. Texte en arabe et en hébreu
      14. Polices | FAQ et conseils de dépannage
      15. Création d’effets de texte 3D
      16. Designs typographiques créatifs
      17. Mise à l’échelle et pivotement du texte
      18. Espacement des lignes et interlettrage
      19. Césure et sauts de ligne
      20. Améliorations relatives au texte
      21. Orthographe et dictionnaires de langue
      22. Mise en forme des caractères asiatiques
      23. Compositeurs de scripts asiatiques
      24. Création de designs de texte avec des dégradés d’objets
      25. Création d’une affiche de texte à l’aide du tracé d’image
    8. Création d’effets spéciaux
      1. Utilisation des effets
      2. Styles graphiques
      3. Création d’une ombre portée
      4. Attributs d’aspect
      5. Création d’esquisses et de mosaïques
      6. Ombres portées, lueurs et contour progressif
      7. Résumé des effets
    9. Images Web
      1. Méthodes recommandées pour la création d’images destinées au Web
      2. Graphismes
      3. SVG
      4. Création d’animations
      5. Tranches et cartes-images
  6. Importation, exportation et enregistrement
    1. Importation
      1. Importation de fichiers d’illustration
      2. Importation d’images bitmap
      3. Importation d’une illustration à partir de Photoshop
      4. Importation de plusieurs fichiers | Illustrator CC
      5. Annulation de l’incorporation des images
      6. Importation de fichiers Adobe PDF
      7. Importation de fichiers EPS, DCS et AutoCAD
      8. Informations sur les liens
    2. Bibliothèques Creative Cloud dans Illustrator 
      1. Bibliothèques Creative Cloud dans Illustrator
    3. Enregistrer
      1. Enregistrement d’une illustration
    4. Exportation
      1. Exportation d’une illustration
      2. Collecte et exportation de ressources par lots
      3. Assemblage de fichiers
      4. Création de fichiers Adobe PDF
      5. Extraction de code CSS | Illustrator CC
      6. Options Adobe PDF
      7. Informations sur les fichiers et métadonnées
  7. Impression
    1. Préparation pour l’impression
      1. Configuration des documents pour l’impression
      2. Modification du format et de l’orientation de la page
      3. Définition des traits de coupe pour le rognage ou l’alignement
      4. Commencer avec des zones de travail de grande taille
    2. Impression
      1. Surimpression
      2. Impression avec gestion des couleurs
      3. Impression PostScript
      4. Paramètres prédéfinis d’impression
      5. Repères d’impression et fonds perdus
      6. Impression et enregistrement d’illustrations transparentes
      7. Recouvrement
      8. Impression des séparations des couleurs
      9. Impression de dégradés, de filets et de dégradés de formes
      10. Surimpression en blanc
  8. Automatisation des tâches
    1. Fusion des données à l’aide du panneau Variables
    2. Automatisation avec les scripts
    3. Automatisation avec des scripts d’action
  9. Résolution des problèmes 
    1. Problèmes de blocage au lancement
    2. Récupérer les fichiers après un blocage
    3. Problèmes liés au fichier
    4. Problèmes avec un pilote de matériel GPU
    5. Problèmes liés à un appareil Wacom
    6. Problèmes liés au fichier DLL
    7. Problèmes de mémoire
    8. Problèmes du fichier de préférences
    9. Problèmes de police
    10. Problèmes d’imprimante
    11. Partager le rapport d’incident avec Adobe

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.

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

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.

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 graphismes 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 graphismes 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 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 périphérique mobile cible peut décompresser les fichiers gzip.

Logo Adobe

Accéder à votre compte