Share
Pour les débutants, il peut être difficile de créer des icônes claires dans Adobe Illustrator. Avec quelques astuces simples, le panneau d'apparence et l'outil Shape Builder, vous créerez des icônes d'aspect professionnel en un rien de temps, c'est facile!
Commencez par créer un nouveau document à l’échelle de votre icône. Les tailles courantes sont 96px, 48px, 32px, 24px et 16px. Pour ce tutoriel, je vais créer une icône de taille 48 x 48px. Définissez le mode couleur sur RVB, les effets raster sur 72 ppp et les unités sur pixels.
Nous allons maintenant définir la grille en pixels, cela facilitera la planification de la conception. Accédez à Préférences> Guides et grilles et définissez le quadrillage sur 10 pixels, puis sélectionnez Affichage> Afficher la grille, puis Afficher> Aligner sur la grille..
Avec toutes mes icônes (à l'exception de celles de base), j'aime bien faire une esquisse rapide en miniature pour servir de base à ma conception. Vous pouvez dessiner avec un crayon et du papier ou bien dessiner dans Illustrator ou Photoshop. J'ai fait mon croquis dans Photoshop, puis je l'ai copié et collé sur la planche graphique dans Illustrator..
Une fois que l'esquisse est sur la planche, je peux la redimensionner, la positionner puis réduire l'opacité à 50%. Si vous utilisez une esquisse, réduisez l'opacité à 50% (ou plus si l'esquisse est un peu trop sombre), puis verrouillez le calque et créez un nouveau calque sous le calque d'esquisse, ce sera votre calque d'illustration..
Avec n'importe quelle forme complexe, vous pouvez la décomposer en formes de base. Pour cette conception, j'ai tracé la tête à l'aide de l'outil Ellipse (L), puis déplacé et pivoté les formes en position à l'aide de l'outil de sélection (V)..
Lorsque les formes de base sont approximativement à la position, utilisez l’outil Générateur de formes (Maj + M) et fusionnez-les en faisant glisser le curseur sur les formes..
Si vous avez besoin de faire des courbes subtiles, prenez l'outil Crayon (P) et tracez la forme de base. Faites un point au milieu de chaque courbe, c’est là que les lignes seront lissées.
Pour créer des courbes lisses à partir de points, utilisez l'outil Convertir les points d'ancrage (Maj + C) et faites glisser le point tout en maintenant la touche Maj enfoncée..
Pour faciliter la symétrie, utilisez l’outil Reflect (O). Pour refléter une forme, sélectionnez-la d'abord avec l'outil de sélection (V), puis sélectionnez l'outil Refléter (O) et Option + clic sur la planche de jeu où la forme reflétera. Vous devriez maintenant voir une boîte de configuration..
Définissez l’axe de la manière dont vous souhaitez refléter la forme (mon image est réfléchie verticalement) et cliquez sur Copier. Vous allez maintenant avoir une copie réfléchie de votre forme.
Combinez les formes avec l'outil Générateur de formes (Maj + M) et adoucissez les points avec l'outil Convertir les points d'ancrage (Maj + C)..
Voici la partie amusante. Il existe une astuce que vous pouvez utiliser pour prévisualiser votre icône pendant que vous travaillez. Tout d'abord, allez à Fenêtre> Nouvelle fenêtre. Cela créera une copie du document sur lequel vous travaillez..
Une fois que vous avez créé la nouvelle fenêtre, masquez la grille. Dans le menu "Affichage", définissez la fenêtre sur Taille réelle, Masquer les planches et sélectionnez Aperçu des pixels. Vous aurez maintenant un aperçu presque parfait de votre icône terminée.
La meilleure chose à propos de l’utilisation de la deuxième fenêtre est que tout ce que vous changez dans la première fenêtre changera également dans la deuxième fenêtre..
Pour créer un bouton derrière l’icône, sélectionnez l’outil Rectangle arrondi et Option + Clic sur la planche d’art, un menu de configuration s’affiche. Définissez la largeur et la hauteur sur quelques pixels de moins que la taille finale de votre icône. Cela vous donnera la possibilité d’ajouter ultérieurement des ombres portées ou des effets. Le rayon de coin sera différent en fonction de la taille de l'icône que vous créez. J'ai choisi d'utiliser 6 pixels, car mon icône est assez petite..
Une fois que vous avez créé le rectangle arrondi, sélectionnez-le et déplacez-le derrière la conception de l'icône en appuyant sur Commande + la touche de support carré gauche.
Pour créer un dégradé doux pour le rectangle arrondi, remplissez la forme à l'aide de l'outil Dégradé (G) et modifiez la nuance inférieure du dégradé en gris moyen, changez la nuance supérieure en gris très clair, puis juste sous la nuance supérieure. , cliquez sur le dégradé pour ajouter une troisième nuance. Changez la troisième nuance en une nuance légèrement plus foncée du deuxième gris
Pour ajouter un contour, allez dans le panneau Apparence (Fenêtre> Apparence) et avec le rectangle arrondi sélectionné, cliquez sur l'option Tracé, définissez la couleur sur un gris moyen (légèrement plus foncé que la nuance la plus sombre) et définissez le poids sur 1 px..
Nous allons maintenant ajouter un contour de dégradé à la forme de l'icône et enregistrer le bouton et les styles d'icône pour les conceptions futures. Premièrement, le moyen le plus simple de créer un contour de dégradé sur une forme consiste à créer un tracé décalé. Pour ce faire, sélectionnez la forme, puis, dans le panneau Apparence (Fenêtre> Apparence), ajoutez un nouveau remplissage au-dessus du premier. Faites-en une version légèrement plus sombre de votre premier dégradé.
Comme vous pouvez le voir dans l'exemple ci-dessous, j'ai utilisé un dégradé radial foncé pour l'intérieur de la forme (dégradé supérieur) et une version plus claire pour le contour (dégradé inférieur). Les deux remplissages peuvent être modifiés en sélectionnant le remplissage dans le panneau Apparence et en modifiant les paramètres à l'aide du panneau Dégradé (Fenêtre> Dégradé) et de l'outil Dégradé (G)..
Sélectionnez le dégradé supérieur dans le panneau d'apparence et allez à la Fx bouton en bas du panneau. Naviguez jusqu'à Chemin> Chemin décalé et réglez le décalage sur -1px avec des joints arrondis, puis cliquez sur OK..
Pour enregistrer une apparence en tant que nuance, accédez au panneau Apparence et faites glisser l'icône située en haut du panneau dans le panneau Styles graphiques (Fenêtre> Styles graphiques)..
Vous aurez maintenant deux styles graphiques pouvant être appliqués à différentes formes et boutons pour créer un ensemble rapide d’icônes de base. Voyez ce que vous pouvez proposer et n'hésitez pas à partager votre travail sur la page Facebook de Vectortuts +.
Si vous avez apprécié ce tutoriel, vous pourriez aimer "Comment créer un style d'icône réutilisable à l'aide du panneau d'apparence".
Accentsconagua