Comment créer des icônes météo plates dans Adobe Photoshop

Ce que vous allez créer

Les averses d’avril apportent des fleurs de mai! On sait traditionnellement qu'avril est une période assez pluvieuse, lorsque le temps change de façon inattendue, du soleil brillant à un ciel dégagé à la pluie de chats et de chiens. Cependant, chaque temps a sa propre beauté, inspirons-nous et préparons-nous pour le printemps avec ce didacticiel amusant! Nous allons travailler dans Adobe Photoshop pour créer un ensemble d'icônes plates pour la météo d'avril, à l'aide de formes de base et de textures à l'aide de pinceaux artistiques.. 

Adobe Photoshop propose de nombreux outils et astuces permettant de créer rapidement et facilement des icônes. Vous pouvez utiliser les techniques suivantes pour créer non seulement un jeu d'icônes météo, mais également tout autre type d'icônes plates, telles que des icônes de voyage ou de camping, des icônes plates de la nature, etc..

Commençons!

1. Créer une icône arc-en-ciel coloré

Étape 1

Nous allons commencer par tracer la bande rouge extérieure de notre arc-en-ciel. Prendre le Outil Ellipse (U) et faire un 450 x 450 px cercle. Dirigez-vous vers le Propriétés panneau (Fenêtre> Propriétés) et à partir de là, nous pouvons modifier la taille de la forme, ses couleurs de position et d'autres paramètres.

Définir l'épaisseur du Accident vasculaire cérébral à 3 pt, Remplir couleur à Aucun, et ajustons la Accident vasculaire cérébral Couleur. Clique le Accident vasculaire cérébral icône pour ouvrir la fenêtre des options avec des échantillons de couleur, puis sélectionnez l’un de ces échantillons ou cliquez sur l’icône colorée située dans le coin supérieur droit pour ouvrir la fenêtre correspondante. Couleur unie fenêtre et sélectionnez la couleur plus précisément.

Étape 2

Ajoutons une autre bague. Sélectionnez le cercle rouge dans le Couches panneau et appuyez sur Contrôle-j faire une copie de la couche. presse Contrôle-t transformer la forme et faire une copie un peu plus petite, en la plaçant à l’intérieur du cercle rouge. Changer le Accident vasculaire cérébral couleur à l'orange dans le Propriétés panneau.

Étape 3

Faire une autre copie (Control-J) ajouter un troisième cercle de taille plus petite, en changeant le Accident vasculaire cérébral couleur au jaune.

Étape 4

Continuez à ajouter des cercles en les remplissant de couleurs arc-en-ciel. Vous pouvez ajouter les sept couleurs au maximum, car nous n’avons pas besoin de rendre notre arc-en-ciel super réaliste et détaillé, car notre icône sera assez petite. Même si vous ajoutez seulement trois ou quatre anneaux de couleurs différentes, cela ressemblera toujours à un arc-en-ciel.

Lorsque vous êtes satisfait du résultat, sélectionnez toutes les bagues à l'aide de la touche Outil de déplacement (V) et les unir dans un Groupe (Control-G). Dirigez-vous vers le Couches panneau et Dupliquer le groupe soit en appuyant sur Contrôle-j ou en le faisant glisser sur le Créer un Nouvelle Couche icône en bas du panneau. De cette façon, nous faisons une copie de «sauvegarde» au cas où nous déciderions de modifier certains détails de notre arc-en-ciel pendant le travail..

Sélectionnez le premier groupe et allez à Couche> Fusionner le groupe, unir tous les anneaux séparés en une couche rastérisée.

Étape 5

Maintenant, prenons le Outil de chapiteau rectangulaire (M), sélectionnez la moitié inférieure du cercle arc-en-ciel et supprimez-le.

Étape 6

Créons quelques nuages ​​gonflés au sommet de notre arc-en-ciel. Prendre le Outil Ellipse (U) et faites un petit cercle bleu dans le coin inférieur gauche de l'arc-en-ciel. Ajoutez quelques cercles supplémentaires en faisant varier la taille. Groupe (Contrôle-G) les éléments du nuage et dupliquer (Control-J) le nuage. Fixez la copie sur le côté opposé de l'arc-en-ciel.

Étape 7

Si vous souhaitez modifier quelque chose, vous pouvez toujours utiliser notre copie de «sauvegarde» et ajuster l'apparence de l'arc-en-ciel à votre guise. Dans mon cas, j'ai décidé de réduire le nombre de rayures, ce qui les rend plus épais.

Étape 8

Créons maintenant la base de notre icône. Rendons l'icône ronde en créant un 545 x 545 px cercle avec le Outil Ellipse (U). Utilisez le Propriétés panneau pour régler le Remplir couleur vert-herbe et le Accident vasculaire cérébral couleur à aucun.

Étape 9

Ajoutons un effet d'ombre longue tendance à notre icône. Faire un 350 x 350 px carré vert avec le Outil Rectangle (U) et le faire pivoter 45 degrés avec le Outil de déplacement (V). Dirigez-vous vers le Couches panneau et définir le Mode de fusion à Multiplier rendre le carré plus sombre. S'il fait trop sombre, essayez de baisser le Opacité un peu.

Étape 10

Ajustez la taille et la position du rectangle pour l’adapter aux côtés de l’arc-en-ciel, comme indiqué dans la capture d'écran ci-dessous. Placez le rectangle sous l’arc-en-ciel, soit en le faisant glisser manuellement vers le bas. Couches panneau ou en appuyant sur Contrôle-[ plusieurs fois.

Étape 11

Nous devons maintenant couper la partie du rectangle située à l'extérieur de la base du cercle de l'icône. Sélectionnez le cercle et prenez le Outil stylo (P), cliquez sur le cercle avec le bouton droit de la souris, et Faire une sélection. Quitter le Faire une sélection options dans la fenêtre pop-up par défaut et aller à Sélectionnez> Inverse.

Maintenant, nous pouvons sélectionner la couche d'ombre dans le Couches panneau et supprimer la pièce indésirable en dehors du cercle.

Étape 12

Utilisons le Outil Gomme (E) pour effacer les parties inutiles de l'ombre à l'intérieur de l'icône ainsi.

Rendre la base de l'icône et de l'ombre un peu plus claire, et le tour est joué! Notre icône arc-en-ciel plat est prête! Passons au suivant.

2. Créer une icône de soleil printanier

Étape 1

Cette fois, nous allons créer une icône de soleil. Commencez par faire la base du soleil d'un 260 x 260 px rectangle jaune.

Étape 2

Ajoutons maintenant quelques rayons de soleil stylisés. Basculer vers le Outil Polygone (U) et définir le nombre de Côtés à 3 dans le panneau de commande en haut. Faites un triangle orange et placez-le au-dessus du soleil. Sélectionnez le cercle et le triangle et cliquez sur Aligner les centres horizontaux dans le panneau de commande supérieur pour que les formes soient parfaitement centrées.

Nous pouvons aussi utiliser le Des guides marquer le centre du soleil. Pour ce faire, appuyez sur Contrôle-R pour faire le Règles visible, cliquez sur la règle supérieure et faites glisser le curseur Guider vers le bas sur l'Artboard. Faites la même chose pour le guide vertical, en croisant les lignes.

Ajoutons maintenant plus de rayons autour du soleil. Cela peut sembler délicat, mais c’est le moyen le plus simple de créer des formes répétitives avec transformation..

Sélectionnez notre triangle et appuyez sur Alt-Control-T pour Chemin de transformation libre mode. Trouvez le point de pivotement au centre du triangle et faites-le glisser vers le bas, en le plaçant au centre du cercle de soleil jaune. Vous remarquerez qu’une copie de la couche triangle a été créée automatiquement dans le Couches panneau(cela ne fonctionne que lorsque vous utilisez le Alt-Control-T clés pour la transformation). Faire pivoter le triangle 45 degrés en tenant Décalage, et appliquer la transformation.

Maintenant, appuyez sur Maj-Contrôle-Alt-T plusieurs fois pour créer six copies supplémentaires autour du soleil.

Génial! Les rayons de soleil sont prêts.

Étape 3

Nous n'avons pas besoin de Des guides plus longtemps, donc nous pouvons les désactiver dans Voir> Effacer les guides.

Étape 4

Copions la base du cercle de notre première icône et commutons sa Remplir couleur bleu ciel. Ajouter une longue ombre semi-transparente sous le soleil.

Étape 5

Effaçons cette partie de l'ombre autour du cercle de soleil jaune. Pour cela, prenez le Outil de chapiteau elliptique (M) et faites une sélection autour du cercle jaune. Aller à Sélectionner> Transformer la sélection et modifiez la sélection pour l'adapter à l'espace entre le cercle jaune et les rayons du soleil.

Appliquez la transformation et sélectionnez notre couche d'ombre dans le Couches panneau. Effacer la partie de l'ombre autour du soleil.

Terminé! Notre icône soleil est prête! Allons-nous en.

3. Dessiner une icône de nuage pluvieux

Étape 1

Commencez à former notre nuage à partir d'un 200 x 200 px cercle bleu, en utilisant le Outil Ellipse (U). Ajouter des cercles plus petits des deux côtés, formant un nuage moelleux.

Étape 2

Sélectionnez tous les cercles et allez à Calque> Fusionner les formes. Dirigez-vous vers le Couches panneau, cliquez sur la couche de nuage fusionnée avec le bouton droit de la souris et Rasteriser la couche pour le rendre éditable.

Maintenant nous pouvons utiliser le Outil de chapiteau rectangulaire (M) pour sélectionner la partie inférieure du nuage et la supprimer, rendant le bas du nuage à plat.

Étape 3

Maintenant façonnons les gouttes de pluie. Utilisez le Outil Ellipse (U) faire un 35 x 35 px cercle bleu. Prendre le Outil de conversion de point (vous pouvez le trouver dans le même menu déroulant que le Outil stylo (P)) et sélectionnez le point d'ancrage supérieur du cercle. Un seul clic le point d'ancrage pour faire un coin pointu. Enfin, faites glisser le point vers le haut, formant une goutte de pluie.

Étape 4

presse Contrôle-j plusieurs fois pour faire plus de copies des gouttes et les étendre sous le nuage, décrivant la pluie.

Étape 5

Ajoutez une base de cercle jaune à notre icône et formez une longue ombre. Notre icône nuage pluvieux est terminée! Il ne reste plus qu'une icône!

4. Faire une icône de parapluie

Étape 1

Commençons à former notre parapluie à partir d’un 430 x 430 px cercle de couleur turquoise. Pixelliser la couche dans le Couches panneau et supprimez la moitié inférieure du cercle en utilisant le Outil de chapiteau rectangulaire (M).

Étape 2

Utilisez le Outil Ellipse (U) pour former une rangée de cercles dans la partie inférieure de la forme turquoise. Ajustez la taille du groupe de cercles pour qu'il s'adapte au parapluie. Enfin, sélectionnez tous les cercles et réunissez-les en une seule forme Calque> Fusionner les formes.

Étape 3

Basculer vers le Outil stylo (P) et clic-droit les cercles à Faire une sélection. Sélectionnez le calque de forme turquoise dans le Couches panneau et supprimez la zone sélectionnée pour former la partie inférieure pointue du parapluie. 

Maintenant que nous n'avons plus besoin des cercles orange, nous pouvons également supprimer cette couche.

Étape 4

Créons le bâton du parapluie avec une poignée en bois. Prendre le Outil Rectangle Arrondi (U) et faire une forme avec aucun remplissage et un épais 4 pt Orange Accident vasculaire cérébral, comme indiqué dans l'image ci-dessous.

Clic-droit dans le Couches panneau et Rasteriser la couche pour rendre la poignée éditable.

Étape 5

Prendre le Outil de chapiteau rectangulaire (M) et supprimez la partie supérieure de la poignée, ne laissant que les petits bouts au-dessus de la forme turquoise. Ensuite, sélectionnez et supprimez la moitié gauche de la forme, formant une poignée en creux. 

Tout en maintenant le calque de poignée sélectionné, appuyez sur Shift-Control- [ pour le placer sous la forme de parapluie turquoise.

Étape 6

Terminez avec l'icône de parapluie en faisant une base de cercle rose et en ajoutant une ombre douce et plate.

Merveilleux! Notre jeu d'icônes météo d'avril est prêt. 

Cependant, ce n'est pas la fin de ce tutoriel. Vous pouvez vous arrêter à cette étape si vous aimez cette apparence épurée et minimaliste des icônes. Sinon, si vous souhaitez les rendre un peu plus détaillées et texturées, voyons comment ajuster les icônes à l'aide de certains pinceaux artistiques d'Adobe Photoshop..

5. Appliquer des textures crasseuses à l'aide de pinceaux

Étape 1

Commençons par notre icône du soleil. Dirigez-vous vers le Couches panneau et sélectionnez la base du cercle jaune du soleil. Tenir Alt et cliquez Créer un nouveau calque. Dans la fenêtre contextuelle, cochez la case Utiliser le calque précédent pour créer un masque de découpage

De cette façon, nous lions notre nouveau calque au calque solaire sélectionné (vous verrez une petite flèche à côté du nouveau calque). Cela vous permet de dessiner uniquement à l’intérieur des limites du soleil jaune.

Étape 2

Maintenant, choisissons un joli pinceau texturé pour créer un effet sale. Vous pouvez utiliser l'un de vos favoris ou certains des pinceaux Adobe Photoshop par défaut. Vous pouvez également trouver de nombreux pinceaux artistiques texturés sur le marché Envato et les essayer pour créer un nouveau look élégant..

Prendre le Pinceau (B) et clic-droit pour ouvrir la liste des pinceaux (ou aller à Fenêtre> Brosses). Cliquez sur la petite icône de rouage située dans le coin supérieur droit du menu contextuel et sélectionnez M brosses de la liste ci-dessous. Non plus Ajouter les pinceaux à votre liste existante ou Remplacer leur.

Étape 3

Trouvez le Pinceau sec 1 # 2 dans la liste et sélectionnez-le. Si vous n'avez pas ce type de pinceau dans votre version du programme, essayez d'ouvrir d'autres jeux par défaut, tels que Pinceaux secs ou d'autres pour trouver un pinceau sale similaire.

Étape 4

Sélectionnez une couleur jaune pâle dans le Couleur panneau et utilisez notre couche liée pour dessiner au-dessus du soleil, en ajoutant une texture douce et sale. Utilisez une couleur orange plus sombre pour ajouter une ombre subtile dans la partie inférieure du soleil.

Fusionner les rayons du soleil en une seule forme et ajouter un calque lié pour les rendre également texturés.

Étape 5

Passons à l'icône arc-en-ciel et texturons-la également. Crée quelques couches liées pour l'arc arc-en-ciel et pour chaque nuage et utilise la même technique avec le pinceau artistique.

Étape 6

Continuez à utiliser les pinceaux pour appliquer des textures sales à chaque icône.

Étape 7

Créer un Nouvelle Couche au dessus de Contexte superposer et dessiner des ombres texturées subtiles de couleur jaune clair sous chaque icône.

Merveilleux! Nos icônes météo d'avril sont prêtes!

Bon travail! Nous avons appris à dessiner des icônes météo plates en utilisant des formes de base et en appliquant des textures simples, à l'aide des pinceaux par défaut d'Adobe Photoshop pour rendre nos icônes plus détaillées et plus créatives.

Vous pouvez utiliser ces techniques pour développer notre ensemble, créer plus d'icônes ou créer un nouvel ensemble d'un thème différent..

Bonne chance!