Adobe Illustrator CC pour les concepteurs Web, Créer
mise à l'échelle de neuf tranches est une bonne façon de définir des symboles à l'échelle appropriée sur votre page Web. Par exemple, je veux concevoir un graphique de bannière qui contient le texte du titre et des échelles bien si le titre est court ou long. D'habitude, je concevoir des pages web avec Lorem Ipsum parce que je n'ai pas tout le contenu final avant que je dois commencer à créer ma conception. Donc, ma proposition pourrait inclure un titre court (voir figure 5).
Ouvrez l'application de bureau Creative Cloud et sélectionnez l'onglet Polices.
Cliquez sur Parcourir les polices de caractères sur Typekit pour ouvrir le dépôt Typekit des polices Web.
Sélectionnez le filtre de bureau.
Choisissez une police et sélectionnez Utiliser les polices de caractères> sur mon bureau pour télécharger automatiquement et installer la police sur votre ordinateur local.
Pour plus d'informations, consultez mon article « Typekit, Photoshop CC - Web Design », qui décrit comment créer un flux de travail en toute sécurité web avec Photoshop CC et Typekit. Vous pouvez appliquer ce flux de travail à Illustrator CC, aussi.
Propriétés CSS EXTRACT
GÉNÉRATION DE VOS IMAGES COUCHES
Le panneau Propriétés CSS extrait les propriétés CSS pour chaque élément que vous sélectionnez dans Illustrator, mais il peut aussi générer une feuille de style CSS global et les actifs d'image de votre page. Une fois que votre conception de sites Web est prêt, tout sélectionner, puis cliquez sur Exporter la sélection CSS pour générer un fichier CSS global ainsi que des actifs d'image au format PNG. A partir de là, il vous suffit de créer le squelette HTML de votre page et importer le fichier CSS pour avoir un prototype Web de travail (voir vidéo 4).
EXPORT Scalable Vector Graphics (SVG)
Les graphiques vectoriels permettent aux concepteurs de créer des icônes, des symboles ou des logos qui ressemblent beaucoup sur tous les écrans, y compris écrans Retina. graphiques SVG échelle bien, sont généralement légers et peuvent être plus compressés par les serveurs Web.
Vous pouvez également exporter des fichiers SVG avec Illustrator CC en sélectionnant graphiques et de les copier dans le Presse-papiers. Vous pouvez ensuite coller le code SVG dans votre éditeur de code HTML favori. Bord refusion CC, par exemple, vous permet d'ajouter un fichier SVG à votre maquette en copiant et collant les graphiques d'Illustrator CC dans refusion CC (voir vidéo 5).
conception- web réactif avec CC Illustrator, vous n'êtes pas limité à une résolution spécifique. Vous pouvez créer plusieurs (un par des plans de travail page) dans un seul fichier Illustrator pour illustrer comment la page Web doit répondre à différentes résolutions d'écran. Combiné avec bord refusion CC, Illustrator permet un flux de travail puissant pour les concepteurs web sensibles.
prototypage UX et wireframing - En raison de son approche modulaire de travailler avec du texte et des symboles, Illustrator CC peuvent aider à augmenter votre productivité en tant que concepteur web. Le mode de mise à l'échelle 9 tranches est un élément clé pour mises en page de prototypage et d'application des composants de l'interface utilisateur.
polices SVG et icône - graphiques vectoriels sont un élément nécessaire pour cibler les écrans à haute densité. Illustrator CC est l'application pour dessiner rapidement des graphiques vectoriels. La sortie SVG est naturel et propre.
Flux de travail avec les développeurs web - fichiers CSS propre à l'exportation d'Illustrator CC, et même générer les actifs d'image directement au format JPEG, PNG ou SVG.
Design plat - La tendance actuelle dans la conception web est propre et minimaliste et Illustrator offre un environnement idéal pour dessiner des formes et avec les couleurs et les polices Web.