Share
Ce que vous allez créerLe tutoriel d'aujourd'hui est un peu spécial puisque je vais vous montrer le processus derrière le pack d'icônes que j'ai eu l'honneur de créer pour notre superbe petite équipe ici à Envato Tuts +. Donc, si vous aimez le design d'icônes, ou si vous souhaitez simplement ajouter des astuces et des astuces vectorielles, prenez une tasse de café et attachez-vous, car ce didacticiel vous montrera toutes les étapes à suivre lorsque vous créer un nouveau pack d'icônes.
Si vous aimez ces sortes d'icônes, vous devriez jeter un coup d'œil sur Envato Market pour trouver son inspiration.
Comme toujours, la première chose à faire lorsque vous créez quelque chose, que ce soit un pack d'icônes ou une illustration, est de vous assurer que votre document est correctement configuré. Donc, en supposant que vous avez déjà Illustrator en marche, faisons-le en allant à Fichier> Nouveau ou en appuyant sur la Contrôle-N raccourci clavier.
Comme vous pouvez le constater, vous êtes accueilli par une petite fenêtre contextuelle proposant de nombreuses options, mais quelques-unes d'entre elles ne nous intéressent:
Et de la Avancée languette:
Conseil rapide: vous pouvez laisser le Effets raster paramètres à Écran (72 ppi) dans la mesure où cela n'affectera pas l'apparence et la qualité globale de votre conception, tant que vous n'allez pas l'imprimer. Si vous avez besoin de le faire encrer sur du papier, vous pouvez utiliser une valeur supérieure, mais uniquement si votre conception utilise Effets stylisés tel que Ombres portées, Lueur intérieure / extérieure, etc., car ceux-ci ont tendance à ressembler en pixels lors de l'impression avec une valeur ppi inférieure.
Pour ceux qui se demandent pourquoi je mets le mien à 300, bien disons simplement que pour moi, il est devenu un réflexe.
Une fois que mon document est correctement configuré, l'étape suivante que je fais habituellement consiste à créer et à étiqueter mes calques avec soin, de manière à pouvoir tout organiser de manière ordonnée et à portée de main..
Alors faisons-le en ouvrant le Couches panneau et créer cinq couches que nous nommerons comme suit:
Comme Illustrator autorise l’utilisation des grilles, sachez qu’il vous permet d’aligner votre dessin sur son contenu. Pixel Grid. Cela signifie que vos formes seront super nettes tant que vous utiliserez le Aligner sur la grille / Pixel Grid options, étant donné que chaque point d'ancrage sera positionné à l'intersection médiane de quatre pixels,.
Comme il existe différentes situations qui nécessitent des paramètres de grille différents, vous pouvez parfois vous trouver dans la position de modifier celles qui fonctionnent avec votre version d'Adobe Illustrator..
Personnellement, j’ai opté pour les réglages les plus bas et les plus précis, car j’ai l’impression d’avoir plus de contrôle sur mes créations..
Pour modifier ces paramètres, vous devez aller à Édition> Préférences> Guides et grille. À partir de là, une petite fenêtre apparaîtra, où nous devons ajuster les éléments suivants:
Une fois que vous avez ajusté ces paramètres, tout ce que vous avez à faire pour rendre tout en pixels précis est d’activer la Aligner sur la grille option située sous le Vue menu.
Conseil rapide: vous devriez savoir que le Aligner sur la grille l'option se transformera en Aligner sur Pixel chaque fois que vous entrez Mode de prévisualisation des pixels, mais c'est tout à fait bien, comme la plupart du temps vous allez en arrière avec ce mode d'affichage.
Si vous avez l'habitude de déplacer des objets à l'aide des touches fléchées directionnelles du clavier, vous pouvez modifier le Incrément de clavier à 1 px pour le rendre aussi précis que possible. Vous pouvez le faire en allant à Édition> Préférences> Général> Incrément de clavier.
Si votre version d'IA a la valeur définie sur pt, allez simplement à Unités et changer le Général et Accident vasculaire cérébral unités à Les pixels et vous êtes prêt à partir.
Vous pouvez en savoir plus sur la grille et sur la création d’illustrations parfaites au pixel près ici:
Lors de la création d'une icône, vous devez toujours prendre en compte quelques éléments, car je suis sûr qu'ils contribueront à rendre le processus de création beaucoup plus facile..
Chaque fois que vous démarrez un nouveau projet, prenez quelques minutes pour vous concentrer sur la taille de vos icônes. Cette étape est vraiment importante, car vous voudrez créer et utiliser une grille de base en choisissant l’une des tailles d’icône par défaut disponibles aujourd’hui (16 x 16 px, 32 x 32 px, 48 x 48 px, 64 x 64 px, 72 x 72 px, 96 x 96 px, 128 x 128 px, 256 x 256 px, etc.) qui vous aideront à créer un pack cohérent et cohérent. Selon les besoins de votre projet, vous pouvez vous retrouver avec des tailles plus grandes ou plus petites, voire une combinaison des deux..
Maintenant, pour notre exemple actuel, j'ai décidé d'aller avec une assez grande taille de 96 x 96 px, puisque ce type d’icône serait quelque chose que vous verriez probablement sur un site Web d’apprentissage en ligne, comme Envato Tuts+.
Par définition, une grille de base est une surface de référence délimitée avec précision qui est construite et utilisée afin de guider le concepteur tout au long du processus de création des actifs du pack d'icônes. En général, la forme de la grille de base est un carré parfait, car elle permet une meilleure planification et une meilleure structuration des formes et des lignes sur la surface, par rapport à un cercle nous permettant de contrôler totalement le nombre de pixels..
D'autre part, le cercle en tant que forme est plus utile lorsqu'il est utilisé en tant que grille de référence car il permet la création de grilles détaillées et complexes ainsi que de lignes de référence dont vous pouvez tirer parti pour créer des compositions ayant une "géométrie plus parfaite". sentir à eux.
Personnellement, je préfère limiter les formes de ma grille et utiliser uniquement des formes carrées, car je peux généralement créer des compositions plus organiques, mais ce n’est que moi. J'ai vu beaucoup de gens créer des choses incroyables à l'aide de guides très détaillés.
Pour notre exemple, nous allons garder les choses simples et construire quatre grilles de base, une pour chaque icône..
Tout d’abord, assurez-vous de vous positionner sur la couche de grille de base, puis utilisez le Outil Rectangle (M) Créons un 96 x 96 px carré, que nous colorierons avec une nuance de gris relativement claire (# E6E6E6).
Maintenant, comme j'aime bien donner un peu de rembourrage à mes icônes, nous allons créer un petit 92 x 92 px carré, que nous colorierons avec # F2F2F2 et positionnez-le par-dessus le précédent en veillant à l'aligner sur son centre.
Une fois que vous avez à la fois la grille de base et le rembourrage, regroupez les deux formes à l’aide de Contrôle-G et créer trois autres copies, que nous placerons à leur droite, à une distance de 60 px.
Dès que toutes les grilles de base sont en place, vous pouvez verrouiller le calque afin de ne pas les déplacer par inadvertance. Nous pourrons ensuite commencer à travailler sur la première icône..
Tout d’abord, assurez-vous que vous êtes sur le bon calque, puis effectuez un zoom avant pour avoir une belle vue dégagée de la première grille de base..
Nous allons commencer par créer la section inférieure arrondie, qui abrite le petit symbole vectoriel.
Tout d'abord, prenez le Outil Ellipse (L) et dessine un 60 x 60 px forme, que nous allons colorier en utilisant une teinte orange foncé # D8532A, puis positionnez-vous du côté du centre plus petit vers le bas 92 x 92 px carré, laissant un espace de 4 px entre les deux.
Puisque nous voulons que tout soit aussi précis et précis que possible, je vous recommande d’utiliser le Aperçu pixel mode (Affichage> Aperçu des pixels ou Alt-Control-Y), car il vous permettra de voir la grille de pixels sous-jacente, vous donnant un contrôle total sur le positionnement de vos formes.
Dès que vous avez la forme en place, donnez-lui un aperçu en utilisant le Chemin de décalage outil. Sélectionnez d'abord la forme, puis allez à Objet> Chemin> Chemin décalé.
Donnez-lui un décalage de 4 px.
Cela créera une nouvelle forme plus grande qui sera placée sous celle que nous avons utilisée pour la créer..
Comme vous pouvez le constater, le cercle conserve la même couleur, ce que nous souhaitons modifier, car le contour doit être clairement visible..
Alors, sélectionnons la forme et changeons sa couleur en quelque chose de plus foncé (# 232323).
Dès que nous aurons le contour, nous pourrons commencer à ajouter des détails à la pièce de la médaille et nous le ferons en créant d'abord le surlignage de la bague..
Commencez par créer une copie du cercle orange (Contrôle-C> Contrôle-F) puis en utilisant le Outil Ellipse (L) dessine un 56 x 56 px forme (dans mon exemple coloré en utilisant un orange plus foncé) que nous allons positionner sur le plus grand.
Maintenant, avec les deux formes sélectionnées, utilisez Éclaireurde Minus Front option pour créer la découpe.
Sélectionnez la forme obtenue et ajustez-la en changeant sa couleur en blanc (#ffffff) et fixant ses Mode de fusion à Recouvrir en abaissant le Opacité pour juste 30%.
Ajoutez deux rehauts diagonaux en créant un rectangle plus large et un rectangle plus étroit, que nous ferons ensuite pivoter 45° angle et ajuster en utilisant les mêmes paramètres que nous avons utilisés pour le point culminant en anneau que nous venons de créer.
Comme vous pouvez le voir clairement, les rehauts diagonaux vont au-delà de la surface de la pièce, ce que nous devons changer..
Nous le ferons en créant un 56 x 56 px cercle, que nous alignerons soigneusement sur la base plus grande de la médaille, puis avec le cercle et les faits saillants sélectionnés, nous clic droit> Make Clipping Mask.
Si vous vous demandez pourquoi j'ai utilisé un masque d'écrêtage plus petit, la réponse est que je ne voulais pas que les rehauts diagonaux chevauchent l'anneau, ce qui, comme vous pouvez le voir sur l'image ci-dessus, n'aurait pas été aussi joli..
Comme vous pouvez le constater, cela masquera automatiquement les sections des faits saillants qui se trouvaient en dehors de la base de la médaille, ce que nous voulions exactement..
Ensuite, nous ajouterons de la profondeur à la médaille en créant une série de cercles plus petits auxquels nous ajouterons une série de tons clairs et foncés..
D'abord, créons un 52 x 52 px forme (# AD4222) à laquelle nous allons ajouter une ombre en anneau suivant le même processus qu'auparavant, mais cette fois-ci, nous utiliserons Assombrir comme un Mode de fusion et garder le Opacité niveler tout le chemin jusqu'à dix%.
Continuez à ajouter des détails en créant un 44 x 44 px cercle (# D8532A) à laquelle nous ajouterons un point culminant semblable à un anneau, comme nous l'avons fait avec la plus grande section de la pièce de la médaille.
Ajoutez deux points forts en diagonale, en veillant à les masquer pour qu'ils ne chevauchent pas le cercle que nous avons créé à l'étape précédente..
Créer un 28 x 28 px cercle (# D8532A) et placez-le sur la deuxième paire de rehauts diagonaux, en vous assurant de le centrer sur le reste des formes de la pièce. Ajoutez ensuite un autre point culminant en anneau et une paire de diagonales pour un peu plus de profondeur..
Comme vous pouvez le constater, j'ai positionné chaque paire de diagonales en surbrillance de manière à donner au spectateur l'illusion d'une lumière qui rebondit sur la surface de la pièce..
Commencez à travailler sur le symbole du vecteur intérieur en créant un 32 x 32 px cercle (# AD4222) que nous transformerons en retournant son contenu avec son trait (Shift-X) et appliquer un 2 px Poids que nous alignerons vers l'extérieur. Une fois que vous avez ajusté la forme, développez-la en allant à Objet> Développer> Remplissage et contour.
Ensuite, commencez à ajouter les détails restants tels que les points d’ancrage et les poignées inférieures, à l’aide des touches Outil Rectangle Arrondi en combinaison avec Rectangle et Outil Ellipse.
Prenez votre temps et une fois que vous avez terminé, passez à l'étape suivante..
Terminez l'illustration intérieure de la médaille en ajoutant le coup de foudre. Pour ce faire, créez deux 8 x 12 px rectangle et ajustez-les en supprimant les points d’ancrage supérieur gauche et inférieur droit du premier en les sélectionnant à l’aide des touches Outil de sélection directe puis en appuyant sur Effacer.
Positionnez les deux formes résultantes de manière à ce qu'elles se chevauchent vers le centre, formant un 4 px carré où ils se croisent.
Terminez cette partie de l’icône en créant deux rehauts en forme d’étoile que nous positionnerons vers le coin supérieur droit de la médaille. Nous utiliserons des réglages légèrement différents par rapport aux points saillants précédents, car nous irons avec Lumière forte comme un Mode de fusion tout en gardant le Opacité niveau à une valeur plus élevée de 50%.
Une fois que vous avez fini de créer la section inférieure de la médaille, nous pouvons passer à la création du ruban qui le maintient normalement en place..
Commencez par créer un 38 x 47 px rectangle arrondi (# 364A5B) avec un Rayon d'angle 19 px, que nous allons ajuster en sélectionnant et en retirant son ancrage supérieur centré à l'aide du Outil de sélection directe (A).
Une fois la forme ajustée, nous devons nous assurer que son chemin est fermé en appuyant sur Contrôle-j (unir), et ensuite nous pouvons ajouter un 4 px contour (# 232323) et placez-le vers le haut de la médaille de sorte que sa partie inférieure passe au-dessous (clic droit> Organiser> Envoyer à l'arrière).
Commencez à ajouter des détails à la bande en créant deux lignes verticales et horizontales (# 232323).
Une fois que vous avez ajouté les lignes décoratives, commencez par ajouter des rehauts et une ombre et vous devriez avoir terminé avec cette icône. Cela signifie que vous pouvez regrouper toutes ses formes en utilisant le Contrôle-G raccourci clavier, et ensuite nous pouvons passer au suivant.
Une fois que vous avez fini de créer la première icône, nous pouvons commencer à travailler sur la seconde en nous positionnant sur le calque approprié..
Commencez par créer le cahier lui-même, en utilisant un 68 x 76 px rectangle arrondi avec un Rayon de coin 4 px. Colorez-le avec # 364A5B, puis sélectionnez ses bons points d'ancrage avec le Outil de sélection directe (A) et augmenter la rondeur de 4 px à 8 px. Puis ajoutez un 4 px contour (# 232323) et assurez-vous de positionner les deux formes vers le coin supérieur gauche de la grille.
Ajoutez une surbrillance complète à la section intérieure du cahier, en utilisant Recouvrir comme le Mode de fusion et en gardant le Opacité niveau à 40%.
Continuez à ajouter des détails en créant deux surbrillements verticaux et en les positionnant du côté droit du cahier..
Ajoutez quelques segments de ligne (# 232323) vers le côté gauche du cahier, de sorte qu'il donne l'impression qu'il a été cousu.
Créez un petit signet dans le coin inférieur gauche en traçant un 6 x 4 px rectangle (# D8532A) à laquelle nous ajouterons un 4 px contour et une ombre supérieure (Mode de fusion mis à Assombrir, 20% d'opacité) et deux lumières verticales.
Commencez à travailler sur la petite illustration de couverture en créant le petit chapeau et la coche verte (# 7AAC41).
Prenez une copie (Control-C)des deux faits saillants en étoile et coller (Contrôle-F) les sur le côté droit du cahier.
En utilisant le Outil Rectangle Arrondi créer un 4 x 16 px forme avec un Rayon de coin de 1 px, coloriez-le en utilisant la même couleur que celle utilisée pour le contour (# 232323) puis positionnez-le à droite du contour du cahier. Assurez-vous d’aligner les deux verticalement à l’aide du bouton Aligner panneau.
Terminez l'icône en créant un stylo d'apparence soignée et en le plaçant à droite de l'icône. Regroupez ensuite tous les éléments à l'aide du Contrôle-G raccourci pour que les choses ne finissent pas par être égarées par accident.
Comme toujours, avant de commencer, assurez-vous que vous êtes sur le bon calque, puis positionnez-vous sur la grille de base..
Nous allons commencer par créer la section supérieure du chapeau, et nous le ferons en dessinant un 78 x 42 px rectangle que nous colorierons avec # 364A5B puis positionnez-vous vers le haut de la grille de base en laissant un espace de 5 px entre les deux.
Maintenant, ajustons la forme en ajoutant un point d’ancrage au milieu de chaque côté, puis en supprimant les points d’ancrage d’angle en les sélectionnant à l’aide des touches Outil de sélection directe (A) puis en appuyant sur Effacer. Ensuite, ajoutez un 4 px contour à la forme résultante en utilisant le Chemin de décalage outil (Objet> Chemin> Chemin décalé).
Créez la section inférieure du chapeau puis commencez à ajouter des rehauts et des ombres en utilisant le même Mode de fusion et Opacité les valeurs que nous avons utilisées pour les autres icônes.
Une fois que vous avez les sections supérieure et inférieure du chapeau, vous pouvez commencer à travailler sur la petite chaîne, et nous le ferons en créant un 12 x 6 px ellipse que nous allons positionner vers le centre du sommet en forme de diamant.
Puis, en utilisant le Outil stylo,tracez une belle ligne propre en utilisant un 2 px Poids. Ajouter un 6 x 6 px cercle, que nous ajusterons en sélectionnant son point d’ancrage supérieur et en le déplaçant vers le haut en 2 px en utilisant le Outil de sélection directe (A).
Maintenant, avant de passer à la partie inférieure de l’icône, nous pouvons rapidement en obtenir une copie (Control-C) des reflets en forme d'étoile et les positionner (Contrôle-F) vers le coin inférieur droit du chapeau.
Nous pouvons maintenant commencer à travailler sur le petit diplôme plié, et nous le ferons en créant d'abord un 48 x 8 px rectangle arrondi avec un Rayon de coin 2 px. Nous allons colorier la forme en utilisant # CCD5DD et puis nous allons lui donner un aperçu de 4 px et positionnez-les vers le bas du chapeau en laissant un espace vide 3 px entre les deux.
Ensuite, créez un peu plus petit 36 x 8 px segment avec un Rayon d'angle 1 px qui ira sous la partie supérieure du diplôme plié, et colorera son remplissage en utilisant # 6E7378. Ajouter l'habituel 4 px contour (# 232323) et envoyez les deux formes à l’arrière en utilisant le bouton Organiser> Envoyer à l'arrière option.
Commencez à ajouter des détails à la partie supérieure du diplôme en créant un ensemble de faits saillants et une ombre subtile..
Ensuite, nous devons créer le petit ruban en tirant un 12 x 12 px cercle (# D8532A), à laquelle nous appliquerons un 4 px contour, puis positionnez les deux sur le segment supérieur du diplôme plié, en veillant à les centrer. Puis, en utilisant le Outil Rectangle (M), créer un 4 x 4 px carré (# AD4222) en lui donnant un contour puis en le plaçant juste sous le segment rond du ruban.
Prenez votre temps et commencez à ajouter des détails au ruban en créant quelques reflets et ombres puis en ajoutant le petit coche..
Une fois que vous avez terminé, n'oubliez pas de regrouper tous les éléments composant (Contrôle-G) et nous pourrons ensuite passer à la dernière icône de ce pack.
Nous en sommes donc à notre dernière icône, l'iMac, ce qui signifie qu'une fois encore, vous devez vous assurer que vous êtes sur la dernière couche, puis zoomer sur la grille pour pouvoir commencer à construire avec cohérence à l'esprit..
En utilisant le Outil Rectangle Arrondi, créé un 84 x 58 px forme avec un Rayon de coin 2 px, que nous colorierons avec # 364A5B, puis donnez-lui un contour en veillant à positionner les deux formes vers le haut de la grille de base.
Créez une copie de la forme bleue foncée intérieure (Contrôle-C> Contrôle-F), puis transformez-le en écran en supprimant ses points d’ancrage centre-centre et en réduisant sa hauteur à 48 px, puis enfin colorier en utilisant # 232323.
Une fois que vous avez fait cela, ajoutez un peu 4 x 4 px cercle au centre du segment visible inférieur, où vous trouverez normalement le célèbre logo d'Apple.
Déplacez-vous vers le bas et commencez à travailler sur la jambe de l’iMac en dessinant un 20 x 8 px rectangle, que nous ajusterons en sélectionnant et en poussant ses points d’ancrage supérieurs vers le centre en 1 px. Créez ensuite une copie de la forme et transformez-la en contour en modifiant sa largeur de 20 à 28 px.
Une fois que vous avez fait cela, assurez-vous de placer les deux sous l’écran en les sélectionnant et en utilisant le bouton Organiser> Envoyer à l'arrière option, pour que le dessus des formes touche le côté inférieur du remplissage interne de l'iMac.
Terminez la jambe de l'iMac en ajoutant un peu 32 x 2 px base qui a un fond plat mais un Rayon de coin 2 px sur ses points d'ancrage supérieurs. Colore la forme en utilisant # 364A5B et puis n'oubliez pas de lui donner un 4 px contour (# 232323).
Il est maintenant temps d'ajouter des rehauts et des ombres à notre petite icône. Comme d'habitude, prenez votre temps et faites ressortir ce petit morceau de matériel avec de jolis détails.
Commencez à travailler sur la petite interface en créant un 52 x 32 px rectangle arrondi avec un Rayon de coin de 1 px, coloriez-le en utilisant une nuance verte (# 7AAC41) puis positionnez la forme sur l'écran de l'iMac en laissant un espace vide 8 px entre elle et la partie supérieure du contour de l'écran.
Créer trois 2 x 2 px cercles (# 232323) positionné 2 px les uns vers les autres et placez-les vers le coin supérieur gauche de l'interface verte, en laissant un espace vide de 2 px de son côté droit et 1 px de son sommet.
Ensuite, ajoutez un 52 x 2 px séparateur de ligne (# 232323) pour séparer la barre supérieure du reste de l'interface, et un petit 22 x 2 px rectangle arrondi avec un Rayon d'angle 1 px vers la partie supérieure du bar.
Commencez à ajouter des détails à l’interface en ajoutant deux rangées de lignes de séparateur de boutons de chaque côté, ainsi qu’une ligne blanchâtre (# CCD5DD) 38 x 18 px toile vers le centre de sa partie inférieure.
Commencez à ajouter des détails tels que les hautes lumières et les ombres pour donner à l'interface un aspect plus raffiné..
À l’aide d’un pinceau artistique, ajoutez une petite diagonale vers le centre de la toile pour donner l’impression que quelqu'un dessine quelque chose.
En utilisant le Outil Rectangle Arrondi, créer quatre petits 4 x 4 px formes avec un Rayon d'angle 1 px positionné 2 px et colorez-les à l’aide d’orange (# D8532A) pour l'état latent / inactif et vert (# 7AAC41) pour l'actif. Ensuite, placez-les tous les quatre au centre de l'iMac, juste en dessous de l'interface, en laissant un espace vide entre 2 px entre les deux.
Donnez de la pop à l’écran en ajoutant deux points forts en diagonale à l’aide de Recouvrir comme le Mode de fusion et en abaissant le Opacité niveau à 40%. Une fois que vous avez les points forts en place, masquez-les à l'aide d'une copie de l'écran de l'iMac, que vous devrez ajuster en raccourci
Accentsconagua