Share
Ce que vous allez créerAujourd'hui, nous allons examiner les différentes manières d'exporter des icônes à l'aide d'un outil souvent redouté, mais qui permettra à votre productivité d'atteindre un niveau supérieur une fois que vous la maîtriserez. Cet outil n’est autre que le Outil de tranche, Et croyez-moi, si vous ne l'avez jamais utilisé auparavant, vous aurez envie de lire cet article, car je vais vous expliquer tout ce qu'il y a à savoir à propos de l'exportation des icônes..
Que vous choisissiez d'utiliser un pack d'icônes prédéfini ou de repartir de zéro, nous allons vous enseigner quelques éléments clés à prendre en compte lors de l'exportation de vos précieux actifs..
Avant de passer aux techniques, je veux prendre quelques secondes pour expliquer la raison de l’écriture de cette pièce..
Donc, dans un précédent tutoriel, j'ai parlé de l'utilisation de Planches à dessin et Couches comme méthodes pour exporter nos précieuses icônes, mais pour être honnête, ces méthodes peuvent vous ralentir lorsque vous avez un paquet plus volumineux. L'idée était que je souhaitais / devais présenter un processus facile à comprendre pour les débutants, à condition qu'ils sachent utiliser les outils les plus fondamentaux d'Illustrator..
Maintenant, bien que ces méthodes n'aient peut-être pas été les meilleures parmi les meilleures en termes de productivité, elles étaient assez simples à suivre et à appliquer, vous donnant exactement le même résultat..
Certains d'entre vous pensant que le processus était trop lent et pénible, j'ai décidé d'améliorer mon jeu et de vous montrer le moyen le plus rapide d'exporter un pack d'icônes, en utilisant une méthode légèrement plus avancée..
Eh bien, j'ai peut-être dit que c'était avancé, mais pour être honnête, ce n'est pas si difficile quand on joue avec ça plusieurs fois.
Ceci étant dit, revenons à notre sujet principal et parlons un peu des tranches et de leur utilisation par Illustrator..
Vous pouvez considérer une «tranche» comme une section définie d'une œuvre d'art que vous pouvez créer afin d'exporter individuellement plutôt que d'exporter l'intégralité de l'œuvre..
Les tranches ont été initialement créées pour les concepteurs Web, mais comme la plupart des outils d'Illustrator, celui-ci a rapidement trouvé un nouvel usage: exporter des icônes..
C'est assez simple en fait. Premièrement, considérons l’Artboard comme une feuille de papier sur laquelle vous déposez vos œuvres. Désormais, lorsque vous créez une "tranche", vous délimitez en fait un segment de ce papier en créant une découpe que vous pouvez ensuite supprimer librement de la composition plus grande..
J'aime imaginer que le processus est similaire à celui de prendre un cutter et de trancher les marges tracées de ce segment, en le séparant du morceau de papier..
Illustrator attribue un numéro à chaque tranche créée, du coin supérieur gauche au coin inférieur droit. Au début, vous ne vous souciez peut-être pas trop de cette action, mais vous finirez par l'apprécier, car vous aurez une meilleure compréhension de ce qui se passe avec vos œuvres d'art..
Si vous n'avez jamais créé de tranche auparavant, ne vous inquiétez pas car c'est assez facile à faire. Vous devez connaître les trois manières de créer des tranches:
Cette première option est très facile à comprendre car elle vous permet de créer des tranches autour des limites d’un ou de plusieurs objets..
Alors, disons que nous avons deux icônes et que nous voulons découper la première.
Pour ce faire, nous allons sélectionner l'icône, puis aller à Objet> Tranche> Marque.
Cela séparera immédiatement cette icône du reste en créant une ligne de délimitation autour de celle-ci..
Même si nous avons créé une tranche pour une seule icône, Illustrator a divisé les sections restantes de l'Artboard en de plus grandes tranches, une pour chaque côté de la tranche de l'icône. Nous avons un grand pour le côté supérieur, un plus étroit pour le côté gauche, un assez large pour le côté droit et un encore plus étroit pour le côté inférieur.
Maintenant, si vous regardez de plus près votre Artboard, vous verrez peut-être que ces tranches sont numérotées, de manière assez simple, du coin supérieur gauche au coin inférieur droit. Illustrator assigne des numéros à ses tranches pour vous permettre de sélectionner celles que vous souhaitez exporter et celles qui ne le sont pas. Je vais en parler plus dans le processus d'exportation.
Conseil rapide: Comme vous pouvez le constater, la limite de la tranche créée a une forme rectangulaire, car Illustrator crée la délimitation en examinant la largeur et la hauteur totales de l'icône, et non sa forme. Cela est assez compréhensible, car si vous conceviez une page Web, il serait assez difficile de décomposer votre composition en utilisant des lignes plus organiques, puis de la reconstituer parfaitement..
Il y a plusieurs choses que vous devriez savoir lorsque vous utilisez cette méthode. Si vous ouvrez le Objet> Slice menu, vous verrez que vous avez le Faire option que nous avons déjà utilisé et un Créer à partir de la sélection un peu plus bas. Alors que les deux font la même chose quand vous n'avez qu'un seul objet sélectionné, ils se comportent complètement différemment lorsque vous avez plusieurs objets sélectionnés.
La principale différence entre les deux est que, avec Faire vous pouvez créer des tranches autour de chacun des objets sélectionnés, tandis qu'avec le Créer à partir de la sélection Option permettant à Illustrator de créer des tranches autour de la surface totale de tous les objets sélectionnés..
Maintenant, si vous deviez créer un projet Web (page Web), le Créer à partir de la sélection Cette option serait tout à fait acceptable, mais si vous créez un pack d’icônes, vous voudrez toujours l’utiliser. Faire puisque vous voudrez exporter individuellement chacune de vos icônes.
Par rapport à la méthode précédente, le Des guides l'un est plus méticuleux, car le processus vous oblige à ajouter manuellement des guides verticaux et horizontaux de chaque côté de la section de l'illustration que vous souhaitez délimiter.
Vous devez d’abord activer les règles en appuyant sur Control-R (clic droit> Afficher les règles) puis faites glisser vos guides et positionnez-les à l'endroit où vous souhaitez que les lignes de découpe tombent. Une fois que vous avez délimité votre section à l’aide des guides, vous pouvez aller à Objet> Tranche> Créer à partir de guides pour créer les tranches réelles.
Si vous examinez de près la façon dont Illustrator a ajouté des nombres aux tranches, vous verrez qu'une fois qu'une section est délimitée et attribuée, les autres seront forcées à saisir le nombre suivant, quelle que soit leur taille. En outre, il est assez intéressant de voir que les tranches sont créées autour de la surface délimitée des objets et non à l'intersection des guides..
Cette troisième méthode est probablement le "top dog" en termes de précision, car elle vous permet de cliquer et de faire glisser pour créer une sélection de tranche entièrement manuelle. Pour être honnête, il y aura des situations où vous voudrez avoir plus de contrôle sur vos tranches, mais je ne trouve pas cela très utile lorsqu'il s'agit de couper un grand pack d'icônes, car cela prendrait beaucoup de temps..
Mais, au cas où vous auriez besoin de l'utiliser, vous devriez savoir le faire. Vous devez d’abord saisir le Outil de tranche, qui est situé par défaut sur la barre latérale gauche vers sa section inférieure, juste au-dessus de la Outil à main. Une fois que vous avez sélectionné l'outil, vous pouvez vous positionner sur la section de votre illustration que vous souhaitez délimiter, puis cliquez et faites glisser pour créer une sélection qui se transformera automatiquement en une tranche lorsque vous relâchez le bouton de la souris..
Par rapport à une sélection régulière, le Outil de tranche vous permet de maintenir la Espace touche pour déplacer / repositionner votre sélection, ce qui est très utile car vous pouvez parfois trouver que vous êtes parti du mauvais pied.
Maintenant, l’avantage de cette méthode est que les tranches sont créées instantanément, sans qu’il soit nécessaire de passer à la Objet> Slice sous-menu pour Faire ou Créer une tranche de une Sélection.
Son seul inconvénient, c’est que vous n’ayez peut-être pas une précision de 100% tant que vous n’allumez pas Aperçu pixel mode (Affichage> Aperçu des pixels ou Alt-Control-Y), vous permettant de créer des sélections au pixel près, indispensables aux concepteurs d'aujourd'hui.
Jusqu'à présent, j'ai parlé des trois méthodes différentes que vous pouvez utiliser pour créer des tranches. Il est maintenant temps de voir quelle méthode est la meilleure pour exporter nos précieuses petites icônes..
Commençons par la première méthode. Comme vous vous en souvenez, celui-ci repose sur l’utilisation d’un ou de plusieurs objets pour créer les tranches..
Maintenant, disons que nous avons le même petit pack d’icônes qu’auparavant, mais cette fois-ci, nous souhaitons découper et exporter toutes les icônes composant, pas seulement une..
Eh bien, normalement, il vous suffit de sélectionner tous les éléments en appuyant sur Contrôle-A et puis aller à Objet> Tranche> Marque.
Ensuite, vous iriez à Fichier> Enregistrer pour le Web, choisir PNG comme votre format désiré,Définissez votre Exportation option de Tranches sélectionnées et enfin frappé sauvegarder.
Le fait est qu'au début, vous pourriez penser que tout s'est bien passé, mais dès que vous jetez un coup d'œil sur vos icônes (plus précisément leur taille), vous constaterez peut-être que quelque chose s'est mal passé..
C'est parce que même si vous avez utilisé une coutume la grille pour dimensionner vos icônes, les ressources elles-mêmes risquent de ne pas aller jusqu'au bout en largeur et en hauteur, et comme vous avez utilisé les icônes comme objets sélectionnés et non comme grilles, cela ne devrait pas être une surprise..
L'astuce consiste à utiliser les grilles réelles au lieu des icônes et à créer les tranches qui les entourent. De cette façon, vos icônes exportées seront exactement comme vous le souhaitez..
Maintenant, dans mon cas, par exemple, j'utilise un 48 x 48 px grille, mais j'ai un tout autour 2 px rembourrage ajouté. Sans oublier que mes icônes sont légèrement plus courtes, ayant une hauteur de seulement 40 px. Cela signifie que si je créais les tranches à l'aide des icônes elles-mêmes, puis les exportais, mes icônes seraient légèrement plus petites (44 x 40 px), Illustrator ayant utilisé le Largeur et la taille de mes actifs au lieu de mes grilles (48 x 48 px).
Cela étant dit, vous devez toujours disposer d'un second calque avec uniquement vos grilles et les utiliser pour créer les tranches afin d'exporter correctement vos ressources..
Maintenant, la chose intéressante est qu’une fois que vous créez les tranches et allez à Fichier> Enregistrer pour le Web, Illustrator vous offre la possibilité de sélectionner ou de supprimer manuellement les icônes que vous exportez. Ainsi, par exemple, si je décide que je ne veux pas sélectionner la dernière icône, je peux simplement la parcourir et cliquer une fois tout en maintenant enfoncée Décalage, et ainsi le retirer de mon exportation finale.
Par défaut, si vous sélectionnez toutes vos icônes et que vous vous en tenez à les enregistrer, Illustrator conservera toutes les tranches sélectionnées. Vous pouvez voir si une tranche est sélectionnée en regardant sa délimitation. Si la ligne autour de votre actif est rouge (tout sauf la première icône), votre objet est ajouté à la sélection finale; si c'est bleu et légèrement fané alors ce n'est pas (la première icône).
Vous pouvez désélectionner des parties de votre pack d’icônes en maintenant la touche enfoncée. Décalage clé et clic gauche sur eux. Vous pourriez vous demander pourquoi nous utilisons le Décalage clé. C'est parce qu'Illustrator les a déjà tous sélectionnés, vous devez maintenir la touche enfoncée pour que le reste des actifs soit sélectionné, sinon vous n'aurez plus qu'une icône active..
Maintenant, pour être honnête, je ne vois pas pourquoi vous le voudriez, car une fois que vous aurez terminé votre pack, je suis persuadé que vous voudrez exporter tous les actifs, pas seulement certains, mais j’ai pensé que ce serait bien de souligner que en dehors.
Dès que vous frappez le sauvegarder En cliquant sur le bouton, Illustrator vous demandera un emplacement pour stocker vos fichiers, vous donnant ainsi la possibilité de nommer vos ressources. Cette partie est un peu délicate car le nom que vous donnez sera reporté sur toutes les icônes, ce que nous voulions, mais les ressources elles-mêmes porteront le nombre de leurs tranches..
Vous pouvez simplement exporter les fichiers et les renommer, ou vous pouvez le faire directement dans le Enregistrer pour le Web popup en double-cliquant sur chaque icône sélectionnée et en lui donnant le nom souhaité.
Peu importe la méthode que vous choisissez, vous devrez quand même prendre votre temps et les parcourir toutes afin de les nommer correctement..
Maintenant, pour être honnête, je trouve que cette option est la meilleure parmi les trois car elle est ultra-rapide et n'exporte que vos icônes, donc pas de tranches d'Artboard vides qu'il faut supprimer par la suite..
Comme avec la méthode précédente, les choses sont assez simples. Commencez par créer les tranches à l’aide des guides (Objet> Tranche> Créer à partir de guides), et ensuite vous allez à Fichier> Enregistrer pour le Web.
Ici, il y a quelques choses que vous devriez savoir. Si vous quittez le Exportation option définie sur Tranches sélectionnées Comme nous l'avons fait pour la première méthode, Illustrator exportera vos icônes, mais il exportera également les tranches vides entre elles. Maintenant, si vous n'avez pas un grand ensemble, vous pouvez simplement désélectionner ces tranches, mais si vous avez quelque chose de plus grand, alors cela peut s'avérer être un processus très pénible..
D'autre part, vous pouvez simplement exporter les icônes, puis supprimer les tranches non désirées, mais encore une fois, cela peut prendre un certain temps..
Maintenant, si vous prenez en considération le fait que vous devez ajouter manuellement les guides de chaque côté de vos icônes, il est assez évident que la première méthode est plus appropriée, car elle est simple et beaucoup plus rapide..
Si vous pensiez que la méthode des guides était lente et douloureuse, alors celle-ci mettra le dernier clou dans votre cercueil car il vous faudra des années pour finir..
A présent, vous savez probablement que vous devez créer manuellement les tranches pour chacune de vos icônes, puis aller directement à Fichier> Enregistrer pour le Web.
Ici, vous serez tenté d'utiliser le Exportation de tranches sélectionnées option, mais comparée aux deux autres méthodes, cela n’exportera que la dernière tranche de votre Artboard. Cela signifie que vous devez utiliser le Toutes les tranches option, qui exportera bien sûr toutes les tranches, qu'elles soient remplies d'icônes ou simplement d'espace vide.
Enfin, vous devez parcourir tout le dossier, supprimer toutes les icônes inutiles et les renommer selon vos besoins..
Alors, est-ce que je recommande cette méthode? Non. Alors pourquoi en ai-je même parlé? Bien, j'aime être aussi explicite que possible quand on parle de ces outils et méthodes.
Donc, à ce stade, j'espère vraiment que vous saurez ce que sont les tranches, et plus important encore, comment elles sont fabriquées, afin de pouvoir tirer parti de cet outil et rendre le processus d'exportation de vos icônes rapide et sans douleur..
Maintenant, j’ai tendance à laisser la prise de décision en main, mais cette fois, je devrai être rude et vous dire d’utiliser la première méthode, celle des objets, car il est assez évident que c’est la seule marche à suivre.
Cela étant dit, je voudrais vous remercier pour votre temps et votre attention, et comme toujours, je vous parlerai la prochaine fois.
Accentsconagua