Créer des illustrations web avec Illustrator : du concept au SVG optimisé
Les illustrations personnalisées donnent une identité unique à votre site web. Contrairement aux images stock que tout le monde utilise, une illustration originale communique votre personnalité de marque et capte l’attention. Adobe Illustrator reste l’outil de référence pour créer des illustrations vectorielles professionnelles destinées au web.
Ce guide couvre le workflow complet : de la création dans Illustrator à l’exportation optimisée pour le web, avec les techniques spécifiques aux illustrations destinées aux sites internet.
Configurer Illustrator pour le web
Configuration du document
Un document Illustrator pour le web a des paramètres différents d’un document print :
- Profil : Web (pas Print). Cela configure automatiquement les bonnes options
- Unités : Pixels (pas millimètres ni centimètres)
- Mode colorimétrique : RVB (pas CMJN qui est pour l’impression)
- Résolution : 72 ppi (le standard écran)
- Aligner sur la grille de pixels : Activé — garantit des lignes nettes sur écran
- Plan de travail : Dimensions adaptées à votre utilisation (ex : 1200×800 pour un hero, 400×400 pour une icône)
Paramètres essentiels
- Aperçu en pixels — Affichage → Aperçu en pixels. Montre exactement comment votre illustration apparaîtra sur écran
- Grille de pixels — Visible en zoomant au-delà de 600%. Alignez vos tracés sur cette grille pour éviter le flou
- Magnétisme du pixel — Propriétés de l’objet → Aligner sur la grille de pixels. Chaque point d’ancrage se cale sur un pixel entier
Styles d’illustration adaptés au web
1. Flat design — Le style le plus polyvalent
Couleurs aplates sans dégradés ni ombres portées. C’est le style le plus courant sur le web moderne pour sa lisibilité et sa légèreté en SVG.
Technique Illustrator : Formes géométriques simples (rectangles arrondis, cercles, triangles) combinées avec le Pathfinder (union, soustraction, intersection). Pas de contours — uniquement des fonds de couleur.
Idéal pour : Pages de fonctionnalités, onboarding, illustrations explicatives, icônes.
2. Isométrique — Vision technique moderne
Représentation 3D sans perspective (tous les axes à 30°). Populaire pour les illustrations de produits tech, tableaux de bord, et architectures système.
Technique Illustrator : Utilisez la grille isométrique (Affichage → Grille isométrique) ou créez une grille personnalisée avec des guides à 30°. L’outil Cisaillement est votre allié pour transformer des faces 2D en surfaces isométriques.
Idéal pour : Pages techniques, présentations de services cloud/infrastructure, landing pages SaaS.
3. Ligne (line art) — Élégance minimaliste
Illustrations composées uniquement de traits, sans remplissage. Très léger en SVG et s’adapte facilement à différentes couleurs via CSS.
Technique Illustrator : Outil Plume pour les tracés, épaisseur de trait uniforme (2px pour les icônes, 3-4px pour les illustrations). Extrémités arrondies (round cap) et jointures arrondies (round join) pour un rendu doux.
Idéal pour : Icônes de navigation, illustrations d’en-tête, éléments décoratifs.
4. Personnages et scènes — Humaniser votre site
Des personnages illustrés qui représentent vos utilisateurs ou votre équipe. C’est le style utilisé par Slack, Notion, et des centaines de sites modernes.
Conseil pour le marché sénégalais : Créez des personnages qui reflètent la diversité de votre audience — différentes teintes de peau, vêtements contemporains sénégalais, contexte local (laptop dans un espace de coworking à Dakar, pas dans un loft new-yorkais).
Techniques essentielles dans Illustrator pour le web
Pathfinder : combiner des formes simples
Le Pathfinder est votre outil principal. Plutôt que de dessiner des formes complexes à la plume, combinez des formes géométriques :
- Union — Fusionne deux formes en une seule (ex : un rectangle + un cercle = une forme de capsule)
- Soustraction — Découpe une forme dans une autre (ex : un cercle – un rectangle = un croissant)
- Intersection — Conserve uniquement la zone commune
- Exclusion — Conserve tout sauf la zone commune
Workflow : Dessinez les formes de base → positionnez-les → sélectionnez-les → appliquez l’opération Pathfinder. Résultat : des formes complexes avec des tracés propres et optimaux pour le SVG.
Palette de couleurs cohérente
Limitez votre palette à 5-7 couleurs maximum par illustration. Trop de couleurs créent du chaos visuel et alourdissent le fichier SVG.
- 1-2 couleurs principales — Votre couleur de marque et sa complémentaire
- 2-3 couleurs neutres — Gris, beige ou bleu très clair pour les fonds et détails
- 1 couleur d’accent — Pour attirer l’attention sur un élément spécifique
Dans Illustrator : Créez vos couleurs comme nuances globales (Fenêtre → Nuancier → Nouvelle nuance globale). Modifier une nuance globale met à jour automatiquement tous les objets qui l’utilisent — idéal pour tester des variations de couleur rapidement.
Simplifier les tracés pour le web
Chaque point d’ancrage dans votre illustration se traduit en coordonnées dans le fichier SVG. Moins de points = fichier plus léger = chargement plus rapide.
- Objet → Tracé → Simplifier — Réduit le nombre de points d’ancrage tout en conservant la forme. Visez 90-95% de fidélité
- Évitez l’outil Pinceau pour les contours — il crée des tracés très complexes. Préférez l’outil Plume
- Supprimez les points inutiles — Outil Suppression de point d’ancrage sur les points qui ne contribuent pas à la forme
- Convertissez le texte en contours — Texte → Vectoriser. Élimine la dépendance aux polices mais augmente la complexité du tracé. Ne le faites que pour les titres courts, pas les paragraphes
Exporter pour le web : SVG optimisé
Fichier → Exporter → Exporter pour les écrans
C’est la méthode recommandée pour l’exportation web dans Illustrator :
- Sélectionnez le plan de travail ou les éléments à exporter
- Format : SVG pour les illustrations vectorielles
- Paramètres SVG recommandés :
- Style : Attributs de présentation (plus léger que les CSS internes)
- Police : Convertir en contours (si vous avez du texte)
- Images : Incorporer (si votre SVG contient des images bitmap)
- ID d’objet : Noms des calques (utile pour animer des parties spécifiques en CSS)
- Décimales : 1 (réduit la taille sans perte visible)
- Minifier : Oui
- Responsive : Oui (retire width/height pour permettre le redimensionnement CSS)
Optimisation supplémentaire avec SVGO
Après l’export d’Illustrator, utilisez SVGO (SVG Optimizer) pour réduire encore la taille :
# Installation
npm install -g svgo
# Optimiser un fichier
svgo illustration.svg -o illustration.min.svg
# Optimiser un dossier entier
svgo -f ./illustrations/ -o ./illustrations/optimized/
# Avec configuration personnalisée
svgo illustration.svg --config='{
"plugins": [
"preset-default",
"removeDimensions",
{ "name": "removeAttrs", "params": { "attrs": ["data-name"] } }
]
}'Résultat typique : Un SVG de 15 Ko exporté depuis Illustrator passe à 5-8 Ko après SVGO — une réduction de 40-65%.
Alternative en ligne : SVGOMG (jakearchibald.github.io/svgomg/) — Interface web pour SVGO, sans installation. Collez votre SVG, ajustez les paramètres, téléchargez le résultat optimisé.
Intégrer les SVG dans votre site web
Méthode 1 : SVG inline (recommandé pour l’animation)
<!-- SVG directement dans le HTML -->
<svg viewBox="0 0 400 300" class="hero-illustration">
<!-- Contenu SVG optimisé -->
<circle class="sun" cx="300" cy="80" r="40" fill="#f7c948"/>
<rect class="building" x="50" y="100" width="80" height="200"
fill="#667eea" rx="4"/>
<!-- ... -->
</svg>
<style>
/* Animer des parties du SVG avec CSS */
.hero-illustration .sun {
animation: float 3s ease-in-out infinite alternate;
}
@keyframes float {
to { transform: translateY(-10px); }
}
/* Changer les couleurs en dark mode */
[data-theme="dark"] .hero-illustration .building {
fill: #818cf8;
}
</style>Méthode 2 : Balise img (le plus simple)
<img src="illustration.svg"
alt="Illustration d'un développeur web au travail"
width="400" height="300"
loading="lazy">Méthode 3 : CSS background (décoratif)
.section-decorated {
background-image: url('pattern.svg');
background-repeat: repeat;
background-size: 200px;
}Alternatives gratuites à Illustrator
Si vous n’avez pas accès à Adobe Illustrator (l’abonnement coûte environ 15 000 FCFA/mois), ces alternatives gratuites offrent des capacités similaires :
- Figma (gratuit) — Excellent pour les illustrations simples et les icônes. Outils vectoriels complets, export SVG natif, collaboration en temps réel
- Inkscape (gratuit, open-source) — L’alternative libre la plus complète à Illustrator. Interface moins moderne mais fonctionnalités très riches
- Vectr (gratuit) — Outil vectoriel en ligne simple et rapide pour les débutants
- SVG-Edit (gratuit) — Éditeur SVG directement dans le navigateur. Basique mais utile pour des modifications rapides
Ressources d’illustrations gratuites et personnalisables
Si créer des illustrations from scratch n’est pas votre force, ces ressources offrent des illustrations modifiables :
- unDraw — Illustrations SVG avec couleur personnalisable en un clic. Idéal pour les pages de fonctionnalités
- Humaaans — Bibliothèque de personnages modulaires (corps, vêtements, accessoires) à assembler
- Open Peeps — Personnages dessinés à la main, style croquis. Format Illustrator et SVG
- Blush — Collections d’illustrations par différents artistes, personnalisables en ligne
- Storyset by Freepik — Illustrations animées gratuites. Export SVG et animation intégrée
Créez des illustrations qui marquent
Les illustrations vectorielles bien exécutées sont l’un des moyens les plus efficaces de différencier votre site web. Elles sont légères (quelques Ko en SVG optimisé), infiniment scalables, animables en CSS, et personnalisables pour le dark mode — tout ce qu’une image bitmap ne peut pas offrir.
Chez ITSkillsCenter, nos formations en design graphique et web design couvrent Adobe Illustrator en profondeur, avec un focus sur la création d’assets pour le web. Vous apprenez les techniques du Pathfinder, la gestion des couleurs RVB, l’export SVG optimisé, et l’intégration dans vos projets web. Les exercices pratiques vous font créer un système d’illustrations cohérent pour un site complet.
Premier exercice : créez un jeu de 5 icônes personnalisées pour votre site (accueil, services, portfolio, contact, à propos) en utilisant uniquement des formes géométriques dans Illustrator ou Figma. Exportez en SVG, optimisez avec SVGOMG, et intégrez-les dans votre navigation.
