Share
Bonjour les artistes de Photoshop, je m'appelle Sergio Ordóñez, le génie autoproclamé à l'origine de SOSFactory, pionnier du conception de mascotte pour le web. Vous pouvez également me trouver sur mon blog SOSNewbie ou sur Deviantart à sergitosuanez.
Vous pouvez trouver le fichier PSD de Photoshop dans un répertoire intitulé "PSD" inclus dans le fichier ZIP que vous avez téléchargé. Nous avons également inclus la version originale de ce tutoriel pour vos lecteurs espagnols. Vous voudrez peut-être les parcourir brièvement avant de commencer. Un aperçu de l'image finale est ci-dessous. Vous pouvez voir la version plus grande ici aussi.
Quand je commençais à concevoir des mascottes, comme tout bon bonhomme, je débutais mes créations sans avoir la moindre idée de ce que je voulais vraiment dire. Durant cette période, j’ai appris que la planification fait la différence entre un designer professionnel et un autre qui ne l’est pas. Pour cette raison et parce que je suis payé au mot, je vais vous presser l'esprit avec un peu de théorie!
La personnalité est la clé d'une mascotte bien conçue. Tous les éléments de design (expression faciale, expression corporelle, symboles, vêtements, etc.) doivent encourager l'attitude du personnage, ce qui dépend des valeurs de l'entreprise de notre client. Voyons quelques exemples ci-dessous.
Nous voulons transmettre l'attitude que nous souhaitons en une seule pose mémorable, nette, facile à mémoriser et à reconnaître. Pour cela, il faut regarder la ligne d'action et la silhouette.
Une erreur très courante lors de la conception d'un site Web est de poser la mascotte sans tenir compte de la zone dans laquelle elle sera utilisée. Pour que le personnage ait la plus grande apparence possible, nous devons adapter la pose à la région, voir les exemples au dessous de.
La ligne d’action définit l’intention de mouvement du personnage, la direction vers laquelle ses énergies sont dirigées. Vous pouvez voir quelques exemples ci-dessous.
Le maître de l'animation Raúl Garcia explique tout cela parfaitement dans cet exemple, c’est un exercice dans lequel nous cherchons le personnage qui définit le mieux l’histoire: "Remplir une tasse de thé."
Le premier essai est vague et ne définit pas l'action de manière concise. Aucune ligne d'action ne décrit le mouvement «verser du thé dans la tasse» ni aucune tension suggérant un poids ou un équilibre. La silhouette de ce dessin est amorphe et sans intérêt.
À la recherche de cette silhouette claire, il essaie de séparer le bras qui tient la théière du corps.
La tasse et la théière sont maintenant clairement séparées du corps, mais la silhouette n'est toujours pas précise.
La silhouette des bras est beaucoup plus claire. La théière se penche pour montrer l'action «verser du thé».
La pose du bras, qui tient la coupe, a été modifiée pour lui donner un aspect plus naturel. Le cou du personnage a été souligné pour obtenir une meilleure silhouette générale.
La silhouette devient plus efficace en ajoutant une assiette sous la tasse et une meilleure pose pour la main..
En pliant le bras qui tient la théière et en étirant son doigt, nous obtenons une silhouette plus intéressante.
En inclinant la tête, nous obtenons une silhouette plus efficace, nous créons un espace négatif qui attire l'attention de l'observateur sur le bec de la théière..
Notez que la silhouette numéro 4 est entièrement descriptive, nous n’avons besoin de rien de plus pour comprendre l’action. Lorsque nous concevons des mascottes d’entreprise, nous ne pouvons généralement pas obtenir une silhouette aussi parfaite. Malgré tout, c'est l'idéal.
Dans ce cas, PSDTUTS m'a donné une totale liberté de création, je vais donc laisser mon instinct me guider et nous allons sauter le briefing..
Après avoir connu le client, le mieux que nous puissions faire est de chercher des références, car les idées originales ne vous viendront peut-être pas à l’esprit. La recherche de références peut nous aider à écarter les idées évidentes et à envisager d'autres solutions..
Considérations pour proposer de nouvelles idées:
Exemple:
AVERTISSEMENT 1: S'inspirer est permis, plagier ne l'est pas.
AVERTISSEMENT 2: Certains artistes et sites Web proposent des ressources gratuites. Vous devez montrer votre appréciation en indiquant où vous avez obtenu l’oeuvre et envisager de faire un don. Donner au moins un dollar américain..
Stylet tablette ou souris? Si vous ne possédez toujours pas de tablette, je vous recommande d’acheter un Wacom, il en existe de très abordables, mais je vous recommande d’utiliser un Wacom. Si vous n'en avez pas, vous pouvez d'abord dessiner l'esquisse avec un crayon et du papier traditionnels, puis utiliser la souris et les outils de dessin numériques de Photoshop pour l'encre, bien que le processus prenne beaucoup plus de temps. En cas de coloration, il est fortement recommandé d'utiliser la tablette. Voir la vidéo ci-dessous concernant ce processus.
Lorsque j'ai acheté mon bien-aimé Wacom Cintiq 21UX (le moniteur de droite), j'ai changé de méthode. Maintenant, je réalise tout le processus numériquement, de la première esquisse aux derniers détails. Je trace les lignes à la main car je trouve cela plus facile et plus rapide que d'utiliser les outils de dessin vectoriel.
Photoshop ou Illustrator? C’est votre choix, je trouve personnellement que les outils de dessin vectoriel Illustrator sont exaltants. J'utilise plutôt Photoshop, dessine les lignes à la main et je n'utilise les outils de dessin que pour les lignes difficiles. Je travaille en haute résolution, la vectorisation ultérieure est donc très facile. Pour cela j'utilise un plugin Illustration appelé Silhouette.
Il est très important de travailler en haute résolution, j'utilise une toile de format A3 à 300 pixels par pouce. Le processus de travail est le même pour cette taille et les avantages sont nombreux:
Ici, vous pouvez voir quelques légendes du personnage dans les différentes étapes, de l’esquisse au lineart final. Malheureusement, il n'y a pas d'astuces, juste de la pratique et encore de la pratique:
Notez que l’épaisseur de trait (poids de trait) est variable, c’est l’une des parties les plus laborieuses. La règle générale est la suivante: lignes épaisses pour les contours, lignes plus minces pour les parties intérieures.
De cette façon, l'observateur peut mieux distinguer les formes. Ceci est particulièrement utile pour les illustrations complexes dans lesquelles on peut jouer avec l’épaisseur de trait pour créer une profondeur dans l’illustration..
Une fois le dessin terminé et dans un seul calque, nous pouvons extraire les lignes de l’arrière-plan ou placer le calque en mode multiplication et ajouter la couleur dans les nouveaux calques situés en dessous. Je préfère les extraire afin de pouvoir les colorier facilement plus tard.
Remarquez que je vais peindre le patin et le personnage séparément, alors quand nous aurons fini, nous aurons deux versions: avec et sans le patin.
Pour extraire les lignes, procédez comme suit:
Si vous êtes un peu paresseux, vous pouvez télécharger cette action Photoshop pour extraire les lignes de votre dessin. De cette façon, vous n'aurez pas à le faire manuellement.
J'ai déjà écrit divers tutoriels sur la façon de colorer dans Photoshop. Je ne veux pas t'ennuyer alors je vais essayer quelque chose de différent:
Ce sont les trois couleurs que j'ai choisies pour peindre le personnage. Comme je l'ai déjà dit, nous allons colorier le personnage à l'aide de commandes Photoshop plus tard. Le choix des couleurs n'est donc pas très important. N'oubliez pas que vous avez besoin d'une couleur sombre pour les ombres, de moyenne pour la lumière générale et lumineuse pour les contours et les lumières plus intenses..
Le pinceau de l'histoire est un outil puissant que j'utilise très souvent, car nous pouvons bloc parties de notre conception qui sont déjà finis et continuent à travailler sur le reste sans les gâcher. Je vais vous donner un exemple de base, montré ci-dessous.
Avec un peu plus de pratique, vous serez conscient des possibilités illimitées de cet outil. Comme vous pouvez le voir dans l'exemple, nous pouvons l'utiliser comme une gomme (sans avoir peur d'effacer des pièces finies); nous pouvons faire la même chose pour peindre au lieu d'effacer; si nous prenons différents clichés du même modèle, nous pouvons obtenir des versions intermédiaires; nous pouvons réduire l'opacité du pinceau et fusionner différentes versions d'un même dessin; on peut même jouer avec les tonalités… N'ayez pas peur d'expérimenter.
ATTENTION: le pinceau historique fonctionne par calques, le calque que vous souhaitez modifier doit exister dans les deux points de l'historique. Si nous fusionnons ou supprimons le calque en question, le pinceau d'historique ne fonctionnera pas.
Vous pouvez visiter ce didacticiel vidéo sur la couleur avec Photoshop pour regarder le pinceau Historique en action..
Sous le calque lineart, nous créons un nouveau calque et nous le nommons "Couleurs à plat", puis nous remplissons le dessin avec des couleurs qui doivent être suffisamment différentes les unes des autres pour faciliter les sélections ultérieures. Vous pouvez le faire avec n'importe quels outils, faites attention à ne pas laisser de trous.
Nous n'utiliserons cette couche que pour faire des sélections, par exemple: Si nous voulons peindre les cheveux de notre personnage, nous sélectionnons l'outil Baguette magique et cliquez sur les cheveux. Nous obtenons ainsi une sélection rapide et précise.
Nous désactivons le calque "Couleurs à plat" et nous le plaçons là où cela ne nous dérange pas. Nous pouvons obtenir une sélection du contour complet du personnage en appuyant sur l'icône de cette couche tout en maintenant la touche Commande enfoncée..
Ensuite, nous créons un nouveau calque, nous l'appelons "Base de couleur" et nous le remplissons avec une couleur plate. Dans ce cas, j'ai choisi la couleur # e37750, car c'est une couleur confortable et neutre pour moi.
Nous créons un nouveau calque au-dessus de la "Base de couleurs" et nous l'appelons "Ombres". Dans ce calque, nous peindrons les ombres avec la même couleur de base, mais nous mettrons le calque en mode Multiplier temporairement..
J'ai choisi une source de lumière qui vient d'en haut à gauche. Savoir comment être cohérent avec le volume du point lumineux est la partie la plus difficile, et rien de plus que de pratiquer: vous pouvez utiliser un jouet articulé dans une pièce sombre dotée d’un point lumineux puissant et l’utiliser comme référence..
Notez que les ombres ne doivent pas occuper tout le dessin, nous devons laisser de la place à la lumière. J'utilise des légendes pour que vous puissiez voir comment je peins habituellement les ombres.
Lorsque nous avons déjà peint les ombres, nous créons un nouveau calque ci-dessous, que nous nommons "Lumière douce".
Nous utilisons l'outil Dégradé pour créer un éclairage doux qui servira de base pour l'éclairage ultérieur..
Ici vous pouvez voir la configuration que j'utilise pour faire les dégradés:
Nous créons un nouveau calque juste en dessous des "lignes" et nous l'appelons "lumière dure". Le processus est fondamentalement identique à celui que nous avons utilisé pour les ombres, mais inversé. Au lieu de peindre les zones profondes, nous peignons les zones saillantes. J'utilise une couleur #ffeeae.
Je crée un nouveau calque sous les ombres et je le nomme "Réflexions". J'aime souligner les volumes en ajoutant des réflexions aux contours, les contours et les volumes sont beaucoup plus clairs de cette façon. N'oubliez pas que nous avons effacé les contours de l'étape des ombres, il ne reste plus qu'à placer un calque sous les ombres et à peindre avec soin.
Voici la partie amusante! Nous avons déjà terminé l'éclairage, tous les volumes sont définis et nous avons les différents niveaux de lumière (ombres, tons moyens et tons clairs) séparément. Maintenant, en jouant avec Command + U dans Photoshop, nous allons colorier le personnage rapidement.
Notez que les couleurs que j'ai choisies sont toutes de la même gamme, mais légèrement différentes, nous obtenons donc une gamme chromatique plus large. Nous pouvons aller plus loin et utiliser différentes couleurs, même dans le même calque. Ici, j'ai un peu exagéré pour que vous puissiez voir les possibilités:
Ci-dessous, vous pouvez voir comment j'ai coloré chaque partie du personnage. Essayez vos propres combinaisons de couleurs jusqu'à ce que vous obteniez celle que vous aimez.
Nous avons déjà terminé la base de couleurs, nous allons maintenant jouer avec des calques de différentes modes de fusion (Palette Calques, menu en haut à gauche) pour donner plus de profondeur à la couleur. Toutes les couches doivent être au-dessus de la couche "Lineart".
Lorsque nous aurons terminé, nous pourrons fusionner toutes les couches (créer une copie de sécurité avant cela) et ajouter d’autres effets. Nous pouvons utiliser l'outil Dodge pour éclaircir certaines zones ou l'outil Graver pour les assombrir. Nous pouvons jouer avec la balance des couleurs (Commande + B) ou avec tous les niveaux (Commande + L). Avec un peu d'imagination, vous pouvez obtenir des résultats exceptionnels.
Comme je l'ai dit au début, je peindrai le patin séparément, nous aurons donc deux versions. J'ai utilisé la même technique que j'ai fait avec le personnage. La conception finale des personnages est ci-dessous.
Et nous avons finalement fini. Ça a l'air bien, tu ne crois pas?
En tant que bons professionnels, nous devons faire attention à la présentation. Avec quelques logotypes, des images prises par nos amis de Gomedia et un peu d'imagination, nous pouvons faire une présentation comme celle présentée ci-dessous. Vous pouvez récupérer la version papier peint ici.
Regardez! C'était une bonne idée de faire le patin séparément, maintenant nous avons 2 versions différentes avec pratiquement le même effort. Vous pouvez récupérer la version papier peint ici.
C'est la version couleur limitée, mais nous ne pouvons jouer qu'avec les lignes aussi (heureusement, je les ai assez épaisses). Vous pouvez récupérer la version taille de fond d'écran ici.
N'ayez pas peur, je ne vais pas expliquer comment créer ces fonds d'écran. Nous avons déjà couvert pas mal de terrain pour ce tutoriel, je peux partir heureux maintenant!
Eh bien, mes amis, il ne reste qu’une chose à faire. Je veux adresser une demande… aux «grandes» maisons d'édition qui se procurent leur matériel grâce à l'exploitation, qui se remplissent les poches d'argent sans rien partager (elles laissent FAME à nous, artistes); ils doivent suivre le modèle de PSDTUTS, toujours si généreux et attentionné à la fois avec l'artiste et le lecteur, démontrant ainsi que la rentabilité d'une entreprise ne dépend pas de la source d'approvisionnement à faible coût, mais de sa qualité et de sa débrouillardise le vendre.
Merci à Eden d’avoir créé une aussi grande ressource que PSDTUTS, spécialement à Sean pour sa flexibilité. Merci à mon amie Anita de m'avoir aidée avec altruisme et d'avoir traduit cet article (nous avons également inclus la version originale en espagnol dans le téléchargement). Et enfin, grâce aux lecteurs de PSDTUTS, j’espère que vous avez lu jusqu’à la fin, que vous avez appris beaucoup de choses nouvelles ou du moins que vous avez apprécié ce tutoriel..
Bien sûr, si vous avez des questions, je répondrai avec plaisir. N'hésitez pas à commenter les nouvelles postées sur le site. Cordialement
Accentsconagua