Voici le 2e chapitre de ce tutoriel sur comment faire un motif sur Adobe Illustrator et l'exporter en SVG. Je vous montre du début à la fin comment j'ai réalisé l'en-tête "Commerce" de la page d'accueil de l'Agence Dream. Il s'agit d'un apprentissage pas à pas…
Dans ce tutoriel je vous montre comment créer un motif avec Adobe Illustrator. Divisé en 3 chapitres, je vous explique du début à la fin comment j’ai réalisé l’un des encarts de la page d’accueil de l’Agence Dream. Il s’agit d’un apprentissage pas à pas avec :
- la création du vecteur sur Adobe Illustrator pour réaliser un motif (pattern),
- la création du motif sur Adobe Illustrator qui s’affichera sur le background de la div,
- l’exportation et optimisation du fichier SVG,
- la création en CSS de l’en-tête animé et créatif sur le site avec l’intégration du fichier SVG dans le CSS.
Passez la souris dessus pour voir tout le fun :).
Attention, sur certains navigateurs datés ou un dispositif single-touch (Ipad, smartphone, etc.) ça ne marche pas bien. Dans ce cas on fait le « deuil » car même si ce n’est pas idéal, on peut se permettre d’insérer des éléments qui ne sont pas affichés de la même façon dans tous les dispositifs, tant que cela n’empêche pas une navigation correcte et un accès complet aux informations.
- Ce tutoriel (1/3) : Comment créer un motif (Pattern) avec Adobe Illustrator
- Tutoriel (2/3) : Comment préparer un motif sur Illustrator pour l’exporter en SVG
- Tutoriel (3/3) : Comment créer en CSS un titre animé et créatif avec un SVG en background
1. Créer un motif avec Adobe Illustrator : Réaliser le dessin pour le transformer en motif
Tout d’abord, on s’assure bien que les Smart Guides (Touches Windows : Ctrl + U / Mac : Cmd + U ) sont actives. Pour cela : View > Smart Guides.
Ensuite, nous allons réaliser un carré. Nous voulons avoir le Fill (remplissage) en transparent et le Stroke (contour) en couleur.
Pour cela, on sélectionne l’outil Rectangle (Touche M). Ensuite on appuie sur les 2 petits carreaux noir et blanc (Touche D) et sur le petit carré blanc avec la ligne diagonale rouge pour marquer le remplissage en transparent « None » (Touche /).
On crée un carré à l’aide de l’outil Rectangle Tool (Touche M) et la touche Shift du clavier pour garder la proportion exacte.
Ensuite on va sur Object > Expand…
On s’assure que Stroke est actif (pour le Fill ça nous est égale). Cela nous permet de transformer le Stroke en shape, c’est à dire en objet normal, avec son remplissage (Fill).
Voici l’objet transformé en shape normal, seulement avec remplissage (Fill) et sans contour (Stroke).
Nous activons l’outil de sélection (Touche V) et avec la touche Shift du clavier on pivote l’objet avec un mouvement de souris dans un angle parfait de 45º.
Maintenant nous allons couper le carré en 2. Une façon de le faire est de prendre l’outil Line Segment Tool (Touche \) et de traverser une ligne (transparente ou pas, ça nous est égale) dans la moitié exacte de l’objet. Les Smart Guides nous aident en marquant l’acheminement en vert.
On sélectionne l’ensemble (Touche V).
On ouvre le Pathfinder depuis Windows > Pathfinder (Touches Windows : Shift + Crl + F9 / Mac : Shift + Cmd + F9) et on clique sur Divide. Cela va couper toutes les lignes traversantes de nos objets.
Nous venons d’utiliser le Pathfinder, avec cette action Illustrator groupe les objets par défaut. Dans notre cas ce n’est pas pratique. Avec l’ensemble sélectionné, on clique avec le bouton secondaire de la souris > Ungroup. Windows : Ctrl+Shift+G / Mac : Cmd+Shift +G
Avec l’outil Direct Selection Tool (Touche A), on sélectionne la partie qui ne nous intéresse plus et on supprime (Touche Suppr.).
On a un petit résidu, on l’élimine également.
Nous créons un carré parfait avec l’outil Rectangle Tool (Touche M) comme avant. Maintenant l’objet doit être transparent ou alors ne doit pas avoir de Stroke (contour) mais seulement Fill (remplissage). L’intérêt ici est de couper droit les bouts droit et gauche du triangle.
À nouveau nous allons sur le Pathfinder > Divide.
À nouveau on sélectionne l’ensemble > Clique sur bouton secondaire de la souris > Ungroup. Windows : Ctrl+Shift+G / Mac : Cmd+Shift+G
Ici nous allons sélectionner les bouts qui nous ne intéressent pas avec l’outil Direct Selection Tool (Touche A) et les supprimer (Touche Suppr.).
Voilà le résultat de notre objet parfaitement coupé avec des lignes propres.
Maintenant on sélectionne et on copie notre objet (Windows : Ctrl + C / Mac : Cmd + C). On fait CTRL + Shift + V pour coller sur place (au même endroit).
On déplace en bas l’objet à une certaine distance, comme vous préférez. Je conseille de le faire avec les touches de flèches du clavier tout en appuyant sur Shift au même temps. Cela permet de faire des déplacements plus grands et de manière droite par rapport à l’endroit d’origine.
On va sur Object > Blend > Blend Options…
On choisi Specified Steps > 4. Dans Orientation > le premier choix, c’est à dire, Orientation droite. Vous pouvez bien entendu choisir un numéro différent de Steps, c’est votre créativité qui vous dira mieux que moi ;).
On sélectionne avec l’outil Selection Tool (Touche V) l’ensemble et on va encore sur le menu Object (un exemple de la joie de « User Experience » ou UX sur Illustrator). Object > Blend > Make (Touches Windows : Alt + Crtl + B / Mac : Alt + Cmd + B).
Et la magie commence avec une distribution parfaite des objets ! :).
Maintenant qu’on sait faire, je ne vous montre pas d’image : avec notre dessin bien sélectionné, on fait à nouveau les opérations décrites plus haut : Expand et Ungroup.
2. Transformer le dessin en motif
C’est là que ça se joue pour créer un motif avec Adobe Illustrator. Avec notre dessin prêt, on le sélectionne avec Selection Tool (Touche V). Ensuite Object > Pattern > Make.
Le dessin apparait répété dans une simulation de motif. La fenêtre Pattern Options s’affiche avec plein d’options pour réaliser le motif.
Vous pouvez jouer avec les options et voir de suite les résultats dans la simulation.
Avec un peu de créativité on peut avoir des résultats très sympas. Dans notre cas nous avons :
- Name : PatternDream (on choisit un nom pour le motif).
- Tyle Type: Grid.
- Width: Dans notre cas, pas besoin de toucher.
- Height: On change jusqu’au obtenir le résultat recherché. Je l’ai mis en 24 px pour décaler les parties supérieures et inférieures et ainsi obtenir une répétition parfaite.
Une fois que le résultat nous plait, on appuie sur Done.
On est sortis du mode Pattern et retournés sur l’Artboard (le Plan de travail). On va sur Swatches (Windows > Swatches pour le faire apparaitre) et on va voir un nouveau Swatch qui correspond au motif qu’on vient de créer.
Maintenant on est prêts à préparer le motif pour l’exporter en SVG. La suite dans le chapitre suivant de ce tutoriel, qui sera bientôt en ligne.
3. Appliquer le nouveau motif sur Illustrator
Pour créer un motif avec Adobe Illustrator je vais continuer pour finir l’apprentissage.
Attention. Ici, aucun rapport avec le SVG ! :
Notre motif s’est transformé en Swatch et il est maintenant prêt à être utilisé sur Illustrator. Il n’y plus qu’à créer un nouvel objet, par exemple un rectangle avec l’outil Rectangle Tool (Touche M). Avec notre nouveau rectangle, on clique sur le nouveau Swatch et notre rectangle va être rempli avec le motif. La partie Fill (remplissage) à gauche de l’image vous montre l’application du motif.
Un détail à tenir en compte quand on crée des motifs sur Illustrator est l’option Transform Pattern Tiles. Vous allez dans Edit > Preferences > General et vous faites votre choix sur Transform Pattern Tiles :
- Si la case est cochée et donc activée : Le motif qui rempli votre objet (par exemple, le rectangle) reste fixé quand vous déplacez l’objet sur l’Artboard.
- Si la case n’est pas cochée et donc inactive : Le motif qui rempli votre objet se déplace avec le déplacement de l’objet sur l’Artboard. Visuellement ça donne un effet bizarre, où on dirait que ça glisse.
Mon choix est souvent de laisser cette case cochée. Une fois que je remplis mon objet avec le motif, il reste fixé et si je modifie la proportion de l’objet, le motif est aussi transformé. Ça va dépendre de ce que vous voulez faire. Dans tous les cas il est indispensable de connaitre cette option pour réaliser un objet avec motif sur Illustrator sans se casser la tête.
Je ne comprends pas pourquoi elle est aussi cachée. On dirait qu’elle à été mise à la va-vite dans les préférences, sans réfléchir à l’UX (User Experience Design). On aime bien Adobe Illustrator mais il faut aussi reconnaitre ses faiblesses.
On finit ici la première partie de ce tutoriel sur comment créer un motif sur Adobe Illustrator. Maintenant vous pouvez jouez avec votre imagination et créer des motifs sur Adobe Illustrator.
Crédit Photo En-tête : Carl Nenzen Loven Licence Creative Commons CC0.
Français 
English (UK)