Share
Dans ce didacticiel, vous allez créer une icône de science-fiction semi-réaliste pouvant être utilisée comme icône de batterie ou de station d'accueil. Commençons!
Créez un document 256 x 256 à 72 DPI. C'est une taille d'image très courante pour une icône de dock. La couleur de fond peut être blanche ou transparente.
Configurons le canevas en créant un calque d'arrière-plan blanc si ce n'est déjà fait. Vous trouverez cela utile ultérieurement lorsque vous aurez besoin de voir le contraste de l'arrière-plan en inversant le calque d'arrière-plan Cmd / Ctrl + I. Affichez vos règles et faites glisser un nouveau guide vers le centre..
A l’aide de l’outil Ellipse (U), tracez un ovale en haut au centre de la zone de travail avec cette couleur # e1e1e1. Vous pouvez le centrer en sélectionnant l’ensemble du document Cmd / Ctrl + A et en utilisant l’outil Déplacement (V), puis en cliquant sur l’icône située dans la barre supérieure, comme indiqué dans le diagramme. Appelez ce "cercle en haut". Dupliquez ce calque quatorze fois en maintenant les touches Alt et Bas enfoncés à l'aide de l'outil Déplacement (V). Fusionner les quatorze couches dupliquées peut l'appeler "Corps du cercle". Placez cette couche en dessous de "Circle Top".
Appliquez le style suivant à "Circle Top" pour lui donner un aspect métallique. Inner Glow a tendance à lui donner l'effet de frensel tandis que le dégradé de surface lui donne des dimensions.
Appliquez le style suivant à "Circle Body".
Vous devriez avoir quelque chose qui ressemble à ceci.
Créez un nouveau calque au-dessus de "Circle Top" et appelez-le "Edge". Cmd / Ctrl-clic sur la miniature "Circle Top" pour sa sélection. Remplissez-le de blanc à l'aide de l'outil Pot de peinture (G). Décalez la sélection de 1 px et appuyez sur la touche Suppr. En utilisant la gomme à effacer (E) d'environ 60 px de diamètre et 0% de dureté, cliquez une fois sur les côtés gauche et droit du cercle. Créez un nouveau calque ci-dessus et utilisez la même méthode pour obtenir la sélection de "Cercle supérieur". Appelez cette couche "Shine". À l’aide d’une brosse douce blanche à un diamètre de 60px, cliquez une fois sur le centre bas du cercle. Réduisez l'opacité à 80%. Cela lui donnera un aspect croustillant et brillant.
Créez un autre calque et appelez-le "Réflexion". Utilisez l'outil Rectangle de sélection (M) et tracez un rectangle sur le côté du "Corps du cercle" et remplissez-le (G) de blanc. J'ai inversé la couleur de fond pour que vous puissiez la voir plus clairement. Obtenez la sélection de "Circle Body" et inversez-la Cmd / Ctrl + Shift + I. Maintenant, appuyez sur Supprimer et réglez l'opacité sur 10%. Cela peut à peine ressembler à une différence, mais toute cette étape a un impact très important sur la conception..
Créez un nouveau calque et appelez ce "bulbe". Obtenez la sélection de "Circle Top" et remplissez-la (G) avec # 80fa96. Vous pouvez utiliser n’importe quelle couleur, mais pour ce tutoriel, nous choisirons un vert légèrement jaunâtre. Entrez Free Transform Cmd / Ctrl + T et tout en maintenant les touches Shift + Alt enfoncées, faites glisser l'un des coins vers l'intérieur jusqu'à ce que vous trouviez que sa taille était celle du bulbe souhaité..
Maintenant, appliquez le style suivant pour un effet de rayonnement.
Vous pouvez regrouper toutes les couches sur lesquelles nous travaillions tout à l'heure, à l'exception de l'arrière-plan, et lui donner un nom. J'ai appelé le mien "Head". Créez un nouvel appel de groupe "Top Body". Créez un nouveau calque à l'intérieur de ce groupe et appelez-le "Haut". Utilisez l'outil Plume (P) et dessinez ce que vous voyez sur le diagramme. N'oubliez pas de garder la perspective à l'esprit lorsque vous dessinez des icônes 3D. Maintenant remplissez (G) la forme avec # d7d7d7 par clic droit> Remplir le chemin.
Une fois que vous avez terminé, appliquez le style suivant.
Il est temps d'ajouter de la brillance et de la réflexion. C'est le bon moment pour utiliser un fond noir. Sélectionnez votre calque d'arrière-plan et inversez-le Cmd / Ctrl + I. Nous allons commencer par les bords. Créez un nouveau calque et appelez-le "Bord gauche". Obtenez la sélection du calque "Top" et remplissez-le (G) de blanc. Déplacez la sélection vers le haut et à droite de 1 px et appuyez sur la touche Suppr. Obtenez l'outil gomme (E) de 70px de diamètre, 0% de dureté, et cliquez une fois légèrement à l'opposé du coin gauche. Consultez le diagramme pour voir ce que je veux dire.
En utilisant la même technique, tracez un bord 1px en bas à droite sur un nouveau calque appelé "Bord droit". Effacer les deux extrémités de la ligne avec l'outil Gomme (E).
Nous utiliserons l'outil Plume (P) pour dessiner le reflet. Suivez le schéma puis remplissez-le (G) de blanc et réglez l'opacité sur 20%.
En gardant à l'esprit le réalisme, nous ajouterons un reflet de lui-même. Obtenez la sélection de "Circle Body" et remplissez-la (G) de noir. Nudge-le juste en dessous du corps. Réglez son opacité à 20%. Je sais que, de droit, nous devrions prendre l'image originale au lieu d'utiliser une image noire. Mais parfois, il est bon de briser les règles pour obtenir ce que vous voulez.
Créez un groupe appelé "Body Face" et un nouveau calque à l'intérieur appelé "Face". Utilisez l'outil crayon (P) et dessinez ce qui suit. N'oubliez pas d'aligner les points avec la plaque métallique supérieure et de garder la courbe aussi symétrique que possible. Pour tracer une ligne droite, appuyez sur Shift lors de la création d'un nouveau point..
Appliquer le style de couche suivant.
Il est temps d'ajouter de la réflexion et de briller à ce domaine, comme nous l'avons fait pour les autres. En utilisant la méthode de sélection que je vous ai enseignée plus tôt, créez un bord blanc de 1 px à droite de "Face". Utilisez une gomme douce (E) d’environ 100 px et balayez les deux extrémités de la ligne. Définissez l'opacité sur 70%. Créez un nouveau calque et appelez-le "sombre". Obtenez la sélection de "Face" et utilisez un dégradé linéaire noir (G) et faites-le glisser de haut en bas, comme indiqué. Ensuite, effacez (E) le fond avec 0% de dureté et environ 100 px. Il suffit de contourner le bord lors du brossage, en gardant le bord éloigné de la sélection pour qu’il ressemble à cela. Puis réglez l'opacité à 10%.
Créez un nouveau calque appelé "Brush Shine". Obtenez la sélection de "Visage" et Brossez (B) le haut et le bas en blanc pour que la zone ressemble à quelque chose comme ça. Puis réglez l'opacité à 20%.
Après cela, créez un nouveau calque appelé "Dark Reflexion". Utilisez l'outil Crayon (P) et tracez la forme indiquée, puis remplissez-la (G) de noir. Supprimez la zone en dehors de la sélection de "Visage" comme je l’ai enseigné précédemment. Définissez l'opacité sur 4%. En répétant le processus, créez un calque "Réflexion" blanc avec une opacité de 10% en haut. Vous devriez avoir quelque chose comme ci-dessous.
Dans la section suivante, créez un nouveau groupe appelé "Inside", puis un nouveau calque appelé "Frame". Vous pouvez utiliser l’outil Lasso polygonal (L) ou l’outil Plume (P) pour dessiner le cadre de l’intérieur. Utilisez la couleur # 777777. Essayez de garder une largeur constante.
Appliquer le style à cette couche.
Créez maintenant un nouveau calque appelé "Dark Edge" et créez un bord noir de 1 px sur le côté gauche de "Cadre". Définissez l'opacité sur 20%. Créez ensuite un nouveau calque appelé "Coin". Nous allons donner à cette icône un aspect incrusté afin qu'elle ne soit pas aussi plate. Encore une fois, vous pouvez utiliser l'outil Lasso polygonal (L) ou l'outil Plume (P) pour dessiner cela. Utilisez # 5c5c5c comme couleur.
Appliquer le style de calque suivant à "Corner".
Ajoutons de l'ombre à cela. Créez un nouveau calque appelé "Darkness". Utilisez un outil de dégradé linéaire noir (G) avec une transparence pour peindre dans la sélection de "Coin". Puis réglez l'opacité à 10%.
Créez maintenant un nouveau calque appelé "Corps interne". Dessinez un rectangle pour l'intérieur avec # 161616. Une astuce consiste à utiliser les guides comme point stratégique pour dessiner des objets et à utiliser la sélection d’autres calques pour supprimer les zones non désirées. J'ai inversé la couleur de fond pour que vous puissiez voir clairement.
Appliquez ce style de couche et nous sommes à mi-chemin! Dark Inner Shadow et le dégradé de dégradés contribuent à donner une forte profondeur.
Il est temps de préparer quelques changements d'éclairage pour le côté droit de l'icône sans avoir à refaire toute la partie. Créez un nouveau groupe appelé "Pour les modifications du côté droit". Créez un nouveau calque à l'intérieur et appelez-le comme vous le souhaitez, je l'ai appelé "Assombrir pour le côté droit". Utilisez les calques précédents et remplissez-le (G) avec du noir, puis réglez l'opacité sur 20%.
Ce sont celui pour chaque couche avec l'opacité.
Voici à quoi cela devrait ressembler après le réglage de l'opacité.
Nous devons dupliquer une copie de cette couche et l’utiliser pour le côté droit. Commencez par masquer le calque d'arrière-plan et le groupe "Head" en cliquant sur l'icône en forme d'œil à côté d'eux. Créez un nouveau calque et fusionnez Cmd visible / Ctrl + Maj + E. Entrez Transformation libre Cmd / Ctrl + T et faites-le pivoter horizontalement à droite. Emplacement du point de référence par clic droit> Retourner horizontalement et en faisant glisser le pivot central vers la droite. Masquer le groupe "Pour les modifications du côté droit" et afficher les groupes et calques précédents.
Créez un nouveau groupe appelé "Droite" et placez le calque dupliqué à l'intérieur. Nous avons un éclairage à ajouter. Inversez Cmd / Ctrl + I de l’arrière-plan et créez un nouveau calque intitulé "Ombre au sol". Dessine l'ombre comme si.
Entrez en mode Masque rapide (Q) et utilisez l’outil Dégradé Linéaire (G) pour remplir quelque chose comme ça. Essayez d'aligner le dégradé avec l'ombre. Quittez ensuite le mode Masque rapide (Q) et appliquez un flou gaussien de 3 pixels sous Filtre> Flou> Flou gaussien..
Supprimez les zones qui touchent l’icône et réglez Opacity sur 30%. Ajoutez un masque vectoriel en cliquant sur l'icône située en bas du panneau des couches. Cela ressemble à un rectangle avec un cercle. Utilisez quelque part autour d'un outil de dégradé linéaire mi-gris (G) pour remplir l'autre côté de l'ombre afin qu'elle disparaisse.
Créez un nouveau calque appelé "Côté" et tracez un rectangle noir comme indiqué avec l'outil Rectangle de sélection (M) ou Rectangle (U). Appliquez un flou gaussien de 5 pixels, en le modifiant si vous le souhaitez. Définissez l'opacité sur 30% et supprimez les zones qui ne touchent pas le côté droit de l'icône.
Créez un nouveau calque appelé "Edge Stroke". Tracez une ligne blanche le long du bord intérieur du métal ("Coin") à l'aide de l'outil Ligne 1px (U). Utilisez ensuite une gomme douce (E) d'environ 40 pixels de diamètre pour effacer les deux extrémités de la ligne. Créez maintenant un nouveau calque appelé "Edge Blur". A l'aide d'un outil de sélection rectangulaire (M) ou d'un outil de ligne (U), tracez une ligne blanche de 1 px au centre de l'écran à l'aide d'un guide, si nécessaire. Appliquez ensuite le flou gaussien de 1 px et réglez l'opacité sur 20%.
Créez un nouveau groupe appelé "Anneaux", un autre groupe à l'intérieur appelé "Verre" et un calque à l'intérieur appelé "Verre". Nous devons d’abord faire quelques croquis pour avoir une idée de ce à quoi ressemblera notre tube circulaire 3D. Ici, je vais vous montrer comment comprendre le contour de la forme en utilisant des cercles, puis un outil crayon (P) pour tracer la moitié gauche du tube..
Remplissez la forme avec du blanc puis coupez la moitié non désirée de la forme. Dupliquez-le et retournez-le vers la droite, puis fusionnez-le avec l'autre côté..
Définissez Remplissage à 3% et appliquez ces styles.
Il est temps d'ajouter de la réflexion et de la brillance, et c'est généralement la partie la plus difficile. Je vous recommande donc de regarder autour de vous pour les lunettes et les tubes et de voir comment fonctionne la réflexion et l'opacité. Commencez par créer un nouveau calque appelé "Top Half Shine". Obtenez la sélection de "Verre" et remplissez-le de blanc. Décalez la sélection d'environ 10px ou à mi-chemin dans le tube. Ajoutez un masque vectoriel et un pinceau (B) sur les bords de la brillance pour obtenir un résultat similaire. Utilisez quelque part autour de 25px de diamètre. Définissez l'opacité sur 30%. Astuce, l'utilisation de Vector Mask vous permet d'expérimenter sans détruire votre image.
Créez un nouveau calque appelé "Upper Top Shine". Nous allons répéter le processus, mais avec un éclat plus mince. Pour cela, effacez (E) les bords de manière à ce qu’il se mélange parfaitement et réglez Opacity sur 30%.
Créez un nouveau calque appelé "Ligne épaisse". Utilisez un outil pour stylo et tracez une courbe courte similaire à celle du tube. Réglez votre pinceau sur 3px de diamètre, 100% de dureté et blanc. Contour du tracé à l'aide de l'outil Plume (P) Cliquez avec le bouton droit de la souris sur> Tracé du tracé, choisissez Pinceau et cochez l'option Simuler la pression, puis cliquez sur OK. Définissez l'opacité sur 30%. Vous pouvez utiliser l'outil Déplacer (V) pour déplacer votre ligne si vous ne l'aviez pas dessiné avec précision plus tôt.
Créez un nouveau calque appelé "Ligne mince". Encore une fois, utilisez la même technique, mais cette fois avec un pinceau 1px (B) et sans pression simulée. Ensuite, effacez (E) ou masquez les deux extrémités de la ligne et définissez l’opacité sur 90%. Appliquez un éclat externe de 4 pixels avec une opacité de 40% pour le style de calque.
Nous sommes à mi-chemin de la réflexion. Créez un nouveau calque appelé "Side Shine". Utilisez l'outil Crayon (P) pour dessiner une forme de courbe, en suivant la forme du tube. Cliquez ensuite avec le bouton droit de la souris sur> Remplir le chemin en blanc. Ajoutez le masque vectoriel et commencez à brosser (B) avec une brosse douce sur les côtés de la brillance de manière à ce qu’elle s’efface en bas et à droite. Définissez l'opacité sur 40%. Obtenez la sélection de "Glass" et inverser la sélection Cmd / Ctrl + Maj + I puis appuyez sur Suppr.
Nous allons maintenant créer les bords et les bords du tube pour qu'il ne soit pas aussi plat. Créez un nouveau calque et créez un bord blanc de 2 pixels sur le côté gauche de "Verre". Ensuite, faites la même chose pour le côté droit et fusionnez les deux couches. Définissez l'opacité sur 40%. Appliquer un biseau et un estampage de taille 0px et 100% d'opacité pour les rehauts et les ombres.
Nous devons préparer un autre détail important pour le tube. Créez un nouveau calque appelé "Réflexion verte". Utilisez la sélection de "Verre" et remplissez (G) la moitié inférieure de la zone avec # 3bf75f. Ajoutez ensuite un masque vectoriel et un pinceau (B) en haut et sur les côtés de la zone pour qu’elle s’affaiblisse légèrement. Définissez le mode de fusion sur Dodge linéaire (ajouter) et l'opacité sur 25%. Cela ajoutera du réalisme car les anneaux verts brillants dessous créeront une réflexion sur l'anneau au-dessus.
Il est maintenant temps de préparer ces images pour la duplication. Nous avons besoin d'un verre avec le reflet vert. Créez donc un nouveau calque dans ce groupe, puis maintenez la touche Alt enfoncée et cliquez sur l'icône en forme d'œil du groupe. Fusionner Cmd / Ctrl + Maj + E visible. Tout en maintenant la touche Alt enfoncée, cliquez à nouveau sur l'œil, masquez le reflet vert puis répétez le processus de duplication. Maintenant, faites la même chose sans le "verre", aussi. Alors maintenant, vous devriez avoir 3 types de doublons, verre avec reflet vert, verre sans reflet vert, juste le reflet mais pas le vert.
Créez un nouveau calque appelé "One Ring", sélectionnez "Glass" et remplissez-le (G) avec # 3cf760. Décalez-le de 80px par Shift + down. Vous pouvez placer ceci dans un nouveau groupe et appelez-le comme vous voulez. J'ai appelé le mien "1" car il va être niveau 1. Appliquez ces styles pour la lueur et la dimension.
Rappelez-vous la couche de réflexion que nous avons créée plus tôt? Dupliquez-le et placez-le juste au-dessus de l'anneau vert. Plus tard, dupliquez celui avec une réflexion verte et placez-le au centre. Dupliquez le verre blanc et vous devriez avoir ceci.
Faites la même chose pour chaque niveau, en les plaçant dans des groupes ou en les fusionnant si vous le souhaitez..
Créez un nouveau calque appelé "Ombre" au bas du groupe "Anneaux". Utilisez la sélection de "Verre" pour la remplir (G) de noir. Décalez (V) environ 15px. Sélectionnez une moitié de l'ombre et inclinez-la de manière à ce qu'elle touche le côté du tube. En mode Transformation libre Cmd / Ctrl + T, cliquez avec le bouton droit de la souris sur> Incliner. Vous pouvez mieux isoler la sélection en la décalant puis en la déplaçant, après l'avoir sélectionnée avec l'outil Rectangle de sélection (M). Faites la même chose pour l'autre moitié. Dupliquez-le pour trois tubes, puis réglez l'opacité à 20%. Utilisez l'outil Lasso polygonal (L) pour supprimer les zones qui ne touchent pas l'icône..
On a presque fini. Nous ajouterons quelques détails de finalisation. Commencez par afficher le calque d'arrière-plan et le calque "Ombre de sol" dans le groupe "Droite". Créez ensuite un nouveau calque et fusionnez Cmd visible / Ctrl + Maj + E. Affichez les calques que vous venez de masquer. Créez un nouveau calque tout en haut et appelez-le "bruit". Sélectionnez le calque fusionné et remplissez-le (G) avec 50% de gris. Appliquez 10% de bruit monochromatique gaussien sous Filtre> Bruit> Ajouter du bruit. Définissez le Mode de fusion sur Superposition et Opacité sur 10%. Vous pouvez maintenant supprimer le calque fusionné. Vous ne remarquerez pas beaucoup de différence, mais cela aide à créer ce look imparfait.
Créez un nouveau calque juste au-dessus du calque d'arrière-plan et appelez-le "Ombre". Utilisez l'outil Lasso polygonal (L) pour dessiner quelque chose comme ça, décrivant grossièrement la base de l'icône. Appliquez un flou gaussien de 6 pixels et réglez l’opacité à 60%. Enfin, vous avez terminé!
Maintenant que vous avez terminé votre icône, exportez-les simplement avec chacun un niveau différent en masquant et en masquant les anneaux nécessaires..
Accentsconagua