Share
Les icônes de construction ont toujours été populaires à l'écran et, bien que ces pages "sous-construction" de type point-com aient pour la plupart disparu de nos écrans, la fidèle icône du casque jaune a toujours des applications. Dans ce tutoriel, nous allons créer notre propre icône à partir d'une photo.
Note de l'éditeur: Ce tutoriel a été publié à l'origine en tchèque sur Grafika Online. Grafika a gentiment donné la permission à Vaclav de republier ici sur Psdtuts + pour ceux d'entre nous qui ne maîtrisons pas bien le tchèque
Comme base, nous utiliserons cette photo que j'ai prise. Ce n'est pas la meilleure photo, mais nous pouvons l'utiliser pour définir les formes de base. L'avantage de cette photo est le fait qu'elle a été prise avec un appareil photo à objectif large et que la perspective est bien visible. Quand on parle d'icônes, la perspective est très souvent TRÈS excessive, c'est donc parfait.
Alors tout d’abord, coupez le casque de son fond. Vous pouvez le faire à l'aide de l'outil Plume ou de votre méthode préférée d'extraction d'images. Copiez ensuite cette photo dans un nouveau document Photoshop et redimensionnez l’image pour s’adapter à la dimension des icônes - probablement 128x128 px. Vous pouvez utiliser, par exemple, une nouvelle couche de 128x128, qui vous aidera à être plus précis. Ou bien, vous pouvez bien sûr utiliser un document au format 128x128 px, mais j'aime avoir plus d'espace pour le dessin.
Sélectionnez l'outil Crayon et tracez pas à pas chaque partie du casque. Nous commençons par la zone de la visière. Ne vous inquiétez pas pour la couleur, c'est la forme qui compte. Pour une meilleure précision, il est bon de diminuer la visibilité du calque (Opacité). Appuyez simplement sur la touche numlock correspondant au pourcentage d'opacité souhaité, par exemple, 5 pour une opacité de 50%. Lorsque vous tracez, assurez-vous de dessiner en tant que calque de forme (la première icône de la barre d'options) afin de pouvoir modifier ce calque à l'avenir..
Notez que comme nous traçons simplement la visière, peu importe que le reste ne soit pas précis autour de la forme du casque (nous le ferons dans les étapes suivantes)..
Créez la deuxième partie du "pic" en copiant le calque précédent (Ctrl + J) et déplacez les points sélectionnés vers le haut avec la sélection directe.
Outil (a).
Puis tracez la partie principale du casque comme indiqué ci-dessous.
N'oubliez pas la partie en relief au milieu (agrandie sur la capture d'écran suivante). Vous pouvez le faire volontairement plus grand, car la ligne médiane vous aidera joliment à définir la forme 3D du casque..
C'est pourquoi vous pouvez également dessiner cette ligne en tant que nouvelle couche. Commencez par la partie droite - qui se trouve dans l’ombre.
Puis dupliquez ce calque (Ctrl + J) et avec l'outil de sélection directe, déplacez le point de droite à gauche. De cette façon, le côté droit de cette forme ira parfaitement à la partie gauche du calque précédent.
Vous êtes prêt à passer au niveau suivant. Cachez la photo (ou déplacez-la sur le côté) et, comme vous pouvez le constater, la forme de base de notre icône est terminée. Vous devriez maintenant avoir cinq couches de formes prêtes pour la prochaine étape. Je me référerai à eux par numérotation dans l'ordre de leur dessin (1-5)
Pour commencer, masquez tous les calques sauf le premier (1) et remplissez ce calque de couleur jaune (# FFDF14). Créez ensuite un nouveau calque (Ctrl + Maj + Alt + N) et regroupez-le avec le précédent (Ctrl + Alt + G). Sur cette capture d'écran, c'est la couche (2). Dessinez dans ce calque avec un gros pinceau doux de couleur plus foncée (# D59D00) pour que le calque devienne plus foncé sur le côté droit. Ensuite, chargez la sélection du calque (4), inversez la sélection (Ctrl + Maj + I), créez un nouveau calque (3) et utilisez à nouveau un pinceau doux pour dessiner une ombre à droite (# 3B1C02).
Pour que vous n'ayez plus à tout refaire pour le calque (4), affichez ce calque avec une opacité diminuée à 50%. De cette façon, vous pouvez toujours voir l’ombre du calque précédent - quelle facilité. Pour l'instant, le "pic" est terminé et vous pouvez continuer avec la partie principale du casque.
Alors, affichez la forme de la partie principale et recolorez-la en jaune (# FDDB13). Encore une fois, créez un nouveau calque, regroupez-le avec le précédent (Ctrl + Alt + G) et, dans les zones marquées, utilisez un gros pinceau doux de couleur plus sombre. Il n'est pas nécessaire de faire une très grande ombre…
Pour un meilleur résultat, vous pouvez utiliser la ligne médiane. Affichez ce calque, recolorez-le en jaune foncé (# AA6F00) et ajoutez un masque de calque. Dans ce masque, tracez au centre avec un gros pinceau noir doux (comme indiqué ci-dessous), et le calque sera visible uniquement sur les côtés, pas au milieu..
Ensuite, affichez la dernière couche, la partie principale de la traînée. Recolorez-le en jaune (# FBD500). Dans cette étape, vous pouvez également assombrir la partie principale du casque pour correspondre au sommet.
Pour accentuer la forme du casque, utilisez cette méthode simple: tracez un contour d'un pixel autour de chaque forme où la lumière brille..
Commencez avec la deuxième couche de pic. Chargez la sélection (Ctrl-clic sur le calque), créez un nouveau calque et dans le menu Edition, sélectionnez la fonction Contour. Réglez la largeur sur 1 px, couleur blanche.
Ajoutez un masque de calque à ce calque et remplissez-le de couleur noire. De cette façon, rien n'est visible. Ensuite, sélectionnez un gros pinceau blanc doux et dessinez dans le masque où la lumière devrait briller. Le contour ne sera visible que lorsque la zone blanche est dans le masque.
Utilisez la même méthode pour les autres formes. L'icône commence vraiment à prendre forme maintenant!
Continuez avec un autre assombrissement dans les zones sélectionnées (illustrées) où le contraste entre les parties du casque est trop faible..
Pour améliorer encore l’icône, vous pouvez ajouter du rétroéclairage avec une autre couleur. Cela aidera beaucoup parce que les icônes avec une seule couleur tendent à paraître un peu terne.
Tout d’abord, chargez la sélection de tous les calques de forme (Ctrl + Maj - cliquez sur les calques), créez un nouveau calque, contractez la sélection de 1 pixel (Sélection> Modifier> Réduire) et utilisez un gros pinceau pour dessiner le rétroéclairage, la flèche montre. Utilisez la couleur que vous préférez, le bleu clair ou le violet fonctionnent bien.
La dernière chose que vous allez ajouter est le très gros point fort. Comme dans le tutoriel iMouse - Création d'une souris Apple (que j'ai aussi écrite!), Commencez par l'outil Plume et dessinez les formes de la fenêtre:
Copiez ce calque (Ctrl + J) et brouillez-le avec le filtre Flou gaussien (définissez le rayon sur un nombre peu élevé)..
Dessinez maintenant avec un gros pinceau blanc et doux sur les reflets pour le rendre encore plus brillant. Ne vous inquiétez pas des formes des fenêtres, il n'est pas nécessaire de les voir complètement.
Et c'est tout!
Comme vous pouvez le voir sur cette image, le casque est plus remarquable sur le fond sombre, alors n’ayez pas peur de faire des expériences et d’essayer de créer des icônes à partir de différentes photographies. Bonne chance avec ton travail!
Accentsconagua