Illustrator CC pour les designers UX

Exporter des styles CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Exportez au format CSS la totalité des éléments, des textes et des images d'un document. Ainsi, votre projet sera compatible avec les principaux navigateurs web.
04:27

Transcription

L'export CSS permet une très bonne coordination entre le designer Web, le designer d'interfaces, le designer UX et les développeurs qui eux vont avoir tendance à raisonner code. Vous n'allez effectivement pas fournir un fichier Photoshop à un développeur qui peut-être n'aura même pas d'outil pour l'ouvrir et en tout état de cause n'a pas de temps à perdre, à investir dans l'apprentissage du logiciel. Il va falloir pouvoir exporter ces éléments dans un langage qui va être compris par les développeurs et c'est là où nous allons pouvoir travailler avec les CSS. J'ai affiché ici le panneau des CSS que vous pouvez afficher par le menu *Fenêtre* *Propriétés CSS*. Et ce panneau va s'afficher normalement ancré au dock. Je l'ai simplement placé ici pour que ce soit plus lisible de manière à l'ouvrir afin que nous puissions lire les propriétés CSS. Lorsque vous allez cliquer sur un élément, vous voyez que les propriétés CSS vont apparaître ici. Vous voyez que nous avons ici une instance CSS pour un style caractère normal qui pourra être éventuellement renommé ultérieurement et on a précisé la font family, c'est-à-dire la police de caractères *Chauncy Pro*. On a précisé le font weight, c'est-à-dire la graisse, bold, gras. On a précisé le font size, c'est-à-dire la taille 48 pixels. On a également précisé la couleur qui est référencée en hexadécimal et on a également référencé la couleur en RGB. Nous avons donc ici un style CSS. Si nous cliquons sur notre chariot, nous avons également un autre style CSS qui est un style image avec une image qui a été mise en background et qui n'a pas de répétition, donc elle ne s'affichera qu'une seule fois. Et puis lorsqu'on fera notre export, non seulement on exportera cette CSS mais l'image du chariot va être créée au format PNG puisqu’ici nous avons un format PNG. Alors on peut faire des exports individuels de l'un ou de l'autre mais le plus simple ici est de tout exporter. Nous allons donc tout exporter. À partir du moment où nous allons exporter, nous allons appeler ça « tout_exporter » et nous allons choisir où nous allons l'exporter dans notre dossier Export_CSS. Et nous n'avons pas à choisir le format de fichier puisque de toute façon ça sera des CSS. Et nous allons enregistrer. Les options d'exportation vont nous permettre de décider si on veut des unités en pixels ou en points. Nous avons la possibilité d'inclure des positions absolues et d'inclure les dimensions. Il faudra vous rapprocher des développeurs afin de savoir ce qui les arrange et ensuite nous allons inclure dans les CSS tous les éléments qui nous permettent d'afficher correctement ce que nous avons créé avec différents navigateurs qui ne vont pas tous interpréter les CSS de la même manière. Le Webkit pour des périphériques mobiles de type iOS, puis Firefox, Internet Explorer et Opéra. Il faut également préciser de générer la CSS pour les objets sans nom. Effectivement, le chariot pourrait ne pas avoir de nom. Et dans certain cas, même si un objet a un nom, donc est bien référencé sur son calque avec un nom, il vaut mieux générer les CSS pour les objets sans nom, comme ça on évitera d'avoir des exports qui seront incomplets. Et puis nous allons faire OK. Notre CSS est maintenant exportée. Si nous ouvrons le dossier dans lequel nous avons enregistré notre CSS, vous voyez que nous avons ici une feuille de style CSS et nous avons l'image de notre chariot. Si on ouvre cette feuille de style CSS avec un éditeur de code, nous avons ici notre CSS qui regroupe les deux éléments. Alors, en ce qui nous concerne, nous n'avions pas une CSS très compliquée donc il n'y a pas de variantes spécifiques nécessaires pour les différents navigateurs comme nous l'avons vu Firefox, Opéra, etc. mais si nous avions eu des éléments plus compliqués sur notre document, cette CSS inclurait tous les éléments nécessaires pour que notre création s'affiche correctement avec tous les navigateurs.

Illustrator CC pour les designers UX

Prototypez des applications ainsi que des sites avec Illustrator. Fournissez des maquettes filaires servant aux tests UX, à la validation client et de support au développement.

1h14 (24 vidéos)
Aucun commentaire n´est disponible actuellement
Spécial abonnés
Date de parution :19 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !