S'il y a un aspect de mon travail avec Illustrator que je n'aime pas vraiment, c'est de convertir des dessins au trait en images SVG pour mobile ou sur le Web. L'utilisation du menu Exporter> Exporter sous et, pour tout dire, de la fonction Enregistrer pour le Web - Exporter> Enregistrer pour le Web - n'était pas vraiment facile à utiliser.
La conversion d’un dessin au format .svg a ouvert une boîte de dialogue plutôt intimidante qui, pour les débutants en workflow, proposait un éventail confus d’options, sans oublier le fait qu’il existait un certain nombre de formats .svg dont un seul convenait. format. Une fois que vous vous êtes habitué à ce flux de travail, ce n'était pas grave, mais la courbe d'apprentissage était raide.
Tout cela a changé avec la nouvelle fonctionnalité Exporter pour les écrans - Exporter> Exporter pour les écrans - et le panneau Exporter les actifs qui ont été présentés à Illustrator CC 2015 en juin 2016. Dans ce «Comment», je vais vous montrer comment utiliser les deux. fonctionnalités. Commençons.
01 sur 04
Comment accéder à Exporter des écrans dans Adobe Illustrator CC 2015
En tant qu'utilisateur d'Illustrator depuis Illustrator 88, je pense que vous pouvez comprendre ma réticence à considérer Illustrator comme un outil de conception sérieux pour les interfaces et les projets Web et mobiles.
Lorsque les planches d'art ont été introduites dans la version 2008 de CS4, j'ai pensé que c'était un ajout intéressant à l'application. Lorsque j'ai découvert pour la première fois la fonctionnalité Enregistrer pour le Web, désormais obsolète, dans Illustrator, je l’ai trouvée intéressante mais j’ai trouvé que la même fonctionnalité dans Adobe Fireworks était davantage alignée sur les graphiques Web que dans Illustrator.
Avec l'avènement d'une approche de conception axée sur le mobile et le recours croissant aux images SVG pour les projets mobiles, Illustrator était mon outil de prédilection pour SVG et est devenu une étape importante du flux de travail de conception d'interface utilisateur.
Néanmoins, si j’avais besoin d’exporter des ressources pour mobile, Sketch 3 et Photoshop CC 2015 sont mes outils de prédilection. Illustrator est entré dans la liste en juin 2016 avec le très intéressant menu Exporter pour les écrans.
Dans l'exemple ci-dessus, j'ai deux écrans destinés à un iPhone et ils se trouvent sur des Artboards distincts nommés «Home» et «Places». Pour les imprimer, j'ai sélectionné Fichier> Exporter> Exporter pour les écrans. La boîte de dialogue Exporter pour les écrans s'ouvre.
02 sur 04Comment utiliser la boîte de dialogue Exporter pour les écrans
Lorsque la boîte de dialogue apparaît, cliquez sur chaque planche à sélectionner. Il sera alors coché. Vous pouvez également double-cliquer sur le nom d’un tableau graphique pour le sélectionner et le modifier. C'est une bonne chose de savoir si vos planches s'appellent «Artboard 1» et «Artboard 2», ce qui, franchement, ne vous dit rien.
Vous avez trois choix dans la zone Sélectionner:
- Tout: Ce choix exporte chaque planche dans le document en tant que fichier séparé.
- Intervalle: Entrez une gamme de planches à exporter. Ceci est particulièrement utile pour les projets comportant quelques dizaines de planches d’art.
- Document complet: Sélectionnez ceci et tous les plans de travail seront aplatis en un seul document.
La zone Exporter vers vous permet de choisir le dossier de destination pour la sortie. Le dossier par défaut sera l'emplacement actuel du document Illustrator.
Les formats sont où la «magie se produit. Vous remarquerez qu'il y a trois icônes: iOS. Android et une vitesse. Les deux premiers sont explicites. L'icône Engrenage ouvre les paramètres de format, ce qui vous permet de contrôler comment chaque format de fichier de la liste sera optimisé. Ces paramètres sont «spécifiques au format» et une fois que vous avez apporté vos modifications, cliquez sur le bouton Enregistrer les paramètres. Ces modifications seront appliquées aux formats à imprimer.
Une fois que vous avez choisi iOS ou Android, la liste changera pour inclure toutes les résolutions disponibles sur cette plate-forme. La liste iOS montrera les facteurs de mise à l'échelle de l'écran Retina et la sélection Android aura des échelles allant de .75x à 4x qui prennent en charge pratiquement tous les appareils Android existants.
S'il existe un format indiquant que vous souhaitez supprimer, cliquez sur le «x». Si vous souhaitez en ajouter un, cliquez sur le bouton + Ajouter une échelle.
Lorsque vous avez terminé, cliquez sur le bouton Exporter Artboard et une barre de progression vous indiquera que le processus est terminé.
03 sur 04Utilisation des fichiers d'exportation pour écrans d'Adobe Illustrator CC 2015.
Lorsque vous extrayez les résultats de l'option Exporter pour les écrans, vous découvrez qu'Illustrator a généré une version aplatie de chaque écran. En apparence, cela peut sembler un peu faible, surtout si vous vous attendiez à ce qu'Illustrator ait exporté tous les éléments sous forme d'images.
Si vous prenez du recul et réfléchissez un instant, c’est exactement ce dont vous avez besoin car vous pouvez utiliser cette sortie dans une application de prototypage telle que Adobe Experience Design, Principleformac, Atomic.io, UXPin ou une autre application de prototypage.
Dans cet exemple, j'utilise Adobe Experience Design (XD) pour créer un clic simple. La première étape du processus a consisté à sélectionner la taille de l'iPhone 6 correspondant aux dimensions de l'interface Illustrator.
Lorsque l'interface a été ouverte, j'ai sélectionné l'outil Plancher et cliqué une fois sur le presse-papiers pour ajouter un autre plan de travail. Je les ai ensuite nommées «Home» et «Places», j'ai sélectionné chaque planche et importé l'image png d'Illustrator dans la planche.
Pour créer les «zones sensibles» du clic, j'ai dessiné un rectangle sur le bouton Explorer de l'écran d'accueil et défini ses valeurs de remplissage et de bordure sur aucun en désélectionnant ces propriétés dans le panneau Propriétés. J'ai fait la même chose avec le bouton Précédent de la page Lieux.
Pour ajouter l'interactivité, j'ai sélectionné le mode Prototype puis j'ai cliqué sur le «hotspot». J'ai ensuite fait glisser la flèche - appelée fil de fer - sur la page Lieux et ai défini la cible de la transition sur les lieux, le mouvement sur Pousser à gauche, la détente pour atténuer et la durée de la transition sur 0,6 seconde.
J'ai répété cette étape avec le hotspot sur la page Lieux. La seule différence était que la transition était réglée sur Push Right. Lorsque j'ai cliqué sur le bouton Lecture, j'ai testé mon prototype.
04 sur 04Comment utiliser le panneau d'actif d'exportation dans Adobe Illustrator CC 2015
Parallèlement au menu Enregistrer pour les écrans, Adobe a également ajouté un nouveau panneau - Exportation d’actifs - supprimant un problème majeur dans le flux de production de l’UI Design.
Le point douloureux était des icônes. Illustrator est une excellente application de dessin vectoriel, mais pour générer, disons 10 icônes, une page contenant 40 ou 50 icônes requises, chacune d’elles étant enregistrée au format SVG. Cela nécessitait inévitablement plus de temps que d'habitude, grâce aux visites successives au panneau SVG. Ce point de douleur est maintenant une chose du passé.
Ce nouveau panneau se trouve dans Fenêtre> Exportation d’actifs. Lorsque le panneau s'ouvre, sélectionnez l'actif que vous souhaitez convertir au format SVG ou autre, puis faites-le glisser dans le panneau. Lorsque vous relâchez la souris, une vignette de l’actif est ajoutée au panneau. Nommez l'actif. Continuez à faire glisser des objets dans le panneau jusqu'à la fin.
Sélectionnez chaque élément dans la zone des paramètres d'exportation ou sélectionnez-les tous en maintenant la touche Maj enfoncée et en cliquant sur chacun d'entre eux. Sélectionnez votre format - dans cet exemple, j'ai choisi SVG- et cliquez sur le bouton Exporter. Les éléments sélectionnés seront exportés sous forme de fichiers SVG au même emplacement que le fichier Illustrator.
Là où tout ce processus devient encore plus simple, vous n'avez pas à utiliser le panneau Asset Export. Si vous cliquez sur le bouton Enregistrer pour les écrans au bas du panneau, la boîte de dialogue s'ouvre.
Inversement, vous pouvez cliquer sur l'onglet Actifs dans le panneau Enregistrer pour les écrans pour accéder au panneau Exporter des actifs. Par exemple, si vous avez une icône personnalisée sur une planche graphique, vous pouvez ouvrir le panneau d’exportation d’actifs dans la boîte de dialogue Enregistrer pour l’écran et faire glisser cet élément dans le panneau d’exportation d’actifs.
