Share
Ce que vous allez créerDans le tutoriel d'aujourd'hui, nous allons apporter quelques modifications à notre programme régulier et aborder un sujet que je souhaite aborder depuis longtemps. Si vous ne l'avez pas compris dans le titre, eh bien, nous allons créer cinq icônes simples que vous pourriez transformer en icônes du lanceur Android pour toutes les applications futures que vous pourriez créer ou impliquer dans la création..
En ce qui concerne le processus, nous utiliserons votre sélection de base de formes géométriques associée au panneau Aligner et à quelques autres outils avec lesquels vous travaillez probablement déjà tous les jours..
Cela étant dit, prenez un nouveau lot de café et commençons.
Oh, et n'oubliez pas que vous pouvez toujours étendre le projet en vous dirigeant vers GraphicRiver, où vous trouverez des tonnes d'impressionnants packs d'icônes conçus par Android, qui ne demandent qu'à être cliqués..
Préféreriez-vous apprendre via le format vidéo? Découvrez le didacticiel vidéo sur la chaîne Envato Tuts + YouTube:
Puisque je suppose que vous avez déjà Illustrator en marche en arrière-plan, mettez-le en place et configurons un Nouveau document (Fichier> Nouveau ou Contrôle-N) en utilisant les paramètres suivants:
Et de la Avancée languette:
Conseil rapide: certains d'entre vous ont peut-être remarqué que le Aligner de nouveaux objets sur la grille de pixels L'option est manquante, car j'utilise la nouvelle version du logiciel CC 2017, où d'importants changements ont été apportés à la manière dont Illustrator fonctionne.gère la façon dont les formes se calent sur le sous-jacent Pixel Grid.
Étant donné que nous allons créer les icônes à l’aide d’un flux de travail parfait, nous voudrons créer un petit fichier sympa. la grille afin que nous puissions avoir un contrôle total sur nos formes, c'est-à-dire si nous utilisons l'ancienne version du logiciel.
Aller au Édition> Préférences> Guides et grille sous-menu et réglez les paramètres suivants:
Conseil rapide: vous pouvez en apprendre plus sur les grilles en lisant cet article détaillé sur le fonctionnement du système de grilles d'Illustrator.
Une fois notre grille personnalisée configurée, tout ce que nous avons à faire pour nous assurer que nos formes ont une apparence nette est de permettre la Aligner sur la grille option trouvée sous Vue menu qui se transformera en Aligner sur Pixel chaque fois que vous entrez Aperçu pixel mode.
Maintenant, si vous êtes novice dans l'ensemble du «flux de production pixel-perfect», je vous recommande fortement de découvrir comment créer un tutoriel de création de pixel parfait, ce qui vous aidera à élargir vos compétences techniques en un rien de temps..
Avec le nouveau document créé, il serait judicieux de structurer notre projet en utilisant plusieurs couches, car nous pouvons ainsi maintenir un flux de travail régulier en nous concentrant sur une icône à la fois..
Cela étant dit, amenez le Couches panneau et créer un total de six couches que nous renommerons comme suit:
le Grilles de référence (ou Grilles de base) sont un ensemble de surfaces de référence délimitées avec précision, qui nous permettent de construire nos icônes en nous concentrant sur la taille et la cohérence.
Habituellement, la taille des grilles détermine la taille des icônes réelles. Elles doivent toujours être la première décision que vous prenez lorsque vous démarrez un nouveau projet..
Maintenant, puisque nous allons créer les icônes dans l’intention de les utiliser dans le système d’exploitation Android, nous devrons suivre les instructions recommandées pour la taille et le format et configurer une grille personnalisée. 96 x 96 px avec un tout autour 4 px rembourrage.
Commencez par verrouiller tout sauf la couche de grille de référence, puis saisissez le Outil Rectangle (M) et créer un 96 x 96 px Orange (# F15A24) carré, qui aidera à définir la taille globale de nos icônes.
Ajouter un autre plus petit 88 x 88 px un (#FFFFFF) qui agira comme notre zone de dessin active, nous donnant ainsi que tout autour 4 px rembourrage.
Regroupez les deux carrés composant la grille de référence à l'aide du Contrôle-G raccourci clavier, puis créez trois copies à une distance de 24 px les uns des autres, en veillant à les aligner au centre de la Artboard.
Une fois que vous avez terminé, verrouillez le calque actuel et passez au suivant où nous commencerons à travailler sur notre première icône..
Nous allons lancer le projet en créant l'icône de la batterie, qui pourrait être utilisée pour une application d'économie d'énergie, voire un indicateur d'état, car elle est assez basique..
Cela étant dit, assurez-vous que vous êtes sur le bon calque (ce serait le deuxième), puis zoomez sur la première grille de référence afin que nous puissions commencer..
Commencez par créer le fond de l'icône à l'aide d'un 88 x 88 px cercle que nous colorierons avec # 00C853, centre en l'alignant ensuite sur la zone de dessin active sous-jacente.
Conseil rapide: Puisque Google a eu la gentillesse de publier un guide de conception des matériaux pour les couleurs, j'ai fini par mélanger et faire correspondre quelques valeurs que j'ai utilisées pour les arrière-plans..
Créez le corps principal de la batterie en utilisant un 24 x 40 px rectangle que nous colorierons avec du blanc (#FFFFFF) puis centrer le centre sur le grand cercle, à une distance de 20 px de son bord inférieur.
Transformez la forme que nous venons de créer en un contour en inversant son Remplir avec son Accident vasculaire cérébral (Shift-X), puis en fixant Poids à 4 px et son Coin à Joindre rond, tous de l'intérieur Accident vasculaire cérébral panneau.
Créez la première barre d’indicateur d’état, en utilisant soit un 12 x 4 px rectangle (#FFFFFF) ou un 12 px trait large (#FFFFFF) avec un 4 px Poids, que nous centrerons aligner sur le corps de la batterie, laissant un 4 px écart autour.
Ajoutez deux autres barres indicatrices que nous empilerons verticalement à une distance de 4 px les uns des autres en les regroupant (Contrôle-G) ensuite.
Terminez l'icône en ajoutant le capuchon supérieur, que nous allons créer en utilisant un 8 x 4 px rectangle (#FFFFFF) que nous centrerons sur le corps de la batterie, à une distance de 6 px (4 px pour le rembourrage + 2 px pour la moitié supérieure du trait).
Une fois que vous avez terminé, n’oubliez pas de sélectionner et de grouper (Contrôle-G) toutes les formes de composition de la batterie, faisant la même chose pour toutes les sections de composition de l'icône.
En supposant que vous ayez réussi à terminer la première icône, verrouillez son calque puis passez au suivant (ce serait le troisième) et commençons à travailler sur les paramètres.
Comme nous l'avons fait avec l'icône précédente, commencez par créer son arrière-plan à l'aide d'un 88 x 88 px cercle que nous colorierons avec # 2196F3, centre en l'alignant ensuite sur la zone de dessin active sous-jacente.
Commencez à travailler sur le curseur central en créant un 4 x 32 px rectangle ou un 32 px grand coup avec un 4 px épais Poids, que nous colorierons avec du blanc (#FFFFFF) puis centrer le centre sur le grand cercle, à une distance de 18 px de son bord supérieur.
Créez l'indicateur d'état du curseur à l'aide d'un 12 x 4 px rectangle (#FFFFFF) que nous centrerons sur la forme précédemment créée, à une distance de 4 px de son bord inférieur.
Ajoutez la partie inférieure du curseur en utilisant 4 x 12 px rectangle (#FFFFFF) que nous allons positionner juste sous la barre de l'indicateur d'état, en sélectionnant et en regroupant (Contrôle-G) les trois formes ensemble ensuite.
Créez la section supérieure du curseur de gauche en utilisant un plus petit 4 x 12 px rectangle (#FFFFFF), que nous alignerons sur le bord supérieur du curseur central, en le positionnant à une distance de 12 px à partir de cela.
Ajoutez l'indicateur d'état du curseur en créant un 12 x 4 px rectangle (#FFFFFF) que nous empilerons verticalement à la forme précédemment créée, à une distance de 4 px de son bord inférieur.
Terminez le curseur de gauche en ajoutant la section inférieure que nous allons créer en utilisant un 4 x 32 px rectangle (#FFFFFF) que nous allons positionner sous l'indicateur.
Une fois que vous avez terminé, sélectionnez les trois formes et regroupez-les (Contrôle-G) comme nous l'avons fait avec le curseur central.
Terminez l'icône en créant une copie (Contrôle-C> Contrôle-F) de son curseur gauche, que nous allons positionner sur le côté droit du cercle, à une distance de 4 px du curseur central.
Une fois que vous avez terminé, n’oubliez pas de sélectionner et de grouper (Contrôle-G) toutes les sections qui le composent afin qu'elles ne soient pas séparées par accident.
En supposant que vous soyez déjà passé au niveau suivant (ce serait le quatrième), zoomez sur la troisième grille de référence et commençons..
Créez le fond de l'icône en utilisant un 88 x 88 px cercle que nous colorierons avec # 7C4DFF puis centrez l'alignement sur la zone de dessin active sous-jacente.
Créez la forme principale du message de gauche en utilisant un 32 x 24 px rectangle que nous colorierons avec du blanc (#FFFFFF) puis se positionner à une distance de 20 px à partir des bords gauche et supérieur de la zone de dessin active.
Commencez à ajuster la forme que nous venons de créer, en allumant d’abord le Aperçu pixel mode (Alt-Control-Y) puis ajouter un nouveau point d'ancrageà son bord inférieur, à une distance de 10 px en partant de la gauche en cliquant à l'aide du bouton Ajouter un outil de point d'ancrage.
Une fois que vous avez terminé, n'oubliez pas de quitter Aperçu pixel mode en utilisant le Alt-Control-Y raccourci clavier.
Continuez à ajuster le rectangle en sélectionnant son point d’ancrage en bas à gauche.avec le Outil de sélection directe (A), puis en poussant vers le bas par 8 px avec l'aide du Bouge toi outil(clic droit> Transformer> Déplacer> Vertical> 8 px).
Transformez la forme obtenue en un contour en inversant son Remplir avec son Accident vasculaire cérébral (Shift-X) puis en fixant Poids à 4 px et son Coin à Joindre rond.
Ajouter la ligne de texte plus petite en créant un 10 x 4 px rectangle que nous colorierons avec du blanc (#FFFFFF) puis positionnez-le à l'intérieur de la petite boîte de message en l'alignant vers le coin supérieur gauche, en veillant à laisser un 4 px écart autour.
Ajouter la ligne de texte plus large en utilisant un 20 x 4 px rectangle (#FFFFFF) que nous alignerons à gauche sur celui précédemment créé, à une distance de 4 px de son bord inférieur.
Une fois que vous avez terminé, n'oubliez pas de sélectionner et de regrouper toutes les formes de la zone de texte à l'aide de la touche Contrôle-G raccourci clavier.
Créer une copie (Contrôle-C> Contrôle-F) du contour de la petite zone de texte, puis réfléchissez (clic droit> Transformer> Reflect> Vertical) et placez-le sur le côté droit du cercle, à une distance de 18 px à partir des bords droit et inférieur de la zone de dessin active.
Terminez l’icône en supprimant la section superposée de la zone de texte (surlignée en rouge) pour obtenir un 4 px écart entre elle et le contour de gauche. Pour ce faire, ajoutez simplement un nouveau point d'ancrageà son bord supérieur et gauche, puis retirez tous les autres.
Une fois que vous avez terminé, sélectionnez toutes les sections de l’icône et regroupez-les à l’aide des touches Contrôle-G raccourci clavier.
Puisque maintenant, vous connaissez probablement déjà l’exercice, verrouillez le calque et passez au calque suivant (ce serait le cinquième) et commençons à travailler sur notre icône d’alarme..
Créé un 88 x 88 px cercle, que nous colorierons ensuite en utilisant # FFC107, en l'alignant au centre de la zone de dessin active sous-jacente.
Créez le corps principal du réveil à l'aide d'un 40 x 40 px cercle que nous colorierons avec du blanc (#FFFFFF) puis centrer sur la zone de dessin active, à une distance de 20 px de son bord inférieur.
Transformez la forme que nous venons de créer en un contour en inversant son Remplir avec son Accident vasculaire cérébral, puis en fixant sa Poids à 4 px de l'intérieur Accident vasculaire cérébral panneau.
Sélectionnez le Outil stylo (P) et dessiner dans les mains de l'horloge en utilisant un 4 px épais Accident vasculaire cérébral avec la couleur réglée sur blanc (#FFFFFF) et le Coin à Joindre rond, en veillant à laisser un 4 px écart entre les points d'ancrage finauxet le grand cercle.
Déplacez quelques pixels vers le haut et créez un 8 x 6 px rectangle (#FFFFFF) que nous centrerons sur la partie supérieure du grand cercle en le plaçant de manière à ce qu’il finisse par recouvrir le Accident vasculaire cérébralla moitié supérieure.
Ajouter un 16 x 4 px rectangle (#FFFFFF) en plus de celui que nous venons de créer, sélectionner et regrouper (Contrôle-G) eux ensemble ensuite.
Terminez l’icône en dessinant les deux petits segments de droite en diagonale avec un 4 px Stroke avec la couleur réglée sur blanc (#FFFFFF). Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes du réveil composées ensemble, puis identiques pour l'icône entière.
Frayez-vous un chemin vers la sixième et dernière couche et finissons le projet en créant l'icône de photos..
En utilisant un 88 x 88 px cercle (# FF6F00) créer le fond de l'icône que nous centrerons sur la zone de dessin active sous-jacente.
Créez le corps principal de la photo à l'aide d'un 36 x 36 px rectangle que nous colorierons avec du blanc (#FFFFFF) et ensuite centrer sur la zone de dessin active sous-jacente, à une distance de 20 px de son bord supérieur.
Transformez la forme que nous venons de créer en un contour en inversant son Remplir avec son Accident vasculaire cérébral (Shift-X), puis en fixant Poids à 4 px et son Coin à Joindre rond de l'intérieur Accident vasculaire cérébral panneau.
En utilisant le Outil stylo (P) dessiner dans la ligne de séparation horizontale en utilisant un 4 px épais Accident vasculaire cérébral (#FFFFFF) que nous allons positionner à l’intérieur de la forme précédemment créée, à une distance de 4 px de son bord inférieur.
En utilisant le même 4 px épais Accident vasculaire cérébral (#FFFFFF) avec un Joindre rond, commencez à dessiner la première montagne en positionnant votre premier point d'ancragesur le bord gauche de la photo, à une distance de 10 px de la ligne de séparation horizontale que nous venons de créer.
Ajouter la deuxième ancreà une distance de 10 px horizontales et verticales du premier. Terminez la montagne en ajoutant la troisième et dernière ancresur la ligne de séparation horizontale, tout en maintenant la touche Décalage touche pour tracer une ligne diagonale parfaite.
Dessinez dans la deuxième plus petite montagne, en utilisant le même 4 px épais Accident vasculaire cérébral (#FFFFFF), puis une fois que vous avez terminé, sélectionnez et regroupez toutes les formes composant la photo à l'aide du bouton Contrôle-G raccourci clavier.
Créez la section inférieure de l'icône à l'aide d'un 28 x 6 px rectangle que nous colorierons avec du blanc (#FFFFFF) puis centrer le centre sur la partie inférieure du contour de la photo, à une distance de 4 px.
Terminez l’icône en transformant la forme que nous venons de créer en un 4 px contour épais (#FFFFFF) avec un Joindre rond, puis en l'ajustant en ajoutant un nouveau point d'ancrageau centre de son bord supérieur, que nous supprimerons ensuite pour ouvrir le chemin (surligné en rouge).
Sélectionnez la forme résultante et le reste des éléments composant la photo et regroupez-les (Contrôle-G) faire de même pour les sections de composition de l'icône ensuite.
J'espère que vous avez réussi à suivre chaque étape et que vous avez surtout appris quelque chose de nouveau et d'utile au cours du processus. Cela étant dit, je te verrai dans le prochain!
Accentsconagua