Quoi de neuf pour les concepteurs Web dans Illustrator CC
Le 6 mai, Adobe a annoncé ses dernières mises à jour de son logiciel de création. Certaines de ces mises à jour ont de grandes implications sur la manière dont les utilisateurs travaillent avec leurs outils. Dans cet article, je voudrais examiner ce que Adobe a changé dans Illustrator et en particulier son impact sur les concepteurs Web.
Bien sûr, il existe plusieurs nouvelles fonctionnalités, telles que les bibliothèques AutoCAD, la surimpression des blancs, le swap de remplissage et de contour pour la saisie de texte, la prise en charge des indicateurs, les fichiers de paquet, les outils de transformation, etc. images dans les pinceaux. Si vous êtes un drogué d'Illustrator, ce sont toutes des fonctionnalités intéressantes, mais ce que je veux surtout souligner, ce sont les améliorations de base qui permettront à quiconque de créer des illustrations pour une diffusion à l'écran.
Support HiDPI
Avec l'émergence d'écrans haute résolution (tels que le Macbook Pro avec écran Retina), Illustrator CS6 et les versions antérieures semblaient floues. Les illustrations et les icônes semblaient pixélisées et le texte semblait anti-aliasé. La nature même d'Illustrator est de fournir des illustrations riches et nettes, donc cette expérience était loin d'être souhaitable. Heureusement, Adobe a amélioré Illustrator CC pour tirer parti de ces écrans haute résolution. Les illustrations seront plus belles, le texte sera net, les éléments de l'interface utilisateur (icônes, curseurs, etc.) seront plus nets. Ils ont également apporté des améliorations au processus de rendu. Il tire maintenant parti des machines multi-core et utilise le rendu par thread pour rendre les illustrations. Vous devriez voir des améliorations dans les tâches telles que le zoom, le panoramique, le copier-coller, le glisser-déposer, etc.
Guides des améliorations
Les guides sont largement utilisés lors de la planification et de la mise en page des pages. La création de maquettes dans Illustrator à l'aide de guides vous permet de placer le contenu de manière précise. Dans Illustrator CC, il existe quatre améliorations aux guides:
- Double-cliquer sur une règle crée un guide à cet emplacement spécifique sur la règle.
- Lorsque vous maintenez la touche Maj enfoncée et que vous double-cliquez sur un emplacement spécifique d'une règle, le guide créé au point s'aligne automatiquement sur la marque (division) la plus proche de la règle.
- Si vous masquez les guides (Ctrl / Cmd +;) puis choisissez de les afficher, les guides ne sont pas automatiquement verrouillés comme ils l’ont fait dans les versions précédentes.
- Créez des guides horizontaux et verticaux en une seule action. Voici comment: dans le coin supérieur gauche de la fenêtre Illustrator, cliquez sur l'intersection des règles et appuyez sur Ctrl (ou Cmd sur un Mac), puis faites glisser le pointeur de la souris vers n'importe quel emplacement de la fenêtre Illustrator. le pointeur de la souris se transforme en croix pour indiquer où un guide horizontal et vertical peut être créé; Relâchez le pointeur de la souris pour créer les guides.
Améliorations de la recherche de polices
La recherche typique par anticipation ne recherche que le premier mot du nom de la police, ce qui ne donne généralement pas les meilleurs résultats immédiatement. De plus, il peut être difficile de rechercher et de parcourir un grand nombre de polices. Une nouvelle option de recherche "Rechercher le nom complet de la police" a été ajoutée aux panneaux de contrôle et de caractères. De plus, l'intégration de TypeKit pour les polices de bureau a récemment été annoncée chez MAX. Cela signifie que vous pouvez facilement concevoir des maquettes en utilisant les mêmes polices que vous souhaitez utiliser sur le Web.
Améliorations de la recherche de couleur
Trouver une couleur particulière parmi une gamme de couleurs peut être long et frustrant. Dans Illustrator CC, des modifications ont été apportées pour faciliter la recherche et trouver une couleur. La boîte de dialogue Sélecteur de couleurs (double-cliquez sur le proxy de remplissage dans la barre d'outils) comporte désormais un widget de recherche dans la fenêtre Nuancier de couleurs. Lorsque vous cliquez sur Nuancier, une barre de recherche apparaît sous la liste de couleurs prédéfinie. Tapez le nom d'une couleur ou une valeur RVB (ou CMJN pour l'impression). Si vous tapez "bleu", toutes les nuances avec le mot bleu dans leur nom s'affichent. Tapez R = 77 pour afficher toutes les nuances de couleur rouge avec une valeur de 77 dans l’échelle RVB. Le widget de recherche est activé par défaut.
L'option de recherche dans le panneau Nuancier a également été améliorée. Le champ n'impose pas une saisie automatique. Les caractères que vous tapez ne sont plus automatiquement remplacés par la correspondance de couleur la plus proche trouvée. Vous pouvez saisir un nom de couleur ou simplement saisir les valeurs de couleur RVB (ou CMJN pour impression) pour rechercher une telle combinaison de couleurs. Le champ Rechercher n'est pas activé par défaut et doit être activé pour la première fois dans le sous-menu du panneau.
Il convient également de noter que Kuler a été intégré à Illustrator. Donc, si vous utilisez ce service Adobe pour créer des thèmes et des groupes de couleurs, vous pouvez facilement accéder à ce contenu directement dans Illustrator CC.
Panneau de propriétés CSS
Bien entendu, les améliorations apportées aux flux de travail CSS et SVG constituent la principale caractéristique du Web. Maintenant, si vous êtes un utilisateur expérimenté d'Illustrator, vous avez peut-être utilisé quelque chose dans CS5 appelé le pack HTML5, disponible à partir d'AdobeLabs. Pour quelque raison que ce soit, il n'est jamais apparu dans CS6, mais bon nombre de ces fonctionnalités sont revenues avec cette mise à jour CC. Ces fonctionnalités rappellent celles qui ont déjà été mises à la disposition de Photoshop CS6 via les mises à jour et les fonctionnalités de Creative Cloud disponibles dans Fireworks CS6.
Le panneau Propriétés CSS vous explique comment extraire le code CSS du document Illustrator et vous propose plusieurs méthodes. L'étape clé pour réaliser tout ce travail consiste cependant à nommer vos calques dans le panneau des calques. Il est certain qu'Illustrator peut générer des CSS sans que l'objet ait un nom dans le panneau des calques, mais vous vous ouvrez à une façon désorganisée et potentiellement négligente de générer du code. C'est essentiellement la façon dont Illustrator nommera les règles de classe qu'il crée pour vous. Le CSS généré peut avoir des préfixes de navigateur pour Webkit, Firefox, Opera et Internet Explorer. Il peut capturer des apparences prises en charge par CSS, telles que des dégradés et des coins arrondis.
Vous pouvez contrôler la façon dont le CSS est généré en accédant à la boîte de dialogue Options d'exportation CSS. Vous pouvez accéder à la boîte de dialogue en cliquant sur le bouton Options d'exportation CSS, qui est le premier des quatre boutons en bas à droite du panneau. Le panneau fournit plusieurs fonctions pour les workflows CSS:
- Afficher le CSS pour un objet sélectionné
- Copier le code CSS pour un objet sélectionné
- Exporter l'objet sélectionné dans un fichier CSS avec les images utilisées dans CSS
- Exporter le code CSS pour tous les objets du document dans un fichier CSS
De plus, vous pouvez exporter le code CSS pour tous les objets du document en allant dans le menu Fichier et en sélectionnant Exporter. Cela ouvrira une boîte de dialogue et à partir de là, vous pourrez choisir CSS dans le menu Format.
Si vous avez un objet, sélectionnez-le et assurez-vous qu'il est correctement nommé dans le panneau Calques. Avec cette option, vous verrez le CSS nécessaire pour générer les illustrations dans un navigateur dans le panneau des propriétés CSS.
Code SVG
Dans les versions antérieures d'Illustrator, vous deviez enregistrer un document au format SVG. Ici, dans la mise à jour CC, vous avez la possibilité de copier quelque chose dans le document, puis de vous rendre dans votre éditeur HTML préféré et d’effectuer simplement un collage. tout le code SVG sera placé dans le document. C'est un flux de travail étonnamment agréable. Si cela ne vous convient pas, la méthode la plus traditionnelle de sauvegarde du document en tant que fichier SVG est toujours disponible.
En outre, Adobe a ajouté un support pour l'exportation des styles inutilisés. Lors de la conception, vous créez souvent plusieurs styles graphiques lors de la création d'œuvres d'art. Vous ne pouvez pas utiliser tous les styles disponibles. Lorsque vous exportez des illustrations au format SVG, les styles non utilisés ne sont pas exportés. En outre, dans le code CSS exporté, les styles graphiques ne sont pas associés à des noms et il peut être difficile d’identifier le style graphique approprié.
Illustrator CC propose deux fonctionnalités pour améliorer l’expérience de l’utilisation de styles au format SVG qui traitent ces problèmes:
- Nom du style graphique. Lorsque vous choisissez d'exporter des styles graphiques, le nom de chaque style est exporté avec la définition du style dans la nomenclature CSS.
- Exporter les styles non utilisés. Lorsque vous exportez des illustrations au format SVG, vous pouvez désormais exporter des styles non utilisés. Cela permet à un autre concepteur ou développeur qui importe les styles d'utiliser les styles graphiques non utilisés dans d'autres éléments d'art.
Comment vous l'utiliserez
Ce n'est certainement pas un outil pour coder des pages Web complètes. Ce que je vois, c'est utiliser Illustrator pour créer des maquettes, puis coder manuellement la structure en HTML et le code de mise en page en CSS. Lorsqu'un ombre portée, un dégradé, un motif ou même un logo sont nécessaires, l'utilisation de ces nouvelles options d'extraction CSS et SVG sera très utile et vous permettra de gagner beaucoup de temps.
Si vous souhaitez en savoir plus sur les nouvelles fonctionnalités d’Illustrator CC, visitez la page du produit Illustrator.
Êtes-vous un aficionado Illustrator? Quelles fonctionnalités d’Illustrator CC vous intéressent le plus? Faites le nous savoir dans les commentaires.