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 :

  1. la création du vecteur sur Adobe Illustrator pour réaliser un motif (pattern),
  2. la création du motif sur Adobe Illustrator qui s’affichera sur le background de la div,
  3. l’exportation et optimisation du fichier SVG,
  4. 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.

 

1. Créer un motif avec Adobe Illustrator : Réaliser le dessin pour le transformer en motif

Créer un motif avec Adobe Illustrator

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.

 

 

Créer un motif avec Adobe IllustratorEnsuite, 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 /).

Créer un motif avec Adobe IllustratorOn crée un carré à l’aide de l’outil Rectangle Tool (Touche M) et la touche Shift du clavier pour garder la proportion exacte.

 

 

Créer un motif avec Adobe IllustratorEnsuite on va sur Object > Expand

 

 

Créer un motif avec Adobe Illustrator

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

 

 

Créer un motif avec Adobe Illustrator
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º.

 

 

Créer un motif avec Adobe Illustrator
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.

 

 

Créer un motif avec Adobe IllustratorOn sélectionne l’ensemble (Touche V).

 

 

Créer un motif avec Adobe Illustrator

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.

 

 

Créer un motif avec Adobe IllustratorNous 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

 

 

Créer un motif avec Adobe IllustratorAvec l’outil Direct Selection Tool (Touche A), on sélectionne la partie qui ne nous intéresse plus et on supprime (Touche Suppr.).

 

 

Créer un motif avec Adobe Illustrator

Créer un motif avec Adobe Illustrator
On a un petit résidu, on l’élimine également.

 

 

Créer un motif avec Adobe IllustratorNous 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.

Créer un motif avec Adobe Illustrator

À nouveau on sélectionne l’ensemble > Clique sur bouton secondaire de la souris > Ungroup. Windows : Ctrl+Shift+G / Mac : Cmd+Shift+G

Créer un motif avec Adobe IllustratorIci 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.).

 

 

Créer un motif avec Adobe Illustrator Voilà le résultat de notre objet parfaitement coupé avec des lignes propres.

 

 

Créer un motif avec Adobe Illustrator

 

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.

 

 

Créer un motif avec Adobe Illustrator

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

 

 

Créer un motif avec Adobe Illustrator

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

 

 

Créer un motif avec Adobe Illustrator

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

Créer un motif avec Adobe Illustrator

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.

 

 

Créer un motif avec Adobe Illustrator
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.

 

 

Créer un motif avec Adobe Illustrator
Avec un peu de créativité on peut avoir des résultats très sympas. Dans notre cas nous avons :

  1. Name : PatternDream (on choisit un nom pour le motif).
  2. Tyle Type: Grid.
  3. Width: Dans notre cas, pas besoin de toucher.
  4. 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.
Créer un motif avec Adobe Illustrator
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 ! :

Créer un motif avec Adobe Illustrator

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.

 

 

 

Créer un motif avec Adobe Illustrator

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.

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.