32
Créer une icône personnage MSN sous Photoshop
Voici un tutorial pour comprendre et suivre la réalisation d’une icône de la première touche de couleur à la dernière étape de mise en relief. Le tout se passe sous Photoshop (celà pourrait également très bien se faire sous Illustrator) et se décompose en 25 étapes (pas moins que celà).
Pour les débutants, je vous propose ici d’avoir un aperçu sur la création de ce genre d’illustration, pour les experts je vous propose une base pour créer des personnages selon vos goûts et vos couleurs, car il sera pour vous très facile de changer les couleurs, changer la forme des cheveux ou des vêtements.
Attention pas mal d’étapes s’apparentent à de l’illustration pure et simple, il vous faudra bien maîtriser l’outil plume pour les suivre.
Pour ceux qui ont envie de découvrir la méthode de l’intérieur, je leur propose le fichier source Photoshop à télécharger ci-dessous.
Bonne chance à tous.
ETAPE 1
J’ouvre Photoshop et je crée un nouveau document de 500 pixels de côtés sur fond blanc. Je sélectionne l’outil plume et je crée une forme en bleu (#78acde), cette forme servira de base au buste de notre personnage.
ETAPE 2
Je crée un nouveau calque au dessus de ma base et j’en récupère la sélection (Ctrl + Clic sur le calque dans la fenêtre des calques). J’utilise ensuite un pinceau diffus pour créer une lueur bleu-claire en haut à gauche de ma base. Cette manipulation me permet de créer une première mise en relief sur ma base.
ETAPE 3
Avec l’outil plume je crée une forme comme ci-dessous qui sera un reflet sur le buste de mon personnage.
ETAPE 4
Je fais la même chose pour un reflet que je place sur la partie droite du buste de mon personnage.
ETAPE 5
Toujours avec l’outil plume, je crée la partie droite du col de mon personnage.
ETAPE 6
Puis je crée la partie gauche du col.
ETAPE 7
Je crée maintenant l’ombre de la partie droite de mon col, pour cela je crée une forme qui suit les contours du col. J’utilise une couleur bleue et sombre (#036491).
ETAPE 8
Je modifie l’ordre des calques et je place l’ombre sous le col.
ETAPE 9
Je fais la même chose pour créer l’ombre de la partie gauche du col de mon personnage.
ETAPE 10
Avec la couleur #f3b85c je crée une forme censée représenter le cou de mon personnage, pas la peine de s’attarder sur cette forme car seul le bas nous intéresse.
ETAPE 11
Je vais maintenant passer à la réalisation de la cravate : pour cela je crée une forme verte que je place en haut juste en dessous du col.
ETAPE 12
Puis je crée la cravate elle-même.
ETAPE 13
Je crée tout en haut dans la fenêtre des calques une forme représentant le visage de mon personnage.
ETAPE 14
Puis la forme des cheveux.
ETAPE 15
Bon maintenant que toutes les formes de mon personnage sont créées je peux passer à la mise en relief des éléments par la couleur. Dans Illustrator j’aurais utilisé les fils de dégradés mais ici je vais simplement utiliser le pinceau.
Je commence donc la mise en relief de la cravate, pour cela je récupére la sélection de l’élément que je désire travailler, je crée un nouveau calque juste au dessus et avec les nuances de couleurs, je crée le relief. Voyez ci-dessous les zones de vert- sombre et vert-clair.
ETAPE 16
Je travaille maintenant sur les reflets blancs créés aux étape 3 et 4. J’ajoute donc un masque de fusion et avec le pinceau noir je cache certaines parties de mes reflets : voir l’image ci-dessous.
ETAPE 17
Sur le buste je crée sur le bas droit une partie en bleu-foncé, ce qui me permet de donner un peu plus de profondeur à mon personnage.
ETAPE 18
Je travaille maintenant sur les cheveux, je les place à l’avant du visage et j’essaye d’ajuster le tout pour un positionnement correct.
ETAPE 19
Je crée une lueur de marron-clair sur la droite des cheveux, en utilisant comme précédemment le pinceau diffus.
ETAPE 20
Puis tout autour sur les côtés des cheveux, j’ajoute des zones de marron-foncé pour donner un petit effet de volume sur la tête.
ETAPE 21
Comme pour le col, je vais créer une ombre que je place sous le menton. Ainsi nous décollons le visage du cou.
ETAPE 22
Et enfin, j’attaque le visage en lui donnant un premier relief sur le bas.
ETAPE 23
Puis je crée des zones plus claires sur le haut du visage ainsi que sur la droite.
ETAPE 24
Je diminue l’opacité de ce calque voir, je le passe en mode de fusion incrustation (voir le menu dans la fenêtre des calques).
ETAPE 25
Et enfin je duplique tout mes calques, je les fusionne, puis je fais calque > modifier > symétrie verticale. Je décale ce calque vers le bas (de mon personnage retourné), puis avec les outils transformation, je joue avec torsion, perspective, transformation, puis je l’adapte et enfin j’ajoute un masque de fusion.
Et voila mon personnage est totalement terminé.
Oui je sais c’était plutôt laborieux, long et compliqué, mais que voulez vous !!! On a rien sans rien 
Bonne chance à tous, et bonne lecture.
N’hésitez pas à poster vos questions dans les commentaires juste en dessous de cette phrase.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 22 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
5 septembre 2008 17:06, par Panpan
Très bien réussi. Je n’essaie pas car mon niveau n’est pas assez élevé pour ça mais beau tuto quand même
Répondre
-
5 septembre 2008 18:53
salut wonka, comment tu as fait pour réaliser le reflet car quand je fait mon reflet, il se situe en dessous mais pas comme toi
Répondre
tu pourais m’expliquer comment tu fais merci-
6 septembre 2008 01:17, par maniphil
Pour le reflet, il faut jouer avec la torsion et la déformation.
tout ces beaux outils sont situés dans le menu : édition puis transformation, ensuite tu peut choisir le quel de deux tu utilise pour déformer le reflet pour qu’il épouse le bas de ton icone.
mani
p.s. Wonka : j’adore ton nouveau site de tutobuzz. C’est génial, on a plus besoin de se promener de psdtuts jusqu’a abduzeedo.com... bref c’est magnifique
Répondre
-
-
5 septembre 2008 19:28, par missmawii
Un tres beau resultat ! ( Je n’ai pas essaye je n’ai pas le niveau ... ^^’ ) :)
Répondre -
6 septembre 2008 05:00
Sublime ! plus c’est compliqué et plus j’adore !
mon petit essai (1h de boulot oO’ ) :
Bon allez, hop , au dodo ! Bon week end tout le monde !
Répondre-
6 septembre 2008 08:50, par Mr Le Cube
huhuhuu ! la tête est un peut trop dispoportionée, mais rien que pour ça j’aime ton prso. Bah encor 10 min tu dvrais ariver à reimantionner la tête. Mais là où je suis stupéfait, c’est dans le reflet, il est fichtrement bien fait et il corespon bien.
Répondre-
6 septembre 2008 12:18, par Wonka
Oui c’est pas mal du tout, à part la tête qui est un peu GROSSE
Répondre mais sinon j’adore !
-
-
6 septembre 2008 12:50
.... ha oui ! après une bonne nuit de sommeil, j’avais plus les yeux en face des trous ! J’ai la grosse tête huhuhu ! Effectivement : Pour le reflet, je recommande l’utilisation de " Edition > Transformation > Deformation ( je crois que la cravate est plus grosse dans mon reflet ... mais bon ). Etirer le coin droit un peu vers le haut, le coin gauche vers le haut, puis jouer avec le centre pour l’amener à ressembler à quelque chose de ’potable’. Merci wonka pour nous faire entrer dans les coulisses des studios graphiques !
Répondre-
6 septembre 2008 14:05, par GuilleW
J’ai corrigé ma tête d’ampoule ! Rectifié le reflet, et ajouté une petite ombre, qui donne un peu de relief au personnage.
Répondre
-
-
-
11 septembre 2008 12:58, par TopFoot3
Bravo, malheureuement je ne sais pas manier l’outil plume !
Répondre-
11 septembre 2008 15:58, par Wonka
Et oui et c’est très nécessaire pour faire ce tutoriel, mais tu peux essayer ce tutorial est ainsi te perfectionner avec cet outil
Répondre
-
-
26 septembre 2008 22:16, par Daniel
joli tutoriel Wonka. Je me suis permis d’y mettre ma touche personnelle en m’inspirant de ce que j’ai pu rencontré au fil du net.
Répondre
-
-
28 septembre 2008 12:42, par Wonka
http://www.flickr.com/photos/danielgilles/2889925265/in/pool-711148@N24
Répondre-
1er octobre 2008 18:12, par Daniel
merci Wonka pour ton appréciation et le lien vers le pool images. Je te précise que je fais actuellement des démarches de création d’entreprise. je compte mettre en place une structure de créations de sites web, kit graphiques, icônes, un petit studio de création en somme. Je te dis ça comme cela
mon portfolio : http://www.flickr.com/photos/danielgilles/
plus la mise en place sites qui viendront compléter l’ensemble de l’offre.
Répondre-
2 octobre 2008 12:34, par Wonka
J’aime beaucoup ce que tu fais, tes créas sont vraiment sympa
Répondre moi aussi en ce moment je pense à me mettre à mon compte, cela vas surement se faire le mois prochain. Si tu veux on peux en discuter un peu plus via msn par exemple, as tu msn ?-
-
26 janvier 2009 15:27
Merci beaucoup pour ce topique, mais comment ajouter ces icônes dans MSN après les avoir créer ? Merci d’avance.
Répondre
-
-
-
-
-
-
-
3 novembre 2010 17:11, par Noueman
Slt Wonka Bon tutoriel mais ta laisser un defaut au niveau de la cravate a coté du cote dans le résultat finale le bout de la cravate est au dessus de son menton
Répondre
