Share
Avec ce tutoriel, je voudrais vous montrer quelques astuces pour créer des lignes et des bords nets lorsque vous travaillez avec la tendance du design plat, dans Adobe Illustrator. Les styles simples superposés et la réutilisation de styles graphiques pour optimiser votre flux de travail vous permettent de créer un ensemble d'icônes correspondantes en un rien de temps.
Pour commencer, créons un tableau d’art qui soit 500 x 500px. Puisque nos icônes sont plutôt modulaires et ont beaucoup de lignes droites, il serait préférable de travailler avec une grille pour assurer des formes nettes et parfaites. Créons donc une grille qui est 1px puis montrer et Aligner sur la grille comme indiqué ci-dessous.
Tout en créant vos icônes, essayez de garder à l’esprit l’utilisation de l’icône elle-même et de son emplacement. Pour ces icônes, je vais rester avec une taille générale de 128 x 12px ce qui est assez commun dans le monde des icônes. Comme nous suivons la tendance du design plat, nous nous en tiendrons aux couleurs de base et aux angles vifs de 45 ° avec des ombres exagérées..
Je vais créer la structure filaire de ces icônes avec des formes de base, puis ajuster le style des formes à l'aide d'une poignée de Styles graphiques. Pour commencer, sélectionnez le Outil Rectangle Arrondi et créer un rectangle qui est 20 x 80px et accrochez-le à la planche d'art.
Ensuite, sélectionnez le Outil Ellipse (L) et créer plusieurs cercles concentriques. Le premier étant 70 x 70px, puis 55 x 55px, puis 40 x 40px, et enfin 15 x 15px. Maintenant arrange-les comme tu vois ci-dessous.
Sélectionnez le Outil Rectangle (M) et en dessiner quelques-unes qui couvrent la moitié des formes que nous venons de créer. Nous les utiliserons pour supprimer des formes qui deviendront plus tard des zones ombrées. La hauteur / largeur n’importe pas, assurez-vous qu’elles s’alignent exactement au centre des autres formes. Nous allons également faire une ombre, alors dessinez un carré et faites-le pivoter 45º et placez-le de manière à ce que le bord de la diagonale rencontre le bas du cercle le plus extérieur et le rectangle arrondi du bas.
En utilisant le Éclaireur panneau, nous allons utiliser une combinaison de Unir, Minus Front, et Couper pour changer ces formes de rectangle dans nos superpositions d'ombre. Rappelez-vous que lorsque vous utilisez ces outils, cela affectera la forme. Vous devrez donc dupliquer ces objets pour créer le résultat souhaité. Dans la capture d'écran ci-dessous, j'ai appliqué la couleur rouge à l'objet et le calque blanc sera notre ombre plus tard..
Nous allons maintenant avoir besoin de faire l'ombre de la fonte. Commencez par dupliquer les formes de cercle les plus grandes et les plus grandes en bas, puis Unir les dans un objet. Dupliquez cette nouvelle forme et déplacez-la vers la gauche 15px. Visite Objet> Fusion> Options de fusion… et entrez suffisamment d'étapes pour qu'il y ait une transition en douceur (j'ai bloqué avec 50), puis Faire le mélange. À présent Développer l'objet et Unir qu'ils forment une seule forme. Zoomer sur la forme permet au Outil de sélection directe (A) et sélectionnez les points supplémentaires qui ne sont pas nécessaires et supprimez-les en veillant à fermer les chemins (Commande + J) une fois que vous avez terminé. Enfin, alignez cet objet à l’arrière de toutes vos autres formes, si ce n’est déjà fait..
Puisque nos icônes ne sont que 'Sorta Flat', faisons quelques points saillants. Sélectionnez les formes d'élément principal (celles en rouge) et dupliquez-les deux fois. En utilisant les flèches sur le clavier, déplacez la partie supérieure vers le haut 1px. La direction dans laquelle vous déplacez l'élément le plus haut dépend de la direction de la couleur. Donc, pour la forme de la poignée inférieure, déplacez-la vers la gauche, mais pour la forme ronde intérieure, déplacez-la vers la droite vers la zone rouge. Sélectionnez les deux duplications et utilisez Minus Front laisser un morceau de clou. Vous pouvez le voir en vert dans la capture d'écran ci-dessous.
Maintenant que nos formes principales sont terminées, appelons-les. Sélectionnez tous les éléments qui composent la loupe et faites-les pivoter 45º dans le sens antihoraire.
Sélectionnez maintenant tous les éléments qui constitueront les ombres. Ce sont les parties blanches sur le manche et les anneaux extérieurs, ainsi que la longue ombre portée. Remplissez-les de noir mat et déposez le Opacité à 15% et assurez-vous de supprimer toutes les frontières que vous pourriez avoir. Une fois que cela est fait, allez à Fenêtre> Styles graphiques et quand cette fenêtre apparaît cliquez sur le Nouveau bouton d'élément en bas à droite à côté de l'icône de la corbeille pour créer un style graphique à partir de cet effet.
Sélectionnez la zone de la poignée et accédez à votre Apparence (Fenêtre> Apparence) panneau et entrez les informations ci-dessous. La couleur de base sera une couleur gris plat, puis nous ajouterons un autre calque rempli d'un dégradé noir à blanc défini sur 45º avec un Opacité de 25% et Mode de fusion mis à Recouvrir. Une fois terminé, enregistrez ceci en tant que Style graphique ainsi que.
Sélectionnez le cercle le plus en bas et nous appliquerons à peu près le même style, mais nous utiliserons une nuance de gris plus claire. Encore une fois, enregistrez ceci en tant que Style graphique.
Sélectionnez le cercle intérieur et appliquez le même style plus clair que nous venons de créer, inversez le dégradé pour qu'il soit du plus clair au plus foncé..
Sélectionnez le cercle le plus intérieur qui sera notre objectif. Le même style sera utilisé pour cette forme également, mais au lieu de gris, nous utiliserons une couleur d'accentuation bleue. Assurez-vous de créer également un Style graphique de cela aussi.
Enfin, nous ajouterons nos points forts. Sélectionnez tous les éléments verts et remplissez-les de blanc plat, puis déposez le Opacité jusqu'à 25%. Assurez-vous de sauvegarder cela en tant que Style graphique ainsi que. Le dernier cercle laissé sur la forme est un point fort, donc nous allons le laisser en blanc à 100%, assurez-vous simplement et supprimez la bordure.
Créons les encoches pour la forme de notre engrenage. Sélectionnez le Outil Rectangle Arrondi et créer un rectangle qui est 20 x 110px et accrochez-le au tableau d'art. Maintenant, dupliquez cette forme trois fois de plus et faites-la pivoter à 45º angles pour faire une forme de fleur.
Ensuite, sélectionnez le Outil Ellipse (L) et créer plusieurs cercles concentriques. Le premier étant 90 x 90px, puis 60 x 60px, et enfin 30 x 30px. Maintenant arrange-les comme tu vois ci-dessous.
Sélectionnez la forme de la fleur et le cercle le plus en bas et Unir leur. Ensuite, sélectionnez le plus petit cercle et dupliquez-le. Maintenant, sélectionnez l’un des petits cercles dupliqués et les grandes formes et Minus Front laisser un ensemble au milieu.
Faisons à nouveau quelques ombres. Commencez par créer des rectangles qui couvrent la moitié des formes. Comme nous avons les équipements supplémentaires, nous ajouterons également des ombres à ceux-ci. Alignez les coins pour les ombres de la vitesse au point où le cercle rencontre la fin de la vitesse.
Maintenant, créez l'ombre portée. Dupliquer la forme de l'engrenage inférieur et le pousser 15px comme notre icône précédente. Mélange les deux formes alors Développer et Unir leur.
Maintenant, créez les points forts. N'oubliez pas de pousser un peu vers la couleur rouge
Enfin, faites pivoter les formes 45º et appliquer notre Style graphique de plus tôt. Cette icône est assez simple, nous allons donc utiliser le style gris foncé, en veillant à inverser le dégradé du cercle intérieur..
Notre icône œil utilise beaucoup de cercles. Alors, sélectionnez le Outil Ellipse (L) et créer plusieurs cercles concentriques. Le premier étant 120 x 120px, puis 50 x 50px, et enfin 20 x 20 pixels. Maintenant arrange-les comme tu vois ci-dessous.
Sélectionnez le plus grand cercle et passez au Convertir l'outil Point d'ancrage (Maj + C). Sélectionnez les deux points à gauche et à droite et cliquez pour les rendre pointus. Maintenant, sélectionnez le Outil de sélection directe (A) pousser l'ancre incurvée vers le bas 20px. Répétez cette opération pour le bas aussi, seulement, déplacez-le plutôt.
Maintenant, sélectionnez toutes ces formes ensemble et faites-le pivoter 45º dans le sens des aiguilles d'une montre. Une fois les ombres et les rehauts mis en place, nous allons les faire pivoter pour les mettre en perspective..
Sélectionnez le Outil Ellipse (L) et créer un ovale qui est 15 x 20 px et l'aligner comme on le voit ci-dessous.
Créez les ombres et les rehauts comme nous l’avons déjà fait. Séparer les formes en deux avec des rectangles et utiliser le Éclaireur panneau.
Sélectionnez à nouveau toutes nos formes et faites-les pivoter 45º, appliquez ensuite nos styles graphiques. En utilisant notre couleur grise la plus claire pour la partie principale de l’œil, le bleu avec le dégradé inversé pour l’iris et un gris foncé que nous allons maintenant présenter à la pupille..
Nous avons presque terminé notre jeu d'icônes! Créons-en un qui représente des discussions ou des commentaires. Avec le Outil Rectangle Arrondi créer un rectangle qui est 80 x 75px
Maintenant avec le Outil Rectangle (M) créer un rectangle qui est 25 x 15px puis alignez-le vers le bas et 15px de la droite.
Avec le Outil Ellipse (L) créer trois cercles qui sont 15 x 15px et alignez-les au centre du rectangle arrondi, comme indiqué ci-dessous.
Activer le Outil de sélection directe (A) et sélectionnez le point en bas à gauche qui constitue le rectangle en bas, puis supprimez-le pour former un triangle rectangle, en vous assurant de fermer le chemin lorsque vous avez terminé.
Sélectionnez le rectangle arrondi et le triangle et Unir qu'ils fassent une forme complète. Une fois réunis, dupliquez cette forme de bulle, retournez-la horizontalement et poussez-la vers le bas et à droite. 15px en dessous des autres formes.
Comme nous l'avons fait avec l'icône œil, sélectionnez toutes les formes puis faites-la pivoter 45º. Nous allons travailler sur les ombres et les rehauts dans cet angle afin que lorsque nous le retournons, ils soient correctement moulés..
Comme dans les icônes précédentes, créons des bords nets pour indiquer les ombres et les rehauts. Soyez conscient de vos ombres. Vous voulez créer l'illusion que les cercles projettent une ombre très longue sur la bulle et que la bulle supérieure projette une ombre sur la bulle inférieure. Pour les ombres portées des cercles, je vais simplement utiliser un rectangle de la même hauteur que le cercle et suffisamment large pour s’adapter à la bulle, puis retirer l’excédent..
Maintenant, faites pivoter les formes et appliquez vos styles graphiques. La bulle inférieure sera notre gris plus foncé, tandis que la bulle supérieure sera notre gris clair et les points seront notre couleur bleue accentuée.
Passons à notre horloge. Avec le Outil Ellipse (L) créer plusieurs cercles concentriques. Le premier étant 100 x 100px, puis 75 x 75px, et enfin 10 x 10px. Maintenant arrange-les comme tu vois ci-dessous.
Nous allons maintenant créer les aiguilles de l'horloge. Sélectionnez le Outil Rectangle (M) créer un rectangle qui est 10 x 30px, un autre qui est 10 x 20px, et un autre qui est 2 x 30 px. Maintenant, alignez-les de sorte que le bas des rectangles rencontre le milieu des cercles.
Basculer vers le Outil de rotation (R) et sélectionnez le long rectangle maigre. Positionnez le curseur sur le point central de la forme, puis cliquez et faites glisser ce point vers le bas du rectangle en veillant à ce qu'il reste bien au centre et se positionne en bas. Maintenant faire pivoter la forme 135º dans le sens des aiguilles d'une montre. Répétez cette étape pour le rectangle raccourci, faites-le uniquement pivoter dans le sens inverse des aiguilles d'une montre..
Sélectionnez le plus petit cercle au centre et la longue main maigre et Unir ensemble et placez-les au-dessus des autres mains. Maintenant, sélectionnez toutes les formes et faites pivoter 45º
Découpez les formes en deux comme précédemment et créez notre ombre portée ainsi que les reflets. Pour le point culminant cependant, j’ai aimé l’idée d’avoir un point culminant à l’intérieur de la zone sombre qui tomberait sur la partie inférieure. cela lui donne une dimension de dimension qui ne serait pas là devrait être utilisé comme nous le faisons.
Faites pivoter les formes et appliquez votre Styles graphiques. Le visage sera gris clair, le bord extérieur, et les aiguilles des minutes et des heures seront notre gris plus foncé et la trotteuse sera notre couleur d'accent.
Pour notre dernière icône, créons un calendrier. Sélectionnez le Outil Rectangle Arrondi et créer un rectangle qui est 90 x 80px.
Dupliquez ce rectangle arrondi et alignez-le sur le coin inférieur droit. Il n'y a pas de point, il ne s'alignera pas exactement, mais la fonctionnalité d'accrochage devrait vous permettre de savoir quand vous êtes proche. Une fois là-bas, poussez le doublon vers la gauche 20px. Maintenant dans le Éclaireur panneau choisir Diviser dans la liste des icônes en bas. Puis passez au Outil de sélection directe (A) et sélectionnez la forme extérieure inférieure et supprimez-la. Ensuite, supprimez le coin incurvé en bas à droite pour vous laisser avec un droit 45º bord.
Sélectionnez le Outil Rectangle (M) créer un rectangle qui est 90 x 25px et alignez-le vers le haut de la forme. Après avoir dupliqué le grand rectangle arrondi inférieur, sélectionnez à la fois le rectangle rectangle supérieur droit et celui arrondi et utilisez Couper du Éclaireur panneau.
Ensuite, créez deux Rectangles arrondis qui sont forts 15 x 30px et les coins sont suffisamment arrondis pour former une pilule. Puis alignez-les en haut de l'élément, comme indiqué ci-dessous.
Basculer vers le Outil de type (T) et tapez un nombre. Si vous le souhaitez, j'utiliserai le «9», car c'est le premier qui m'est venu à l'esprit. Pour la police, utilisons "Helvetica" avec une taille de 50px. Non aller à Objet> Développer et convertir le type en chemin.
Sélectionnez toutes les formes et faites-le pivoter 45º. Ajoutez maintenant vos ombres et rehauts comme nous l’avons déjà fait. Gardez à l'esprit que le pli que nous avons créé dans le coin inférieur projette une ombre. Pour cela, nous allons créer un rectangle de la même hauteur que le pli et Couper à partir d'une duplication du rectangle inférieur.
Enfin, faites pivoter les formes et appliquez vos styles graphiques. Le rectangle inférieur arrondi sera notre gris clair, le pli sera blanc plat, les pilules seront notre gris foncé, le rectangle supérieur sera notre couleur d’accent et le numéro sera le même gris foncé que celui de notre élève dans le icône des yeux que nous avons créé.
Et avec cela, notre jeu d’icônes est complet. Je suis allé de l'avant et a ajouté une couleur de fond plat en utilisant un gris foncé pour aider les icônes à se démarquer. N'hésitez pas à les espacer comme bon vous semble sur votre tableau d'art.
J'espère que j'ai pu vous montrer que même si les icônes plates sont intrinsèquement "plates", elles ne doivent pas nécessairement être dépourvues de style. Quelles autres icônes pouvez-vous venir avec?
Accentsconagua