Créer des illustrations web CSS
Créez des sites web plus rapidement en laissant Illustrator générer du code CSS et SVG pour vos illustrations.
Publié le
Avec l'édition 2014 d'Illustrator CC, les designers web gagnent en convivialité.
Cette version permet en effet de gagner du temps tout en garantissant l'intégrité des maquettes lors de l'exportation pour le web.
Illustrator CC peut analyser automatiquement les projets et extraire leurs propriétés CSS.
On peut ainsi facilement transférer les styles des projets Illustrator directement dans son éditeur HTML ou à un développeur.
Vous pouvez exporter le code des objets sélectionnés ou de la totalité d'une maquette de page à l'aide des commandes du panneau Propriétés CSS.
Vous pouvez par exemple définir des styles de caractère, puis les convertir en CSS.
Quand vous créez des styles de caractère dans Illustrator, nommez-les d'après les éléments web habituels : En-tête 1, En-tête 2, En-tête 3 et Corps.
Ensuite, pour extraire le code CSS d'après un style de caractère, affichez le panneau Propriétés CSS, puis sélectionnez un bloc de texte.
Le code CSS s'affiche alors dans le panneau.
Il peut être copié et collé dans un fichier HTML pour mettre en forme le texte pour le web.
Mon fichier HTML contient le contenu et la structure de base, mais aucune information sur le style du texte ou d'autres contenus.
Il est assez rudimentaire pour l'instant.
Si je sélectionne les styles CSS dans le panneau Propriétés CSS, je peux les copier dans mon fichier HTML pour appliquer au texte la même mise en forme que dans Illustrator.
L'exportation CSS peut inclure la couleur d'arrière-plan et d'autres attributs tels que les motifs, dégradés, contours et ombres portées.
Comme pour les styles de caractère, je peux sélectionner les éléments à mettre en forme.
Souvent, le code CSS est stocké dans un fichier CSS externe séparé qui facilite la modification simultanée de plusieurs pages.
Je vais maintenant exporter le code CSS de tous les objets de la page et l'enregistrer dans un fichier CSS séparé que je lierai directement dans le fichier HTML.
Toutefois, les illustrations complexes ne peuvent être exportées au format CSS.
Elles doivent être exportées au format SVG, compatible avec la plupart des navigateurs modernes.
Cela garantit une qualité constante, même en cas de redimensionnement.
Il suffit de sélectionner une illustration, puis de coller le code SVG généré par Illustrator dans un fichier HTML.
Voici la maquette web originale dans un navigateur.
Tous les détails ont été préservés.
Illustrator permet aussi d'enregistrer le code SVG pour qu'il soit réactif et se redimensionne en fonction du support de visionnage : terminaux mobiles ou fenêtres de navigateur redimensionnables.
Pour que le SVG soit réactif, enregistrez l'illustration au format SVG et assurez-vous que l'option Réactif soit cochée.
Voilà une illustration de logo au format SVG réactif.
La première version ne s'adapte pas à un redimensionnement de la fenêtre du navigateur, contrairement à la deuxième, enregistrée au format SVG réactif.
Le contenu SVG réactif garantit un affichage et une mise à l'échelle impeccables des illustrations dans tous les navigateurs et sur tous les appareils.
Voilà un aperçu des nombreuses nouveautés de l'édition 2014 d'Illustrator CC, qui vous donne encore plus de possibilités, de flexibilité et de maîtrise lors de la conversion d'illustrations vectorielles pour le web.
Illustrator CC est disponible uniquement via Creative Cloud.
Options d’exportation du code (0:30) ; Copie des styles CSS (1:22) ; Enregistrement des styles dans un fichier CSS (1:59) ; Copier-coller du code SVG (2:00) ; Enregistrement au format SVG réactif (2:32)
Contribution :
Rufus Deuchler
