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…
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 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.
Le lien vers les autres chapitres :
- Tutoriel (1/3) : Comment créer un motif (Pattern) avec Adobe Illustrator
- Tutoriel (2/3 – Ce tutoriel) : 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
Passez la souris dessus pour voir tout le fun :).
Je préviens encore ! 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.
Dans ce chapitre on reprend le fichier du premier chapitre pour l’exporter en SVG.
1. Préparer le motif sur Adobe Illustrator pour l’exporter
On clique dessus le tout petit carré et en laissant appuyé on glisse la souris n’importe où sur l’Artboard. À droite nous avons le résultat après avoir glissé le swatch de notre motif sur l’Artboard. Seulement une partie nous intéresse. Il s’agit de celle dans le carré bleu au milieu où le motif s’affiche.
Maintenant nous allons choisir l’outil Artboard Tool (Shift + O), qui sert à changer la taille de l’Artboard.
Nous allons rétrécir l’Artboard à l’aide des Smart Guides (décrites au début de cet article) qui doivent rester actives. Le but est de rétrécir l’Artboard exactement à la même taille que la partie carrée qui nous intéresse.
Voici le résultat après avoir rétréci l’Artboard.
D’ailleurs je trouve que cette technique est un peu bancale. Je n’ai pas trouvé mieux et s’il se trouve ça existe. N’hésitez pas à poster un commentaire si vous avez mieux ;).
J’attire votre attention sur la taille de l’Artboard et par conséquence de notre motif. La taille du mien fait 23px par 24px. Le vôtre peut avoir une taille différente, ça dépend du résultat que vous cherchez à faire. Dans tous les cas vous pouvez maintenant modifier la taille du futur motif et avec lui la taille de l’Artboard.
On va changer la transparence de notre objet. Cela permet de le réutiliser facilement en le combinant avec de couleurs différentes des backgrounds. Tout ça sans être obligés à modifier le fichier SVG ;).
On ouvre la fenêtre de Transparence. Windows > Transparency (Touches Windows : Shift + Ctrl + F10 / Mac : Shift + Cmd + F10 ). On choisi transparence à 15%.
2. Exporter un motif sur Adobe Illustrator en SVG
Maintenant on va sur File > Save as… > Type > SVG, on choisit le nom et appuie sur Enregistrer.
Cette fenêtre apparait. On appuie sur More Options.
Ça a l’air compliqué la première fois, mais pas de panique. Voici les options à choisir pour bien exporter son SVG. Une petite info, sur Subsetting, on met None parce que nous exportons une image vectorielle et pas une police sans vectoriser.
3. Optimiser le fichier SVG pour le rendre plus léger
Comme d’habitude, on peut aller plus loin. Mon conseil de base est de faire optimiser le fichier par un outil, comme par exemple SVG Optimiser. À ce jour cet outil en ligne porte à confusion parce que la section « Optimise an SVG file » ne marche pas. Pensez à cliquer sur Javascript version !
Cet outil va optimiser votre fichier SVG créé avec Illustrator pour réduire sa taille. Dans mon fichier SVG je suis passée de 2.1 KB dans la version originale à 1.9 KB dans la version optimisée. Ce n’est pas une grande différence dans ce cas particulier mais il est tout de même conseillé de veiller à optimiser les fichiers, car la somme finale est celle qui change la donne.
Optimisez votre fichier et ensuite, allez voir le résultat. Une façon de le faire est de glisser le fichier sur la fenêtre de votre navigateur. On le voit à peine dans cette image, mais le motif est bien là en haut à gauche.
Et tout ça pour ça ?? Oui. Ce n’est que le début pour faire un en-tête créatif, dynamique et responsive ;).
Français 
English (UK)