Répéter au degré près, découper juste, exporter net
Un pictogramme flou, une rosace dont les pétales ne se rejoignent pas, un SVG de 300 Ko pour une icône de 24 px : ce sont les défauts qu'un développeur ou un imprimeur renvoie. Cette séance règle la précision : dupliquer et disposer au degré près, découper les objets entre eux, connaître chaque format d'export, et sortir des fichiers parfaitement nets pour le Web.
Ce que tu fabriques. La rosace de la Brasserie du Pont-Levis (marque fictive) : un pétale de houblon répété douze fois autour d'un centre, découpé par un cercle, puis exporté net en SVG léger et en PNG 1x, 2x et 3x pour l'appli. C'est la méthode de l'atelier 1, le kit d'icônes.
Le fichier de la séance. seance2-petale-houblon.svg : un pétale et le repère du centre de la rosace, dessinés pour le cours. Les outils Cutter et Pulvérisation de symboles sont dans la barre Avancé.
Après cette séance : l'atelier 1, le kit de douze icônes de l'appli Datashop, en SVG et en PNG 3x.
Dupliquer et disposer avec précision
Reprise approfondie : rotation copiée et Ctrl+D, transformations multiples, répétition radialeReprise approfondie. En première année, tu faisais tourner une copie puis Ctrl+D. Cette année, tu choisis entre trois méthodes, selon que le résultat doit rester modifiable ou non.
| Méthode | Comment | Résultat |
|---|---|---|
| rotation copiée et répétée | outil Rotation, Alt+clic au centre, angle 30°, Copier ; puis Ctrl+D dix fois | douze objets indépendants, figés |
| Transformation répartie… (Alt+Maj+Ctrl+D) | Objet › Transformation : échelle, déplacement et rotation en une fois, avec un bouton Copier et une part de hasard | une spirale, une rangée qui rétrécit |
| Radial | Objet › Répéter › Radial : nombre d'occurrences et rayon réglables à la poignée | une répétition vivante : modifie un pétale, les onze autres suivent |
Le même sous-menu Répéter propose Grille (un motif en rangées) et Miroir (une moitié qui se reflète en direct). Annuler rend des objets ordinaires.
L'angle d'une répétition se calcule : 360° divisés par le nombre de copies. Douze pétales : 30°. Huit rayons : 45°.
Découper les objets entre eux
Reprise approfondie : Pochoir, Fusion, Découpe, Contour, et le CutterReprise approfondie. En deuxième année, tu as découpé avec Division et Diviser les objets inférieurs. La rangée Pathfinders du panneau en compte six : chacun découpe à sa manière.
| Pathfinder | Ce qu'il fait | Usage |
|---|---|---|
| Division | chaque zone devient un objet | colorer les morceaux un par un |
| Pochoir | retire les parties cachées, garde les couleurs, supprime les contours | préparer une sérigraphie |
| Fusion | comme Pochoir, puis réunit les morceaux de même couleur | simplifier une illustration |
| Découpe | ne garde que ce qui est sous l'objet du dessus, qui sert de cadre | recadrer la rosace dans un cercle |
| Contour | transforme les formes en segments de contour | préparer un tracé de découpe |
| Soustraction (avant - arrière) | les objets de derrière percent celui de devant | l'inverse de la Soustraction |
À la main, le Cutter coupe toutes les formes qu'il traverse le long d'un trait libre (Alt : trait droit) ; les Ciseaux (C) coupent un tracé en un point.
Découpe agit comme un masque d'écrêtage, mais définitif : ce qui dépasse est supprimé. Pour un logo livré, c'est plus propre qu'un masque ; pour un travail en cours, le masque reste réversible.
Les spécificités de chaque format de fichier
Reprise approfondie : enregistrer ou exporter, AI, PDF, SVG, PNG, JPEG, et le calcul des pixelsReprise approfondie. En première année, tu enregistrais en .ai et en PDF. Ici, tu choisis le bon format pour chaque destinataire, et tu sais ce que chacun garde ou perd.
| Format | Garde | Perd | Pour |
|---|---|---|---|
| .ai (Enregistrer sous) | tout : calques, effets vivants, plans de travail | — | toi, ton studio ; « compatible PDF » pour InDesign |
| PDF (Enregistrer sous) | le vectoriel, les polices incorporées, le fond perdu | la modification simple | l'imprimeur ([PDF/X-4:2008]), le client |
| SVG (Exporter) | le vectoriel, lisible par le navigateur | les effets complexes, les filets (pixellisés) | le développeur, le Web |
| PNG (Exporter) | la transparence | le vectoriel | l'écran, les applis, la bureautique |
| JPEG (Exporter) | un poids léger pour les photos | la transparence, la netteté des aplats | les aperçus, les réseaux sociaux |
Les pixels se calculent : pixels = millimètres ÷ 25,4 × ppp. Un plan de travail de 80 mm à 300 ppp donne 945 px. À l'écran, 1 px du plan de travail = 1 px à l'échelle 1x.
À l'enregistrement en .ai, la boîte Options Illustrator choisit la version (garder la dernière, sauf demande), et la case Créer un fichier compatible PDF, indispensable pour placer le .ai dans InDesign.
Exporter des illustrations parfaitement nettes pour le Web
Reprise approfondie de l'aperçu des pixels : échelles 1x, 2x, 3x, options SVG et PNGReprise approfondie. En deuxième année, tu vérifiais un picto en aperçu des pixels. Ici, tu livres un jeu complet, net sur tous les écrans, du téléphone à l'écran Retina.
- Dessiner net : plans de travail en pixels entiers (24 × 24), points et traits sur la grille, contours de largeur entière ; vérifier en Aperçu en pixels.
- Exporter pour les écrans (Alt+Ctrl+E) : onglet Plans de travail, un format par ligne, une échelle par ligne (1x, 2x, 3x) et un suffixe (
@2x,@3x). Les noms viennent des plans de travail. - Régler le SVG (Exporter sous › SVG) : Propriétés CSS en attributs de présentation, Polices › Type : Vectoriser si le texte doit voyager sans police, Positions décimales à 1 ou 2 pour un fichier léger, Réactif pour une taille adaptable.
- Régler le PNG : arrière-plan transparent, Lissage adapté (il adoucit les bords), résolution d'écran.
Une icône de 24 px qui pèse 40 Ko en SVG contient des restes : un calque masqué, une image incorporée, des décimales à rallonge. La grille de l'atelier 1 vise 2 Ko au plus.
Quiz de fin de séance
Six questions pour vérifier que c'est acquisCes six questions reprennent toute la séance, au format et au niveau de la certification Tosa. Réponds sans revenir en arrière.
Moins de 4 sur 6 ? Reprends les modules 2 et 3 : la taille exacte des exports et leur netteté valent 8 points sur 20 dans la grille de l'atelier 1.
STOP exercices. Tu as lu tout l'onglet et répondu à ses questions : arrête-toi ici, ne passe pas encore à l'onglet suivant. En cours, ton intervenant montre l'essentiel sur son écran, puis vous refaites ensemble :
- Les douze icônes — atelier 1 : douze icônes, deux couleurs
- Vérifier et exporter, le dépôt — atelier 1 : déposé
Tu travailles seul ? Fais ces exercices maintenant, sur ton .ai du kit d'icônes (page Ateliers), puis passe à l'onglet suivant.