Création d'un ensemble d'icônes de peinture numérique, partie 1 - Carnet de croquis avec une icône représentant un crayon

Ceci est le premier tutoriel d'une série intitulée "Création d'un ensemble d'icônes de peinture numérique". Nous allons concevoir cinq icônes décrivant les outils courants associés à la peinture numérique: un carnet de croquis avec un crayon, un appareil photo pour prendre des photos de référence, un pinceau, une tablette à stylet et un grand écran sur lequel est peinte une peinture mate complète. Commençons avec l'icône du carnet de croquis!

Vous pouvez voir l'aperçu final de l'image ci-dessous.

Tutoriel et détails de la série

Vous trouverez ci-dessous les cinq icônes que nous créons dans cette série..

Voici l'icône que nous allons créer dans ce tutoriel. Chaque œuvre commence par le combo le plus élémentaire, un crayon et du papier. Faisons-le en premier..

  • Programme: Adobe Photoshop CS4
  • Difficulté: Intermédiaire
  • Temps d'exécution estimé: 1 heure

Étape 1

Nous allons d'abord créer le crayon, car il s'agit de l'élément le plus délicat de notre icône. Tracez un petit cercle vert en haut au centre de la toile à l’aide de l’outil elliptique (M). Faites ensuite deux copies plus petites, une de chaque côté.

Étape 2

Activer la capture dans le menu Affichage (Maj + Commande +;) et créer des guides pour le crayon. Accrochez-vous sur les trois cercles pour marquer l'emplacement des bords verticaux du crayon. Dessinez un triangle jaune clair sur un calque séparé sous les cercles à l'aide de l'outil Plume (P) ou de l'outil Lasso polygonal (L), en vous alignant sur les guides pour assurer la symétrie. Nommez ce triangle "pointe".

Étape 3

Tracez un cercle noir au-dessus de la "pointe" sur un calque séparé et nommez-le "mine" (3a). Tout en maintenant la touche Commande enfoncée, cliquez sur le calque "tip" et utilisez cette sélection pour masquer le "lead". Cliquez avec le bouton droit sur le masque dans la palette Calques et choisissez Appliquer le masque de calque pour rogner le "contour" au "sommet" (3b)..

Étape 4

Ajoutez deux ellipses grises aux guides du bas, exactement là où se trouvera le fermoir en métal, à l’aide de l’outil Ellipse (U) (4a). Copiez l'ellipse du bas, nommez-la "gomme" et déplacez-la vers le bas. Changez sa couleur en orange rosé puis pixellisez les trois formes. Avec une simple sélection rectangulaire, comblez l’espace entre l’ellipse grise inférieure et la "gomme" (4b).

Étape 5

Déplacez un peu le plus grand cercle vert, puis utilisez l’outil Crayon (P) pour dessiner la forme du corps du crayon et accrochez-le sur les guides (5a). Ajustez la position des trois cercles pour qu'ils ressemblent à une couronne au-dessus de la forme principale, puis fusionnez toutes les formes vertes ensemble (5b).

Étape 6

À l'aide de l'outil Rectangle de sélection (M) et accrochez-vous sur les bords des cercles du haut, sélectionnez chaque face verticale du corps du crayon, puis appuyez sur Maj + Commande + J pour créer un nouveau calque à partir de la sélection ou allez à Calque> Nouveau. > Couche via Couper. Vous obtiendrez ainsi trois couches. De gauche à droite, nommez-les comme suit: "haut", "avant" et "bas".

Lorsque nous faisons pivoter le crayon de manière à ce qu'il pointe vers le carnet de croquis, le côté gauche sera en haut, le côté médian sera en avant et le côté droit en bas (6a). Imaginons que la lumière vienne de la gauche. Ainsi, lorsque nous faisons pivoter le crayon pour le faire écrire sur le carnet de croquis, il semblera qu'il vient du haut. Pour respecter la direction de la lumière, nous devons rendre la couche "supérieure" plus claire et la couche "inférieure" plus sombre. Vous pouvez utiliser la fenêtre Luminosité / Contraste, Teinte / Saturation (Commande + U) ou Niveaux pour accomplir cela. C'est ton choix (6b).

Étape 7

Ombrez le bout maintenant. Ajoutez un style de superposition de dégradé horizontal jaune pâle à orange au calque "pointe" (7a) de sorte que la partie droite, qui sera la partie inférieure une fois le crayon pivoté, soit plus sombre (7b). Pour appliquer l'éclairage, nous devons également éclaircir le côté gauche de la "sonde".

Verrouillez sa transparence pour ne pas pouvoir peindre à l'intérieur des pixels existants (7c). Appuyez sur B pour sélectionner l'outil Pinceau et assurez-vous que la couleur est blanc pur. Ensuite, peignez un seul trait sur le côté gauche avec un gros pinceau blanc et doux, tout en maintenant l’opacité la plus faible possible (7d). Cela ajoute un joli point culminant subtil.

Étape 8

Tapez D pour activer les couleurs par défaut (noir et blanc). Créez un carré noir sur un nouveau calque entre le "bout" et le "fil" et nommez-le "texture du bois" (8a). Allez dans Filtre> Rendu> Fibres et choisissez les mêmes valeurs que dans l'image 8b. La texture résultante (8c) masque la "pointe". Nous réduisons donc l'opacité à 50% et choisissons le mode de fusion Superposition (8d). La pointe en bois a maintenant une belle couleur et un grain réaliste (8e).

Étape 9

Il ne reste plus qu'à déformer la "texture du bois" pour qu'elle épouse le contour de la "pointe". Pour ce faire, tapez Commande + T pour activer la transformation libre, puis cliquez avec le bouton droit de la souris sur la texture du canevas et choisissez Perspective. Faites glisser les points d’ancrage supérieurs vers l’intérieur pour ajuster la texture à la "pointe" (9a). Jetez un coup d’œil à ce que nous avons jusqu’à présent (9b). Nous voulons ajouter un peu de brillance au crayon, nous allons donc peindre le principal point fort de la "pointe" d'un nouveau calque, à l'aide d'un pinceau doux et blanc. Réduisez l'opacité de la surbrillance pour laisser briller la texture (9c).

Étape 10

Introduisons des variations de couleur sur le corps du crayon, celui-ci a l’air plat maintenant.

Sélectionnez l'outil de gravure (O) dans la barre d'outils et configurez-le comme dans l'image 10a. Il est important d’utiliser une grande brosse douce et une opacité très faible. Utilisez plusieurs coups de pinceau pour assombrir le haut et le bas des trois côtés et assombrir le bas (plus de coups de pinceau). Essayez-le d'abord sur la couche "inférieure" pour vous familiariser avec l'outil de gravure. Une fois que vous êtes satisfait de l’ombrage (10b), répétez cette opération pour les deux couches restantes. Assurez-vous que le crayon devient de plus en plus foncé en allant à droite et en bas (10c)..

Étape 11

Faisons ressortir les bords. Avec les guides affichés et Snap actifs, tracez un chemin le long du côté vertical gauche (11a). Dans la palette Chemins, double-cliquez dessus pour le nommer "bord" (11b). Maintenant, configurez un pinceau blanc à 3 bords, à bords durs (11c). Créez un nouveau calque au-dessus des trois côtés et sélectionnez-le..

Dans la palette Tracés, cliquez avec le bouton droit sur le "contour" et choisissez Tracé du tracé. Dans la fenêtre contextuelle, sélectionnez l'option Pinceau et bascule de l'option "Simuler la pression" (11d). Voilà à quoi ça ressemble: un joli point culminant effilé (11e). Nommez le calque "bord". Créez un deuxième bord en copiant le premier. Rendez la copie un peu transparente car plus proche du bas, moins de lumière arrive (11f).

Étape 12

Passons maintenant au fermoir en métal. Cachez les couches "body" et "tip". Assombrir l'ellipse supérieure. Ce sera le trou où le crayon de bois insère. Remplissez l'ellipse plus légère pour combler le vide (12a). Appliquez un style de dégradé avec beaucoup de rehauts pour obtenir une belle surface métallique (12b).

Étape 13

Dupliquer l'ellipse "trou". Nommez la copie "anneau", réduisez son remplissage à 0% puis ajoutez un trait sombre (13a). Effacer la moitié supérieure (13b). Ajoutez maintenant une ombre portée blanche (13c) pour simuler une surbrillance (13d). Faites un tas de copies de la "bague" et disposez-les sur le fermoir en métal (13e). Regrouper toutes les couches similaires.

Étape 14

Avant de poursuivre, examinons la structure des couches que nous avons. Il est important de garder les fichiers en ordre. Nous pouvons facilement activer et désactiver les couches, ce qui accélère la productivité. Cela rend également les structures de couche complexes moins effrayantes à regarder (14a).

Déplacez le groupe "CLASP" au-dessus du "CORPS". Ajoutez une ombre interne en peignant avec un pinceau doux et noir sur un calque séparé (14b). Pour compléter le crayon, nous devons nuancer la gomme. Tout d'abord, réduisons-le un peu pour qu'il soit plus petit que le fermoir en métal. Ensuite, éclaircissez la partie gauche et assombrissez la partie droite. Comment tu fais ça? Comme pour le "plomb", verrouillez le transparent de la gomme, puis peignez le long des bords avec des pinceaux à faible opacité, blancs à éclaircissants et noirs à assombris (14c).

Étape 15

Le crayon est complet. Sélectionnez tous les calques et regroupez-les comme "PENCIL". Dupliquez le groupe et appuyez sur Commande + E pour fusionner toutes les couches en une seule. Conservez le groupe d'origine pour des ajustements ultérieurs, juste au cas où, mais travaillez désormais sur le calque unique (15a). Faites pivoter le crayon de 135 degrés dans le sens des aiguilles d'une montre pour qu'il pointe en diagonale (15b). Verrouillez cette couche pour éviter de la gâcher. Vous pouvez voir maintenant que les ombres suggèrent une lumière venant du haut. Gardons cela à l'esprit.

Étape 16

A l'aide de l'outil Plume (P), tracez la page de garde du carnet de croquis (16a). L'orientation du carnet de croquis contraste bien avec celle du crayon pour une composition équilibrée.

Étape 17

Ombrez la page avec un dégradé doux allant du presque blanc (en haut) au gris clair (en bas) (17a). En utilisant à nouveau l'outil Plume, ajoutez de l'épaisseur au carnet de croquis. Utilisez deux nuances de gris pour assombrir le bas (17b).

Étape 18

Verrouillez la transparence des trois couches (page, côté et bas). L'utilisation de brosses noires douces à faible opacité assombrit la page en haut et en bas. Assombrissez également l’épaisseur du fond près de son centre. Ces variations de couleur suggèrent une légère irrégularité qui donne aux objets un aspect un peu plus naturel (18a, 18b, 18c).

Étape 19

À l'aide de l'outil Ligne (U) défini sur blanc, tracez des lignes parallèles sur le bas et le côté (19a et 19b). Ils représentent la pile de pages, bien sûr, alors ajustez leur opacité à votre guise. Regroupez-les une fois que vous avez terminé.

Étape 20

Vous pouvez maintenant dupliquer toutes les couches du carnet de croquis et les fusionner. Encore une fois, conservez la structure de calque d'origine pour toutes les modifications requises ultérieurement. Lors de la création d'icônes, vous optimisez les tailles plus petites (48px, 32px, 16px) en éliminant les éléments qui ne seront plus lisibles, par exemple les lignes de page. Ajouter une ombre portée au carnet de croquis à l'aide d'un style de calque simple.

Étape 21

La lumière vient du haut et le crayon projette une ombre sur le carnet de croquis. Dupliquez le calque de crayon et tournez-le en noir. J'appuie généralement sur Command + U pour faire apparaître Teinte / saturation et déplacer le curseur Luminosité tout à fait à gauche. Mais tout le monde développe un flux de travail unique.

Inclinez l'ombre (Commande + T, cliquez avec le bouton droit de la souris et choisissez Incliner) pour qu'elle soit parallèle aux côtés supérieur et inférieur du carnet de croquis (21a). Tout en maintenant la touche Alt enfoncée, séparez le calque "carnet de notes" et le calque "ombre" pour masquer l'ombre avec le contour du carnet de croquis (21b)..

Étape 22

Réduit le remplissage de l'ombre à 0%. Ajoutez une superposition de dégradé en rendant la couleur gauche transparente et la couleur droite en noir (22a). L'ombre disparaît maintenant de la pointe du crayon au bord de la page. Flouez l'ombre à l'aide de l'outil Flou. Plus loin du bout, le flou (22b).

Étape 23

L'icône est maintenant terminée. Il ne reste plus qu’à dessiner un petit croquis sur la page. Je vous laisse libre de dessiner ce que vous voulez. Il suffit de choisir un pinceau avec un peu de texture dans les préréglages de pinceaux (appuyez sur F5) et vous êtes prêt à partir..

Conclusion

La première icône de cette série "Création d'un ensemble d'icônes de peinture numérique" est terminée. Nous avons appris à utiliser des coups de pinceau subtils pour donner de la présence à des objets d'aspect ordinaire. Nous avons également utilisé une astuce de composition simple mais efficace pour bien remplir la toile carrée. Restez à l'écoute pour le prochain tutoriel de cette série, qui est l'icône de l'appareil photo.!