Détourer les cheveux avec Photoshop

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Détourer les cheveux avec Photoshop

detourage-cheveux.jpg Le web design est aussi fait de photo, et Photoshop est un logiciel fascinant. Deux bonnes raisons pour vous proposer ce tutoriel qui expose une des techniques que j’utilise pour détourer un personnage en vue de le placer sur un autre fond. J’ai souvent obtenu de bons résultats en utilisant les outils Plume, Lasso, Masque de fusion et Pinceau. Le filtre Flou gaussien, toujours vaillant, sera de la partie pour ajouter du naturel. Dans le monde des effets spéciaux ça s’appelle du mate painting. Mais restons simple, c’est un photomontage ;)

J’aime bien l’expression et l’attitude d’Estéban sur cette photo, mais je trouve que l’environnement n’est pas à la hauteur. C’est pourquoi, inspiré par la position du bras à gauche sur l’image, je commence à chercher un visuel possédant des perspectives qui pourraient s’accorder. En attendant, je commence à détourer le bonhomme.

Le choix de l’outil le mieux adapté pour le détourage débute par une rapide analyse du visuel : deux zones distinctes se dégagent : le tee-shirt et les bras qui offrent des courbes relativement aisées à suivre à la Plume d’une part, et les cheveux d’autre part, dont la coiffure Made in Ocean nécessitera un travail plus élaboré.

L’outil Plume

Malgré ces différences, j’attaque avec la Plume en suivant au plus près la première zone, puis en schématisant la chevelure sur laquelle je reviendrais plus tard.

detourage-trace-1.jpg

A cet instant, j’ignore encore sur quel fond je placerais mini-nous. Ce qui a une importance dans la suite du travail à effectuer. En effet, la qualité de l’intégration du pokémon dans le fond à venir dépend, pour une large part, des zones qui deviendront contiguës en terme de couleurs, de luminosité, de contraste, de teinte ou de saturation.

Pour assurer un minimum de réalisme à ce photomontage, il faudra aussi tenir compte des zones plus ou moins nettes ou plus ou moins floues de mon Petit Dragon par rapport au fond. Dans ce tutoriel, l’idée générale est d’avancer le travail au maximum pour faire face à n’importe quel changement de fond de dernière minute…

Du tracé à la sélection

Sélectionnez le tracé vectoriel puis faites Ctrl + Entrée pour en faire une sélection (contour progressif à 0px et lissage activé).

detourage-selection-2.jpg

Le Lasso pour les détails

Vérifiez que la sélection suit au plus près les contours et rectifiez avec le Lasso en ajoutant ou en retranchant à la sélection si nécessaire.

detourage-selection-zoom-3.jpg

Lorsque le Lasso est actif, j’utilise la touche Maj pour ajouter et Alt pour retrancher. Notez que la touche Alt associée à la touche Maj permet d’ajouter à la sélection en Mode polygonal, ce qui permet d’aller plus vite dans les lignes droites. Pour utiliser ce mode pour retrancher, on inverse la sélection Ctrl + Maj + i et vice-versa…

Mémoriser la sélection

Il est temps de mémoriser cette sélection et de faire un premier test d’intégration sur fond gris. Pour cela, je crée un nouveau calque : double-clic sur le calque Arrière-plan et je fais glisser le Calque 1 dessous.

Désélectionnez Ctrl d puis remplissez avec 50% de gris (Maj + Retour chariot -> Remplir Avec).

detourage-memoriser-selection-4.jpg

Il faut maintenant récupérer la sélection qui se trouve mémorisée sur la couche Alpha 1 (Ctrl + clic sur Alpha 1 dans la palette des Couches).

detourage-couche-alpha-5.jpg

Le masque de fusion

Dans la palette Calques, je sélectionne le Calque 0 et j’ajoute un Masque de fusion. Si le personnage se détache sur un fond gris, c’est bon ;)

detourage-fusion-gris-6.jpg

On voit tout de suite qu’on ne fait pas toujours ce qu’on veut avec ses cheveux… Il s’agit maintenant de fondre la chevelure dans l’environnement. Par précaution je duplique ma couche Alpha 1 qui devient Alpha 1 copie, et je sélectionne le Calque 0 de la palette Calques.

Il est temps de dire quelques mots sur le masque de fusion. Comme son nom l’indique assez justement, il sert à fusionner des parties d’images entre elles en fonction des niveaux de gris qui servent de masque. Grosso modo, le noir rendra la zone concernée transparente, tandis que le blanc préservera la zone. Les 254 niveaux intermédiaires (soit 256 au total) serviront à moduler l’opacité nécessaire à une fusion harmonieuse de l’avant-plan avec l’arrière-plan.

Un Flou gaussien sur le masque de fusion

Je vais d’abord dégrossir le travail en ajoutant un Flou gaussien sur la chevelure. Pour celà, je vérifie que le Masque de fusion Calque 0 est sélectionné, j’active le Lasso que je lance autour des cheveux…

detourage-lasso-cheveux-7.jpg

J’applique ensuite un contour progressif d’une vingtaine de pixels à cette sélection pour que la transition du flou se passe en douceur entre les cheveux et les contours du visage.

detourage-flou-gaussien-8.jpg

Ensuite, un petit coup de Ctrl h pour masquer le contour de la sélection permettra d’avoir le champ libre pour juger l’intensité du flou gaussien à venir. Un (Filtre -> Atténuation ->) Flou gaussien de 6 pixels de rayon devrait faire l’affaire.

Il reste une zone plus sombre au-dessus des cheveux. C’est le moment d’utiliser le Pinceau sur le Masque de fusion.

detourage-correction-zoom-9.jpg

Un bon coup de pinceaux

Une fois l’outil Pinceau sélectionné, je choisis une forme d’une quinzaine de pixels de Diamètre, d’une Dureté à 0%, d’une Opacité à 10%, d’un Flux à 100% et j’active la fonction Aérographe. Il est temps de désélectionner Ctrl d et de s’assurer que les couleurs de premier et d’arrière-plan sont respectivement le noir et le blanc en réinitialisant les couleurs par défaut avec la touche d. La touche x permutant facilement les couleurs.

Voilà, tout est prêt pour commencer à peindre le masque sur les zones à fondre dans le gris. Pour revenir en arrière, la touche x est notre amie : si l’application de noir fait disparaître une zone, le blanc la fait revenir, et un gris à 50% lui donne une opacité de… 50% ! C’est magique.

Je n’hésite pas non plus à changer la taille du pinceau, ainsi que son opacité en cours de travail. Pour les cheveux en particulier je prend soin de faire des mouvement de pinceaux dans le sens du poil pour obtenir un résultat plus naturel. Dans certains cas, il peut être judicieux d’utiliser, sur des zones réduites, la technique du flou gaussien évoquée plus haut.

Le plus difficile dans la peinture sur Masque de fusion, c’est de s’arrêter. Pour cela, n’hésitez pas à zoomer et dézoomer sur les zones à traiter.

detourage-gris-10.jpg

Et ça donne quoi, au final ?

Comme la luminosité du fond est proche du gris, il y a eu peu de retouche à faire. En revanche si le contraste avait été beaucoup plus prononcé, j’aurais certainement dû continuer à peindre sur le masque en utilisant de l’huile de coude avec les équivalents-claviers indispensables.

Changer la taille de la brosse (Clic droit dans la zone de travail), modifier l’opacité (touche Enter du pavé numérique). Touche x pour intervertir les couleurs de premier et d’arrière-plan.

detourage-fin-11.jpg

Les deux visuels n’ayant pas été shootés dans les mêmes conditions, il reste un peu de travail pour harmoniser les couleurs et la luminosité. L’amélioration du contraste et l’ajout de jaune dans les tons clairs, moyens et foncés suffirait presque à donner l’impression que ce n’est pas un photomontage.

Pour la forme, un léger coup de pinceau sur le Masque de fusion, et voilà, c’est fini.

detourage-fin-luminosite-12.jpg

Conclusion

Pour détourer correctement un Choulala ou tout autre chose en vue d’une intégration dans un autre visuel, rien ne vaut la combinaison des différents outils que Photoshop met à notre disposition. Par ailleurs, les outils et techniques utilisés dans ce tuturiel sont disponibles dans quasiment toutes les versions de Photoshop. Ce n’est pas parce que cet article ne traite pas de développement web, qu’il faut en profiter pour oublier les standards ;)

Bon détourage !

P.S. : N’hésitez pas à marker mes tutoriels (et ceux des autres, en passant) en attente ou en homepage sur tutmarks.com ! Merci d’avance.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



33 commentaires pour “Détourer les cheveux avec Photoshop”

  1. Silvyn! dit :

    Bravo encore pour ce billet, avec toujours autant d’humour à l’intérieur :)

  2. Bonjour Silvyn ! Aussitôt posté aussitôt commenté, la journée commence bien ! Attention, la peinture met quelques heures (parfois une journée) pour bien sécher ;) A bientôt,

  3. lanatz dit :

    merci pour ce tuto de grande qualité. Je vais enfin pouvoir déliré avec les photos des potes (qui ont tous plein de cheveux ^^).

  4. olivier dit :

    Merci pour ce tutoriel bien sympathique et bien intéressant.

  5. Tout de suite avec les images, ça en jette plus ;)

  6. Cap° dit :

    Heu… Et avec le mode extraire c’est po plus rapide !!! Ok je sors….

  7. br1o dit :

    Le mode extraire marche super bien avec le gros nounours de démo fourni avec Photoshop… Après, dans la vraie vie… L’intérêt de dealer avec le masque de fusion, c’est de jouer sur la transparence, mais pas seulement sur les contours. Ca ne se voit pas bien en basse définition, mais en haute résolution, si on applique une légère transparence dans les cheveux, on peut avoir un effet très réaliste. Ceci dit, le mode extraire peut souvent remplacer la plume ou le lasso pour dégrossir une sélection. Voire même permettre un détourage complet en quelques minutes. Mais, bon, ça ne m’a pas pris beaucoup plus de temps dans l’exemple ;)

  8. janet dit :

    il y a bien longtemps que je cherchais un tut comme celui ci pour détourer mon toutou Sherlock… il est super ce tuto un grand merci

  9. flopys dit :

    On va esayer, ça devrait le faire, avec un peu de temps!!!! Encore merci. A quand les podcasts?

  10. br1o dit :

    flopys > J’envisage de faire des tutoriels en utilisant un système de capture d’écran animé comme CamStudio (que je n’ai pas encore eu le temps de bien tester). C’est dans les tuyaux avec des tutoriels sur la retouche couleur, encore du détourage et autres astuces sur l’utilisation de Photoshop. Vala vala ;) Stay tuned and mind the gap! ;)

  11. Gabrielle dit :

    bonjour,

    merci pour ce tutoriel, je ne m’y connais pas trop en photoshop mais l’outils plume me parait extraimement compliqué. cela prend des heures si l’on veut detourer une personne et parfois la plume ne va pas exactement la ou je le souhaite et je ne suis pas vraiment a l’aise avec les ajouts ou supressions de points d’encrage. Le lasso magnetique me parait plus simple d’utilisation…

  12. anemone dit :

    Je suis très intéressée au tutoriel «détourer les cheveux avec Photoshop» et ça fait plusieurs fois que j’essaie de faire exactement la même chose que dans le tuto avec l’outil plume etc… mais lorsque j’arrive à récupérer la sélection qui se trouve mémorisée sur la couche Alpha 1, elle n’existe pas dans la palette des couches ! Il n’y a que RVB, ROUGE, VERT ET BLEU.

    Comment faire pour avoir la couche Alpha 1 ??? Une réponse SVP….

    Merci de me répondre. anemone033@hotmail.com

    anemone

  13. Bruno Bichet dit :

    @Gabrielle > la plume est un outil un peu plus exigeant que les autres, mais les résultats sont très bons. Ceci dit, ils ne sont pas mauvais avec les autres outils. Personnellement, j’adapte les outils de détourage au sujet à détourer : tout est bon, pourvu qu’on ait une belle sélection au final ;)

    @anemone > J’ai relu mon tuto et à priori je pense que tu as oublié d’enregistrer la sélection, seule manière de la faire apparaitre dans le menu des couches (Sélection -> Mémoriser la sélection). Tiens-moi au courant :)

  14. Red@ dit :

    je connais quelques astuces photoshop mais pas du tout celle là … Merci !

  15. PiiN-PiN dit :

    Personnellement je suis bloqué =(

    Au moment où je suis censé créer un contour progressif, sa ne marche pas, sa n’est pas assez détailler,cela fait 1h30 que je me penche sur ce problème, il ne me reste plus beaucoup de cheveux, mais pourquoi ma sélection n’applique pas de flou lorsque j’applique un floue progressif? =’(

  16. Bruno Bichet dit :

    @PiiN-PiN: A première vue, les problèmes rencontrés pour l’application du contour progressif (chap. 4) peuvent provenir d’un mauvais choix du calque, ou alors de la valeur qui peut être trop faible (ici 6 pixels) en fonction de la résolution de ta photo.

  17. PiiN-PiN dit :

    Bonsoir Bruno, merci de te penché sur mon problème. Voici un screenshoot de ma séléction.

    Vois-tu où est le problème?

    http://img21.imageshack.us/my.php?image=sanstitre2hnw.jpg

    J’aimerais simplement faire fondre le haut des cheveux précédemment découpés avec la plume sur un quelconque fond.

    J’ai pourtant sélectionné le bon calque non?

  18. Bruno Bichet dit :

    @PiiN-PiN: On dirait que tu as sélectionné la première vignette du « calque 0″ alors que la sélection doit être active sur le calque de fusion (à droite)

  19. PiiN-PiN dit :

    Je vais te dire comment je procède pour appliqué le contour progressif.

    En premier lieu, je sélectionne le masque de fusion qui se trouve a droite de l’image.

    Ensuite, je récupère l’outil lasso et je fais une sélection. Une fois la sélection faite, je vais dans Sélection > Modifier > Contour progressif et j’entre la valeur souhaiter.

    Mais là, rien ne se passe…

    Ais-je oublié quelques chose?

  20. Bruno Bichet dit :

    @PiiN-PiN: vi, on dirait que tu as oublié le « (Filtre -> Atténuation ->) Flou gaussien de 6 pixels de rayon » qui « devrait faire l’affaire »

  21. PiiN-PiN dit :

    Jy suis presque, aller encore un petit effort. Bon alors une fois que j’applique ce fameux « floue gaussien » de 6px, j’ai toute ma sélection qui se floute.

    Alors que sur ton tutoriel, on vois très nettement que c’est les bords des pointes des cheveux du petit garçons qui sont floue…

    A mon avis le problème vient du contour progressif non? c’est lui qui va déterminé l’amplitude que va prendre le floue si je comprend bien?

    Si c’est le cas pourquoi avec ou sans contour, le floue est toujours en même quantité sur mon image? =$

  22. Bruno Bichet dit :

    @PiiN-PiN: L’intensité du floutage final provient du contour progressif et du flou gaussien. N’hésite pas à changer ses valeurs en faisant des tests.

    Il y a aussi la sélection elle-même qui joue beaucoup : la tienne est p-ê un peu large autour des cheveux.

  23. PiiN-PiN dit :

    Oups, j’ai compris mon problème. En voulant recommencer à plusieurs reprise la manip, la sélection du masque est passé sur le calque de nouveau… Du coup le contour progressif et tout se qui à suivit n’a pas fonctionné, mais en refaisant la même manipulation en partant du principe où c’est bien le masque qui est sélectionner, le floue s’applique bien au bord et mes cheveux sont bien floutés :D

    Merci, je continue le tuto! =D

  24. PiiN-PiN dit :

    Bon et bien merci Bruno pour ce petit tutoriel.

    Voici le résultat: que penses-tu de cela? http://img17.imageshack.us/my.php?image=travaildedetourage2.jpg

    PS: Si tu as encore la main sur ton tuto, tu devrais rajouter le petit: Filtre > Atténuation > Floue gaussien 6px.

    Y auras toujours des petits novices comme moi pour t’embêter à 2h du matin ^^’

  25. Bruno Bichet dit :

    @PiiN-PiN: pas mal pour un début ;) Après, pour obtenir un résultat plus pro, il faut appliquer un flou gaussien différent selon les endroits. Idéalement, en reprenant ton masque de fusion, tu peux utiliser l’outil pinceau avec bords progressifs pour « moduler » le flou. Il ne faut surtout pas hésiter à zoomer !

    A l’occaz, je verrais comment mieux expliquer cette histoire de flou gaussien ;) a++

  26. SEBBAN dit :

    Tutoriel simple et efficace. Bravo.

  27. ds carte dit :

    Heu… Et avec le mode extraire c’est po plus rapide !!! Ok je sors….

  28. Antares777 dit :

    Je croix que tu as oublié de mentionner qu’il faut créer un couche alpha. Sans quoi, impossible de récupérer la sélection pour créer le fond.

    Pour la créer, il suffit d’aller dans les couches, un fois que vous avez votre sélection, et de cliquez sur la petite icône en bas du menu avec un cercle dans un rectangle.

    @+++ tessa

  29. Bonne idée ce flou gaussien pour retirer le noir en arrière plan ! Merci pour l’astuce. Au fait qui a essayé la nouvelle fonction de CS5 « content aware » ? Ca a l’air très impressionnant (limite du fake).

  30. Kateriine dit :

    Et le filtre Extraire?

  31. Lithotherapie dit :

    Mon point de faible c’est cette partie la je n’ai jamais réussi à bien détourer les cheveux .C’est toujours la catastrophe à la fin . Merci :))

  32. youlie dit :

    J’ai fait mon premier essai, et grâce à tes explications les résultats ne sont pas mal du tout.

    Par contre sur ma photo au début quand j’ai utilisé la plume j’ai pris un bout en plus (ma plume a dérapé) et malheureusement, comme je n’ai pas mis le flou gaussien dessus je n’arrive plus à l’enlever. Comment pourrais-je faire ?

    Merci encore pour ton tuto.

  33. immobilier menton dit :

    Pas tous récent le tuto, mais toujours très efficace, c’est l’horreur de détourer les cheveux, donc un grand merci pour l’article, d’une grande utilité pour ma part.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site