Share
Cet article est consacré à un sujet qui me tient à cœur mais qui, en même temps, m'a causé de graves maux de tête au tout début de mon processus de conception..
Si vous ne l'avez pas déjà deviné dans le titre, eh bien, c'est quelque chose de profondément lié au design des icônes, plus précisément aux icônes de lignes et aux deux méthodes très différentes de production: les décalages par rapport aux traits. Donc, si vous créez votre propre pack ou modifiez un pack d’icônes d’Envato Market, cet article vous aidera..
Cela étant dit, attachez-vous et passons en revue les principaux avantages et inconvénients de l’utilisation de l’une sur l’autre..
Eh bien, c'est une très bonne question, surtout si vous débutez en tant que concepteur d'icônes, car je me souviens qu'à un moment donné, je me suis posé exactement la même question..
Pour ceux qui connaissent déjà la réponse, eh bien, ne vous inquiétez pas, cela ne prendra que quelques secondes pour que tout le monde soit au courant..
Les icônes de lignes sont des icônes qui délimitent les différentes sections de blocs de construction d'une composition, en utilisant des contours plus fins ou plus épais ou des lignes..
Il existe deux principaux types d'icônes de lignes, qui sont en réalité assez similaires, la principale différence étant l'utilisation ou plutôt l'absence de formes de remplissage colorées..
Que vous décidiez d’être complètement nu et d’utiliser uniquement des lignes, ou d’ajouter des détails en remplissant l’espace vide entre ces lignes, tout dépend de vous..
À ce stade, les choses ne semblent peut-être pas si compliquées, du moins en apparence, mais dès que vous créez des icônes, les choses peuvent commencer à devenir un peu floues. C'est principalement parce qu'il y a beaucoup d'opinions qui parlent des différentes méthodes de création des icônes, mais peu d'entre elles comparent directement les deux processus..
Alors j'ai pensé que je pouvais intervenir et faire ce petit écrit afin de rendre justice aux deux méthodes.
Bon, nous savons maintenant quelles sont les icônes de ligne, mais comment pouvons-nous les créer??
Comme je l'ai mentionné dans l'introduction, il existe deux méthodes de base pour créer ces icônes. Le premier utilise des chemins de décalage, ce qui vous oblige à créer une forme de base, puis à lui ajouter un décalage, que vous transformerez en une ligne en coupant la forme la plus petite de la plus grande.
La seconde repose sur l’utilisation des formes de base d’Illustrator combinées à la Outil stylo (P) pour créer des chemins qui utilisent uniquement des traits plus minces ou plus épais, afin d'éviter tout remplissage.
Je vais passer en revue chacune d’elles dans les minutes qui suivent et essayer d’éclairer le plus possible sur chacune d’elles afin que vous puissiez choisir vous-même celle qui vous convient le mieux..
Tout d’abord, que signifie le mot «offset»??
Eh bien, lorsqu'il est utilisé comme nom, je dois dire que je n’ai vraiment trouvé aucune définition valable qui soit proche de son utilisation dans la conception. De l’autre côté, lorsque l’on utilise un adjectif, les choses commencent à prendre un sens un peu plus logique puisque «placées à l’écart de la ligne médiane; "décentré" explique mieux comment Illustrator l'utilise.
Pour être honnête, je ne peux pas dire que le manuel officiel d'Adobe Illustrator explique très bien les choses, car l'outil est répertorié sous un titre quelque peu trompeur «Décaler les objets en double», ce qui est un peu incorrect..
En effet, les objets résultants ne sont pas des doublons, puisqu’ils ont les mêmes caractéristiques (taille, couleur et forme) que leurs homologues d’origine. Je pense que le mot réel qu'ils auraient dû utiliser est "copie", puisqu'un exemplaire peut être "similaire ou identique" à l'original, ce qui est en réalité ce que l'offset d'Illustrator fait..
Je crois vraiment qu'ils auraient pu faire un meilleur travail s'ils l'avaient simplement nommé quelque chose de simple, comme «Outil de chemin de décalage», et décrit ses fonctions à l'aide de plusieurs sous-titres et sections..
Ils rendent les choses un peu plus claires une fois que vous commencez à lire le corps même du texte:
«Vous pouvez créer une réplique d'un objet, définie à partir de l'objet sélectionné d'une distance spécifiée, à l'aide de la commande Décalage chemin ou de l'effet Décalage chemin. Le décalage d'objets est utile lorsque vous souhaitez créer des formes concentriques ou effectuer de nombreuses réplications d'un objet avec des distances régulières entre chaque réplication. ”
Je trouvais toujours la définition un peu vague, j'ai donc décidé d'essayer d'expliquer le concept en examinant de près le processus réel suivi par Illustrator pour le créer..
Ainsi, un tracé décalé est fondamentalement une copie d'un objet sélectionné créé en poussant son tracé vers l'extérieur de la forme d'origine, vous offrant ainsi une version légèrement plus grande de cet objet, de forme et de couleur identiques, mais de taille différente..
Maintenant, je ne sais pas comment créer plusieurs formes concentriques, mais cet outil convient parfaitement à la création d'icônes de lignes..
Oui, il y a quelques astuces que vous devez connaître lorsque vous l'utilisez à cette fin, mais j'en parlerai dans les moments suivants..
Le processus dépend du type d’icône que vous allez créer. Si vous vous en souvenez bien, dans le premier chapitre, j'ai parlé des deux types d'icônes de ligne actuellement utilisées par les concepteurs: lignes nues pures ou icônes de ligne avec des formes de remplissage.
Puisque l'outil Tracé de décalage crée une copie de la forme d'origine, cela implique que le processus de création des lignes se concentre sur l'utilisation de deux objets, identiques en termes de forme mais de taille différente..
Quel que soit le type d’icônes de ligne avec lequel vous décidez de travailler, le processus de création du décalage réel est identique. Tout d'abord, vous créez votre forme d'origine, puis avec celle-ci sélectionnée, vous accédez à Objet> Chemin> Chemin décalé où vous serez accueilli par une petite fenêtre pop-up avec un tas d'options.
Le premier est Décalage qui, comme vous le savez déjà, contrôle la distance à laquelle Illustrator créera et positionnera le chemin de la copie.
La deuxième option est Jointures, qui contrôle l'aspect général des jointures de fin d'une forme, vous offrant les trois options suivantes:
Selon le style visuel que vous recherchez, vous pouvez choisir l’un plutôt que l’autre. Une chose que vous devriez prendre en considération est que ces Jointures ne travaillez que sur des formes qui ont des jointures pointues et non des coins arrondis.
Ainsi, par exemple, si vous avez un carré et que vous souhaitez créer un décalage et définir ses coins sur Rond, vous pouvez facilement le faire. Par contre, si vous avez un rectangle arrondi, le seul type de Décalage que vous obtiendrez est Rond peu importe ce que vous définissez le Jointures option de.
Cela ne devrait pas être un problème car je ne vois personne désireux de créer une forme de coin arrondi avec un contour pointu de coin étrange.
La troisième et dernière option est Limite d'onglet. J'ai essayé de chercher une présentation officielle de l'option sur Adobe, mais je n'ai pas pu en trouver une directe. Au lieu de cela, j'ai trouvé une très bonne explication de la Accident vasculaire cérébralde Limite d'angle de coin, qui, je suppose, fonctionne de la même manière que le Décalageest l'un:
«La limite d'onglet contrôle le moment où le programme bascule d'une jointure en onglet à une jointure en biseau (quadrillé). La limite d'onglet par défaut est 10, ce qui signifie que lorsque la longueur du point atteint dix fois l'épaisseur du trait, le programme bascule d'une jointure d'onglet à une jointure de biseau. Une limite d'onglet de 1 entraîne une jointure en biseau. ”
Si vous testez cela, vous constaterez peut-être que la valeur par défaut Limite d'onglet pour le Décalage est 4 (pas 10) mais à part ça, ils sont à peu près identiques.
Bon, nous avons probablement été un peu trop techniques sur le sujet, mais je voulais expliquer les choses de manière aussi détaillée que possible..
À ce stade, nous savons comment créer le décalage, mais comment l’utiliser pour créer l’icône de ligne réelle? Je vais d'abord vous montrer le processus pour la ligne nue.
Pour ceux qui me demandent pourquoi je les appelle des «icônes de lignes nues», disons simplement que j'ai trouvé l'expression plus simple à comprendre pour quelqu'un de novice. Cela dit, quel que soit le type d’icône que vous choisissez, qu’il soit nu ou rempli, ce sont des icônes de ligne..
Maintenant, comme je trouve généralement des exemples plus explicites que du texte pur, je vais vous guider tout au long du processus de création d'une petite icône de projet pour animaux de compagnie de votre choix..
Comme j'avais besoin de quelque chose de fondamental, qui pourrait facilement expliquer le concept, j'ai décidé de créer une petite icône de document, qui est rapide et facile à créer..
Lors de la création d'icônes, le concepteur doit décider de plusieurs choses. La première décision consiste généralement à choisir la taille de base de l'icône. Cette étape est vraiment importante car vous voudrez commencer à partir de la plus petite taille et en créer des versions plus grandes, qui, selon les besoins de votre projet, pourraient être: 32 x 32 px, 64 x 64 px, 96 x 96 px, etc.
Conseil rapide:Si vous vous demandez pourquoi vous devriez commencer par une taille plus petite et aller jusqu'à quelque chose de plus grand, alors c'est très simple: lorsque vous créez des icônes parfaitement pixelisées avec des valeurs de nombres impairs (par exemple 3) et choisissez une taille de base relativement plus grande (64 x 64 px) mais décidez ensuite d’en ajouter un plus petit (32 x 32 px) alors vous remarquerez peut-être que les choses commencent à casser. En effet, un nombre impair divisé en deux vous donnera une valeur décimale, qui ne peut pas être accrochée correctement à la Pixel Grid.
Vous pouvez en savoir plus sur le sujet en parcourant certains de mes autres tutoriels:
Dans notre cas, disons que nous voulons aller avec une base relativement importante de 96 x 96 px.
Une fois que nous avons décidé de notre taille, nous devons alors commencer à réfléchir au poids de nos lignes. Cette étape est tout aussi importante car nous devrons créer la forme principale en veillant à laisser un espace entre elle et les côtés de notre 96 x 96 px grille, car c'est là que les lignes seront effectivement positionnées.
Cet espace représentera l'épaisseur réelle de nos lignes, car nous appliquerons un chemin de décalage à la forme d'origine, puis créerons "l'icône de ligne" en découpant la plus petite forme de la plus grande en utilisant Éclaireurde Minus Front option.
Pour cet exemple, nous allons aller avec une épaisseur de 4 px,ce qui signifie que notre forme principale aura un écart de 4 px entre le haut et le bas de notre grille.
Si vous vous demandez pourquoi nous ne nous intéressons qu'aux faces supérieure et inférieure, c'est parce que les icônes de document sont généralement plus hautes mais légèrement plus étroites en termes de largeur. S'il s'agissait d'un objet différent, nous aurions peut-être dû prendre en compte les côtés gauche et droit, car vous souhaiterez que les choses soient cohérentes..
Maintenant, commençons à construire l’icône en dessinant un 64 x 88 px rectangle arrondi avec un Rayon de coin 4 px, que nous colorierons en utilisant une nuance de gris plus foncée et une position au centre de notre grille.
Comme vous pouvez le constater, les côtés supérieur et inférieur de la forme ont 4 px écart que nous allons utiliser comme valeur de notre compensation.
Alors, sélectionnons la forme et créons le décalage en allant à Objet> Chemin> Chemin décalé et en entrant 4 px dans le Décalage champ de valeur, laissant le Jointures et Limite d'onglet à leurs valeurs par défaut.
Dès qu'on clique sur D'accord, Illustrator créera notre objet offset, qui aura exactement la même forme et la même couleur que la forme d'origine de notre document..
Maintenant, pour créer le contour de la ligne, nous allons simplement sélectionner les deux formes et utiliser Éclaireurde Minus Front possibilité de découper la plus petite forme de la plus grande.
Comme vous pouvez le voir, nous avons maintenant une nouvelle forme qui a un tout autour 4 px contour épais.
Assez cool, droit?
Terminons l’icône en ajoutant quelques lignes de texte à l’aide de la touche Outil Rectangle (M) afin qu'il ressemble à un document réel. Lors de la création des formes, assurez-vous qu'elles ont le même 4 px valeur d'épaisseur comme contour principal, car les icônes de ligne sont généralement cohérentes en termes d'épaisseur.
Donc, à ce stade, vous devriez avoir une idée de base sur la façon de créer des «icônes de lignes nues» à l’aide du logiciel incroyablement puissant. Outil de chemin de décalage.
Nous allons maintenant examiner la création de la même icône de document, mais cette fois-ci, nous utiliserons des lignes combinées à des formes de remplissage..
Le processus est presque identique. La seule différence clé est que cette fois, nous ne séparerons pas la forme la plus petite de la plus grande. À la place, nous utiliserons la plus petite comme forme de remplissage et le décalage comme contour de l'icône..
Alors, créons le même 64 x 88 px rectangle arrondi avec le Rayon de coin 4 px, et le positionner vers le centre de notre grille.
Puis, avec la forme sélectionnée, allez à Objet> Chemin> Chemin décalé et lui donner un décalage de 4 px comme nous l'avons fait avec l'icône précédente.
Une fois que vous avez fait cela, colorez simplement la forme originale en utilisant une nuance de gris plus foncée pour la faire ressortir de la planche graphique, puis ajoutez les petites lignes de texte..
Comme vous pouvez le constater, les deux processus sont vraiment faciles à comprendre et à appliquer, mais vous devez être conscient de quelques points lorsque vous utilisez le Chemin de décalage outil pour créer ce type d'icônes. Nous parlerons de ces aspects dès que nous passerons au-dessus de la Coups méthode afin que nous puissions avoir une perspective plus large sur les deux.
Cette méthode est, pour de nombreux concepteurs, la "bonne", car les "icônes de ligne" doivent être créées à l'aide de lignes / chemins réels et non de formes de remplissage. C'est probablement une déclaration juste, mais soyons honnêtes, la plupart des gens qui achètent nos icônes s'en moquent bien, car ils finiront par les utiliser comme fichiers .png de toute façon..
Par rapport à la méthode précédente, le processus en lui-même n’est pas si différent, car nous utiliserons encore certains IllustrateurLes formes de base telles que le Rectangle (m) et Outil Rectangle Arrondi, mais nous ne couperons rien. Au lieu de cela, nous allons transformer les formes en lignes en supprimant leur couleur de remplissage et en leur donnant un trait plus fin ou plus épais..
Avec les formes de base, nous utiliserons également le Outil stylo (P) d'ajouter des détails et des délimitations de section aux icônes en fonction de la complexité de votre composition.
Ceci étant dit, passons en revue les processus de création d'icônes de lignes nues et pleines à l'aide de cette méthode, en créant le même petit icône de document..
Quelle que soit la manière dont vous créez ces types d’icônes, vous devrez toujours décider de leur taille de base et de l’épaisseur de trait que vous allez utiliser..
Puisque dans ce cas, nous allons créer exactement la même icône, notre taille restera la même, 96 x 96 px, ainsi que notre épaisseur de trait (4 px).
Si pour la méthode précédente, nous avions besoin de créer deux formes, pour celle-ci, nous n’aurions besoin que d’une seule, que nous transformerons en contour du document en inversant sa couleur de remplissage avec son trait..
Donc, en utilisant le Outil Rectangle Arrondi, sélectionnez la même couleur grise qu'avant, puis remplacez le remplissage par le trait en appuyant sur Shift-X. Comme vous pouvez le constater, cela supprimera toutes les couleurs de remplissage et vous permettra de tracer des chemins, ce qui est exactement ce que nous voulons..
Conseil rapide: Le Shift-X L'échange de couleur fonctionne tant que les couleurs ne sont pas affectées à la fois au fond et au contour. Si vous avez deux couleurs, elles ne seront alors inversées, ce qui n'est pas ce que nous souhaitons lorsque nous traitons des icônes de lignes. Donc, si vous avez plus qu'une couleur de remplissage, vous devez vous assurer d'enlever la seconde.
Maintenant, changez le Accident vasculaire cérébralde Poids à 4 px et commencez à dessiner la forme principale de l’icône en cliquant dessus, puis en le faisant glisser de manière à ce que 68 x 92 px forme avec un Rayon de coin de 6 px.
Si vous vous demandez pourquoi les valeurs ont changé, c'est parce qu'au lieu de créer une forme de base, puis d'ajouter un décalage, nous allons créer le contour du document directement à l'aide de traits. Maintenant, si nous examinions de près le contour créé avec la méthode du chemin de décalage, nous remarquerions qu’il a une largeur de 72 px…
… Et un extérieur Rayon de coin de 8 px avec juste 4 px pour l'intérieur.
L'explication est assez simple. Comme Illustrator aligne par défaut le trait sur l’intérieur, cela signifie que l’épaisseur de la ligne sera divisée de manière égale sur chaque côté du tracé. 2 px d'un côté et de l'autre 2 pour l'autre.
Maintenant, même si la forme a exactement la même largeur que le contour précédent créé avec la méthode offset, si on vérifie la Panneau de transformation nous verrons que c'est Largeur la valeur est en fait plus petite, car Illustrator indique la taille du chemin réel et non de l'objet. Si nous développions le chemin et le transformions en une forme, il aurait exactement les mêmes valeurs que celles créées à l'aide de la première méthode, car Illustrator les prendrait en compte. 2 px de chaque côté (68 + 4 = 72).
Par rapport à la méthode précédente où vous deviez laisser un espace qui avait exactement la même valeur que l'épaisseur de la ligne, cette fois-ci, vous devrez positionner la forme de sorte que son tracé (qui est généralement représenté par la couleur du calque) laisse un écart de juste 2 px entre les parties supérieure et inférieure de la grille.
Conseil rapide: en fonction de la Poids de votre Accident vasculaire cérébralVous devrez toujours vous assurer que, lorsque vous concevez l'icône sur la grille, vous laissez un espace vide d'une valeur égale à la moitié de celle du chemin. Poids de l'AVC, En effet, lorsque vous dessinez les formes en cliquant et en les faisant glisser, Illustrator ne compte pas le nombre de pixels qui sortent de la ligne indicatrice du tracé. Vous devez donc vous assurer de garder cela à l'esprit et de dessiner en laissant un petit espace où les côtés de votre chemin rencontrent les limites de la grille réelle, de sorte que votre conception s'insère dans cet espace..
Une fois que nous avons le contour de notre document, nous pouvons sélectionner le Outil stylo (P) et commencez à ajouter le 4 px des lignes de texte épaisses pour finir l'icône.
Maintenant que nous avons vu comment créer l'icône des lignes nues, examinons le processus de création d'icônes de ligne avec des formes de remplissage en utilisant la même méthode..
Eh bien, le processus de création de ce type d’icône est à peu près le même que celui des lignes nues. La seule différence est que vous devrez créer une copie de votre contour principal et la transformer en une forme de remplissage en échangeant sa couleur de trait avec son remplissage..
Alors, commençons par créer le contour principal en dessinant un 68 x 92 px forme avec un Rayon de coin de 6 px. Si vous vous sentez paresseux, vous pouvez simplement créer une copie de celle que nous avons déjà, car cela devrait accélérer un peu les choses..
Une fois que la forme est positionnée sur la grille, nous devons en créer une copie (Contrôle-C> Contrôle-F) et ensuite retourner son trait avec son remplissage en appuyant sur Shift-X. Ensuite, changez simplement sa couleur en utilisant le même gris foncé qu'auparavant, en veillant à l'envoyer à l'arrière à l'aide du Organiser> Envoyer à l'arrière option. Enfin, ajoutez les petites lignes de texte et vous êtes prêt à partir.
À ce stade, nous avons examiné chacune des deux méthodes que nous pouvons utiliser pour créer des icônes de ligne. Comme je l'ai promis au début de cet article, je vais maintenant parler brièvement des avantages et des inconvénients de l'utilisation d'une méthode par rapport à une autre, de sorte que vous puissiez finalement choisir celle qui vous convient le mieux..
Quel que soit le type d’icône de ligne que vous créez, le Chemin de décalage La méthode peut facilement être votre outil de recherche, et non, je ne dis pas simplement parce que je l'utilise au quotidien. Je le dis parce qu'il y a plusieurs choses qui le démarquent vraiment:
Comme avec tout outil, le Chemin de décalage a quelques inconvénients qui pour certains pourraient être un briseur d'affaire:
Même si le Chemin de décalage est un excellent outil, cela ne signifie pas la Coups méthode ne peut pas être une alternative viable. Vous devez connaître quelques avantages avant de décider si cette méthode vous convient:
Maintenant que nous avons vu les points positifs, prenons quelques secondes et parlons des points négatifs:
Voilà donc une comparaison rapide mais approfondie de deux méthodes géniales pour créer des icônes de ligne qui doivent indiquer celle qui convient le mieux à votre flux de travail..
Comme toujours, j'espère que vous avez appris quelque chose de nouveau et si vous avez des questions ou si vous voulez juste partager certaines de vos connaissances, postez votre commentaire dans la section ci-dessous et je vous reviendrai dès que je pourrai.!
Accentsconagua