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 :

  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.

Le lien vers les autres chapitres :

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

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG
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.

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG
Maintenant nous allons choisir l’outil Artboard Tool (Shift + O), qui sert à changer la taille de l’Artboard.

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG
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.

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG

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

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVGJ’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.

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG

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

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG

Maintenant on va sur File > Save as… > Type > SVG, on choisit le nom et appuie sur Enregistrer.

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG

Cette fenêtre apparait. On appuie sur More Options.

 

 

Comment préparer un motif sur Adobe Illustrator pour l'exporter en SVG

Ç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

Optimiser le fichier SVG

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.

 

Visualiser le fichier SVG sur son navigateur

 

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

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.