Guide d'utilisation Annuler

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. Barre d’outils
      4. Raccourcis clavier par défaut
      5. Personnalisation des raccourcis clavier
      6. Introduction aux plans de travail
      7. Gestion des plans de travail
      8. Personnalisation de l’espace de travail
      9. Panneau Propriétés
      10. Définition des préférences de la mémoire
      11. Espace de travail Tactile
      12. Prise en charge de Microsoft Surface Dial dans Illustrator
      13. Récupération, annulation, historique et automatisation
      14. Faire pivoter l’affichage
      15. Règles, grilles et repères
      16. Accessibilité dans Illustrator
      17. Mode sans échec
      18. Affichage des illustrations
      19. Utilisation de la Touch Bar avec Illustrator
      20. Fichiers et modèles
    3. Outils dans Illustrator
      1. Principales caractéristiques des outils
      2. Outils de sélection
        1. Sélection
        2. Sélection directe
        3. Sélection directe progressive
        4. Baguette magique
        5. Lasso
        6. Plan de travail
      3. Outils de navigation
        1. Main
        2. Faire pivoter l’affichage
        3. Zoom
      4. Outils de peinture
        1. Dégradé
        2. Filet
        3. Concepteur de forme
      5. Outils de texte
        1. Texte
        2. Texte curviligne
        3. Texte vertical
      6. Outils de dessin
        1. Plume
        2. Ajout de point d’ancrage
        3. Suppression de point d’ancrage
        4. Point d’ancrage
        5. Courbure
        6. Trait
        7. Rectangle
        8. Rectangle arrondi
        9. Ellipse
        10. Polygone
        11. Étoile
        12. Pinceau
        13. Forme de tache
        14. Crayon
        15. Shaper
        16. Tranche
      7. Outils de modification
        1. Rotation
        2. Miroir
        3. Mise à l’échelle
        4. Cisaillement
        5. Largeur
        6. Transformation manuelle
        7. Pipette
        8. Dégradé de formes
        9. Gomme
        10. Ciseaux
  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. Utilisation des documents dans Illustrator sur iPad
      2. Importation de documents Photoshop et Fresco
    4. Sélection et organisation des objets
      1. Création des objets répétés
      2. Fusion d’objets
    5. Dessin
      1. Dessin et modification des tracés
      2. Dessin et modification de formes
    6. Texte
      1. Utilisation du texte et des polices
      2. Création de compositions de texte sur un tracé
      3. Ajout de vos propres polices
    7. Utilisation d’images
      1. Vectorisation d’images pixellisées
    8. Couleur
      1. Application des couleurs et des dégradés
  4. Documents en ligne
    1. Fonctionnalités de base
      1. Utilisation des documents en ligne Illustrator
      2. Partage et collaboration sur des documents en ligne Illustrator
      3. Mise à niveau de l’espace de stockage pour Adobe Illustrator
      4. Documents en ligne Illustrator | Questions fréquentes
    2. Résolution des problèmes
      1. Résolution des problèmes de création ou d’enregistrement de documents en ligne Illustrator
      2. Résolution des problèmes sur les documents en ligne Illustrator
  5. Ajout et modification de contenu
    1. Dessin
      1. Concepts de base sur le dessin
      2. Modification des tracés
      3. Dessin ultraprécis d’illustrations
      4. Dessin avec l’outil Stylo, Courbure ou Crayon
      5. Dessin de lignes et formes simples
      6. Vectorisation d’images
      7. Simplification des tracés
      8. Définition de grilles de perspective
      9. Outils de symbolisme et jeux de symboles
      10. Modification des segments de tracé
      11. Création d’une fleur en 5 étapes faciles
      12. Dessin en perspective
      13. Symboles
      14. Dessin de 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éation de graphismes 3D
      3. Placage d’illustrations sur des objets 3D
      4. Création d’objets 3D
      5. Création de texte 3D
    3. Couleur
      1. À propos de la couleur
      2. Sélection de couleurs
      3. Utilisation et création de nuanciers
      4. Correction des couleurs
      5. Utilisation du panneau Thèmes Adobe Color
      6. Groupes de couleurs (harmonies)
      7. Panneau Thèmes de couleur
      8. Redéfinition des couleurs d’une 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éation et modification de motifs
      9. Filets
      10. Motifs
    5. Sélection et organisation des objets
      1. Sélection d’objets
      2. Calques
      3. Association et développement des objets
      4. Déplacement, alignement et répartition d’objets
      5. Superposition d’objets    
      6. Verrouillage, masquage et suppression d’objets
      7. Duplication d’objets
      8. Application de rotations et de symétries aux objets
    6. Remodelage d’objets
      1. Recadrage des images
      2. Transformation d’objets
      3. Combinaison d’objets
      4. Découpage, division et rognage d’objets
      5. Déformation de la marionnette
      6. Mise à l’échelle, déformation et distorsion des objets
      7. Fusion d’objets
      8. Modelage à l’aide d’enveloppes
      9. Remodelage des objets à l’aide d’effets
      10. Création de formes avec les outils Mise en forme et Concepteur de forme
      11. Utilisation des angles dynamiques
      12. Amélioration des flux de modelage avec prise en charge des commandes tactiles
      13. Modification des masques d’écrêtage
      14. Formes dynamiques
      15. Création de formes à l’aide de l’outil Concepteur de forme
      16. Modifications globales
    7. Texte
      1. Ajout de texte et utilisation d’objets texte
      2. Création de listes à puce et numérotées
      3. Gestion de la zone de texte
      4. Polices et typographie
      5. Mise en forme de texte
      6. Importation et exportation de texte
      7. Mise en forme des paragraphes
      8. Caractères spéciaux
      9. Création de texte curviligne
      10. Styles de caractère et de paragraphe
      11. Onglets
      12. Texte et typographie
      13. Recherche de polices manquantes (flux de travaux Typekit)
      14. Mise à jour de textes provenant d’Illustrator 10
      15. Texte en arabe et en hébreu
      16. Polices | FAQ et conseils de dépannage
      17. Création d’effets de texte 3D
      18. Designs typographiques créatifs
      19. Mise à l’échelle et rotation du texte
      20. Espacement des lignes et interlettrage
      21. Césure et sauts de ligne
      22. Améliorations relatives au texte
      23. Orthographe et dictionnaires de langue
      24. Mise en forme des caractères asiatiques
      25. Compositeurs de scripts asiatiques
      26. Création de designs de texte avec des dégradés d’objets
      27. 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 plusieurs fichiers
      2. Gestion des fichiers liés et intégrés
      3. Informations sur les liens
      4. Annulation de l’intégration des images
      5. Importation d’une illustration à partir de Photoshop
      6. Importation d’images bitmap
      7. Importation de fichiers Adobe PDF
      8. Importation de fichiers EPS, DCS et AutoCAD
    2. Bibliothèques Creative Cloud dans Illustrator 
      1. Bibliothèques Creative Cloud dans Illustrator
    3. Enregistrement
      1. Enregistrement d’une illustration
    4. Exportation
      1. Utilisation d’illustrations Illustrator dans Photoshop
      2. Exportation d’une illustration
      3. Collecte et exportation de ressources par lots
      4. Assemblage de fichiers
      5. Création de fichiers Adobe PDF
      6. Extraction de code CSS | Illustrator CC
      7. Options Adobe PDF
      8. 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. Premiers pas avec les 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 plantage
    2. Récupération de fichiers après un plantage
    3. Problèmes liés aux fichiers
    4. Formats de fichier pris en charge
    5. Problèmes avec un pilote de matériel GPU
    6. Problèmes liés à un appareil Wacom
    7. Problèmes liés aux fichiers DLL
    8. Problèmes de mémoire
    9. Problèmes liés au fichier de préférences
    10. Problèmes de police
    11. Problèmes d’imprimante
    12. Partage des rapports d’incident avec Adobe
    13. Optimisation des performances d’Illustrator

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

Remarque :

Il existe de nombreux modèles Illustrator qui ont été 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 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é.

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

Logo Adobe

Accéder à votre compte