Share
Pour ce quatrième volet de la série "Création d'un ensemble d'icônes de peinture numériques", nous allons créer une tablette à stylet, en particulier la tablette Wacom 12 "Cintiq. Ce modèle associe la sensibilité au toucher et à la pression, ce qui permet aux utilisateurs de dessiner directement sur l'écran Ces fonctionnalités en font un favori pour les illustrateurs..
Vous trouverez ci-dessous les cinq icônes que nous créons dans cette série..
Jetez un coup d'œil à l'icône terminée pour ce tutoriel. Nous allons dessiner la tablette et le stylet avec écran brillant, boutons latéraux et voyants d'état bleus.
Lancez Photoshop et créez un nouveau document vierge RVB, en choisissant une trame carrée de 512 pixels x 512 pixels. Choisissez une couleur de premier plan gris foncé, puis sélectionnez l'outil Rectangle arrondi (U) dans la barre d'outils. Dans la barre d'options en haut de l'écran, entrez 30px pour le rayon (1a), puis maintenez la touche Alt enfoncée et faites-la glisser du centre de la zone de travail pour créer le corps principal de la tablette (1b). Tout en maintenant la touche Alt enfoncée, les formes, les sélections et les transformations se font autour de la souris. C'est un raccourci clavier très utile alors notez-le. Lorsque vous êtes satisfait de la forme, cliquez avec le bouton droit de la souris sur le calque et choisissez Rasteriser le calque. Nommez-le "base".
Etablissons maintenant que la lumière vient du haut. Cela nécessite que toutes les surfaces orientées vers le haut soient plus claires et que toutes les surfaces orientées vers le bas soient plus sombres. Nous allons nous en tenir à cette règle tout au long du tutoriel.
Le corps principal de la tablette semble plat. Ajoutons un peu d’éclairage en choisissant un gris clair comme couleur de premier plan et en conservant le gris foncé précédent comme couleur de fond (2a). Appuyez sur G pour sélectionner l'outil de dégradé. Avant de peindre le dégradé, verrouillons la transparence du calque "de base" en cliquant sur le carré transparent en haut de la palette Calques (2b). Maintenant, nous pouvons peindre en toute sécurité sur toute la tablette car nous serons limités aux pixels existants. Peignez le dégradé avec un trait vertical allant du clair au foncé (2c).
La surface de la tablette n'est pas aussi lisse. Il y a un grain très fin. Pour créer cela, allez dans Filtre> Bruit> Ajouter du bruit et choisissez 1%, Uniforme et Monochromatique (3a). Voir le résultat (3b). Vous devez également donner de l'épaisseur à la tablette. Double-cliquez sur le calque "de base" pour ouvrir la fenêtre Style de calque, puis cliquez sur Bevel and Emboss. Référez-vous à l'image 3c pour les réglages. Maintenant, la tablette a une épaisseur et une courbe douce autour des bords (3d).
Tirons la surface du verre. Sélectionnez à nouveau l'outil Rectangle arrondi (U), mais définissez cette fois Rayon sur 10 px (4a). Dessinez un petit rectangle en haut au centre et nommez-le "verre" (4b). Rastérisez-le, verrouillez sa transparence et remplissez-le d'un dégradé vertical allant du moyen au gris très foncé (4c)..
La zone active réelle est un peu plus petite que la vitre et présente des arêtes vives. Dessinez-le avec l'outil Rectangle et attribuez-lui un style de dégradé de dégradé, gris clair à moyen (5a). Le moment est également venu d'ajouter un logo au bas du verre. Utilisez l'outil Texte (T) et un gris très clair (mais pas blanc) pour ajouter votre logo personnalisé (5b).
Le verre est incrusté dans la surface en plastique de la base de la tablette. Dupliquez la couche "en verre" et nommez la copie "bord en verre". Réglez le remplissage sur 0% (6a). Les pixels réels du calque sont invisibles, mais aucun style de calque ajouté ne le sera. C'est une astuce intéressante lorsque vous souhaitez simplement utiliser le contour d'un calque sans afficher son contenu. Ce que nous voulons, c'est encore Bevel and Emboss. Assurez-vous de choisir l'option "Down", ce qui créera un biseau inséré (6b). Maintenant, le verre a un bord dur et peu profond inséré à partir de la base (6c).
Pour finir l’écran, nous ajouterons un gros point fort de réflexion. Cmd-cliquez sur le "verre" (7a) puis remplissez un nouveau calque avec du blanc (7b). Nommez-le "réflexion" (7c). À l'aide de l'outil Lasso polygonal (L), faites une sélection inclinée sur le côté droit du calque (7d). Ajoutez la sélection sous forme de masque (7e), puis définissez le mode de fusion du calque sur Écran avec une opacité de 20% (7f). L'écran est terminé (7g) afin que nous puissions regrouper toutes les couches liées maintenant (7h).
Pour l’éclairage LED, sélectionnez l’outil Ellipse (U) et tracez une ellipse bleu clair de 7 x 3 pixels dans le coin supérieur gauche de la tablette (8a). Nommez-le "LED 1" puis ajoutez un style de calque Outer Glow (8b) et Inner Glow (8c). Nous avons maintenant une belle lumière rougeoyante (8d).
Dupliquez le voyant et ajoutez quelques symboles en dessous. Composez vous-même ou consultez des photos du Cintiq actuel.
Sur les boutons latéraux. Commençons par la bande tactile. Choisissez le même gris que le calque "de base". À l'aide de l'outil Rectangle arrondi (U) avec un rayon de 2px, tracez une mince bande verticale sur le côté gauche du verre (10a). La bande est incrustée dans le corps principal, ajoutons donc un style Bevel and Emboss (10b). Activez également l’option Contour (10c). Voir le résultat (10d).
À côté de la bande tactile se trouve une autre section festonnée contenant les quatre touches de fonction. Dupliquez la bande, déplacez-la vers la droite et élargissez-la pour que les quatre touches s’insèrent bien. Nommez-le "bande de clé".
Pour les touches de fonction, choisissez une couleur gris clair. Dessinez la clé du haut avec l'outil Rectangle (12a) et nommez-la "clé du haut". La clé jette une ombre sur elle-même. Créez cette ombre avec un style Outer Glow (12b). Les clés restantes peuvent être facilement créées en dupliquant la "touche supérieure", en adaptant leurs proportions et en les plaçant sur la bande (12c)..
Regrouper les deux bandes et les cinq clés dans un groupe appelé "BOUTONS L." Dupliquez le groupe, nommez le nouveau "BOUTONS R", déplacez-le à droite du verre et retournez-le horizontalement (13a). Pour terminer la tablette, ajoutons une ombre portée. Sur un nouveau calque situé sous la "base", tracez une mince et longue ellipse noire. Réglez-le sur Multiplier, opacité de 70%. Allez dans Filtre> Flou> Flou gaussien et choisissez 3 pixels. Le résultat est une ombre douce et naturelle (13b).
Il est temps de créer le stylet maintenant. Dessinez la moitié droite du stylet à l'aide de l'outil Plume en mode Couche de forme (14a). Créez l’autre moitié (14b) puis fusionnez les deux formes. Utilisez un gris moyen comme couleur de base (14c). Nommez le calque "corps du stylo".
Ajoutons le point fort principal. Dupliquez le calque de stylo et redimensionnez-le horizontalement. Éclaircissez-le en utilisant Teinte / Saturation (Cmd + U) ou Luminosité / Contraste (15a). Enfin, ajoutez un flou gaussien de 1 px pour le mélanger avec la couche inférieure (15b). Vous devrez peut-être définir le mode de fusion de la surbrillance sur Écran en fonction des couleurs que vous avez sélectionnées et du résultat souhaité. Nommez la couche "réflexion du corps du stylo".
À l’aide de l’outil Rectangle de sélection (M), sélectionnez une mince bande horizontale sur le calque "réflexion du corps du stylet" à mi-hauteur de son extrémité effilée. Assombrir la sélection (16a). Sélectionnez ensuite la pointe sur les deux couches et effacez-la en laissant une extrémité plate (16b)..
Ajoutez la pointe sous forme d'un simple rectangle gris foncé (17a) sur un calque situé sous le "corps du stylo". La gomme peut être créée avec une ellipse gris foncé, elle aussi sur un calque situé sous le stylo (17b). Comme la gomme est arrondie, nous devons ajouter des variations de couleur sur la surface. Nous faisons cela avec un style dégradé (17c).
Dessinez la poignée en caoutchouc avec un rectangle arrondi légèrement conique afin qu’il s’évase vers le haut (18a). Le rayon devrait être vraiment petit, environ 3px. Ajoutez un style de dégradé de dégradé (18b). Le grip en caoutchouc apparaît maintenant rond (18c).
Tirons le bouton latéral sur le stylet. Tracez un rectangle gris foncé sur un nouveau calque, à l’endroit où vous placeriez votre pouce si vous teniez le stylet (19a). Marquee: sélectionnez les deux tiers inférieurs (19b), puis appuyez sur Cmd + J pour copier la sélection dans un nouveau calque. Ce côté du bouton est orienté vers le haut, il faut donc l’éclaircir (19c). Appuyez sur Cmd + E pour le fusionner, face cachée. Il ne reste plus qu’à ajouter une lueur extérieure pour simuler le trou dans lequel le bouton est placé (19d). Le bouton latéral est terminé (19e).
Regrouper toutes les couches qui composent le stylo et nommer le groupe "PEN" (20a). Conservez la structure de la couche pour les modifications ultérieures. Dupliquez le groupe et appuyez sur Cmd + E pour fusionner toutes les couches en une. À ce stade, nous pouvons ajouter une ombre portée (20b) et positionner le stylet à l'endroit souhaité. Nous avons fini (20c).
J'espère que vous avez appris quelques astuces grâce à ce tutoriel. Peut-être que cela vous a même donné envie d'acheter une tablette! Comme toujours avec la conception d'icônes, nous nous sommes appuyés sur des formes vectorielles et des styles de calque pour obtenir un maximum d'effet et de flexibilité. Si vous souhaitez modifier les couleurs, les épaisseurs ou la direction de la lumière, vous pouvez toujours revenir à la structure du calque et procéder aux ajustements nécessaires. À la prochaine fois pour la conception finale de cette série lorsque nous créerons une icône d'affichage de paysage urbain.!
Accentsconagua