Comment créer des icônes d'espace plat élégantes dans Adobe Photoshop

Ce que vous allez créer

Inspirés par les événements récents dans l'exploration et les découvertes spatiales, nous allons suivre un processus passionnant et créer des icônes d'espace de style plat à la mode avec des effets d'ombre longs dans Adobe Photoshop, en utilisant des opérations de formes et de chemins simples. 

Si vous voulez avoir une idée des possibilités, consultez la gamme d'icônes spatiales sur Envato Market..

1. Faire une icône de fusée spatiale

Voici l'exemple de palette que nous appliquerons à nos formes. J'ai sélectionné des couleurs estompées pour créer un effet rétro, ce qui en fait une belle combinaison avec des images à plat. Vous pouvez enregistrer cette palette sur votre ordinateur, l'ouvrir dans Photoshop et en sélectionner directement la couleur à l'aide du bouton Outil Pipette (I) ou dans le Remplir panneau pour les formes de base.

Étape 1

Tout d'abord, créons la base. Nos icônes vont être rondes, alors choisissez le Outil Ellipse (U) des formes de base dans le Outils panneau. Cliquez sur votre Artboard pour afficher le menu des options contextuelles et définir le Largeur et la taille de votre base d'icônes à 512x512 px. Maintenant nous avons un cercle pair. Remplissons-le de couleur bleu foncé, qui rappelle l'espace profond. Toujours avec le Outil Ellipse (U) sélectionnez le panneau de commande ci-dessus et cliquez sur le bouton Remplir bouton. Là, vous pouvez sélectionner l’une des couleurs de nuance par défaut ou définir votre propre couleur si vous cliquez sur l’icône carré multicolore dans la fenêtre contextuelle. Remplir menu.

Étape 2

Nous devons maintenant créer la base de la fusée. Commencez par placer une ellipse blanche écrasée au milieu de votre icône. Prendre le Outil de sélection directe (A) et cliquez sur le bord de l'ellipse créée pour afficher son tracé et ses points d'ancrage. Basculer vers le Outil de conversion de point (vous pouvez le trouver dans le même menu que le Outil stylo (P)) et cliquez sur le point d'ancrage supérieur pour en faire un angle aigu.

Étape 3

Garder la base de la fusée sélectionnée, aller à Opérations sur les chemins dans le panneau de configuration de la forme ci-dessus et sélectionnez Zones de forme d'intersection. Alors prenez le Outil Rectangle (U) et dessinez un rectangle, recouvrant la majeure partie de la fusée, mais laissant un petit morceau en bas. À la suite de cette opération, tout ce qui se trouve en dehors des limites du rectangle deviendra invisible. De cette façon, nous avons coupé la partie inférieure de la fusée.

Étape 4

Faisons en sorte qu'une moitié de notre fusée soit légèrement ombragée. Tout d'abord, allumez le Guides intelligents dans Affichage> Afficher> Guides intelligents; ils vous aideront à placer vos formes dans les positions appropriées. Continuez en faisant un rectangle de couleur gris clair et placez-le au-dessus de la fusée, en couvrant son côté droit.

Étape 5

Nous devons maintenant cacher ces parties du rectangle en dehors de la base de la fusée. Cela peut sembler un peu délicat au début, mais il vous suffit de faire les actions suivantes dans le bon ordre. 

Tout d’abord, maintenez la Contrôle clé et Cliquez sur sur la couche de fusée dans votre Couches panneau. Une fois que vous faites cela, vous verrez la sélection de fourmis en marche le long des limites de votre fusée. Maintenant, tout ce que vous avez à faire est de sélectionner le calque gris du rectangle et de cliquer sur le bouton Ajouter un masque icône dans le panneau inférieur de la Couches panneau. De cette façon, vous créez un masque, lié à votre calque, qui masque toutes les pièces inutiles en dehors de la sélection..

Étape 6

Prendre le Outil Ellipse (U) et ajoutez un cercle pair, formant l'enlumineur de notre fusée. Créons également la partie intérieure de celui-ci, le verre lui-même. presse Contrôle-j dupliquer la couche illuminateur. Maintenant, appuyez sur Contrôle-t transformer la forme. Dirigez-vous vers le panneau de commande ci-dessus et réduisez le Largeur et la taille du cercle à 70%.

Remplissez la partie interne de l’illuminateur avec une couleur bleu grisâtre pâle, en préservant le style rétro de notre palette de couleurs, et ajoutez un injecteur au bas de notre fusée avec le Outil Rectangle Arrondi (U).

Étape 7

Ajoutons les ailerons à notre fusée pour la rendre plus détaillée. Commencez par former un cercle uniforme de couleur rouge fanée et faites glisser son point d’ancrage inférieur avec le Outil de sélection directe (A), extruder la forme. Puis cliquez dessus avec le Outil de conversion de point, ce qui le rend tranchant.

Étape 8

presse Contrôle-t, faites légèrement pivoter l'aileron et placez-le derrière la fusée. Puis appuyez Contrôle-j dupliquer la dérive et aller à Édition> Chemin de transformation> Retourner horizontalement. Maintenez la Décalage clé pour déplacer la forme en miroir le long de l'axe horizontal de l'autre côté de la fusée.

Étape 9

Ajoutez le troisième aileron dans la partie avant de notre fusée et écrasez-le avec Transformation libre (Control-T).

Étape 10

Nous devons maintenant appliquer un effet d’ombre longue tendance à notre icône. Commencez à former une ombre en créant un rectangle noir et en abaissant son Opacité jusqu'à 50% dans le Couches panneau pour plus de commodité. Faire pivoter le rectangle de 45 degrés dans Transformation libre mode (Contrôle-T).

Développez le rectangle pour couvrir la fusée, comme indiqué dans la capture d'écran ci-dessous..

Étape 11

Avancez et placez le rectangle derrière la fusée. Nous devons maintenant supprimer les parties du rectangle situées en dehors de la moitié gauche de notre fusée. Prenez le Ajouter un outil de point d'ancrage (dans le même menu que le Outil stylo (P)) et ajoutez quelques points d’ancrage au rectangle noir. Placez l'un d'entre eux à l'endroit où le rectangle touche l'extrémité inférieure de l'aileron gauche, et le second au point d'intersection du rectangle et de la moitié droite de notre fusée. 

Maintenant, nous pouvons déplacer les points d'ancrage restants avec le Outil de sélection directe (A), les cacher derrière la fusée.

Étape 12

Voici un autre moyen facile de masquer les parties inutiles de l’ombre, qui se trouvent en dehors de la base des icônes. Sélectionnez le calque de forme d’ombre et, en maintenant le bouton Alt touche, déplacez le curseur de la souris sur la couche de base des icônes. Une fois que vous voyez le curseur se transformer en un petit carré avec une flèche, cliquez sur le calque, créant ainsi un Masque d'écrêtage

Sélectionnez l'ombre, passez à la Outil Rectangle (U), et changez la couleur de remplissage de notre ombre en un dégradé linéaire du noir au blanc. Changer le Mode de fusion de l'ombre à Multiplier dans la partie supérieure de la Couches panneau, de sorte que l'ombre se mélange bien avec la base de l'icône.

Étape 13

Ajoutons quelques détails mineurs à notre fusée, la rendant plus fantaisiste. Prendre le Outil Ellipse (U) et placez une ellipse rouge sur la partie supérieure de la fusée. Sélectionnez à la fois l'ellipse créée et la partie de base de la fusée et, pendant que Outil Ellipse (U) est sélectionné, clic-droit appeler le menu contextuel. Utilisez le Unir les formes au chevauchement fonction pour masquer les parties inutiles, formant une pointe de fusée. Enfin, ajoutez une simple lumière au verre de la fusée en utilisant une couleur bleue plus claire..

Terminez avec la fusée en étalant des étoiles jaune pâle sur la base entourée, ajoutant de la profondeur à notre icône de l'espace..

2. Rendre une icône de planète rayée à plat

Comme nous connaissons maintenant quelques fonctions simples de Photoshop et des opérations de forme de base, nous pouvons accélérer le processus, car nous utiliserons des techniques similaires. Passons à notre prochaine icône: une planète avec une ceinture d'astéroïdes.

Étape 1

Commencez par créer un cercle uniforme de couleur jaune pâle pour la base de la planète. Continuez et créez un groupe de rayures étroites au-dessus de la planète avec le Outil Rectangle (U), en variant leur largeur et leur couleur. Vous pouvez grouper les bandes (sélectionnez-les et appuyez sur Contrôle-G) et tournez un peu le groupe de bandes pour ajouter de la dynamique à notre planète.

Étape 2

Maintenant, nous devons nous débarrasser des parties inutiles. Sélectionnez la base de la planète. prendre le Outil Ellipse (U) et clic-droit sur notre icône. Choisir Faire une sélection dans le menu contextuel et cliquez sur D'accord dans le Faire une sélection fenêtre pop-up, laissant les options par défaut.

Lorsque vous obtenez la sélection de fourmis en marche sur la planète, sélectionnez le groupe de bandes et cliquez sur le bouton Ajouter un masque icône dans la partie inférieure de la Couches panneau, masquant les parties inutiles à l'intérieur du masque.

Étape 3

Ajoutons une dimension à notre planète en plaçant une ombre simple sur son côté droit. Dupliquez la forme de base de la planète et placez ce calque par-dessus les autres, en déplaçant la forme vers le haut et vers la gauche. Sélectionnez les deux formes entourées et utilisez le Soustraire la forme avant une fonction. Changer le Mode de fusion de la forme créée à Écran et mettre le Opacité à 40%, rendre la planète plus légère et créer ainsi une ombre à son bord droit.

Étape 4

Ajoutons l'anneau d'astéroïdes autour de la planète. Créez une ellipse écrasée et activez la Soustraire la forme de la police cheminopération. Créez ensuite une autre ellipse de taille inférieure à la première, formant ainsi un trou..

Nous devons supprimer la partie de l'anneau recouvrant la planète, la rendant cachée derrière la forme de base de la planète. Commencez par ajouter une ellipse couvrant le sommet de la planète et une partie de l'anneau que vous souhaitez masquer (la forme du trait rouge sur la capture d'écran). Sélectionnez à la fois l'ellipse créée et la forme de base de la planète et Unir les formes au chevauchement, créer un «chapeau» au sommet de la planète.

Étape 5

Clic-droit sur leforme de trait rouge et Faire une sélection. Ensuite aller à Sélectionnez> Inverse.

En conservant la sélection, cliquez sur la couche en anneau et sur Ajouter un masque pour cacher la partie non désirée.

Étape 6

Ajoutez une ombre plane à l'icône en utilisant la même technique que dans l'icône de fusée.

Enfin, tachetez les étoiles autour de la planète.

3. Créer un radiotélescope avec antenne

Étape 1

Commencez par faire un cercle noir. La couleur n'a pas d'importance, car nous n'aurons pas besoin du cercle lui-même. Placez un rectangle rouge au-dessus du cercle, couvrant la moitié de celui-ci. Faire une sélection de la forme du cercle et placez le rectangle dans un masque en masquant les parties inutiles à l'extérieur du cercle. Maintenant, nous pouvons supprimer le cercle noir, ne laissant que la partie rouge.

Remplissez la partie inférieure de la forme créée avec une couleur rouge plus sombre, ce qui rend la base du radiotélescope plus détaillée.

Étape 2

Ajoutons une antenne à notre radio télescope. Tout d’abord, placez une forme elliptique écrasée sur le côté droit de la forme de base du télescope, en formant sa partie interne et en ajoutant une dimension. Passer et former un triangle à partir d'un 3 côtés polygone à l'aide du Outil Polygone (U),et remplissez-le de couleur gris clair. Étendez la forme en rendant l'antenne plus fine et placez un petit cercle à son extrémité.

Étape 3

Faites légèrement pivoter le télescope pour qu'il lève les yeux, en suivant les signaux de l’espace. Ajoutez un autre triangle gris pour la fondation. Découpez le petit triangle à l’intérieur avec les Soustraire la forme avant une fonction.

Étape 4

Terminez avec le radiotélescope en formant une longue ombre et en ajoutant un groupe d'étoiles à notre icône.

4. faire une drôle d'icône ovni

Étape 1

Commencez à former la partie supérieure de l'OVNI en créant un cercle pair. Nous devons supprimer le bas du cercle en créant une ellipse ci-dessus et en choisissant Unir les formes au chevauchement.  

Étape 2

Ajoutez un reflet à la partie en verre et ajoutez une partie en forme de soucoupe volante, composée de deux ellipses rouges superposées, avec une étroite base grise.

Étape 3

Rendez l'OVNI plus détaillé en ajoutant un cercle de lumière dans le bas et quelques ampoules jaunes sur la partie soucoupe.

Terminez la formation de l'icône en ajoutant une ombre et un groupe d'étoiles.

5. Rendre une icône de trépied télescope

Étape 1

Un télescope est principalement constitué d’un tube extrudé. Commençons par former un rectangle étroit pour la base de notre télescope. Dupliquer la forme (Control-J) et écraser la couche supérieure avec Transformation libre (Control-T). Remplissez la partie inférieure du télescope avec une couleur rouge plus sombre, formant une ombre douce.

Étape 2

Ajoutez une partie avant du tube et formez une lentille en ajoutant une ellipse écrasée de bleu grisâtre. Rendre pointus ses points d’ancrage supérieur et inférieur en cliquant dessus avec le bouton Outil de conversion de point.

Placez la lentille derrière le tube en cliquant sur Control-Shift- [ et ajoutez des reflets simples de bleu plus clair.

Étape 3

Formez l'oculaire de notre télescope en combinant deux rectangles gris étroits. Choisissez le Outil Rectangle Arrondi et ajoutez de fines jambes de trépied, en soutenant le télescope.

Faites pivoter les jambes et ajoutez de petits détails de pontage dans une couleur gris foncé.

Étape 4

Faites pivoter le corps de notre télescope afin qu’il regarde vers le haut, vers les étoiles. Terminez en ajoutant une ombre portée et un groupe d'étoiles.

6. Dessinez l'icône Crescent Moon & Clouds

Étape 1

Commencez par former un croissant de lune en faisant un cercle uniforme de couleur jaune, puis ajoutez un cercle plus petit au-dessus, en le plaçant dans le coin supérieur droit de la forme de base de la lune. Utilisez le Soustraire la forme avant fonction de couper une partie de la lune, formant le croissant.

Étape 2

Commençons à rendre un nuage à partir d'un cercle bleu. Ajoutez un autre cercle de taille plus petite et un couple de plus, pour rendre le nuage moelleux. Si les cercles sont sur les différents calques, sélectionnez-les tous et Unir les formes dans le menu contextuel.

Étape 3

Coupons la partie inférieure du nuage en ajoutant un rectangle étroit et en utilisant le Soustraire la forme avant fonction pour masquer la partie inférieure recouverte par le rectangle.

Étape 4

Placez un autre nuage derrière la lune, en le réduisant légèrement pour ajouter de la profondeur à notre icône. Créez une ombre portée sur chaque objet de l'icône et tachetez les étoiles autour de la lune.

7. Ajouter un fond d'espace profond

Maintenant que toutes les icônes sont terminées, ajoutons un calque d'arrière-plan bleu grisâtre plus foncé derrière elles et posons des ellipses plus claires ici et là pour les étoiles, en faisant varier leur taille et leur position. Enfin, placez quelques bandes avec le Outil Rectangle Arrondi sur les bords de l'Artboard, ce qui rend la mise en page plus élégante.

Houston, nous n'avons aucun problème!

Excellent travail, les gars! Nous venons de terminer la création d'un ensemble d'icônes spatiales à la mode avec de longues ombres dans Adobe Photoshop. J'espère que ces opérations avec des formes simples vous aideront dans vos projets futurs. Bonne chance!