Share
Le café espresso fait maison est le produit de base de tous les petits-déjeuners italiens. Il est préparé avec le célèbre pot "Moka Express". Dans ce didacticiel, nous allons créer un Moka entièrement à partir de zéro, en utilisant des formes, des effets de calque et de nombreux conseils pour améliorer la productivité. Nous allons ensuite transformer notre conception en une icône professionnelle compatible avec Leopard et Vista. Alors préparez vos tasses à café et commençons à brasser!
Ce didacticiel s’adresse aux utilisateurs intermédiaires de Photoshop. Il est donc indispensable de maîtriser l’interface et de connaître les raccourcis clavier principaux. Jetez un coup d'œil à l'image ci-dessous pour voir à quoi ressemblera notre icône terminée.
Avant de commencer, familiarisons-nous avec notre cafetière. Lisez tout à ce sujet puis regardez l'image suivante. Ceci est mon bien-aimé Moka Express sans lequel je ne pourrais pas commencer une journée. Ça a l'air compliqué mais ce n'est vraiment pas.
Nous pouvons voir que le Moka comprend: un réservoir inférieur octogonal avec une valve sur un côté, une chambre supérieure octogonale à visser avec un bec pour verser le café et une base en forme d’anneau, un couvercle surmonté d’un bouton et poignée reliée à la charnière du couvercle. Il y a deux matériaux ici: plastique noir pour le bouton et la poignée et aluminium pour le corps.
Commençons par le ring. Créez un nouveau document RVB vierge et définissez sa taille sur 512 pixels sur 512 pixels, résolution maximale des icônes OS X Leopard..
Tout au long du didacticiel, utilisez des calques d'arrière-plan blancs, gris et gris foncé pour vous aider à mieux voir les illustrations. Mettons en place notre document. Appuyez sur D pour activer les couleurs noire (avant-plan) et blanche (arrière-plan) par défaut. Dans le menu Affichage, activez Règles (Commande + R) et Accrochage (Commande + Maj + Touche deux-points). Nous sommes prêts à partir.
À l'aide de l'outil Ellipse et à l'aide de certains guides, tracez deux ellipses sur deux calques distincts. Faites l'ellipse du bas en noir et nommez son calque "en bas". Rendre l'ellipse supérieure blanche et nommez son calque "base".
À l'aide de l'outil Rectangle de sélection (M), effectuez une sélection au centre des guides sur le calque "du bas", puis appuyez sur Alt + Retour arrière pour le remplir avec la couleur noire du premier plan (voir fig. 3a)..
Appuyez sur Command + D pour tout désélectionner. Tout en restant sur le calque "inférieur" Tout en maintenant la touche Commande enfoncée, cliquez sur la vignette de l'ellipse blanche du calque "de base" pour en sélectionner le contour, puis appuyez sur Supprimer pour effacer cette sélection de l'ellipse noire (fig. 3b)..
Désactivez le calque "base" pour voir le résultat (fig. 3c). Effacez les deux triangles du haut en les entourant d’une sélection rectangulaire puis en supprimant son contenu. Nous avons maintenant un demi-anneau (fig. 3d). Renommez cette couche en "anneau".
Ajoutons maintenant quelques matériaux. Pour simuler les réflexions de l'environnement sur l'aluminium, ajoutez un style Incrustation en dégradé au calque "anneau". Créez un dégradé linéaire horizontal avec plusieurs variations de couleur. Essayez de suggérer de légères teintes tout en restant proche d'un gris moyen. Allumez également le côté droit pour indiquer la direction de la lumière. Voir la photo pour les détails.
L'aluminium semble assez bon, mais nous voulons lui donner une texture brossée pour le rendre plus réaliste. Sur un nouveau calque, créez un rectangle blanc avec des proportions similaires à celles de l’anneau (fig. 5a). Maintenant, faites-le pivoter de 90 degrés pour le placer en position verticale. Utilisez l'outil de transformation libre (Commande + T) pour faire pivoter et maintenez la touche Maj enfoncée pour prendre un angle droit (fig. 5b)..
Assurez-vous que les couleurs noir et blanc par défaut sont activées et allez dans Filtre> Rendu> Fibres et ajustez les paramètres jusqu'à obtenir de nombreuses bandes fines avec juste une petite variation (fig. 5c). Vous voyez maintenant la raison pour laquelle nous avons dû faire pivoter le rectangle: le filtre a créé des fibres verticales, mais nous avons besoin qu'elles soient horizontales..
Alors maintenant, faites pivoter le rectangle de 90 degrés vers sa position horizontale initiale. Nommez ce calque "brushed_alu" et changez son mode de fusion en écran. Cela cachera les parties noires, laissant apparaître de jolies lignes lumineuses (fig. 5d).
Nous devons maintenant déformer la texture brossée pour qu'elle corresponde à notre bague. Définissez l'opacité du calque sur 25% pour que l'anneau soit visible. Encore une fois, invoquez l’outil de transformation libre (Commande + T), cliquez avec le bouton droit de la souris et sélectionnez Déformation (fig. 6a)..
Un maillage apparaîtra. Faites glisser manuellement les poignées et les points intérieurs vers le bas pour que le maillage se conforme à l'anneau. Essayez de garder un espacement régulier entre les lignes du maillage pour que le calque se déforme correctement (fig. 6b).
Cliquez sur le calque "anneau" en maintenant la touche Commande enfoncée, puis utilisez cette sélection pour masquer le calque "brushed_alu" ou inversez simplement cette sélection (Commande + Maj + I), puis appuyez sur la touche Suppr pour supprimer tous les pixels supplémentaires. Quelle belle texture subtile (fig. 6c)! Nous allons répéter cette technique chaque fois que nous voulons obtenir le look brossé.
Retournez la couche "base". Déplacez-la sous le calque "anneau" et dupliquez-la en appuyant sur Commande + J. Réduisez la nouvelle ellipse et déplacez-la un peu. Rendez ce calque noir (Alt + Retour arrière) et rastérisez-le. Appliquez un filtre Flou gaussien (Filtre> Flou> Flou gaussien) avec un rayon de 5 px. Ce sera l'ombre de l'anneau.
Avec l'anneau et son ombre en place, passons au réservoir. Dupliquez le calque "de base", déplacez-le et redimensionnez-le (fig. 8a). Nommez ce calque "en bas".
Configurez une grille de guides pour définir la taille et la position du réservoir. Utilisez toujours la fonction Alignement pour vous aider à redimensionner et à déplacer les éléments à leur emplacement approprié. Une fois la grille en place, choisissez l'outil Crayon (P) en mode couche de forme et tracez la face frontale de l'octogone (fig. 8b). Faites-en n'importe quelle couleur que vous aimez, nous le changerons assez tôt. Nommez cette couche "centre".
Dupliquez le calque "centre" pour créer la face à sa droite. Déplacez-le et ajustez-le à l'aide de l'outil de transformation libre (Commande + T), en choisissant alternativement Distorsion et Inclinaison en cliquant avec le bouton droit de la souris pour corriger la perspective. Nommez ce calque "right".
Dupliquez-le en miroir, nommez-le "gauche" et déplacez-le vers la gauche du calque "centre". Il ne vous reste plus qu'à ajouter les deux faces les plus externes en utilisant la même technique que celle décrite ici. Nommez ces couches "à l'extrême droite" et "à l'extrême gauche".
Donnons au réservoir une texture. Ajoutez d'abord à chaque face un style de calque Gradient Overlay, puis utilisez la technique apprise aux étapes 5 et 6 pour ajouter un calque en aluminium brossé juste au-dessus. Utilisez des dégradés linéaires allant du gris léger au gris moyen, en rotation pour l'aligner avec la perspective.
L'aluminium est assez réfléchissant, c'est pourquoi sa couleur est profondément affectée par l'environnement qui l'entoure. Il y aura des objets clairs et sombres venant de plusieurs directions, ne faites donc pas que les dégradés aillent dans le même sens. Une bonne méthode pour donner une impression de profondeur consiste à créer un contraste frappant entre deux faces adjacentes, comme le montre l’illustration suivante, où un gris très foncé rencontre un très brillant. Notez également que la couche d’aluminium brossé est déformée afin que les lignes s’écoulent avec la perspective..
Déplacez la couche "de base" sous les couches de réservoir et remplissez le vide avec du blanc. Comme auparavant, ajoutez un style de calque Gradient Overlay et un calque d'aluminium brossé. Veillez à faire correspondre la direction de la lumière: le coin inférieur droit doit être clair, tandis que le coin supérieur gauche doit être sombre. C'est cette cohérence qui donnera du réalisme à notre icône. Notez également comment la couche "inférieure" a été assombrie.
Dans le monde réel, aucun avantage n'est parfaitement tranchant. Il y a toujours une fine bande de matière qui captera les points forts des visages. Donc, pour des raisons de réalisme, ajoutons cette petite touche soignée. Dupliquez la face "centre", renommez-la "surbrillance" et réduisez sa valeur de remplissage à 0%. Ceci cachera le contenu du calque tout en gardant les styles de calque visibles.
Ajoutez un style de calque Trait à l’aide des paramètres suivants: Couleur du blanc, Taille de 1px, Position de l’extérieur et Opacité de 30%. Ajoutez ensuite un style Outer Glow: Mode de mélange Normal, Couleur du blanc, Opacité de 50% et Taille de 5 pixels (voir la photo). Répétez cette procédure pour les faces "gauche" et "droite".
Les points forts ne couvriront pas toute la hauteur du réservoir, nous devons donc masquer le fond. Placez les trois calques en surbrillance dans un nouveau groupe de calques nommé "surbrillance".
Sélectionnez le groupe et appuyez sur Commande + E pour le fusionner: vous aurez maintenant un calque ("surbrillance") et les styles de calque auront été incorporés. Appuyez sur Q pour entrer dans le masque rapide, puis avec un fond noir doux et rond. brosser la partie inférieure des bords avec de la peinture.
Utilisez 100% d'opacité sur le bas et diminuez-la progressivement à mesure que vous vous déplacez vers le haut des bords pour effectuer une sélection progressive. Lorsque vous appuyez à nouveau sur Q, les parties peintes seront masquées par une sélection inversée. Utilisez-le pour masquer le calque, éventuellement en appliquant le masque lorsque vous êtes satisfait du résultat..
Construisons la chambre haute maintenant. Créez une nouvelle ellipse sur le dessus de la bague (fig. 14a). Ce sera la base de la chambre. Dessinez maintenant le côté centre-droit de l'octogone comme à l'étape 8. Configurez les guides, activez l'option Aligner et utilisez l'outil Crayon (P) en mode couche de forme (fig. 14b). Dupliquez ce calque, retournez-le horizontalement et placez-le à côté du premier (fig. 14c).
Ajoutez les superpositions de dégradés (fig. 14d) et la texture en aluminium brossé (fig. 14e). Construisez les faces les plus externes et texturez-les de la même manière (fig. 14f). Nommez ces couches, respectivement "droite", "gauche", "le plus à droite" et "le plus à gauche".
Ajoutons également quelques bords fins au sommet. Utilisez la même technique que celle expliquée aux étapes 12 et 13, mais cette fois, attribuez un trait noir aux couches "la plus à gauche" et "à gauche" et un trait blanc aux couches "la plus à droite" et "à droite". C’est parce que nous avions précédemment souligné le côté droit du réservoir.?
Pour que tout reste organisé, regroupez toutes les couches avec des noms évocateurs tels que "BASE", "RING" et "TOP". Dupliquez le groupe "TOP" et retournez-le verticalement (fig. 16a). Réduisez-le un peu à la verticale. Avec l’aide de nos amis bleu clair (les guides), tracez un octogone blanc dans l’espace entre les deux dessus (fig. 16b). Jeter la tige Haut comme on n'en a plus besoin.
Reproduisez l'octogone blanc et noircissez-le (fig. 17a). Remplissez les espaces vides aux coins de l'octogone blanc (les zones entourées à la fig. 17b). Faites des sélections rectangulaires sur l'octogone blanc et assombrissez-les légèrement pour simuler les reflets sur l'épaisseur du couvercle (voir le rectangle sur la fig. 17b). N'oubliez pas de garder le côté droit plus léger. Nous avons maintenant un joli couvercle fin. Dessinez une ellipse blanche légèrement au-dessus du centre du couvercle. Ce sera la base du bouton en plastique (fig 17b).
Maintenant, dessinez le haut du couvercle. A l’aide de l’outil crayon (P), tracez quatre triangles (fig. 18a) puis copiez-les et retournez-les de l’autre côté. Ajoutez les superpositions de dégradé (fig. 18b) et la texture brossée (fig. 18c). Le couvercle est maintenant complet.
Pour que le bouton reproduise la petite ellipse, agrandissez-la et attribuez-lui un style Incrustation en dégradé (fig. 19a). Dessinez un trapèze du côté droit (fig. 19b), inversez-le du côté gauche. Rasteriser les deux couches puis les fusionner en un seul. Donnez à cette couche un dégradé horizontal pour l’aplatir (fig. 19c).
Maintenant, mettons le bouton en surbrillance. Dupliquez l'ellipse supérieure, définissez sa valeur de remplissage à 0% et appliquez un trait blanc (fig. 20a). Placez cette couche dans un groupe et fusionnez-la. Entrez maintenant dans Quick Mask et peignez les éléments dont vous n’avez pas besoin (fig. 20b). Quittez le mode Masque rapide, transformez la sélection en masque et appliquez-la (cliquez avec le bouton droit de la souris sur le masque et choisissez Appliquer le masque). Ajoutez juste un peu de flou gaussien et vous avez terminé (fig. 20c)!
Ajoutons maintenant des échancrures au bouton. Dessinez une forme ovale tout en bas au centre (fig. 21a) et donnez-lui une ombre intérieure (fig. 21b) et un trait (fig. 21c). Reproduisez cette couche deux fois (fig. 21d). Maintenant, placez toutes ces couches dans un nouveau groupe nommé "KNOB".
Ajoutons une réflexion. Dupliquez le groupe "KNOB" et fusionnez le groupe "KNOB Copy" résultant. Retournez-le verticalement et placez-le derrière et sous le bouton (fig. 22a). Dans Masque rapide, effectuez une sélection de dégradé (fig. 22b) et utilisez-la pour masquer le calque. Définissez son mode de fusion sur Pin Light et son opacité sur 50%.
Passons maintenant au bec. Dessinez une série de formes et ajoutez des superpositions de dégradé, comme dans l’illustration ci-dessous. Enfin, ajoutez une texture brossée à toutes les parties, comme nous l’avons appris précédemment. Mettez toutes ces couches dans le groupe "BEAK".
Suivez un processus similaire pour dessiner la charnière. Notez que le petit cercle (le centre) a un trait gris foncé appliqué. Placez ces couches dans un nouveau groupe appelé "HINGE".
Pour dessiner la poignée, créez un nouveau calque de forme noire (fig. 25a). Modifiez le chemin jusqu'à ce que vous en soyez satisfait, puis rastérisez-le. Maintenant, choisissez l'outil Color Dodge (O), choisissez un pinceau rond semi-transparent et doux, puis peignez délicatement les reflets sur le dessus de la poignée et sur les côtés pour simuler le contre-jour (fig. 25b), puis affinez le surlignage supérieur pour créer plus visible (fig. 25c).
Le manche a aussi un pétoncle. Dessinez-le avec un calque de forme et donnez-lui une ombre intérieure subtile en réglant son mode de fusion sur Normal et en jouant avec l'opacité jusqu'à ce que vous soyez satisfait (fig. 25d). Le manche est fait!
Maintenant pour notre dernière étape, mettons dans la valve. D'abord, tirons la vis. Créez un calque de forme et colorez-le en gris moyen, effectuez une copie plus claire et déplacez-la à côté du premier (fig. 26a)..
Ajoutez les formes restantes et couvrez-les de dégradés pour les rendre arrondies (fig. 26b-26e). Enfin, placez toutes les pièces dans un nouveau groupe nommé "VALVE", faites-le pivoter et placez-le sur le côté du réservoir (fig. 26f). Avaient fini!
Mon garçon était si long! Cela en valait la peine, vous ne pensez pas? Maintenant que le Moka Express est terminé, tout ce que nous avons à faire est de le réduire à 256px (pour Vista), 128px (pour les applications de quai), 48px, 32px et 16px (pour les différentes vues icône / liste / détail dans les fenêtres du système d'exploitation) et importer toutes les tailles dans notre logiciel d'édition d'icônes préféré. J'espère que vous vous êtes amusés et que vous avez appris beaucoup de techniques utiles lors de ce tour de force. Maintenant, va brasser quelques icônes de votre propre!
Accentsconagua