Vous êtes sur la page 1sur 575

Dbuter sur Adobe

Photoshop !
Par Yannick Piault (sp0z)

www.siteduzero.com

Licence Creative Commons BY-NC-SA 2.0


Dernire mise jour le 3/11/2011
Sommaire 1/574

Sommaire
Sommaire ........................................................................................................................................... 1
Partager .............................................................................................................................................. 2
Dbuter sur Adobe Photoshop ! ......................................................................................................... 4
Partie 1 : Dcouverte de Photoshop (acquisition des bases) .............................................................. 5
Vous avez dit "Photoshop" ? ............................................................................................................................................. 6
Photoshop, kzako ? ................................................................................................................................................................................................... 6
L'espace de travail ...................................................................................................................................................................................................... 7
Paramtrer votre espace de travail ............................................................................................................................................................................. 7
(Ar)ranger son espace de travail ................................................................................................................................................................................. 8
La zone de travail ...................................................................................................................................................................................................... 13
Crer une zone de travail et la paramtrer ................................................................................................................................................................ 14
Enregistrer son travail ............................................................................................................................................................................................... 17
Enregistrer au format PDF ........................................................................................................................................................................................ 21
Ouvrir un document ................................................................................................................................................................................................... 22
La minute thorique : un point sur le Pixel ................................................................................................................................................................ 23
La fentre de calques ...................................................................................................................................................... 31
Dcouverte des calques ............................................................................................................................................................................................ 32
Dfinition ................................................................................................................................................................................................................... 32
Comment a marche ? .............................................................................................................................................................................................. 35
Crer ou supprimer un calque ................................................................................................................................................................................... 44
Les diffrents types de calque ................................................................................................................................................................................... 46
Gestion des calques : organisation et paramtrage .................................................................................................................................................. 49
Place aux premiers effets ! .............................................................................................................................................. 62
Jouer avec la transparence grce aux modes de fusion ........................................................................................................................................... 62
Les modes de fusion ................................................................................................................................................................................................. 63
Verrouiller un calque .................................................................................................................................................................................................. 72
Opacit et Fond ......................................................................................................................................................................................................... 74
Les styles de calque (1/2) ......................................................................................................................................................................................... 76
Ombre porte ............................................................................................................................................................................................................ 79
Les styles de calque (2/2) ......................................................................................................................................................................................... 98
Incrustation couleur ................................................................................................................................................................................................... 98
Incrustation de dgrad ........................................................................................................................................................................................... 104
Contour .................................................................................................................................................................................................................... 117
Les outils pratiques ........................................................................................................................................................ 119
Effectuer un zoom ................................................................................................................................................................................................... 120
Fonctionnement ...................................................................................................................................................................................................... 120
Utilisation ................................................................................................................................................................................................................. 121
Se dplacer dans la zone de travail ........................................................................................................................................................................ 124
Un condens des deux, a existe ? ........................................................................................................................................................................ 126
Slectionner et dplacer un calque ......................................................................................................................................................................... 129
Ecrire des annotations ............................................................................................................................................................................................ 134
La pipette ................................................................................................................................................................................................................. 135
La slection simple ........................................................................................................................................................ 137
Outil rectangle de slection ..................................................................................................................................................................................... 138
Proprit d'une slection ......................................................................................................................................................................................... 138
Outil rectangle de slection ..................................................................................................................................................................................... 139
La barre d'options .................................................................................................................................................................................................... 142
Outil ellipse de slection ......................................................................................................................................................................................... 150
Exemples ................................................................................................................................................................................................................ 150
Et aprs, on fait quoi ? ............................................................................................................................................................................................ 153
Le dtourage ................................................................................................................................................................. 165
Le Lasso, une slection main leve ..................................................................................................................................................................... 166
Le Lasso Polygonal : la prcision au bout des doigts ............................................................................................................................................. 170
Un petit mot sur le Lasso Magntique ? .................................................................................................................................................................. 174
La baguette magique, ou comment slectionner en un clic ! .................................................................................................................................. 176
La slection rapide .................................................................................................................................................................................................. 180
Les dimensions d'une zone de travail ........................................................................................................................... 181
Taille de l'image ....................................................................................................................................................................................................... 182
Taille de la zone de travail ....................................................................................................................................................................................... 189
Rotation de l'image .................................................................................................................................................................................................. 194
Le recadrage ........................................................................................................................................................................................................... 195
Techniques de transformation sur les axes X et Y (1/2) ............................................................................................... 208
La minute thorique : transformer l'aide de la symtrie ....................................................................................................................................... 209
La symtrie, c'est quoi ? .......................................................................................................................................................................................... 210
Symtrie des axes ................................................................................................................................................................................................... 228
Rotation ................................................................................................................................................................................................................... 236
Transformation en homothtie ................................................................................................................................................................................ 241
Inclinaison ............................................................................................................................................................................................................... 251
Techniques de transformation sur les axes X et Y (2/2) ............................................................................................... 257
Torsion ..................................................................................................................................................................................................................... 257
Perspective ............................................................................................................................................................................................................. 259
Dformation ............................................................................................................................................................................................................. 266
Transformation manuelle ......................................................................................................................................................................................... 274

www.siteduzero.com
Partager 2/574

Partie 2 : La retouche photographique (nouvelles notions en perspective) ..................................... 277


La minute thorique, pour vous en faire voir de toutes les couleurs ! .......................................................................... 278
C'est quoi, une couleur ? ......................................................................................................................................................................................... 278
Le mode RVB .......................................................................................................................................................................................................... 279
Le mode CMJN ....................................................................................................................................................................................................... 281
La fentre Couleur sur Photoshop .......................................................................................................................................................................... 284
Travailler la chromie ...................................................................................................................................................... 287
L'exposition avec les niveaux de couleur ................................................................................................................................................................ 288
Niveaux de couleur .................................................................................................................................................................................................. 288
Corriger un contre-jour ............................................................................................................................................................................................ 291
Retravailler un visage surexpos ............................................................................................................................................................................ 303
Rglage de la colorimtrie ............................................................................................................................................ 306
Modifier, raviver et claircir les couleurs d'une image ............................................................................................................................................. 307
Les excs de couleur .............................................................................................................................................................................................. 323
Utiliser les couleurs d'une image de rfrence ....................................................................................................................................................... 330
Remplacer ou isoler une couleur ............................................................................................................................................................................ 337
Remplacer une couleur ........................................................................................................................................................................................... 339
Isoler une couleur dans une image ......................................................................................................................................................................... 346
Et les outils, on en fait quoi ? ........................................................................................................................................ 349
La densit des couleurs .......................................................................................................................................................................................... 350
Attnuer la densit .................................................................................................................................................................................................. 350
Densit + ................................................................................................................................................................................................................. 353
Modifier la saturation ............................................................................................................................................................................................... 369
Une image floue, une image nette .......................................................................................................................................................................... 375
Mlanger les couleurs entre elles ! .......................................................................................................................................................................... 384
Outils de rparation ....................................................................................................................................................... 391
Le clonage ............................................................................................................................................................................................................... 392
Cloner les lments d'une image ............................................................................................................................................................................ 392
L'outil tampon de duplication ................................................................................................................................................................................... 402
L'outil correcteur ...................................................................................................................................................................................................... 418
TP : retoucher le visage d'un vieil homme .................................................................................................................... 427
Avant de commencer... ............................................................................................................................................................................................ 427
Rappels essentiels .................................................................................................................................................................................................. 427
Quelques conseils et surtout, la consigne. .............................................................................................................................................................. 428
On pose les crayons, heu... les outils ! .................................................................................................................................................................... 429
volution et perspectives ........................................................................................................................................................................................ 434
Partie 3 : La cration sous toutes ses formes ! (web) ..................................................................... 439
Le dessin : premiers pas vers la cration ..................................................................................................................... 440
La minute thorique : matriciel ou vectoriel ? .......................................................................................................................................................... 440
Matriciel/Vectoriel .................................................................................................................................................................................................... 440
Le crayon pour du Pixel-Art ..................................................................................................................................................................................... 441
Le coloriage ............................................................................................................................................................................................................. 453
Le pot de peinture ................................................................................................................................................................................................... 453
Les dgrads ........................................................................................................................................................................................................... 454
Le pinceau : digital painting & masques de fusion .................................................................................................................................................. 459
Le pinceau, pour quoi faire ? ................................................................................................................................................................................... 465
Les outils de forme : place au vectoriel ! ....................................................................................................................... 475
Crer et utiliser des formes gomtriques .............................................................................................................................................................. 476
TP : c'est vous de jouer ! ...................................................................................................................................................................................... 479
South Park is back ! ................................................................................................................................................................................................ 479
Consignes ............................................................................................................................................................................................................... 480
Rsultat ................................................................................................................................................................................................................... 481
Un mot sur les masques de fusion .......................................................................................................................................................................... 484
Le texte .......................................................................................................................................................................... 484
Ajouter du texte ....................................................................................................................................................................................................... 485
Paramtrer le texte .................................................................................................................................................................................................. 489
Les options de texte ................................................................................................................................................................................................ 490
Styliser le texte ........................................................................................................................................................................................................ 496
Premire tape : le formatage ................................................................................................................................................................................. 497
Les styles de calque ................................................................................................................................................................................................ 498
C'est tout ? .............................................................................................................................................................................................................. 506
TP : cration d'un logo ................................................................................................................................................... 511
La minute thorique : qu'est-ce qu'un logo ? ........................................................................................................................................................... 512
Dfinition ................................................................................................................................................................................................................. 512
En thorie ................................................................................................................................................................................................................ 513
Prparatifs ............................................................................................................................................................................................................... 519
Matriciel ou vectoriel ? ............................................................................................................................................................................................. 519
On prend une feuille, un crayon, et on s'y met. ....................................................................................................................................................... 519
Consignes ............................................................................................................................................................................................................... 520
Correction ................................................................................................................................................................................................................ 522
Habiller votre site internet (1/2) ..................................................................................................................................... 535
Une charte graphique ? ........................................................................................................................................................................................... 535
Un "design" de site web .......................................................................................................................................................................................... 535
Ergonomie et accessibilit ...................................................................................................................................................................................... 536
Il n'y a pas de rgle ! ............................................................................................................................................................................................... 537
Le squelette ............................................................................................................................................................................................................. 538
Choix du thme ....................................................................................................................................................................................................... 538
Choix des couleurs .................................................................................................................................................................................................. 538
Le logo ..................................................................................................................................................................................................................... 540
tape de conception ............................................................................................................................................................................................... 540

www.siteduzero.com
Partager 3/574

La bannire principale ............................................................................................................................................................................................. 544


La liaison : menus et boutons ................................................................................................................................................................................. 548
Habiller votre site internet (2/2) ..................................................................................................................................... 551
Le coeur ou le corps ? ............................................................................................................................................................................................. 552
Pied de page ........................................................................................................................................................................................................... 552
Et d'un point de vue graphique, a donne quoi ? .................................................................................................................................................... 553
Dmarches et amliorations ................................................................................................................................................................................... 553
TP : ralisation d'une charte graphique ........................................................................................................................ 555
Tout le monde est prt ? .......................................................................................................................................................................................... 555
... C'est parti ! .......................................................................................................................................................................................................... 556
Correction ................................................................................................................................................................................................................ 556
Partie 4 : Annexes ........................................................................................................................... 562
Tlcharger Adobe Photoshop ...................................................................................................................................... 563
Tlcharger ou acheter la dernire version du logiciel ........................................................................................................................................... 563
Les versions de Photoshop ..................................................................................................................................................................................... 569
Pourquoi Photoshop et pas un autre ? .................................................................................................................................................................... 572
Les alternatives les plus connues de Photoshop .................................................................................................................................................... 573

www.siteduzero.com
Dbuter sur Adobe Photoshop ! 4/574

Dbuter sur Adobe Photoshop !

Par Yannick Piault (sp0z)

Mise jour : 24/09/2011


Difficult : Facile

28 452 visites depuis 7 jours, class 11/778


"Affiches publicitaires, mannequins sans dfaut, effets spciaux modernes et ralistes... C'est
incroyable tout ce qu'on peut faire avec la technologie de nos jours !"
Et si on faisait en sorte que ce soit vous qui ralisiez toutes ces belles choses ?

Je ne me moque pas de vous, je suis mme trs srieux ! Figurez-vous que la majorit des images que
vous pouvez apercevoir dans la rue ou sur internet est issue d'un seul et mme logiciel. Je veux parler
de ce logiciel dont le nom ne vous est srement pas inconnu, j'ai nomm Adobe Photoshop !

A qui s'adresse ce cours ? vous, qui trouvez le logiciel trop complexe malgr de multiples tentatives
et qui tes toujours ce que l'on appelle un novice, ou bien toute personne qui dsire dcouvrir pour
la premire fois le logiciel dont la rputation n'est plus faire.

Je me suis fix plusieurs objectifs. Si je vais faire mon possible pour vous initier aux diffrents aspects du logiciel, je vous aiderai
surtout tre moins dbutant et ainsi, je vous apporterai les bases ncessaires pour mener bien vos projets, quels qu'ils soient.

En d'autres termes, votre lecture vous permettra d'accroitre progressivement vos performances et vos connaissances dans le
domaine de l'infographie. Voici un petit rcapitulatif de ce que nous allons aborder dans le cours :

Maitrise des outils de Photoshop


Connaissance des raccourcis clavier
Dcouverte des principales fonctionnalits du logiciel
L'art de la retouche photographique
Conception et ralisation d'un logo et d'une charte graphique destins au web
Acquisition du vocabulaire et des termes techniques lis l'infographie
Des travaux pratiques pour faire un point sur vos connaissances
Des fichiers tlcharger tout au long du cours pour une pratique rgulire.

Rassurez-vous, aucune notion en graphisme n'est exige pour suivre ce cours.

Mais avant de commencer, je me dois de remercier trs chaleureusement victor pour m'avoir fourni de magnifiques photos sur
lesquelles je vais vous demander de travailler tout au long du cours!
Je dois par ailleurs vous avertir qu'il est possible que nous ne travaillons pas sur la mme version du logiciel (j'utilise la version
CS5, qui est la dernire version connue l'heure o j'cris ces lignes). Si votre version est suffisamment rcente, vous pourrez
priori suivre le cours correctement, j'ai en effet conu un programme d'apprentissage adapt un maximum de versions du
logiciel. Il se peut cependant que certains outils ne soient accessibles qu' partir de la version CS4 de Photoshop, ne soyez alors
pas tonns si je venais les traiter .

Par ailleurs, Adobe Photoshop est un logiciel ddi aux professionnels de l'imagerie informatique. Il s'agit donc d'un
programme payant et qui vous en cotera un peu plus de 1000 euros. Permettez-moi donc de croire qu'un tel produit
n'est pas accessible tout le monde.
Il existe par ailleurs une "student version" qui vous en cotera pas loin de 240 euros. S'il s'agit du mme logiciel, seuls
les collgiens, lycens, tudiants et enseignants sont concerns par cette offre. Alors si vous faites partie des

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 5/574

chanceux, profitez-en .
Heureusement, pour les autres, il existe une version d'valuation qui vous permettra d'utiliser le programme avec toutes
ses fonctionnalits pendant 30 jours. Croyez-moi, c'est amplement suffisant pour notre apprentissage, condition de
suivre le cours rgulirement, mais votre rythme, videmment .

- -

Quatre premires images respectivement ralises par Clems et sp0z.

So, let's go !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 6/574

Partie 1 : Dcouverte de Photoshop (acquisition des bases)

Durant cette partie, aucune fantaisie de prvue, nous ferons dans le simple et allons aborder des notions qui vous sont
normalement inconnues mais qui n'en restent pas moins trs importantes en infographie.

Il s'agit d'une partie soft qui va vous permettre de commencer doucement sur Photoshop. Plus on avancera, plus vous vous
sentirez l'aise avec les diffrentes fonctionnalits du logiciel et moins de mal vous aurez raliser ce qui trotte dans votre tte
depuis tout ce temps ...

Vous allez voir qu'avec Photoshop, mme quand on y va mollo, bah a en jette un max !

Vous avez dit "Photoshop" ?


Si vous avez dcid de suivre ce cours, c'est que vous avez probablement dj entendu parler d'Adobe Photoshop et mieux
encore, peut-tre souhaitez-vous l'utiliser pour vos projets personnels ou professionnels.

En prenant les exemples les plus communs, j'imagine que certains d'entre vous prvoient de retoucher des photos (ah, ces
satans yeux rouges !), que d'autres aimeraient crer des formes sophistiques et suffisamment jolies pour concevoir, par
exemple, un logo de toute pice, ou alors, plus fort encore, quelque chose me dit que la majorit d'entre vous dsirent raliser
l'entire partie graphique de son site internet, autrement dit sa charte graphique, son "design". Et bien, vous avez frapp la
bonne porte ! J'ai crit ce tutoriel pour que vous puissiez enfin utiliser Photoshop comme vous auriez aim le faire aprs l'avoir
install sur votre machine.

Mais alors attention, il faut que je mette les points sur les i tout de suite pour viter les mauvaises surprises. Je suis absolument
incapable de dvelopper votre esprit cratif et encore moins capable de faire de vous des Picasso modernes. Ce n'est pas l
l'objectif de ce cours, et je pense d'ailleurs qu'il est techniquement impossible qu'un tel cours fonctionne.

En fait, la lecture de ce tutoriel vous permettra d'avoir les bons outils en main pour dvelopper tout seul votre esprit cratif et
ainsi, raliser ce que vous aimeriez raliser. Comme n'importe quel apprentissage, c'est en exprimentant que l'on s'amliore. Je
vous rappelle que j'ai commenc comme vous .
Photoshop, kzako ?
Avant d'utiliser un programme aussi complet que Photoshop, je vous propose une brve description du logiciel (mais alors trs
brve, hein).

Pour cela, je me suis aid de la plus grande encyclopdie du web, Wikipdia pour ne pas la citer, dont les quelques textes
suivants m'ont sembl suffisamment brefs et descriptifs.

"Photoshop est un logiciel de retouche, de traitement et de dessin assist par ordinateur". dit
par Adobe Systems, il fait partie d'une longue suite logicielle touchant dans le domaine du
multimdia qui est connue sous le nom d'Adobe Creative Suite (Photoshop, Illustrator, InDesign,
Dreamweaver, Flash, entre-autres).

Il est surtout utilis pour le traitement de photos numriques (ce que l'on appelle plus
communment la retouche photographique), mais sert galement la cration d'images.

"Reconnu principalement par les infographistes professionnels travers sa puissante galerie de


filtres et d'outils graphiques performants, il est maintenant enseign dans les plus grandes coles
et est utilis par une grande majorit des studios et agences de crations."

Infographie et graphisme, du pareil au mme ?

Je le disais en dbut de cours, utiliser Photoshop relve du domaine de l'infographie. J'ai pu


constater de par mon exprience que l'on confondait trs souvent le graphisme et l'infographie.
S'ils recouvrent et dfinissent une mme discipline, on distingue l'un de l'autre de par les outils
dont on fait usage.

Le graphisme dsigne l'activit qui consiste crer, choisir et utiliser des lments graphiques (dessins, caractres
typographiques, photos, couleurs, etc.) pour laborer un objet de communication et/ou de culture.

L'infographie, quant elle, est dfinie comme tant le graphisme combin lutilisation d'un ordinateur et des logiciels prvus

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 7/574

cet effet. En fait, l'infographie, c'est du graphisme par informatique .

Pas de problme pour ce premier chapitre, l'essentiel a t dit, on peut passer la suite .
L'espace de travail
Maintenant que les prsentations sont faites, je vous invite tlcharger le logiciel ou l'ouvrir si vous l'avez dj .

Si vous ne savez absolument pas comment tlcharger Photoshop, pas de panique, j'ai pens vous. J'ai rdig un chapitre pour
vous guider et vous informer des diffrentes dmarches suivre pour acqurir le logiciel. Pour accder ce chapitre, veuillez
cliquer ici.

Pour les plus tmraires qui n'ont pas besoin de moi, voici un lien menant directement vers le site de tlchargement du logiciel :

Votre tlchargement est termin et le logiciel est enfin ouvert ? Alors on peut commencer .

Paramtrer votre espace de travail

L'espace de travail, c'est ce que vous pouvez voir en premier l'ouverture de Photoshop. Il s'agit de l'interface du logiciel, c'est--
dire cet horrible fond gris et les fentres que vous trouverez aux extrmits gauches et droites de votre cran (avec tous les petits
boutons qui font peur aux dbutants ).

Cliquez sur l'image pour l'agrandir.

C'est dans cet espace de travail que tout se passe, ici que l'infographiste passe le plus clair de son temps, ici que nous allons
travailler. Il s'agit mtaphoriquement du bureau de travail sur lequel il dessine et l o sont disposs gomme, crayons de couleur
et feuilles blanches (entre-autres bien entendu).

Mais alors, comment se prsente cet espace de travail ? Cette comparaison avec un bureau de travail rel est-elle vraiment
pertinente ?

Cliquez sur l'image pour l'agrandir.

Nous le prsenterons en 5 fois, chacune des parties tant remplie d'une couleur spcifique sur l'image ci-dessus.

1. Barre des menus : cette srie de boutons va nous tre utile pour ouvrir, enregistrer, fermer, diter et modifier un document. Je
suis d'ailleurs convaincu que certains boutons vous sont dj familiers, ceux-l reviennent souvent dans n'importe quel logiciel
.

2. Barre d'options des outils : il s'agit de la barre d'options des outils. Nous utiliserons les fonctionnalits de cette barre pour
dfinir une ou plusieurs options spcifiques aux outils de notre logiciel afin de les paramtrer.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 8/574

3. Bote outils : cette petite fentre constitue notre stock d'outils, autrement dit la trousse dans laquelle nous trouverons paire
de ciseaux, pinceaux, crayons de couleur, gomme et j'en passe.

4. Palettes flottantes : la zone de couleur orange encadre ce que l'on appelle les palettes flottantes, autrement dit ce sont des
petites fentres que l'on dispose l'intrieur de l'espace de travail et partir desquelles nous aurons accs la majorit des
fonctionnalits dont nous disposons avec Photoshop. Parmi elles, je peux vous citer l'historique, les calques, les couleurs, le
navigateur et... la boite outils ! Oui, oui, la boite aussi est une palette flottante dans la mesure o l'on peut la dplacer notre
guise dans l'espace de travail.

5. Palettes flottantes masques (raccourcis) : cette zone accueille et recense les raccourcis des palettes flottantes. Le principe
est simple : vous dposez toutes les palettes flottantes que vous dsirez l'intrieur de cette petite zone puis elles se
transforment en de petites vignettes que vous n'aurez alors plus qu' "dplier" pour leur faire reprendre une apparence
"normale" (comme celles de la partie orange de l'espace de travail ci-dessus, c'est--dire que le contenu de la palette devient
visible).
Ces raccourcis sont trs utiles car ils permettent de gagner en lisibilit mais aussi en accessibilit : imaginez s'il fallait afficher en
intgralit toutes les palettes flottantes dont nous aurons besoin pour travailler, on n'aurait plus de place et on ne s'en sortirait
pas !
Pour afficher le contenu d'une palette miniaturise, il suffit de cliquer sur la petite vignette qui lui correspond.

Rassurez-vous, si certains des termes que je viens d'employer ne vous parlent pas aujourd'hui et ont mme tendance vous
effrayer, je vous assure qu'ils n'auront plus de secrets pour vous la fin de ce cours.

Les palettes flottantes sont propres Photoshop, a n'existe pas dans la vraie vie. On peut donc dire que ta
comparaison entre l'espace de travail et le bureau de travail rel tait... bidon ?

En thorie, votre raisonnement est logique et indiscutable. Pourtant, je dirais que l'espace de travail sur Photoshop, c'est comme
un bureau de travail rel, mais avec les avantages que l'informatique apporte et permet, comme par exemple l'historique ou encore
le paramtrage des outils (et s'il n'y avait que a !) .

(Ar)ranger son espace de travail

Il est important de prter attention la disposition des lments dans l'espace de travail. Il s'agit tout simplement de travailler
dans de bonnes conditions pour s'assurer d'un travail aussi optimal que possible. Nous allons donc faire un peu de rangement et
ne garder que ce dont on aura vraiment besoin.
Outre le ct pratique, soigner la prsentation de son espace de travail permet une bonne visibilit. Comme dans beaucoup
d'autres domaines, travailler dans de bonnes conditions est un point essentiel en infographie et je ferai le maximum pour vous y
endoctriner, comptez sur moi .

L'espace de travail que vous trouverez par dfaut l'ouverture du logiciel ne me parait pas suffisamment adapt pour nous qui
sommes ici pour dbuter, si bien que l'on va y apporter quelques modifications mineures juste histoire de le rendre un peu plus
intuitif, clair et donc accessible.
Si je n'tais pas l'auteur de ce cours, je vous dirais d'organiser votre espace de travail comme bon vous semble, tant que vous
vous sentez votre aise pour bosser. Aprs tout, c'est votre problme si vous tes bordlique .
Pourtant, je vais quand mme vous conseiller d'adopter un nouvel espace de travail. Au programme : nouvelle disposition des
lments et ajout des palettes flottantes que nous utiliserons tout au long de ce cours. Cela vous permettra la fois de vous y
retrouver plus facilement avec mes exemples et mes explications dans la suite du cours, la fois d'obtenir un espace de travail
fonctionnel et prsentable.

Avant de commencer notre petit nettoyage, notez que Photoshop nous suggre une srie de quelques espaces de travail pr-
disposs, tous conus en fonction de disciplines et techniques de travail ncessitant une panoplie outils approprie. Vous
trouverez la liste de ces quelques espaces de travail en haut droite de votre logiciel :

Actuellement, vous tes sur l'espace de travail par dfaut, intitul "Les indispensables" (rfrence, j'imagine, aux outils et
fonctionnalits les plus couramment utiliss). Vous pouvez basculer vers l'espace de travail nomm "Conception" en cliquant sur
ce mme bouton. Il s'agira d'un espace de travail ddi aux techniques de conception, comme son nom l'indique. Mais la liste est
plus longue qu'elle n'y parait. En effet, en cliquant sur la double-flche de droite, vous ferez apparaitre d'autres espaces de travail
que vous tes alors libre de choisir en cliquant dessus.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 9/574

Mais pas trop vite ! Rappelez-vous que j'avais pour ide de vous faire crer un espace de travail personnalis, c'est--dire
spcialement tudi pour vous et ce cours .

Il est donc temps de nous atteler la dure tche qu'est la disposition des palettes flottantes. Tout d'abord, il va nous falloir
slectionner celles que nous souhaitons voir apparaitre dans notre espace de travail, le placement de chacune viendra aprs.
Direction la barre des menus, o je vous invite cliquer sur le bouton Fentre afin que le menu apparaisse. Veuillez ensuite
cocher les lments suivants en cliquant simplement dessus avec le curseur de votre souris :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 10/574

Veillez bien slectionner toutes les palettes indiques sur l'image ci-dessus. Attention : inutile de vous alarmer si vous
n'apercevez pas la petite encoche ct du nom de toutes les palettes o vous viendrez de cliquer (par exemple : Historique).
En cliquant dessus, vous avez simplement russi crer son raccourci qui se trouve maintenant l'intrieur de la fameuse zone
prvue pour accueillir les petites vignettes correspondantes. Ainsi, votre espace de travail doit ressembler cela une fois que
vous avez cliqu sur toutes les fentres indiques ci-dessus dans le menu Fentre :

Cliquez sur l'image pour l'agrandir

La moiti du travail a dj t abattue, c'est bientt fini . La prochaine tape consiste disposer nos palettes flottantes
comme j'avais prvu de vous le faire faire tout l'heure. Nous avons plusieurs objectifs :

Retirer la palette flottante Rglages actuellement situe droite puis crer son raccourci.
"Dplier" les palettes flottantes Historique et Navigation puis les disposer droite du logiciel, avec les palettes flottantes
Couleur et Calques.

Allons-y tape par tape et commenons par retirer la palette Rglage. La procdure est plutt simple (un peu comme tout ce qui

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 11/574

va suivre d'ailleurs !), je vais vous demander de cliquer sur la partie suprieure grise fonce de la fentre, ct de l'onglet
"Masques".

Maintenez le clique sur cette barre grise tout en dplaant votre curseur vers la gauche : la fentre se dtache alors, devient
lgrement transparente et "suit" vos mouvements de souris. Placez la palette l'intrieur de la zone raccourcis, en prenant
soin de rester proche des vignettes dj existantes afin de laisser apparaitre un petit trait bleu, signe que votre palette est prte
tre dpose et transforme en vignette. Vous n'avez plus qu' relcher le clique et le tour est jou :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 12/574

Bon, la palette Rglage, c'est fait ! On va maintenant procder l'envers : on va dplacer les petites vignettes correspondant aux
palettes Historique et Navigation pour les "dplier" et les insrer droite, en compagnie des palettes Couleur et Calques. Pfiou,
c'est pas de tout repos !

Maintenant que vous savez comment dplacer une palette flottante, je n'ai qu'une indication vous fournir pour les vignettes. Il
va vous falloir maintenir le clique au niveau des deux traits forms de pointills situs, ici aussi, dans la partie suprieure de la
vignette :

Si vous ne les voyez pas mme aprs a, je ne sais pas ce qu'il vous faut !

Dernire de chez dernire tape : dplacer une bonne fois pour toute les deux vignettes. L'idal mon sens serait que vous
mettiez la palette Navigation tout en haut (n'oubliez pas d'attendre l'apparition du trait bleu sans quoi cela ne fonctionnera pas) et
la palette Historique entre Couleur et Calques. Ainsi, vous devriez obtenir un espace de travail tout beau, tout propre !

Cliquez sur l'image pour l'agrandir

Vous pouvez enregistrer cet espace de travail en cliquant sur la double-flche >> qui affiche la srie d'espaces de travail pr-
disposs offerte par Photoshop, puis en cliquant sur le bouton Nouvel espace de travail....

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 13/574

Vous ferez alors apparaitre la fentre suivante...

Choisissez un titre (Nom :) et cochez Menus. Enfin, cliquez sur Enregistrer pour finaliser la sauvegarde de votre espace de
travail.

Si vous ne dsirez pas prendre modle sur cet espace de travail (ce que je vous dconseille fortement si vous voulez
suivre le cours "comme tout le monde"), c'est votre droit. Toutefois, je vous demande sincrement d'viter d'ouvrir un
tas de fentres qui encombreront inutilement le peu d'espace dont vous disposez pour travailler.

Nous y sommes enfin ? Vous tes donc quips pour travailler sur le topissime, que dis-je, l'normissime PHOTOSHOP !
(J'imagine que j'en fais peut-tre un p'tit peu trop...)
La zone de travail
Avant de penser "effets spciaux", "dgrads de couleur", "formes", "design", enfin bref, tout ce qui se rapporte de prs comme
de loin de l'infographie proprement dire, nous devons prparer le terrain.

Quoi ?! Mais, on l'a pourtant dj prpar notre espace de travail, on ne fait que a depuis le dbut d'ailleurs ...

Oh, non !

Jusqu' maintenant, nous avons juste cherch nous conditionner. Nous avons donc pris le temps d'organiser notre espace de
travail de sorte ce que l'on puisse bosser correctement, avec tous les outils dont nous aurons continuellement besoin tout au
long de ce cours.
Cette tape passe, nous sommes fin prts pour commencer. Mais pour commencer quoi que ce soit, il nous manque l'essentiel :
un support. Bah oui, vous n'crivez quand mme pas sur la table quand vous dessinez la maison, si ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 14/574

Vous l'avez compris, je veux bien entendu parler de la feuille blanche sur laquelle nous allons pouvoir laisser parler notre
crativit la plus sincre (en fait, je n'ose mme pas imaginer ce que cela pourrait donner !).
Sur Photoshop, cette feuille s'appelle "la zone de travail". Je vous le remets une deuxime fois histoire que a s'imprgne bien
parce que vous devez absolument connaitre ce mot :

ZONE DE TRAVAIL

La zone de travail est le nom que lui a attribu Adobe (socit qui dite le logiciel, souvenez-vous), il est donc cens
tre commun tous. Je signale tout de mme qu'il peut m'arriver d'employer d'autres termes pour la dsigner, comme "le
projet", "le document" ou encore "la feuille" (oui, je ne vais pas chercher bien loin parfois).

Le problme avec la zone de travail, c'est qu'on la confond trop souvent avec l'espace de travail. D'ailleurs, vous vous tes
certainement demand si je ne m'tais pas tromp en employant ce nouveau terme ? Ils se ressemblent car leurs noms sont quasi-
identiques, mais c'est pourtant leur seul vrai point commun, et j'espre que vous avez bien fait la part des choses vous aussi :

J'aime comparer l'espace de travail avec un bureau de travail rel. Il s'agit en effet de l'espace dans lequel sont disposs
par exemple nos crayons et nos pinceaux (dans Photoshop, il s'agit des palettes flottantes comme la boite outils et
encore la palette Calques).

La zone de travail, c'est la feuille sur laquelle l'infographiste dessine. Il s'agit d'un lment part entire qui compose
l'espace de travail, au mme titre que la bote outil. D'ailleurs, la zone de travail aussi est une palette flottante !

Crer une zone de travail et la paramtrer

Il est enfin temps de poser une nouvelle feuille blanche sur la table de travail, autrement dit crer une nouvelle zone de travail.
Pour cela, je vais vous demander de cliquer sur le bouton Fichier qui se situe dans la barre des menus puis sur Nouveau.

CTRL + N

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 15/574

Command (ou Pomme) + N

Une nouvelle fentre fait son apparition, elle est intitule "Nouveau".

On remarque au premier abord que cette fentre est majoritairement constitue de champs blancs dj remplis (les champs, ce
sont les petits rectangles blancs, l'image de celui dans lequel il est crit "Sans titre-1"). Il s'agit des valeurs lies aux diffrents
paramtres de la zone de travail que nous sommes en train de crer (ex : "Nom :"). Nous allons tre amens modifier ces valeurs
afin de paramtrer une zone de travail propre nos besoins. Nous allons alors, par exemple, lui dfinir un nom, une taille, etc.

Nous rencontrerons ce type de fentre plusieurs fois dans ce cours. Alors, pour que mes explications soient un tant soit peu
structures et afin de vous assurer une bonne lisibilit, je procderai toujours point par point (ici, paramtre par paramtre), de
haut en bas et de gauche droite tout au long du cours, le tout prsent sous forme de tableau. C'est ce qui me semble tre la
prsentation la plus convenable .

En-tte Dfinition

Titre de la zone de travail, celui que portera le fichier final une fois enregistr dans un dossier de votre
Nom
ordinateur. Ici, il s'agit de "Sans titre-1".

Liste dans laquelle figurent diffrents formats prdfinis. On parle gnralement de format pour dsigner les
dimensions d'une zone de travail ou bien mme d'une image (c'est--dire sa largeur et sa hauteur, on y vient
Paramtre juste aprs). Pour la plupart, ce sont des formats "populaires", comme par exemple les formats A3 et A4 ou
prdfini bien le format type d'une enveloppe traditionnelle.
Le principe est simple, vous n'avez qu' choisir un type de format parmi ceux qui vous sont proposs dans la
liste puis cliquer sur "OK" et Photoshop s'occupe du reste !

Comme son nom l'indique, ce paramtre dfinit la largeur de la zone de travail.


Pour la dfinir, il faut indiquer deux paramtres : une valeur et une unit.
La valeur, c'est le chiffre ou le nombre que prend la mesure (on l'indique dans le champs
blanc, l o il est crit 500 dans l'image ci-dessus).
Largeur
L'unit, c'est la grandeur de rfrence pour mesurer. Par exemple, on dira que la largeur de ma
zone de travail fait 500 (valeur) centimtres (unit). D'ailleurs, les units les plus courantes
en infographie sont certainement le pixel et le centimtre (ce dernier est d'ailleurs galement trs utilis dans
le milieu du btiment).

On retrouve quasiment le mme paramtre ici, l'exception que celui-ci dfinit la hauteur de
Hauteur la zone de travail. Pareil, on indique une valeur et une unit.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 16/574

Tout comme votre cran d'ordinateur, les images que l'on peut consulter l'aide d'un outil informatique
(ordinateur, tlphone portable, iPad...) sont toutes composes de petits carrs de couleur que l'on appelle
pixels.

Un pixel n'a pas de taille bien dfinie. Pour dterminer la taille d'un pixel, il faut dfinir une rsolution pour le
reprsenter graphiquement. Il s'agit plus ou moins d'une chelle comme celles que l'on trouve dans une carte
de gographie. Plus la rsolution est leve, moins les pixels sont gros (on s'loigne). A l'inverse, plus la
rsolution est basse, plus les pixels sont gros car on se rapproche d'eux l'chelle. Wikipdia nous le
dmontre avec cet exemple :

Rsolution

De gauche droite, la rsolution diminue.

La prochaine partie de ce chapitre traite justement des pixels et de la rsolution, je vous invite donc
patienter quelques minutes.

Le mode colorimtrique dfinit le type d'organisation des couleurs pour une image. Par exemple, si je choisis
le mode noir et blanc, je ne pourrai travailler qu'avec ces deux couleurs dans ma zone de travail (ainsi que
Mode leurs nuances, c'est--dire du gris); pas question d'y voir du jaune ou du rouge. Il existe un mode ddi
colorimtrique l'impression (le CMJN), d'autres auront davantage leur place pour le web, etc. Pour info, un chapitre est
consacr aux modes RVB et CMJN dans la deuxime partie de ce cours, prparez-vous "en voir de toutes
les couleurs" .

Sur Photoshop, on parle d'arrire-plan pour dsigner le fond de la zone de travail. On peut paramtrer
l'arrire-plan de trois manires diffrentes : on cre la zone de travail soit avec un fond blanc, soit avec un
fond de couleur (Couleur d'arrire-plan), soit avec un fond sans couleur apparente (Transparent).

Blanc : l'arrire-plan sera naturellement... blanc (c'est celui que j'utilise le plus souvent).

Contenu de Couleur d'arrire-plan : l'arrire-plan prend ici la "couleur d'arrire-plan" dfinie dans ce que l'on
l'arrire-plan appelle la palette de couleurs. Nous reviendrons sur celle-ci un peu plus tard, inutile de s'taler sur le
sujet pour le moment.

Transparent : le fond de zone de travail est ici tout simplement transparent (comme du papier calque).
Cela permet de travailler sans fond et vous verrez que c'est aussi l'un des fonds que l'on sera
susceptibles d'utiliser dans le cours.

Au mme titre que le centimtre qui s'abrge cm, veuillez prendre note que l'abrviation du pixel s'crit px.

Par ailleurs, pour annoncer la taille d'une zone de travail, il existe un jargon qui facilite la tche bon nombre de graphistes. En
effet, plutt que de dire "la largeur de ma zone de travail est de 500 pixels et sa hauteur est de 600 pixels", on prfrera dire
"La taille de ma zone de travail est de 500*600px". On annonce en premier la largeur puis la hauteur du document, en prenant
soin de sparer les deux par le signe de la multiplication et de finir par noter l'unit des deux valeurs, savoir le pixel dans mon
exemple.

Nous avons fait le tour, il est enfin temps de crer cette maudite zone de travail .

En-tte Valeur (champs blanc)

Nom Ma premire zone de travail

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 17/574

Paramtre prdfini Presse-papiers

Taille 500*300 px
Rsolution 72 pixels/pouces

Mode colorimtrique Couleurs RVB pour 8 bits


Contenu de l'arrire-plan Blanc

Les fonctions avances ne nous intresseront pas dans ce cours .

Une fois les paramtres dfinis, vous n'avez plus qu' cliquer sur le bouton OK. Flicitations, Vous avez cr votre premire zone
de travail !

Cliquez sur l'image pour l'agrandir

Afin de vous proposer un aperu instantan de ma zone de travail lorsque nous travaillerons ensemble dans ce cours,
je vous viterai les captures d'cran de l'ensemble de mon espace de travail (et donc de cliquer sur l'image miniature
pour l'agrandir) et ne vous prsenterai directement le contenu de la zone de travail, comme ici :

J'ajoute par la mme occasion que vous pouvez crer plusieurs zones de travail en mme temps. Si vous crez trois zones de
travail par exemple, vous engendrerez l'apparition de petits onglets correspondant chacun une zone de travail juste au-dessus
de la zone de travail ouverte :

Enregistrer son travail

Enregistrer un document sous Photoshop peut se rvler plus complexe qu'il n'y parait. Et a se constate au premier abord car, si
vous n'avez pas touch la zone de travail que vous venez de crer, il n'est priori pas possible de l'enregistrer. Je peux vous le
prouver, hein ! Essayez d'enregistrer votre projet, vous verrez. Il faut cliquer sur Fichier puis Enregistrer dans la barre des

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 18/574

menus. Aucun doute possible, le bouton Enregistrer n'est pas oprationnel !

Et c'est normal. En fait, dans le principe, vous conviendrez qu'il est absolument inutile d'enregistrer un document totalement vide.
En tout cas, il ne semble pas vraiment y avoir d'intrt le faire.

Par consquent, ce bouton ne devient oprationnel si et seulement si vous avez apport des modifications dans la zone de
travail, ce qui n'est pas le cas actuellement.

CTRL + S

Command (ou Pomme) + S

Enregistrer une copie

Il existe tout de mme une solution pour le faire si ncessaire, il s'agit du bouton Enregistrer sous... que vous trouverez juste en-
dessous du bouton Enregistrer.

Ce bouton va nous permettre d'enregistrer une copie de la zone de travail, qu'elle ait subi ou non des modifications au pralable.

Pour rsumer, le bouton Enregistrer permet de sauvegarder la source de notre travail uniquement si des modifications ont dj
t apportes au document tandis que l'autre bouton, Enregistrer sous... sauvegarde une copie de cette source. Ne vous
embtez pas trop avec a, contentez-vous de savoir comment enregistrer votre travail pour l'instant, c'est le plus important .

Dsormais, je vous invite cliquer sur le fameux bouton Enregistrer sous... afin de sauvegarder la zone de travail que vous
venez tout juste de crer. videmment, si nous avions pu cliquer sur le bouton Enregistrer, nous l'aurions fait. Mais que nous
passions par l'un ou l'autre, cela ne change rien, la procdure d'enregistrement est de toute faon la mme dans les deux cas.

CTRL + MAJ + S

Command (ou Pomme) + Maj + S

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 19/574

Je suis conscient que pour la plupart d'entre-vous, enregistrer un document sur son ordinateur n'a rien de sorcier. C'est vrai,
aprs tout, la plupart des logiciels demande ce que l'on passe par la case enregistrement.
Mais Photoshop n'est pas un logiciel comme les autres . Sa fentre d'enregistrement est bien plus spcifique et demande
tre tudie plus srieusement.

Je le rpte, je procderai de haut en bas et de gauche droite comme je l'ai fait lors de la cration d'une nouvelle zone de travail.

1. Vous pouvez dans un premier temps choisir la destination de votre enregistrement (Enregistrer dans :). Autrement dit
"dans quel rpertoire de mon ordinateur vais-je enregistrer mon fichier ?".

2. Ensuite, vous avez le contenu du rpertoire dans lequel vous vous apprtez enregistrer votre fichier. Sur l'image, nous
sommes dans le Bureau. Donc, le contenu du bureau s'affiche, vous ensuite de choisir le dossier dans lequel figurera
votre document.

3. Vous pouvez ensuite dfinir le nom que portera votre fichier. Si vous avez choisi "Ma premire zone de travail" comme je
vous l'avais demand tout l'heure, au moment de crer la zone de travail, c'est ce qui devrait alors s'afficher dans le
champs blanc. Si vous n'avez rien crit, le nom du fichier propos par Photoshop est "Sans titre-1". De toute faon, c'est
vous de choisir le titre de votre document.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 20/574

4. Vous devez ensuite choisir le format de votre fichier... et c'est l que j'interviens.
Observez le contenu de la liste droulante. Certains des formats ne vous seront sans doute pas inconnus. Il devrait y en
avoir une quinzaine (selon les versions, je suppose que ce chiffre peut changer).

Je ne vous parlerai que de ces 4 formats seulement :

Format Extension(s)

Photoshop .PSD ; .PDD


JPEG .JPG ; .JPEG ; .JPE

PNG .PNG
PDF .PDF

Pourquoi ces quatre-l et pas les autres ?

Ces quatre formats sont ceux que vous utiliserez sans aucun doute le plus frquemment, en tout cas ce sont ceux dont vous
aurez forcment besoin un jour ou l'autre. Les autres ne sont pas facultatifs mais sont spcifiques certains domaines que nous
n'aborderons pas dans ce cours.

Le format Photoshop (dont l'extension la plus connue est .PSD) est le format type de Photoshop. Il s'agit du format "source" de
votre travail, celui dans lequel on retrouve tous les lments qui le composent, toutes les modifications qui y ont t apportes,
l'historique, etc. Ce n'est pas vritablement une image : c'est un fichier ddi la modification et qu'on ne peut ouvrir qu'avec des
logiciels de traitement d'image, comme Photoshop videmment ou ventuellement The GIMP par exemple.

Lorsqu'on cre un nouveau document, celui-ci prend donc en premier lieu l'extension .PSD. Par exemple, le premier document que
vous avez cr et que vous vous apprtez enregistrer se nommera "Ma premire zone de travail.PSD". Il s'agira, je rpte, du
document source de votre travail, celui par lequel vous devrez obligatoirement passer pour effectuer des modifications sur votre
travail.

Le plus souvent, on a un objectif en crant une nouvelle zone de travail : l'enregistrer et obtenir une image fixe, c'est--dire un
fichier non destin la modification mais plutt la visualisation. N'est-ce pas ?
Alors, vous conviendrez qu'il faille en fait transformer le fichier source (.PSD) en un fichier image ?
a tombe bien, on a justement un bouton qui permet de crer une copie du fichier source... Vous voyez o je veux en venir ?

Je parle en effet du bouton Enregistrer sous... ! On va enregistrer une copie du fichier Photoshop et lui dfinir un format
permettant de le transformer en un fichier de visualisation, c'est--dire de transformer notre travail sous forme d'image.

1. Je sauvegarde mon travail au format .PSD (fichier source).

2. J'enregistre une copie de cette source.

3. Je lui attribue un format qui engendrera la transformation de cette copie en une image, c'est--dire un fichier qui permet de
visualiser le contenu du fichier source sans passer obligatoirement par Photoshop.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 21/574

Mais alors, c'est le format JPEG ou le format PNG qu'il faut utiliser pour faire une image ?

On va utiliser les deux !

Bon, on l'a compris, ils prsentent tous les deux une mme fonctionnalit, c'est d'ailleurs celle que je me tue essayer de vous
expliquer : ils transforment tous les deux le fichier source en un fichier image (jusque l, pas de surprise). En revanche, on peut
noter que leurs caractristiques sont diffrentes, c'est--dire qu'ils ne vont pas transformer de la mme manire. Et c'est pour cela
qu'il ne faut pas les confondre et que l'on utilise gnralement soit l'un ou soit l'autre, selon nos besoins et nos envies aussi.

Le JPEG est un format trs lger. Cela signifie qu'il n'occupera que trs peu de place sur le disque dur de votre ordinateur.
Mais on n'a rien sans rien : malheureusement, la qualit de l'image risque fortement d'en prendre un coup si vous utilisez
ce format. En effet, plus le fichier est lger, plus la qualit de l'image diminue. On peut toutefois noter que ce format est
paramtrable ce qui le rend plus maniable aussi, mais on ne va pas rentrer dans les dtails, cela nous importe peu pour
l'instant .

Le JPEG ne gre pas la transparence !

Les caractristiques du PNG sont peu prs l'inverse de celles du JPG. En effet, le PNG permet d'enregistrer une image
avec une qualit des plus optimales. Or, plus la qualit de l'image est bonne, plus le fichier est lourd et de ce fait, il
occupera plus de place sur le disque dur de votre ordinateur. L'autre atout du PNG est qu'il gre la transparence
contrairement au JPEG.

En rsum, nous savons que :

Enregistrer une zone de travail au format Photoshop (.psd) revient crer un fichier source. On peut donc modifier le
contenu de ce fichier et ne le visualiser qu'avec un logiciel de traitement d'images comme Photoshop.

Enregistrer une copie de cette zone de travail .PSD au format .JPEG permet de transformer ce document en une image (un
fichier prvu la visualisation). La qualit de l'image ne sera pas optimale, mais le fichier ne prendra pas beaucoup de
place sur votre disque dur. Attention, il ne supporte pas la transparence.

Enregistrer au format PNG permet galement de transformer un document Photoshop en une image. Mais l'inverse, la
qualit de celle-ci restera excellente, l'inverse de son poids qui sera cette fois plus lev. Ce format supporte la
transparence.

Pour enregistrer un fichier source (.PSD), il faut passer par le bouton Enregistrer. Pour enregistrer une copie de ce fichier
source, il faut cliquer sur Enregistrer sous....

Les options d'enregistrement (en bas de la fentre d'enregistrement) ne nous intressent pas vraiment.

Aprs avoir cr votre premire zone de travail, vous savez maintenant comment l'enregistrer, vous pouvez encore vous fliciter
!

Attention, Photoshop ne sauvegarde pas automatiquement vos travaux une fois qu'ils sont enregistrs une premire
fois, contrairement d'autres logiciels comme Microsoft Word. En d'autres termes, une fois enregistr, vous devez tre
trs prvoyant et sauvegarder rgulirement vos donnes. Je vous mets en garde .

Enregistrer au format PDF

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 22/574

Ce dernier format est un peu plus particulier que ceux que nous venons d'tudier. Le PDF, tir de l'anglais Portable Document
Format (format de document multiplateforme en franais), est un format cr et dvelopp par Adobe, le crateur de Photoshop
lui-mme.

Le pouvoir du PDF rside essentiellement dans sa capacit conserver certaines proprits du document enregistr. Je
m'explique.

Pour comprendre, il va falloir sortir du contexte "Photoshop", et entrer dans un autre univers : celui du traitement de texte. Quand
on cre un nouveau document avec Microsoft Word ou OpenOffice Writer par exemple, et qu'on l'agrmente de textes et images
toutes positionnes selon nos souhaits, on cre ce que l'on appelle une mise en forme.

En enregistrant ce fichier source au format PDF, on l'enregistre en un format de visualisation (au mme titre que l'image), mais
avec la particularit que celui-ci conservera les proprits de mise en forme. Par exemple, les textes, s'il font "x taille" dans le
fichier source, feront "x taille" galement dans le fichier PDF.

Tu veux dire que le texte change de taille quand on enregistre un fichier PSD en fichier image ?

Absolument pas, non. En l'occurrence, pour reprendre l'exemple des textes sous Photoshop enregistrs en fichier image, il ne
s'agira plus vraiment de textes proprement dire. En effet, il faut comprendre les textes eux-mmes sont finalement transforms,
d'une certain faon, en format image. Avec le PDF, les textes restent des textes. D'o le terme de "portabilit" : on transfert tout
plein d'informations conserves dans le format source, dans un nouveau type de fichier dont le format est PDF. De mme, les
images restent des images. Elles ne sont pas toutes transformes en un seul et mme fichier image : chacune garde son format
d'origine (.PNG par exemple) et se retrouvent dans le fichier PDF qui joue le rle de support de ces images, la place qu'on leur a
donne initialement dans le fichier source du traitement de texte.

Le cas Photoshop

Sur Photoshop, c'est un petit peu diffrent. Vous le savez, lorsque l'on enregistre notre travail (.PSD) en un fichier de
visualisation au format PNG par exemple, on le transforme en image. Jusque l, rien de nouveau.

En revanche, un fichier PDF enregistr la base via Photoshop va contenir des donnes bien spciales que l'on appelle des
pixels (nous reviendrons dessus dans la partie suivante). Pour faire simple, on peut dire que le fichier PDF contient un fichier
image.

a sert quoi alors, le PDF ?

Avant tout, il faut savoir que le PDF ne peut se lire qu'avec un logiciel ayant la capacit de l'ouvrir. Le plus connu et le plus
utilis est Adobe Reader.

Ainsi, si vous ralisez une image sous Photoshop, il vous faudra un visualiseur d'image pour l'ouvrir. Si vous crez un PDF,
Adobe Reader se chargera de le lire. Mais dans le principe, votre PDF sera une image, c'est pour cela que l'on peut dire que
"l'image se trouve dans le fichier PDF". Finalement, ce dernier ne fera qu'office d'intermdiaire.

D'une manire gnrale, on cre relativement rarement des fichiers PDF sous Photoshop. Si on le fait, c'est aussi parce que le
PDF est devenu un format trs courant et trs demand. C'est d'ailleurs aussi pour a que je voulais vous en parler. Vous-mme,
vous avez dj ouvert un PDF au moins une fois dans votre vie, j'en suis convaincu.

Dans la majorit des cas, on utilise le PDF pour, par exemple, mettre en ligne et en consultation des plaquettes de prsentation. Il
est aussi le format le plus apprci/demand pour la consultation de CV (curriculum vitae). Ainsi, vous serez la fin de ce cours
en mesure de crer un CV sophistiqu de toute pice, et de l'enregistrer au format PDF pour qu'il soit grandement consultable (et
consult peut-tre ? ;))

Ouvrir un document

Je vous explique trs rapidement comment ouvrir un document, c'est un vrai jeu d'enfant !

La premire tape, c'est de cliquer sur Fichier dans la barre des menus puis sur Ouvrir.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 23/574

CTRL + O

Command (ou Pomme) + O

La fentre ci-dessous apparait soudainement.

Allez dans le dossier dans lequel vous avez enregistr votre projet "Ma premire zone de travail.PSD" et, une fois trouv,
double-cliquez dessus, ou bien cliquez une fois de dessus puis sur le bouton Ouvrir.

C'est pas plus compliqu que a, vous venez d'ouvrir votre document .
La minute thorique : un point sur le Pixel
J'ai une petite question vous poser avant de clturer ce premier chapitre . Cela ne concerne pas seulement Photoshop, il
encadre en fait le domaine de l'infographie. Pour ceux qui ne s'en souviendraient pas (les tourdis quoi !), l'infographie est une
discipline qui consiste faire du graphisme par informatique. D'ailleurs, je vous l'annonce au passage, vous aurez plusieurs fois
affaire ce genre de chapitre qui sont lis Photoshop mais qui ne concernent pas que lui.

Enfin bref, o en tait-je ? Ah oui, je voulais vous poser une question. Savez-vous comment fonctionne votre cran d'ordinateur
?

Euh... bah il est branch mon unit centrale et il affiche tout ce que je veux...

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 24/574

Oui, mais a tout le monde le sait, mme si je souligne la logique de votre raisonnement ! Maintenant, allons plus loin :
sauriez-vous me donner plus de prcisions sur comment l'cran affiche ce que vous voulez justement voir ? Par exemple, avez-
vous une ide de pourquoi votre cran met de la lumire ?

Si vous n'avez pas rponses mes questions (j'espre bien que c'est le cas sinon je vais me retrouver tout seul...), je vais
m'empresser de vous expliquer tout cela. Et pour ce faire, je vais avoir besoin d'un cran d'ordinateur !

Woooah ! Un cran d'ordinateur !

Nous nous concentrerons sur la partie principale de l'cran, celle qui est la source de l'affichage et sur laquelle vous tes
justement en train de lire ces textes. L'cran ci-dessus est actuellement teint.

Allumons-le pour voir ce qu'il laisse apparaitre.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 25/574

Le Site du Zro sur Windows 7 et un cran Apple, comme a pas de jaloux.

Lorsque l'cran de mon ordinateur tait teint, il tait noir, inanim. En l'allumant, deux lments nouveaux sont apparus : de la
lumire et de la couleur.

Ces deux lments ne sont pas arrivs par la bont du St-Esprit. En fait, en allumant l'cran, j'ai mis en route tous les pixels de cet
cran.

Les pixels ? a me dit quelque chose ce truc, je crois en avoir dj entendu parler quelque part...

Et comment que vous en avez entendu parler ! Ce mot est devenu super courant et on l'emploie constamment pour parler
notamment d'crans, qu'il s'agisse d'une tlvision ou d'un ordinateur. Mais savez-vous quel est le rle du pixel, comment il
fonctionne ?

Je vais vous expliquer, mais permettez-moi avant de rcapituler brivement ce que l'on vient de dire pour m'assurer que vous avez
bien saisi :

L'cran, quand il est teint, est tout noir : ni lumire, ni couleur ne s'en chappe.
Quand il est allum, en revanche, il laisse apparaitre de la couleur et de la lumire.
On peut apercevoir ces deux lments grce aux pixels de l'cran.

Un cran peut tre (de nos jours du moins) compos de plusieurs milliers voire millions de pixels.

Chaque pixel d'un cran est rempli d'une couleur unique (le bleu par exemple) et met de la lumire. Ainsi, en allumant votre cran
d'ordinateur, vous demandez tous les pixels de cet cran de s'veiller et d'afficher chacun une couleur permettant de composer,
eux tous, ce qu'affiche l'cran. Par exemple, quand vous consultez le Site du Zro, vous tes en face de millions de petits pixels
formant tous le graphisme du site, celui que vous avez actuellement sous les yeux. Si vous changez de page ou que vous vous

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 26/574

dplacez diffrents endroits d'une mme page, vous allez alors demander ce que le graphisme du site soit diffrent : vous
engendrerez donc une modification des couleurs de chaque pixel. Vous me suivez ?

Une image numrique

Si notre cran d'ordinateur est compos de pixels, il en est de mme pour les images que l'on consulte l'aide d'un outil
informatique (tlphone portable, ordinateur, appareils photo, ...). Cela rejoint justement ce que je vous disais : quand l'cran
affiche quelque chose (une image, un site internet, un jeu vido, peu importe), ce sont les pixels qui s'veillent et qui se
colorisent et forment ce quelque chose. On appelle les images formes de pixels des images numriques.

On se sert des pixels d'une image numrique comme unit de mesure ce qui nous permet ainsi de lui dfinir une taille, plus
communment appele les dimensions de l'image.

Tu nous parles de taille, d'unit de mesure, ... Mais d'abord, un pixel, a ressemble quoi ?

Un pixel est de forme rectangulaire (le plus souvent, il ressemble un carr). Pour s'en rendre compte et voir de plus prs quoi il
ressemble vritablement, il va falloir regarder de plus prs notre cran d'ordinateur. Observez attentivement la bote messages
privs situe en haut droite de votre cran et du site.

Est-ce que vous voyez tous les petits carrs de couleur qui forment l'image de la bote messages privs ?

Non ?

Vraiment ?

Et en zoomant sur l'image, vous ne les voyez toujours pas ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 27/574

Bon sang ! C'est tout flou, j'ai l'impression que l'image est toute brouille et effectivement, j'ai l'impression d'apercevoir
des petits carrs de couleur un peu partout...

Vous n'avez pas fini de voir de telles horreurs, je vous le dis . Enfin bon, voil donc quoi ressemble un pixel ! Et si vous
avez encore un peu de mal apercevoir les pixels dont je vous parle, jetez donc un il sur cette image :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 28/574

Cliquez sur l'image pour l'agrandir

Grce cet aperu, on peut voir absolument chaque pixel de l'image. Si nous n'avions pas zoom, nous n'aurions pas pu
reconnaitre un pixel d'un autre tellement ils sont mconnaissables, ou alors trs difficilement, except peut-tre ceux dont les
couleurs sont suffisamment diffrentes. D'ailleurs, c'est pas bien compliqu de s'en rendre compte, il suffit d'observer votre cran
et de le constater par vous-mme : impossible d'apercevoir concrtement l'existence des pixels tellement ils sont minuscules. A
moins d'avoir un appareil photo super performant :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 29/574

vhf/victor

On aura tous reconnu le logo du Site du Zro, vritable identit graphique du site sur lequel vous tes en train de surfer. Ce qui
est gnial sur cette photo, c'est que l'on distingue sans problme tous les pixels qui composent le logo. Vous commencez
comprendre maintenant la notion de pixel ?

A propos, quand je vous disais qu'une image pouvait tre compose de milliers ou de millions de pixels, je ne vous mentais pas.
Il m'a suffi de zoomer sur l'icne de la bote messages privs (juste au-dessus de la photo du logo du SdZ) pour avoir russi
compter plus de mille pixels (oui, j'ai compt, il y en a trs exactement 1734). Comprenez que je n'ai pas cherch compter le
nombre de pixels du reste de l'cran, je n'en serais jamais sorti indemne...

Comment t'as pu compter tous ces pixels un par un ? Il y en a tellement !

Ne vous mprenez pas, je n'ai pas vritablement compter tous ces pixels un par un. En fait, c'est trs facile ! Si vous dfinissez
par exemple la taille de 400*250px une zone de travail, vous aurez alors trs prcisment 100.000 pixels vides remplir. Comment
je le sais ? Il m'a juste suffit de multiplier le nombre de pixels de la largeur par le nombre de pixels de la hauteur, soit 400 par 250.
Ainsi, j'obtiens le nombre exact de pixels de l'ensemble de ma zone de travail.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 30/574

Tu nous as montr quoi ressemblait un pixel. Mais finalement, a fait quelle taille, un pixel ?

Question anodine mais pourtant trs subtile. S'il peut tre carr ou rectangulaire et qu'il est une unit de mesure, les dimensions
d'un pixel sont modulables.

Pour donner une taille au pixel, il faut en fait utiliser une autre unit de mesure. Prenons par exemple le centimtre. On peut ainsi
dire que 5 pixels vaut 1 centimtre (ce n'est pas exact hein, c'est juste pour l'exemple), comme on pourrait dire d'ailleurs que 1
centimtre vaut 10 millimtres (a c'est vrai par contre ). Et pour dfinir le nombre de pixels pour telle unit de mesure, on
va utiliser ce que l'on appelle la rsolution.

La rsolution

La rsolution signifie dans notre cas "combien de pixels quivaut un centimtre, trois centimtres, deux millimtres, ...".

En informatique, mme s'il n'est pas interdit d'utiliser notre bon vieux centimtre, on a plutt tendance utiliser l'unit de mesure
amricaine par excellence, le pouce (un pouce quivaut par ailleurs 2,54 centimtres).

Mais, le pixel aussi, c'est une unit de mesure. Pourquoi on ne l'utilise pas ?

Quel est l'intrt pour nous de dire "un pixel quivaut trois pixels", sachant qu'on ne sait mme pas combien vaut un pixel ?
D'o l'intrt d'utiliser une autre unit de mesure comme rfrence pour dfinir la taille d'un pixel. Et encore une fois, cela consiste
utiliser la rsolution :

Ces valeurs sont approximatives, je ne les ai pas vrifies.

Sur cette image, on a dtermin le nombre de pixels pour un pouce, tel qu'on le ferait pour dfinir une chelle gographique (par

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 31/574

exemple, 1 centimtre sur une carte de l'Europe quivaudrait 25 kilomtres).

On dira donc que la rsolution de cette image est 30 ppp (pixels-par-pouce).

Dans ce cours, nous travaillerons quasiment tout le temps avec le pixel comme unit de mesure. Autrement dit, nous crerons
des images numriques en utilisant les pixels, ce que l'on appelle plus communment des images matricielles (ou images
pixelises, ou image BITMAP en anglais).

Ca veut dire quoi "quasiment tout le temps" ?

Nous verrons plus tard qu'il existe une toute autre technique pour crer des images, mais il n'est pas ncessaire que je vous en
parle tout de suite car elle ne nous sera vraiment utile qu' partir de la troisime partie de ce cours. Pour le moment, retenez
l'essentiel, savoir que nous crerons pour un temps des images numriques grce aux pixels et qu'on appelle ces images des
images matricielles.
Le premier chapitre de ce cours s'achve ici. Les notions que vous venez d'acqurir vous permettront d'assimiler plus facilement
les informations qui suivent dans la mesure o vous allez comprendre ce que vous faites (ne rigolez pas, le cas contraire n'est
pas rare dans le mtier !).

Puisque nous avons termin les prparatifs et que nous avons appris ce qui me semble lmentaire pour commencer le cours, il
est dsormais temps de passer aux choses srieuses !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 32/574

La fentre de calques
J'imagine que Photoshop est majoritairement utilis par les infographistes de mtier mais qu'une bonne partie de ses utilisateurs
est encore amateure et mme dbutante comme c'est actuellement votre cas.

Parmi leurs objectifs, aussi nombreux soient-ils, je suis convaincu que l'un d'eux consiste styliser leurs travaux par l'utilisation
d'outils prvus cet effet, Photoshop tant le logiciel le plus complet et le plus performant en la matire. C'est d'ailleurs ce sur
quoi repose ce cours : l'initiation aux diffrents outils du logiciel.

La panoplie de Photoshop en matire d'outils est trs importante et il m'a sembl on ne peut plus vident d'tudier ce que je juge
comme tant l'une des fonctionnalits les plus fondamentales du logiciel (et de tous les logiciels de graphisme d'ailleurs), je veux
parler des calques, sans quoi Photoshop ne serait plus Photoshop .

Cela me permettra d'introduire ce que l'on appellera les modes de fusion et les styles de calque, de puissants effets spciaux
entirement paramtrables et automatiquement gnrs par le logiciel.

Allez, tenez vous prts, les choses srieuses commencent vritablement maintenant !
Dcouverte des calques
Ahhh, les calques ! On y est enfin !

Je vous l'annonais, il s'agit selon moi de la fonctionnalit la plus importante de Photoshop ou de tout autre logiciel similaire. Les
calques font partie intgrante du logiciel et, qui plus est, ils sont clairement essentiels pour travailler, vous allez vite comprendre
pourquoi.

Pour dcouvrir les calques, nous allons passer le plus clair de notre temps dans la fentre de calques qui se situe en bas droite
de votre logiciel (pour les gens biens qui ont pris mon espace de travail comme modle ):

Ne vous laissez pas perdre par son interface un peu repoussante je dois dire car en fait elle n'est pas si complexe qu'elle n'y
parait, je dirais mme que les crateurs du logiciel en ont fait un lment intuitif et relativement facile d'utilisation.

En premier lieu, j'aimerais que vous criez une nouvelle zone de travail. Pour la taille, je vous laisse dcider, a n'a aucune
importance pour le moment .

Dfinition

La question que tout dbutant se pose en premier, c'est : "mais c'est


quoi a, un calque ?".

C'est une question laquelle j'ai moi-mme un peu de mal rpondre


dans la mesure o la dfinition type d'un calque peut s'avrer

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 33/574

relativement complexe comprendre (alors pour l'expliquer...). On


pourrait dfinir un calque comme tant un lment graphique qui est
gr par Photoshop. On sous-entend qu'un calque reprsente une
partie de notre projet, autrement dit l'un des lments qui compose la
zone de travail.

C'est assez dlicat expliquer comme je viens de vous l'annoncer et


j'imagine que c'est encore plus complexe pour vous comprendre
avec de simples mots, c'est la raison pour laquelle je vais illustrer tous
mes propos par un exemple pour ceux qui en auraient besoin.

Petite parenthse : afin que vous puissiez travailler en mme temps que moi tout au long de votre lecture, je vous fournirai
rgulirement le fichier Photoshop (.PSD) de mes exemples. Vous disposerez alors de la source de mon travail et serez en mesure
d'effectuer vos propres essais.

Veuillez tlcharger le premier fichier de ce tutoriel. Il s'agit du fichier que j'ai moi-mme utilis pour illustrer l'exemple qui
suit.
Tlcharger le fichier source
France.psd

Petite parenthse faite, on peut continuer ce que l'on avait commenc, j'tais parti pour vous faire un exemple .

Exemple

Je dcoupe la France en quatre parties telles qu'on les connait : l'Est, l'Ouest, le Nord et enfin, le Sud. Chacun de ces quatre
points cardinaux compose videmment la France, comme en tmoigne cette image :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 34/574

L'idal serait mme de sparer encore plus distinctement chaque point cardinal pour faire clater le schma en 4 parties (comme
c'est le cas dans le fichier source que vous venez de tlcharger) pour ensuite jeter un il sur la fentre de calques. On remarque
alors que chaque partie du schma est justement reprsente par ce que l'on appelle un calque, qu'il s'agisse des quatre coins de
la France ou bien mme de l'arrire-plan (le fond blanc) : tous sont des calques que l'on retrouve dans la zone de travail.

Qu'est-ce qu'on peut tirer de cet exemple ? Et bien que chaque lment dans une zone de travail possde son propre calque que
l'on retrouve dans la fentre de calques. Bien sr, notez que si l'on n'avait spar la France qu'en deux (en non en quatre comme
on vient de le faire), nous n'aurions alors obtenu que 3 calques : le Nord, le Sud et l'Arrire-plan. Ou bien l'Est, l'Ouest et l'Arrire-
plan si la sparation tait faite la verticale .

Un autre exemple ? Admettons que je copie Zozor, la mascotte du Site du Zro, et que je le colle dans cette mme zone de travail.
Alors, un nouveau calque sera automatiquement cr car, si vous m'avez suivi, il s'agit d'un nouvel lment composant la zone de
travail, et donc d'un nouveau calque qui apparaitra dans la fentre de calques. La preuve en image :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 35/574

Souhaitez-vous tlcharger le mme fichier mais avec le nouveau calque (Zozor) ?


Tlcharger le fichier source
France_Zozor.psd

Comment a marche ?

Vous savez ce qu'est un calque et quoi cela ressemble, mais savez-vous comment on les utilise, ces calques ? Car il y a une
certaine manire de les utiliser que vous vous devez de maitriser !

Si vous voulez tout savoir, on pourrait comparer les calques sur Photoshop avec les vraies feuilles de calque que l'on utilise
notamment pour dessiner et dcalquer en arts plastiques (ou autre). Comme ils sont transparents par dfaut ( part l'Arrire-plan
si on lui donne un fond blanc ou un fond de "couleur d'arrire-plan" au moment de crer une nouvelle zone de travail), on va
s'amuser superposer tous les calques, comme le montre le schma ci-dessous.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 36/574

Ainsi, ce qui est transparent n'est pas visible dans la zone de travail et laisse transparaitre ce qui se trouve juste derrire :

Le trou de forme circulaire que l'on peut apercevoir dans le Calque 2 laisse apparaitre ce qui se trouve derrire lui, savoir le bleu
du Calque 1.

La transparence sur Photoshop est caractrise par une suite de carrs blancs et gris, l'exemple de cette image :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 37/574

Ces petits carrs ne sont apparents que si et seulement si aucun calque n'est visible, c'est--dire que c'est le vide, il n'y a rien,
nant. C'est transparent quoi .

L'ordre des calques

Pour dterminer quel calque apparaitra au premier plan, lequel sera au second plan, et ainsi de suite, il faut passer par la fameuse
fentre de calques. Ainsi, si le calque se situe tout en haut de la liste, il sera celui qui apparaitra en premier-plan dans la zone de
travail. De cette manire, tous les calques qui se situent derrire lui se retrouveront en arrire-plan. Le calque qui se trouve tout
en bas de la liste est d'ailleurs le plus souvent le calque nomm lui-mme Arrire-plan, celui qui est automatiquement cr
l'ouverture d'une nouvelle zone de travail .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 38/574

Quel est l'intrt de crer plusieurs calques ? Moi, je veux tout faire dans un mme calque, c'est plus rapide et moins
prise de tte !

Plus rapide, oui, je confirme . Mais penser que c'est moins prise de tte relve sincrement de la navet du dbutant !

C'est vrai que cela parait tout de suite plus simple faire tout dans un seul et mme calque, vrai dire je l'avais envisag moi aussi
quand j'ai commenc. Mais au-del de la simplicit, il faut dire que travailler dans de telles conditions s'avre trs loooiinn d'tre
pratique court terme. Et croyez-moi, c'est quand on s'en rend compte que a devient le plus problmatique.

Si vous ne travaillez que sur un seul calque pour tout votre projet, vous n'aurez alors plus aucun contrle sur l'avance de vos
travaux. La zone de travail ne sera compose que d'un seul lment et donc d'un seul calque. Or, si je n'ai qu'un seul calque, cela
devient tout de suite trs compliqu d'effectuer une modification prcise et simple sur une infime partie de l'lment en question !

J'ai justement un petit exemple pour illustrer ce que je viens de dire, je suis sr que cela vous parlera plus. Exceptionnellement, je
ne vous propose pas de tlcharger le fichier source de mon travail car vous n'tes pas cens avoir les connaissances
ncessaires pour raliser un tel exercice (mais a viendra, rassurez-vous, surtout que a n'a rien de bien sorcier finalement). Mais
cela ne vous empchera pas de le comprendre, condition d'avoir toute votre attention .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 39/574

Nous avons ici cinq billes colores positionnes les unes derrires les autres. On devine facilement que la bille orange figure tout
en haut de la liste dans la fentre de calque (elle apparait en effet au premier plan) tandis que la bille grise, qui se situe en arrire-
plan, est tout en bas de la liste dans la fentre de calques.

Le but de cet exercice est simple, on va chercher supprimer la bille orange des deux manires que nous avons suggres.

Si je n'avais utilis qu'un seul calque pour raliser ces cinq petite billes, il m'aurait fallu passer directement par la zone de travail et
utiliser les outils adquats afin de supprimer la bille orange tel que me le demande l'exercice. Ainsi, j'en serais forcment arriv
ce rsultat-ci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 40/574

Comme vous pouvez le voir, cette technique de travail ne prsente que des dfauts :

On remarque aisment la marque de suppression de la bille caractrise par ce rond blanc immonde.
On a du mme coup supprim une partie de la bille verte
L'ombre de la bille orange est encore visible et donc inapproprie.

Rditons maintenant l'exercice mais cette fois-ci en profitant de la fentre de calques. Ainsi, chaque bille possderait son propre
calque : on retrouverait donc le calque li la bille grise, un autre calque li la bille violette, celui de la bille bleue, etc. Pour
supprimer la bille orange tel que nous le demande l'exercice, je vais opter pour la solution qui me semble la plus logique qui soit :
je vais supprimer le calque qui lui est li dans la fentre de calques de sorte que la bille disparaisse de la zone de travail. De cette
manire, la technique s'avre on ne peut plus efficace :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 41/574

Alors, qu'en dites-vous ? Ne trouvez-vous pas le rsultat plus juste ?

Et comme on n'en a jamais assez d'un, je vous propose un dernier petit exemple parti cette fois-ci d'un vritable projet et qui va
illustrer l'ensemble de mes explications sur les calques. J'espre que ce sera suffisamment clair si vous tes encore un peu perdu,
d'autant plus que c'est un exemple trs amusant, a risque de vous plaire .

Pour cet exemple, n'hsitez pas travailler en mme temps que moi !
Tlcharger le fichier source
SP_1.psd

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 42/574

Cette image constitue le fond d'un dessin que je m'apprte complter progressivement. Cette image est compose de deux
calques : le rectangle vert fonc du bas et le rectangle vert clair du haut. Je vais dbuter mon dessin en crant deux yeux, c'est--
dire deux nouveaux calques qui se situeront au-dessus de ceux des deux rectangles dans la fentre de calques (en tte de liste si
vous prfrez).

Cliquez sur l'image pour l'agrandir


Tlcharger le fichier source

Sur le fichier PSD, on remarque donc que l'on a quatre calques en tout : le rectangle vert fonc, le rectangle vert clair, l'il gauche
et l'il droit. J'ai logiquement plac les deux yeux au-dessus des deux calques de fond (les rectangles) pour les laisser paraitre
dans la zone de travail, sans quoi les rectangles seraient apparus en premier-plan et auraient masqu les yeux.

J'ajoute ma cration un visage.

Cliquez sur l'image pour l'agrandir


Tlcharger le fichier source

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 43/574

Le calque de ce visage se situe en-dessous des calques des yeux et au-dessus des calques de fond. De cette manire, les deux
yeux restent visibles l'cran et apparaissent en premier-plan car, si le calque du visage avait t positionn au-dessus de celui
des yeux, ces derniers auraient t logiquement cachs (le visage n'est pas transparent !).

Je continue et ajoute un chapeau ma cration.

Cliquez sur l'image pour l'agrandir


Tlcharger le fichier source

Une bouche ...

Cliquez sur l'image pour l'agrandir


Tlcharger le fichier source

Je lui donne un corps. Quand mme.

Cliquez sur l'image pour l'agrandir

Des jambes et des pieds.

Cliquez sur l'image pour l'agrandir

Et enfin, je lui mets des sourcils histoire de lui donner l'air d'tre fch contre ceux qui ne sont pas assez concentrs !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 44/574

Cet exemple est termin, n'hsitez pas tlcharger le fichier complet !


Tlcharger le fichier source
SP_8.psd

Tintin ! Vous connaissez prsent le secret de fabrication des clbres petits personnages de la srie South Park ! Celui-ci n'a
pas de nom mais a ne saurait tarder !

Bon, je suis parfaitement conscient que ces petits bonshommes sont beaucoup plus sophistiqus sur nos crans de tlvision
(le mien n'a mme pas de mains, sans parler de ce fond trs pauvre en couleurs, le dcor laisse srieusement dsirer !), mais je
n'ai pas souhait complexifier mon dessin car cela ne m'a pas sembl essentiellement utile de le faire, c'tait simplement pour vous
donner un exemple concret sur comment fonctionnent les calques (et j'espre que c'est rentr !).

Au fait, je dois vous annoncer une bonne nouvelle : d'ici la fin de ce cours, vous serez en parfaite mesure de raliser un tel dessin
! Je dirais mme plus, vous allez vous rendre compte que cet exemple est vraiment bidon et que vous tes capables de faire bien
mieux que a !
Crer ou supprimer un calque
Je sais que je vais me rpter, mais j'espre sincrement que vous avez tout compris de mon discours sur les calques car si ce
n'est pas le cas, vous risqueriez rellement d'tre perdu et on ne peut pas prtendre travailler sur Photoshop sans les connaitre.
N'hsitez pas relire la sous-partie ci-dessus, a ne vous cote rien et il s'agit d'une notion importante qu'il est impratif de
maitriser avant de continuer .

Nous allons prsent apprendre une opration de base sur Photoshop : comment crer un nouveau calque. Vous allez le voir,
c'est tellement duuur !

Crer un calque

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 45/574

Je vous le disais, il vaut mieux s'atteler la cration d'un nouveau calque chaque nouvelle manipulation sur votre zone de
travail plutt que de ne passer que par un seul et mme calque car cela vous permet d'avoir un contrle permanent sur l'ensemble
de votre avance. Si vous ne crez pas rgulirement des calques chaque fois que vous en avez besoin, vous vous retrouverez
seulement avec l'Arrire-plan en guise de calque et je vous ai dj donn ma position sur cette mthode de travail un peu
barbare.

Du coup, il va falloir crer notre premier calque avant de commencer quoi que ce soit, et ce sera toujours le cas partir du
moment o vous dbuterez un nouveau projet. Si vous oubliez, tout ce que vous ferez sera enregistr et reprsent par le calque
d'Arrire-plan, mfiez-vous ! Et videmment, on ne peut crer un calque si et seulement si une zone de travail est ouverte .

Ouais bah c'est quand tu veux, hein...

Le moins que l'on puisse dire, c'est qu'il existe pas mal de faons pour crer un calque ! La preuve :

On a la possibilit dans un premier temps de cliquer sur l'icne Nouveau calque qui se situe en bas de la fentre des
calques. C'est la faon la plus rapide de crer un calque.

Vous pouvez galement cliquer sur la petite flche que vous trouverez en haut droite de la fentre de calques, puis
slectionner Nouveau calque... dans la liste apparue.

Un autre moyen est de passer par le menu Calque (dans la barre des menus) pour ensuite cliquer sur Nouveau Nouveau
puis sur Calque.

Et pour finir, on n'oublie pas nos bons vieux raccourcis clavier :

SHIFT + CTRL + N

Shift + Command (ou Pomme) + N

Quelle que soit la mthode utilise, l'apparition du calque est imminente :

N'hsitez pas renommer les calques que vous crez, cela vous permettra de vous y retrouver plus facilement.Vous pouvez le
faire au moment de leur cration (quand la fentre "Nouveau calque" apparait) ou bien aprs, en faisant un clique-droit dessus,
puis en cliquant sur Proprits du calque. Je ne sais pas vous, mais Calque 1, a ne parle pas, moi...

Notez qu'il est possible de crer une infinit de calques.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 46/574

Supprimer un calque

Supprimer un calque, c'est encore plus facile que d'en crer un nouveau .
Voici le moyen le plus rapide : vous slectionnez le calque que vous dsirez supprimer, et vous cliquez sur l'icne Supprimer le
calque en bas de la fentre de calques.

Il vous est possible galement de cliquer droit sur le calque en question et de cliquer sur Supprimer ce calque.

Fastoche, n'est-ce pas ?


Les diffrents types de calque
Je vais vous en apprendre une bien bonne, j'ai volontairement oubli de vous dire qu'il existait en ralit plusieurs types de
calque et que celui dont nous avons parl tout l'heure et que l'on a appris crer est en fait le plus basique mais aussi le plus
utilis de tous .

Escroc ! Pfff, comme si on avait besoin de compliquer encore les choses...

Au contraire ! Qui dit diffrents types de calque dit de nouvelles possibilits et je trouve que c'est plutt une bonne nouvelle
finalement. En effet, si on les nomme tous des "calques" (car ils permettent tous d'afficher un lment graphique dans la zone de
travail comme on l'a dj vu), le fonctionnement de chacun s'avre vraiment diffrent tout autant que leur utilit, vous allez le
voir.

D'une manire gnrale, je ne suis moi-mme pas certain de connaitre absolument tous les types de calque grs par Photoshop.
Mais de toute faon, mme si c'tait le cas, nous ne les passerions certainement pas tous en revue car, vous le savez, je dois
rdiger ce cours de sorte ce que nous dcouvrions progressivement, tous ensemble, les bases de Photoshop. Il est donc de
mon rle de m'adapter et d'viter d'aborder ce qui me semble soit inutile, soit trop complexe. Nous passerons donc en revue les
calques qui me semblent tre ceux qui correspondent le mieux ce cours .

Je ne vous demande absolument pas de tout retenir ni de connaitre les caractristiques de chaque calque sur le bout
des doigts. Il s'agit simplement d'une sorte de rcapitulatif des diffrents calques que vous serez susceptibles de
rencontrer et d'utiliser dans ce cours.
Pourquoi je vous dis cela ? Vous risquez, je pense, de vous sentir quelque peu perdu et vous vous demanderez sans
doute "mais qu'est-ce que je vais faire de tout a !". Pour le moment, ne vous posez pas de question, je vous demande
simplement de lire et d'tre attentif autant que vous le pouvez ce que je dis. Si c'est un peu flou, c'est pas grave, car
vous comprendrez plus facilement quand nous aurons affaire tous ces types de calque dans la suite du cours .

Calque Image

Le calque Image, c'est celui que nous avons justement cr tout l'heure. Il prend cette apparence dans la fentre de calques :

Ce calque, c'est celui que l'on pourrait appeler le "calque standard" sur Photoshop. Son fonctionnement, vous le connaissez dj
puisque nous l'avons tudi dans la premire partie de ce chapitre, vous ne m'en voudrez donc pas si on ne revient pas dessus
.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 47/574

Calque Forme

On parle de "calque de forme" partir du moment on l'on cre une forme quelconque l'aide des outils adquats de la panoplie
Photoshop, rfrence entre autres aux outils appels Formes et l'outil Plume, vritables machines crer que nous aborderons
dans la troisime partie de ce cours .

Le calque ressemble cela dans la fentre de calques :

A gauche, le carr noir indique la couleur dont est remplie la forme cre. S'il est noir, c'est que la forme est remplie de la couleur
noir.
Au milieu, il s'agit d'un aperu de la forme cre l'intrieur de la zone de travail. La forme est blanche et le reste est gris.
Enfin, droite, c'est le titre de la forme (ici, Forme 1).

Nous aurons le temps de revenir dessus plus tard et c'est le moins que l'on puisse dire .

Calque d'Arrire-plan

Il s'agit du premier calque que vous trouvez et que vous pouvez paramtrer en ouvrant une nouvelle zone de travail.

Lorsque vous ouvrez une image sur Photoshop, le calque reprsentant cette image est automatiquement un calque d'arrire-plan.
La couleur de l'arrire-plan, vous le savez, est dtermine dans le champs prvu cet effet au moment de crer une nouvelle zone
de travail.

Ce type de calque est caractris par un cadenas signifiant que le calque est verrouill. Il est donc protg (nous revenons l-
dessus un peu plus tard). Je peux simplement vous dire que pour le dverouiller, il vous faudra double-cliquer sur la vignette du
calque puis cliquer sur "Ok". Le calque deviendra de cette manire un calque standard.

En rsum, le calque Arrire-plan, c'est le fond de la zone de travail .

Calque Texte

Le calque de texte prend l'apparence suivante dans Photoshop :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 48/574

Ce calque apparait partir du moment o vous tapez du texte dans votre zone de travail. Pour crire du texte, il faut utiliser l'outil
Texte prsent dans votre boite outils. Notez que j'ai consacr un chapitre entier pour les textes tellement ils sont importants, je
vous conseille donc vivement de patienter un peu !

Calque de rglage

Le calque de rglage est un peu diffrent des autres. En cliquant sur la petite icne , situe en bas de la fentre de calques,
nous allons tre en mesure de choisir un rglage qui prendra effet sur les autres calques de notre zone de travail.

Quand on cre un calque de rglage, il faut le placer au-dessus d'un autre calque parmi tous ceux cits ci-dessus afin que ces
rglages soient effectifs sur le contenu de ce mme calque dans la zone de travail. Plus prcisment, ces rglages engendrent une
modification indirecte des couleurs du contenu du calque. Pourquoi indirecte ? Parce que si l'on supprime le calque de rglage,
l'autre calque reprend ses proprits d'origine.

Voici une srie de rglages effectus sur un calque. Vous remarquerez alors qu'il y a un calque nomm "Calque 0" la fin de la
liste (tout en bas). Il s'agit du calque sur lequel j'ai effectu tous les rglages que l'on retrouve juste au-dessus (s'ils taient en-
dessous du calque dans la liste, les rglages ne seraient pas visibles, je n'ai pas besoin de vous rpter pourquoi).

Calque de remplissage

En plus d'afficher les rglages possibles pour un calque, le bouton sur lequel nous venons de cliquer peut galement servir
crer un calque de remplissage. Le nom de ce bouton parle d'ailleurs de lui-mme, il est intitul "crer un calque de remplissage
ou de rglage".

Les calques de remplissage, ce sont les trois premiers de la liste :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 49/574

Dans le fentre de calques, ces calques peuvent prendre cette apparence :

Sans rentrer dans les dtails, les calques de remplissage permettent de remplir un calque d'une couleur, d'un motif ou bien d'un
dgrad de couleurs et de paramtrer ce remplissage .

Mais comme je vous l'ai dit, pas besoin de tout apprendre par cur, contentez-vous de retenir l'essentiel : il existe diffrents
types de calque et le plus courant est le calque Image.
Gestion des calques : organisation et paramtrage
Au risque de me rpter, je signale qu'il est vraiment essentiel pour tout infographiste qui se respecte de travailler dans de
bonnes conditions (le vieux radoteur ). J'ai bien peur que de mauvaises conditions de travail puissent avoir des
consquences directes sur le rsultat final de vos projets, ce qui serait franchement stupide et mme intolrable vous en
conviendrez.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 50/574

Oui, bon, d'accord. Tu vas encore nous embter avec l'espace de travail, c'est a ? Je crois qu'on a compris !

Non, a, j'en suis convaincu, c'est rentr ! En fait, nous allons rester dans le domaine des calques et toujours dans la mme
fentre d'ailleurs. Il s'agit pourtant cette fois-ci de s'organiser dans la gestion des calques.

J'entends par "gestion des calques" qu'une zone de travail peut tre compose de plusieurs milliers de calques (mme si,
videmment, notre niveau, dpasser la centaine serait dj un exploit du fait du peu de connaissance que l'on a pu acqurir
pour le moment) et qu'il fait bon d'apprendre grer cette tonne de calque au plus vite dans un souci de lisibilit. Je vais donc
prfrer jouer la prudence et vous apprendre correctement grer tous vos calques tant qu'on tait encore en plein dedans.
D'ailleurs, vous allez voir que cela peut s'avrer parfois trs utile mme avec trs peu de calques !

Groupe de calques

Dans les cas o l'on se retrouve avec une trop grosse quantit de calques dans un mme projet, l'idal est de les regrouper en
plusieurs catgories.

D'une part, la visibilit est meilleure, et d'autre part, c'est plus pratique d'un point de vue ergonomique : on sait parfaitement o se
trouve tel calque selon le nom que porte le groupe dans lequel on l'a plac. Par exemple, si je cherche le calque "chien", je le
trouverai dans le groupe "animaux". Si je cherche le calque "guitare" (toujours dans la mme zone de travail, bien entendu), je le
chercherai et le trouverai dans le groupe intitul "instruments de musique". Vous saisissez ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 51/574

Voyons voir cela de plus prs et allons directement taper la porte de notre fentre de calques pour voir comment cela
fonctionne "en direct". Je vous invite crer une nouvelle zone de travail si ce n'est pas dj fait, et je vous laisse le soin de la
paramtrer . Ensuite, veuillez crer deux nouveaux calques vides (ne me demandez pas comment on fait sinon je vous tripe
!).

Votre fentre de calques devrait alors maintenant ressembler ceci :

Nous allons faire en sorte de rassembler les deux calques standards dans un seul et mme groupe. Il va donc tout d'abord falloir
crer un nouveau groupe de calques (inutile de vous dire que ce groupe est vide pour le moment). La procdure pour crer un
nouveau groupe est quasiment la mme que celle pour la cration d'un nouveau calque, vous avez plusieurs possibilits :

Cliquez sur l'icne Nouveau groupe qui se situe en bas de la fentre de calques.
Cliquez sur la petite flche en haut droite de la fentre de calques pour faire apparaitre une liste dans laquelle vous
devrez cliquer sur Nouveau groupe....
Enfin, vous pouvez cliquer sur le bouton Calque dans la barre des menus, puis sur Nouveau et enfin sur Groupe....

CTRL + G

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 52/574

Command (ou Pomme) + G

Si l vous n'avez le choix .

Quelle que soit la manire que vous envisagerez d'utiliser, je vous invite crer un nouveau groupe tout de suite.

Tintin ! On remarque l'apparition d'un nouveau groupe qui se caractrise par la petite icne reprsentant un dossier. Figurez-
vous que la moiti du travail a dj t accomplie, il ne nous reste plus qu' placer les deux calques dedans et le tour sera jou
!

En gros, la procdure sera la suivante : on va d'abord "attraper" les calques pour ensuite les dplacer manuellement afin de les
dposer dans le groupe que nous avons cr.

Comment on fait tout a ? Comme on dit, facile dire mais pas facile faire !

Que nenni ! Tout d'abord, il va falloir cliquer sur l'un des deux calques (peu importe lequel, c'est pareil) pour le slectionner.
Puis, afin de pouvoir attraper le calque, vous allez devoir maintenir le clique dessus et dplacer le curseur de votre souris vers le
groupe (je vous rappelle qu'il s'agit ici du Groupe 1). Le calque slectionn se dplacera alors en fonction de la direction que
prend le curseur de votre souris, comme a a t le cas pour les palettes flottantes au moment d'organiser notre espace de travail,
vous vous rappelez ?
Enfin, lorsque le groupe se voit dot d'un fond bleu relativement clair soudainement apparu ( l'exemple de l'image ci-dessous),
c'est que le calque est prt tre dpos dedans : vous pouvez lcher le clique.

Je vais illustrer ce que je viens de dire, a me semble plus sage. Alors, en premier lieu, je maintiens le clique sur le calque que je
souhaite dplacer puis je bouge mon curseur de sorte amener le calque vers le groupe.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 53/574

Le fond bleu clair apparait : je peux lcher le clique, mon calque se dposera dans le groupe.

Le calque est maintenant dans le groupe. Ce dpt est caractris par le nouvel espacement visible gauche du calque (le
Calque 2 ici).

Pour le deuxime calque (Calque 1), c'est bien simple, on reproduit exactement les mmes gestes. C'est--dire que l'on maintient le
clique sur le calque, on le dplace ensuite vers un dossier puis on relche le clique afin de dposer le calque dedans.

On fait a ainsi de suite selon le nombre de calques que l'on cherche dplacer dans un groupe...

Et si j'ai plusieurs dizaines de calques rentrer dans un seul et mme groupe, je vais devoir tous les faire un par un ?
C'est une grosse perte de temps, compte pas sur moi !

Ah... ouais, c'est vrai que vu sous cet angle, ce serait un peu lourd . Bon, a va, il existe une solution, rassurez-vous. De
toute faon, il existe toujours des solutions .

Plutt que de dplacer tous les calques un par un, il s'agirait en fait de tous les slectionner en mme temps (du moins tous ceux
que l'on veut dplacer) puis les "attraper" et les dposer dans le groupe dsir comme on vient d'apprendre le faire.

On ne va pas y aller par quatre chemins, je vous donne directement les tapes suivre, inutile de parler plus longtemps :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 54/574

1. Veuillez avant tout crer une nouvelle zone de travail, deux ou trois nouveaux calques vides et enfin un nouveau groupe.
2. Slectionnez ensuite l'un des calques (pour slectionner l'un des calques de votre fentre de calques, il suffit juste de
cliquer une fois dessus : on reconnait qu'un calque est slectionn de par son nouveau fond bleu apparent).
3. Appuyez ensuite sur la touche Contrle de votre clavier (Ctrl) ou Command/Pomme si vous tes sur Mac pour ensuite
cliquer simultanment sur un autre calque : si vous avez bien suivi mes indications, les deux calques devraient tre
slectionns et donc, vous devriez obtenir ceci :

4. Pour finir, maintenez le clique sur l'un des deux calques et dplacez-le dans le groupe (comme on vient d'apprendre le
faire). Parce que les calques taient tous deux slectionns, les deux ont t dplacs dans le groupe.

Bah franchement, mme si c'est plus rapide, faut quand mme cliquer sur tous les calques, un par un...

Si vous disposez d'une trs grande quantit de calques et que mme cette technique s'avre trop lente et pas assez adapte
votre got pour slectionner tous vos calques rapidement, vous pouvez utiliser la touche Shift de votre clavier d'ordinateur.

La procdure est la suivante : vous slectionnez un calque, vous appuyez sur la touche Shift et vous cliquez simultanment sur
un autre calque en prenant soin de laisser plusieurs calques d'cart entre les deux. Alors, vous constaterez que tous les
calques situs entre les deux que vous viendrez de slectionner avec la touche Shift seront eux aussi slectionns (le fond bleu
apparaitra pour chacun d'eux !). Je vous remets un petit exemple imag au cas o vous n'auriez pas bien saisi .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 55/574

Tout d'abord, je clique sur le calque portant le nom Calque 1 pour le slectionner.

Ensuite, j'appuie sur la touche Shift de mon clavier d'ordinateur et clique simultanment sur le calque portant le nom Calque 7.
Tous les calques compris entre Calque 1 et Calque 7 ont t slectionns par la mme occasion.

Prenez note ! Vous avez galement la possibilit de slectionner d'abord vos calques puis, ensuite, crer un nouveau
groupe. Cela vous vitera alors d'attraper vos calques et les dposer dans un groupe vide pralablement cr. Cela
consiste faire tout l'inverse de ce que je viens de vous dire, en fait : vous slectionnez d'abord les calques, puis vous
faite une cration de groupe. Alors, tous les calques slectionns viendront automatiquement se dposer dans le
nouveau groupe qui fera lui aussi son apparition. N'hsitez pas d'ailleurs utiliser le raccourci clavier pour la cration

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 56/574

de groupe ici aussi .

CTRL + G

Command (ou Pomme) + G

Lier les calques

Les avantages que prsente la cration d'un groupe de calques ne se limitent pas qu' cela. En effet, lorsqu'on cre un groupe et
que l'on y dpose des calques, et bien figurez-vous qu'absolument tous ces calques sont lis ce groupe. Cela signifie que si
vous slectionnez le groupe dans la fentre de calques, vous serez mme de pouvoir le dplacer lui (et donc tout ce qui se
trouve l'intrieur) dans la zone de travail (on va parler du dplacement des calques dans une zone de travail plus loin dans ce
cours).

Mais alors voil, je ne sais pas pour vous, mais personnellement, je trouve cela trs contraignant de devoir tout le temps crer un
groupe de calques pour dplacer plusieurs calques ensemble. Moi, je profite des groupes pour m'organiser et travailler dans de
bonnes conditions et non pas pour pouvoir dplacer tous les calques d'un groupe en mme temps. Par exemple, il m'arrive d'avoir
besoin de dplacer deux calques ayant chacun leur groupe spcifique. Comment on fait dans ce cas ?

Bah, c'est pas compliqu. Tu fais comme tu t'as dit, c'est--dire slectionner tous les calques que tu souhaites "lier"
l'aide de la touche Ctrl (Command) ou Shift de ton clavier. Pas vrai ?

Franchement, cette rponse ne me convient que partiellement . Cette technique s'avre effectivement rapide et efficace par
moment et c'est d'ailleurs la raison pour laquelle que je vous en ai touch un mot tout l'heure. Le problme, c'est que lorsqu'on
slectionne deux calques de cette manire, cette slection n'est que provisoire. Par exemple, si je slectionne le Calque 1 et le
Calque 2 en mme temps (avec les touches qui me le permettent), puis que je slectionne ensuite le Calque 3 sans appuyer sur
aucune touche, cela annulera immdiatement la slection des Calque 1 et Calque 2 et la slection ne sera effectivement que sur le
Calque 3, vous me suivez ?

1. Je slectionne les Calque 1 et Calque 2 en mme temps l'aide des fameuses touches qui me le permettent .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 57/574

2. Je place mon curseur sur le Calque 3 et clique dessus afin de le slection.

3. Les Calque 1 et Calque 2 ne sont maintenant plus slectionns, et c'est le Calque 3 qui l'est dsormais.

Ce qu'il faudrait donc, c'est trouver un moyen de vritablement lier deux calques, les "attacher" ensemble et ceci qu'ils soient
slectionns ou non.

Et bien sr, si je vous dis tout a, c'est qu'une fonctionnalit a t conue et qu'on va videmment s'en servir . Il s'agit de la
petite illustration en bas de la fentre de calques intitule Lier les calques .

Avant tout, il va falloir dterminer quels calques nous allons chercher lier ensemble. Et pour cela, nous allons utiliser une
technique que l'on maitrise maintenant sur le bout des doigts, savoir slectionner ces calques ensemble l'aide des touches
Ctrl (Pomme) ou Shift du clavier.

Une fois les calques slectionns tous en mme temps, la petite icne s'active. Il ne nous reste plus qu' cliquer dessus !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 58/574

Les petites chaines font leur apparition : les calques sont lis !

Notez qu'une fois les calques dslectionns, les petites chaines disparaissent (voir ci-dessous). Cela ne signifie pas que vos
calques ne sont plus lis .

Il vous est aussi possible de lier des groupes de calques ! La procdure est la mme que pour les calques.

Masquer un calque

Aviez-vous remarqu le petit il situ ct de chaque calque ou groupe de calques dans la fentre de calques ? Sauriez-vous
me dire de quoi il s'agit ?

Je veux parler de cet il :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 59/574

L'il sur Photoshop permet de masquer ou d'afficher un calque ou groupe de calques dans la zone de travail. C'est--dire que si
l'il est visible, le contenu du calque apparait dans la zone de travail. A l'inverse, si l'il est absent, son calque n'apparait pas
dans la zone de travail.

L'il est apparent pour chaque rond. Ainsi, tous les ronds sont visibles aussi dans la zone de travail.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 60/574

L'il ct du gros rond est absent : ce dernier n'est plus visible dans la zone de travail.
Attention : il n'est pas supprim, il est masqu.

Dupliquer un calque

Il arrive trs souvent que l'on ait besoin d'utiliser plusieurs fois un mme lment prsent dans la zone de travail, autrement dit
plusieurs fois un mme calque.

Imaginez par exemple que vous soyez en train de crer... mettons, je ne sais pas, un ordinateur portable de toute pice sur
Photoshop (vous n'en tes pas encore l, mais cela va venir, vous verrez ! ) et que vous cherchiez crer plusieurs dizaines
de touches de la mme forme et de la mme couleur afin de raliser le clavier de cet ordinateur. Afin d'viter de les raliser toutes
ces touches unes par unes et surtout histoire de vous simplifier la vie, vous n'en crerez qu'une seule et la dupliquerez autant de
fois que ncessaire, c'est--dire que vous allez effectuer des copies de cette touche "universelle" !

Thoriquement, nous avons tout d'abord une fentre de calque compose de deux calques : l'Arrire-plan et le Calque 1.

La duplication se fera sur le Calque 1. Nous esprons donc crer une copie de ce calque. Et, vrai dire, ce n'est vraiment pas
compliqu... il suffit juste de cliquer droit dessus et cliquer sur le lien Dupliquer le calque... ou bien de cliquer une fois dessus
pour le slectionner (faire apparaitre un fond bleu) puis cliquer sur la petite flche en haut droite de la fentre de calques
pour faire apparaitre une liste dans laquelle vous aurez la possibilit de cliquer sur Dupliquer le calque....

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 61/574

Quand le calque est dupliqu, sa copie prend le mme nom que l'originale mais suivi de la mention copie.

CTRL + J

Command (ou Pomme) + J


Je crois franchement que c'est l'un des chapitres les plus thoriques de ce cours. Je ne dis pas que vous n'en mangerez plus (et
puis quoi encore ? ), mais sachez en tout cas que je suis ravi de savoir que vous avez tenu jusqu'au bout.

Il faut absolument que vous compreniez que la notion de calques sur Photoshop est primordiale. Si c'est encore flou et que vous
n'tes pas certain de savoir comment ils fonctionnent, je dois alors vous demander de relire ce chapitre jusqu' que vous soyez
srs de pouvoir continuer la lecture de ce tutoriel. Car oui, la lecture deviendra bien plus complexe si vous n'tes pas au point
avec les calques.

Bonne nouvelle ! Dans le chapitre suivant, vous allez enfin pratiquer. Et croyez-moi sur parole, vous allez russir vous
surprendre !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 62/574

Place aux premiers effets !


Vous venez d'acqurir la base des bases de Photoshop. Vous connaissez dsormais l'espace de travail, vous savez manipuler une
zone de travail (qu'il s'agisse d'en crer une nouvelle ou de l'enregistrer, vous savez faire) et, pour finir, vous avez la notion de
calque, ce qui est primordial pour la suite du cours (et pour toute personne se vantant de faire de l'infographie ).

Nous passons dsormais une tape qui vous semblera peut-tre beaucoup moins thorique et sans doute plus passionnante
que les prcdentes dans la mesure o vous serez mme de crer vos premiers effets spciaux (champagne !).

Eh oui, les effets spciaux, ce sont l'objet de ce chapitre .

En tout cas, j'espre que vous ralisez bien que l'apprentissage de Photoshop, ce n'est pas seulement l'acquisition de techniques
permettant la cration d'effets spciaux. Si c'est tout ce que vous recherchez, il me semble plus judicieux que vous consultiez des
petits tutoriels comme on en trouve par milliers sur le web. Ce cours a pour but de vous faire dcouvrir la plupart des outils de
base de Photoshop et de vous les expliquer pour que vous puissiez les comprendre et que vous puissiez apprendre les manier
pour ensuite adopter vos propres techniques.

A la fin du cours, vous serez en parfaite mesure de lire des tutoriels tous niveaux sur Photoshop, tout du moins je l'espre. Et qui
sait, peut-tre que vos connaissances et vos diffrentes expriences vous permettront de rdiger vos propres tutoriels, c'est tout
le mal que je vous souhaite .
Jouer avec la transparence grce aux modes de fusion
Allez, on rentre maintenant dans le vif du sujet et le moins que l'on puisse dire, c'est qu'on commence fort avec les clbres
modes de fusion !

C'est quoi ce truc, encore...

Il s'agit d'une nime fonctionnalit que nous met disposition Photoshop et qui a pour vertue de crer des effets spciaux
franchement terribles . Techniquement parlant, cela consiste jouer avec la transparence des calques pour y transformer
leurs couleurs selon la spcificit de chaque mode. Un programme trs intressant nous attend...

Seule la partie suprieure de la fentre de calques nous intressera pour le moment :

Nous pouvons dcomposer cette image en trois groupes de fonctionnalits :

1. En haut gauche se situe la liste droulante avec tous les modes de fusions. On s'y intresse incessamment sous peu
.
2. Juste en dessous, ce sont les diffrents moyens mis notre disposition pour verrouiller un calque. Je reviens dessus
juste aprs les modes de fusion.
3. Enfin, droite, il y a ce que l'on appelle l'opacit et le fond. Cela me permettra de conclure cette sous-partie pour passer
la suite du chapitre.

Tout est OK ? Alors continuons .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 63/574

Les modes de fusion

Comme convenu, nous allons commencer ce chapitre avec les modes de fusions. Avant tout, veuillez ouvrir une nouvelle zone de
travail avec les paramtres de votre choix. J'aimerais que vous preniez l'habitude d'ouvrir chaque fois une nouvelle zone de
travail et que vous y criez un nouveau calque standard vide car il se peut que certaines fonctionnalits du logiciel ne soient
oprationnelles uniquement si une zone de travail est existante accompagne d'au moins un calque Image. En prenant cette
habitude, vous m'viterez de me rpter tout le temps et on gagnera un peu de temps et d'nergie .

Maintenant que l'on peut vraiment commencer, je vous invite cliquer sur la petite flche (ou sur "Normal") afin de drouler et
afficher la liste dans laquelle se trouvent les fameux modes de fusion.

Sans mme comprendre tout ce charabia, on peut facilement constater du choix trs large qui nous est offert. Mais alors, la vraie
question, c'est "qu'est-ce que c'est, un mode de fusion ?" C'est vrai, c'est tout de mme curieux comme termes, vous ne trouvez
pas ?

Fonctionnement

Un mode de fusion est une des nombreuses fonctionnalits du logiciel Photoshop; celle-ci est directement lie aux calques, c'est
d'ailleurs pour cela qu'on la retrouve dans la fentre de calques.

Les modes de fusion ont t conus afin damliorer la crativit de vos images et votre productivit. Ils sont automatiquement

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 64/574

gnrs par Photoshop qui se charge alors de crer un jeu de transparence entre au moins deux calques.
En d'autres mots, cela signifie que l'on va appliquer l'un des modes (de fusion) l'un des calques composant la zone de travail
pour qu'il fusionne avec celui qui se trouve derrire lui. En reformulant, cela consiste faire fusionner deux calques en appliquant
l'un d'eux ce que l'on appelle un mode de fusion.

Par exemple, si j'applique le mode de fusion appel claircir (vous le trouverez dans la liste des modes de fusion) au Calque 2,
ce dernier fusionnera alors avec le Calque 1 (c'est--dire qu'un jeu de transparence va se crer) avec la proprit du mode qui va
videmment avec. En l'occurrence, la proprit du mode claircir permet de "remplacer" les pixels sombres d'une image par des
pixels plus clairs (tout en gardant intacts les pixels qui taient dj clairs l'origine). Cela revient dire grossirement que ce
mode de fusion permet de crer un claircissement entre les deux calques.

Pour tout vous dire, je n'ai pas prvu de traiter tous les modes de fusion. A mon sens, il ne serait pas raisonnable d'numrer
chaque mode de fusion en les accompagnant tous d'un exemple car j'imagine que cela serait trop lourd et pas forcment trs
ludique. En effet, il y a tellement d'exemples pour lesquels on peut avoir recours aux modes de fusion que j'arriverais vous
pondre une page de plusieurs kilomtres de long et videmment, je ne m'y risquerai pas.
J'ai donc prfr opter pour la simplicit, c'est--dire que l'on va simplement passer en revue un ou deux modes de fusion parmi
ceux qui sont les plus parlants mon got pour que vous puissiez voir ce qu'ils ont dans le ventre mais aussi et surtout pour que
vous compreniez "comment ceux-l fonctionnent" et comment les modes de fusion d'une manire gnrale fonctionnent via des
exemples prcis et relativement concis.

Exemples

Pour ce premier exemple, je vous propose d'utiliser le mode de fusion nomm Densit couleur + que vous trouverez dans la liste
des modes de fusion. Comme je vous le disais, il nous faut forcment travailler avec deux images pour que l'une fusionne avec
l'autre. Ainsi, on peut travailler avec :

Deux images totalement diffrentes . Par exemple, un coucher de soleil et un portrait de Jimi Hendrix.
Deux images identiques : l'originale et sa copie (duplique).
Un calque vide et une image. C'est un cas un peu particulier qui ncessite l'utilisation d'outils que nous aborderons
plus loin dans ce cours. Nous reviendrons alors dessus le moment opportun.

Nous allons commencer par travailler avec une seule image que nous allons alors dupliquer. Cette image, c'est celle-ci :

Image utilisateur

N'hsitez pas travailler avec moi !


Tlcharger l'image
FlashDancers.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Je vous demanderais de bien vouloir dupliquer l'image dans un premier temps afin que l'on se retrouve au final avec deux images
: l'originale et sa copie.

Image utilisateur

Veillez ce que la copie soit situe au-dessus de l'originale, cela me facilitera grandement la tche pour les explications.

Le tout maintenant, c'est d'appliquer le mode de fusion Densit couleur + au calque Originale copie pour le faire fusionner avec
le calque Originale et gnrer un nouveau jeu de transparence et par extension un jeu de couleur grce au mode. Ainsi, il va
falloir slectionner le calque Originale copie puis faire drouler la liste des modes de fusion pour finalement cliquer sur Densit
couleur +.

Image utilisateur

Une fois que le mode est dfini, on peut apercevoir un changement instantan au sein de notre zone de travail...

Image utilisateur

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 65/574

Ce mode de fusion tel qu'il est dfini obscurcit les couleurs de base de l'image afin de renforcer le contraste entre elles et les
couleurs vives. Alors, l'image est comme transforme, du moins mme si l'on retrouve les couleurs vives auxquelles on avait droit
avant mme d'appliquer le mode de fusion, on peut dire que d'une certaine manire, l'image s'est carrment assombrie, au point
mme d'avoir cr un norme contraste entre les couleurs de base (ce sont elles qui ont t assombries) et les couleurs vives, qui
le sont plus ou moins restes. En fait, c'est simple : les couleurs vives n'ont subi aucune modification chromatique (df.: qui est
relatif la couleur), l'inverse des autres qui on perdue de leur clart.

La diffrence est encore plus parlante si l'on compare l'image avant et aprs mode (le fameux avant/aprs ):

Image utilisateur

Comprenez bien qu'il s'agit d'un exemple explicatif et qu'il existe bien d'autres faons d'exploiter et d'utiliser les modes de fusion,
sans doute avec plus d'intrt aussi. Il tait question ici de vous montrer comment peut ragir tel mode sur telle image. Faites
preuve d'ouverture d'esprit et ne grognez pas si cela vous semble sans intrt. En attendant, vous savez maintenant
comment les modes de fusion ragissent. Ils ont chacun leur proprit, certes, mais le principe reste le mme pour tous.

Au fait, comment a marche avec deux images diffrentes ?

Bonne question ! On va tout de suite voir ce que cela peut donner et pour cela, il va nous falloir deux images. a tombe bien, je
reviens tout juste d'un voyage Londres et j'ai pris deux photos avec lesquelles nous allons pouvoir raliser un petit travail de
montage assez sympathique, vous allez voir. Encore une fois, je vous propose cet exemple mais n'allez pas penser que le mode de
fusion que nous allons utiliser ici ne sert qu' cela.

Panneau de signalisation

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 66/574

Big Ben

Pour russir cet exemple, il va me falloir placer les deux calques de cette manire dans ma zone de travail, c'est--dire que le
calque du Big Ben se situe au-dessus du calque du panneau :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 67/574

N'hsitez pas travailler avec moi !


Tlcharger le fichier source
Ex_Obsurcir.psd

Si j'avais voulu mettre tes deux images dans la mme zone de travail tout seul, sans utiliser ton PSD, comment j'aurais
pu faire ?

C'est assez simple en fait, il aurait tout d'abord fallu ouvrir la plus grande image dans une nouvelle zone de travail. La plus grande
image ici est celle du panneau de signalisation. Ensuite, il aurait fallu ouvrir l'image du Big Ben dans une autre zone de travail
puis utiliser l'outil dplacement de la manire suivante :

1. Je maintiens le clic l'intrieur de la zone de travail dans laquelle figure l'image du Big Ben.
2. Tout en maintenant le clic, je dplace mon curseur jusqu' l'onglet de la zone de travail dans laquelle se trouve l'image du
panneau de signalisation. Ainsi, l'onglet s'ouvre et l'image du panneau apparait.
3. Le clic est toujours maintenu. Je dplace mon curseur sur l'image du panneau et lche le clic quand l'icne "+" apparait.
La premire image fait maintenant office de nouveau calque dans la zone de travail de la deuxime image.

Petite parenthse passe, continuons.

Le mode de fusion que nous allons dfinir s'intitule Obscurcir. L'ide, c'est d'appliquer ce mode sur le calque Big Ben afin de
rendre transparentes toutes les parties de cette image qui se situeront au-dessus des lments relativement sombres, obscures
de l'image de derrire, savoir du calque Panneau de signalisation.

En d'autres mots, en appliquant le mode de fusion Obscurcir au calque Big Ben, on va laisser apparaitre tous les lments aux

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 68/574

tons foncs de l'image situe derrire lui, en l'occurrence la structure mtallique noire du panneau, ce qui signifie que certaines
parties du calque Big Ben vont indniablement disparaitre.

Et cela se confirme ds lors que vous choisissez ce mode de fusion pour le calque de premier-plan :

Comme vous pouvez le voir, tous les lments sombres et obscurs de l'image Panneau de signalisation ont resurgi alors qu'ils
taient initialement masqus par l'image du Big Ben. Cela n'a d'ailleurs pas laiss cette dernire image totalement intacte car, si le
Big Ben est toujours l, le ciel qui se trouvait au-dessus du panneau a disparu, il est effectivement devenu transparent. Au final,
cela me laisse dire que le mode Obscurcir a gnr un jeu de transparence grce auquel nous avons obtenu une image unique
partir de deux calques diffrents.

Au passage, si j'avais essay de dplacer la tour pour la placer pile poil au-dessus du feu vert dans la zone de travail mais
toujours avec le mode Obscurcir activ, et bien la tour aurait fini par devenir transparente elle-aussi !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 69/574

Et c'est l tout l'enjeu de ce mode : il rend transparent tout ce qui se trouve tre au-dessus d'un quelconque lment fonc. La
preuve, on peut entrapercevoir la tour londonienne la pointe de la flche directionnelle blanche. Et vous savez pourquoi ?
Parce qu'elle est blanche (c'est--dire loin d'tre obscure), c'est bien a !

Avant de clturer ce passage spcial "modes de fusion", j'aimerais vous montrer l'un de mes effets prfrs, juste pour le plaisir
des yeux. Je ne vais pas chercher midi quatorze heures : je vous pargne mes longs monologues longues et fatigantes
explications, c'est--dire que je vous montre quoi a ressemble et basta . Ce sera un moyen de vous mettre un peu l'eau la
bouche pour la suite des vnements mais aussi et surtout pour vous dmontrer quel point on peut utiliser les modes de fusion
pour un tas de trucs diffrents.

Pour cet exemple, je ne vais utiliser qu'un seul calque que je vais dupliquer. Ce sera cette image-ci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 70/574

Je vais dans un premier temps dupliquer cette image puis, grce aux pouvoirs magiques qui me sont confrs, je vais rendre cette
duplication totalement floue.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 71/574

Je sais, a pique un peu les yeux .

Je place la copie floue en-dessous de l'originale dans la fentre de calques puis j'applique l'excellent mode de fusion appel
Incrustation cette dernire afin de "l'insrer" dans l'image floue.

Le rsultat ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 72/574

Merveilleux ! N'hsitez pas comparer l'originale avec celle-ci...

J'ai failli vous dire qu'on en avait termin avec les modes de fusion. Que nenni ! On n'a fait ici qu'introduire les modes de
fusion pour que vous puissiez comprendre leur fonctionnement avec quelques cas intressants. Dans la suite du cours, nous
allons les utiliser de manire concrte, sur des exemples qui en valent vritablement la peine. Nous apprendrons par ailleurs
exploiter les modes de fusion de manire prcise grce au pinceau. Mais je vous en ai dj trop dit, alors on passe vite la suite
avant que je ne gaffe encore !

Verrouiller un calque

Lorsqu'un calque est cadenass (c'est--dire que le petit cadenas apparat comme c'est tout le temps le cas sur le calque
Arrire-plan), on dit qu'il est verrouill.

A quoi cela peut-il bien servir ?

Au sens strict du terme, cela signifie que vous pouvez protger entirement ou partiellement le contenu d'un calque.

Protger entirement le contenu d'un calque : cela peut s'avrer vraiment trs utile notamment quand on a termin de
travailler sur un calque et qu'on veut le mettre de ct pour ne plus y toucher.
Verrouiller partiellement le contenu d'un calque : verrouiller un calque de manire partielle signifie que vous serez par
exemple en mesure de modifier les paramtres de transparence d'un calque (opacit et fond - on y vient) tandis qu'il ne
sera plus possible de le dplacer dans la zone de travail car sa position vous convient et ne doit pas tre modifie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 73/574

On retrouve toutes les possibilits de verrouillage via ce panel de boutons :

Je vous les ai listes et les ai chacune commentes :

Tout verrouiller : comme son nom l'indique, ce bouton permet de verrouiller toutes les proprits d'un calque ou d'un
groupe de calques.

Verrouiller les pixels transparents : cela permet de protger toutes les zones transparentes d'un calque.

Ainsi, sur cette image, seul le papillon est susceptible de subir des modifications car tout le reste tant transparent, il est
verrouill et donc protg.
Cette option quivaut loption Conserver les zones transparentes des versions antrieures de Photoshop.

Verrouiller les pixels de limage : ce verrouillage interdit tout type de modification sur le calque avec des outils de
peinture tels que le pinceau ou le crayon. Nous commencerons utiliser ces outils dans la troisime partie de ce tutoriel,
on a donc encore le temps d'ici l .

Verrouiller la position : en activant ce bouton, vous n'aurez alors plus la possibilit de dplacer le calque verrouill
dans votre zone de travail.

Faites-en bon usage !

Pour verrouiller plusieurs calques en mme temps, il vous suffit de tous les slectionner en mme temps (comme on a

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 74/574

appris faire avec les touches de votre clavier) puis d'aller dans le menu Calque > Verrouiller le calque... et enfin de
slectionner le type de verrou que vous souhaitez appliquer aux calques :

C'est pareil pour les groupes .

Opacit et Fond

On continue notre dcouverte des fonctionnalits de la partie suprieure de la fentre des calques et, comme convenu, nous
allons nous intresser la partie droite de la fentre.

Il s'agit de deux fonctionnalits trs pratiques que vous serez continuellement amens utiliser au cours de vos projets.

L'opacit et le fond sur Photoshop sont deux rglages lis la transparence des calques. Au premier sens du terme, on dit
qu'un objet est transparent quand il se laisse traverser par la lumire. En d'autres mots, un objet est transparent lorsque l'on peut
voir travers lui.

Sur Photoshop, modifier la valeur de l'opacit (qui se lit en %) revient modifier la transparence de l'intgralit du calque. Plus la
valeur est basse, moins le calque est visible et plus on peut voir travers lui, comme en tmoigne l'exemple ci-dessous.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 75/574

Ce qu'il faut bien retenir, c'est que l'opacit engendre une modification de la transparence sur tout le calque. Pourquoi j'insiste l-
dessus ? Parce qu' l'inverse, la fonctionnalit "fond" engendre une modification de la transparence sur le fond du calque, sans
toucher ce que l'on appelle les styles de calque que nous lui aurons appliqus.

Un style de calque ? C'est quoi, ce truc ?

Ce que je peux vous dire pour l'instant, c'est qu'il s'agit nouveau d'effets spciaux et, encore une fois, qui sont
automatiquement grs par Photoshop. Mais je ne souhaite pas m'taler sur le sujet car on va voir ce que c'est d'ici quelques
minutes, ce sont les deux sous-parties suivantes .

Pour l'heure, notez simplement que l'opacit engendre une modification de la transparence sur l'intgralit du calque, tandis que
le fond modifie la transparence du calque sans affecter la transparence des effets spciaux que nous lui aurons ajouts grce aux
styles de calque (on dit alors qu'on a modifi la transparence du fond du calque).

En rsum :

Modifier le % de l'opacit, c'est modifier la transparence de l'intgralit du calque.


Modifier le % du fond, c'est modifier la transparence du calque sans affecter les styles de calque que nous lui avons
appliqus (les styles de calque, c'est ce que nous nous apprtons tudier).

Exemple

Dans cet exemple, nous allons modifier l'opacit du Calque 1 pour laisser transparatre le Calque 2.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 76/574

Calque 1

Calque 2

Je slectionne le Calque 1 qui est plac au-dessus du Calque 2 puis je rduis la valeur de l'opacit du calque 50%.

Finalement, le Calque 1 laisse apparaitre 50% le Calque 2.

A l'image des modes de fusion, on utilise les outils de transparence pour un tas de techniques diffrentes. On combine
d'ailleurs rgulirement les modes de fusion et la transparence pour prciser un peu plus notre travail et le rendre plus
optimal.
Les styles de calque (1/2)
En introduction, je vous avais promis vos premiers effets spciaux. Si les modes de fusions sont de bons instruments pour en
raliser, vous n'avez rien vu et n'tes pas au bout de vos surprises avec les styles de calque.
Derrire ce drle de nom se cachent de puissantes fonctionnalits que vous serez trs, trs souvent amens utiliser pour vos

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 77/574

prochains projets. Qui plus est, ces effets sont totalement paramtrables, cela les rend faciles et agrables utiliser.

Style de calque, kzako ?

Un style de calque est une option que l'on ajoute aux calques de notre zone de travail pour que Photoshop gnre des effets.
Ces effets ne sont pas particulirement extraordinaires (au sens propre et figur du terme), il est question par exemple d'ombrage,
de contour ou entre autres de dgrads de couleur. On peut dire que l'on va donner du "style" au calque.

Avant de crer une nouvelle zone de travail, veuillez tlcharger le fichier Photoshop ci-dessous. Il s'agit du premier document
sur lequel nous allons travailler en attendant de tlcharger d'autres travaux tout au long de cette partie et de celles qui
suivent.

Tlcharger le fichier source


Ex_OmbreP.psd

Une fois le fichier tlcharg, veuillez l'ouvrir sur Photoshop.

Cliquez sur l'image pour l'agrandir

Puis, veuillez cliquer une fois sur le Calque 1 afin de le slectionner et ensuite cliquer sur l'icne des options de fusion que
vous trouverez en bas de la fentre des calques.

Une nouvelle liste apparait, il s'agit sans surprise des fameux styles de calque dont je vous parle depuis tout l'heure. Nous
allons ouvrir et dcouvrir la fentre principale partir de laquelle nous allons paramtrer les diffrents styles de calque en
cliquant sur "Options de fusion..." tout en haut de la liste.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 78/574

C'est donc par le biais de cette fentre que nous dfinirons quelles options ajouter aux calques et que nous les configurerons
pour leur donner du style ( prononcer avec l'accent anglais ).

Les styles, justement, se situent dans la partie gauche de la fentre, c'est--dire la zone recouverte de vert sur l'image ci-dessous.
La zone rouge, quant elle, recouvre tous les paramtres relatifs au style slectionn qui vont nous servir le configurer.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 79/574

Bon, il y a une petite dizaine de styles de calque et disons-le clairement, nous n'allons pas tous les passer en revue. Mme s'ils
ont tous leurs particularits et nul doute que vous serez amens tous les utiliser un jour, j'imagine que le problme qui se pose
est le mme que celui qui s'est pos pour les modes de fusion : il y a beaucoup de styles diffrents et ce ne serait pas raisonnable
mon sens de tous les voir car je risquerais srieusement de rdiger un gros pav interminable. Regardez un peu dj la taille de
votre page alors que je n'ai effectivement pas trait tous les styles !

Allez, nous allons voir les principaux styles de calque et croyez-moi c'est dj beaucoup de travail... Pour le reste, j'ose esprer
que vous ferez des essais tout seuls, comme des grands .

En ouvrant cette nouvelle fentre, vous tombez directement sur la partie permettant de paramtrer "les options de fusion"...

... Hein ? Attends une minute, je suis carrment perdu, l. C'est quoi une option de fusion ? C'est pas ce que l'on vient
de voir, l, avec le Big Ben ?

Et BIM ! Dans le panneau . Il ne faut pas confondre les modes de fusion et les options de fusion.

Un mode de fusion, c'est ce que nous venons tout juste de voir ensemble, il s'agit de la fameuse liste droulante et des
modes que nous avons appliqus aux images telles que le Big Ben et le panneau de signalisation, vous savez.
Les options de fusion sont des paramtres lis tous les styles de calque de la liste de gauche. Ces paramtres
permettent d'effectuer une configuration gnrale sur tous les styles.

Je n'ai personnellement jamais pris l'habitude d'utiliser les options de fusion depuis que je travaille sur Photoshop et cela ne m'a
priori jamais mis de bton dans les roues. Je n'ai par consquent pas prvu de vous en parler mais je ne vous empche
absolument pas d'y toucher un peu. Juste, n'oubliez pas rinitialiser les paramtres par dfaut quand vous avez termin sans quoi
les exercices qui suivent risquent d'tre fausss .

Ombre porte

Pour inaugurer cette longue et prilleuse partie, nous allons aborder le premier style de calque de la liste, il est appel Ombre
porte. Alors, de quoi s'agit-il ?

Comme son nom l'indique, il est question d'ajouter une ombre au calque slectionn. Il ne fait aucun doute que vous savez ce
qu'est une ombre (tout du moins j'ose l'esprer - pensez Lucky Luke si ce n'est pas le cas), je vous pargne la dfinition type
d'une ombre.

Veuillez cliquer sur l'option "Ombre porte". Attention, il ne faut pas cliquer sur la petite case blanche qui se situe ct du nom
de l'option mais bel et bien sur le texte "Ombre porte". Cliquer sur la case blanche, c'est slectionner l'option et la rendre
oprationnelle avec ses paramtres par dfaut. Or, cliquer sur le texte "Ombre porte", c'est afficher et nous laisser la possibilit
de modifier ses paramtres, ce que nous nous apprtons justement faire.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 80/574

Comme vous pouvez le voir, il y a un certain nombre de paramtres disponibles et j'ai longtemps hsit pour dterminer comment
j'allais vous les prsenter. L'ide, ce serait donc de les tudier un par un, de haut en bas et de gauche droite, et sous forme de
tableau, comme je l'ai fait avec la fentre de cration d'une nouvelle zone de travail .

Vous remarquerez que pour la plupart des styles de calque, leurs paramtres se dcomposent gnralement en 2 ou 3
catgories. Une catgorie revient trs souvent, elle porte le nom de "Structure". Cette catgorie de paramtres, nous
l'utiliserons tout le temps du moment qu'elle s'offrira nous. Il se peut que nous utilisions les autres galement, mais ne
vous tonnez pas si j'en saute certaines, c'est que je n'aurais pas jug essentiel de les regarder de plus prs. Merci de
votre comprhension.

Paramtre Valeur
Il est de retour ! Le mode de fusion peut aussi fonctionner pour faire fusionner un style de calque avec un calque
de la zone de travail.
Mode de
Vous pouvez donc dfinir un mode de fusion l'ombre et ainsi, un jeu de transparence s'effectuera entre elle et le
fusion
calque de second plan (celui qui se trouve derrire le calque slectionn et auquel on a ajout l'ombre porte
justement).
Comme son nom l'indique, ce paramtre permet de donner une couleur l'ombre. Un peu hors du
commun, je dois l'admettre, mais en mme temps on travaille sur Photoshop . Pour choisir une
Couleur couleur, il suffit de cliquer sur le petit rectangle noir qui se situe juste ct de la liste droulante
de l'ombre des modes de fusion et ainsi vous ouvrirez le slecteur de couleurs. On revient l-dessus un peu
plus loin dans le cours donc ne vous en faites pas, si cela vous effraie aujourd'hui, vous en
rigolerez demain.

L'opacit permet de dfinir la transparence de l'ombre. Moins il y aura d'opacit, moins


Opacit l'ombre sera visible. C'est une notion dj aborde, j'espre que c'est rentr .

Ce paramtre permet de modifier l'angle de l'ombre porte, c'est--dire de lui dfinir une position dans la zone de
travail en fonction du calque.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 81/574

Deux possibilits : soit je tape directement la valeur de l'angle de l'ombre dans la


case blanche (ici : -45), soit je dplace manuellement le rayon dans le cercle,
l'aide de ma souris.
Ce rayon qui indique trs prcisment o se situe l'ombre par rapport au calque.
Vous le savez, pour crer une ombre, il faut forcment une source de lumire. Dans
cet exemple, le rayon est plac en bas droite (approximativement) ; on imagine alors que c'est ici d'o provient la
source de lumire, et qu'elle se dirige dans la direction que prend le rayon. L'ombre se situera donc en haut
Angle gauche du calque.

En effet, comme on peut le constater, l'ombre se retrouve en haut gauche, l'oppos du rayon dans les
paramtres de l'ombre porte (et donc de notre position et de la direction que prend notre regard).

En cochant cette option, les paramtres des ombres portes de tous les calques prendront le mme angle. En
Utiliser
d'autres termes, si vous dfinissez un angle l'ombre porte d'un calque (appel Calque 1) puis que vous
l'clairage
modifiez l'angle de l'ombre porte d'un autre calque (appel Calque 2) tout en laissant l'option d'clairage global
global
coche, alors l'angle du Calque 1 prendra la mme valeur que celui du Calque 2.

Ce paramtre permet de choisir la distance qui spare l'ombre du calque. Plus la valeur est
importante, plus la distance le sera.
Distance
Pour dplacer l'ombre manuellement (sans passer par des valeurs crites), il vous faut dplacer la
fentre des styles de calque sur le ct pour avoir la zone de travail en champs de vision puis
cliquer sur cette dernire et dplacer votre curseur pour que l'ombre le suive.

Avec ce paramtre, il est possible de donner plus d'paisseur l'ombre. Plus la valeur dfinie est
Grossi importante, plus l'ombre s'paissit.

Avec celui-ci, vous dfinissez une taille l'ombre. A l'inverse du paramtre "Grossi", plus la valeur
de la taille est importante, plus l'ombre s'tend et perd un peu de son opacit sur les bords
Taille

Nous nous contenterons des paramtres de la catgorie "Structure" pour ce style de calque, comme convenu. On laisse donc le
reste de ct .

L'essai

Il est temps de mettre en pratique ce que l'on vient de voir avec notre premier essai. Il y en aura un pour chacune des options
.

Avant de paramtrer l'ombre porte, veuillez slectionner le calque nomm Calque 1 dans votre fentre de calques. Nous le
slectionnons afin de travailler dessus. Je rappelle aux tourdis que nous allons effectuer des modifications sur ce document-ci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 82/574

Voici ensuite les instructions, je vais vous demander de reprendre chacun de ces paramtres et de les insrer dans votre fentre
pour l'option Ombre Porte .

Mode de fusion : Produit


Couleur : Par dfaut (noir)
Opacit : 50 %
Utiliser l'clairage global : non ( dcocher avant d'indiquer des valeurs aux paramtres suivants)
Angle : 105
Distance : 3 px
Grossi : 0 %
Taille : 8 px

Tant qu'on y est, il ne faut pas que j'oublie de vous dire que vous disposez d'un aperu en temps rel des modifications
apportes aux paramtres de l'option ajoute au calque. Pour l'activer (si ce n'est pas le cas actuellement), il suffit de
cliquer sur la petite case "aperu" droite de la fentre des styles de calque (en-dessous des boutons "OK",
"Annuler" et "Nouveau style..."). Ainsi, ds que vous activerez un style de calque, vous pourrez voir quoi il
ressemble dans la zone de travail. Pareil, si vous modifiez un paramtre de ce style de calque, vous pourrez directement
voir quel rsultat cela donne et ainsi, vous serez en mesure d'affiner votre configuration pour obtenir le rsultat que
vous attendiez.
Heureusement que l'aperu en temps rel existe, sans quoi nous serions constamment obligs de fermer la fentre des
styles de calque chaque fois qu'une modification tait apporte aux paramtres.

Veuillez valider les paramtres donns dans les instructions ci-dessus. Voici le rsultat que nous obtenons :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 83/574

Nous sommes donc parvenus crer une ombre correcte entre la premire et la deuxime feuille, si bien que l'on a l'impression
que la feuille ombre survole un peu les autres. Pour garder une certaine uniformit, l'ide prsent serait de rajouter une ombre
chacune des feuilles et donc, tous les calques visibles dans la fentre de calques (hormis l'arrire-plan videmment).

Il faudrait donc logiquement retaper chacune des valeurs de chacun des paramtres pour chacun des calques. Autant de
manuvres lourdes que Photoshop va nous viter, il existe en effet un moyen bien plus efficace et beaucoup moins fatiguant
pour ce genre d'oprations rptitives : nous allons copier les paramtres du Calque 1 et les coller dans tous les autres calques
de la fentre. Ainsi, nous transfrerons toutes les proprits du Calque 1 vers ces autres calques. C'est la fois un gain de temps
et d'nergie et vous n'imaginez pas quel point je suis ravi que cela existe !

Pour copier les paramtres du style de calque "Ombre porte" prcdemment ajouts au Calque 1, il faut cliquer droit sur ce
dernier puis cliquer sur le bouton Copier le style de calque. Enfin, pour les coller, il faut cliquer droit sur chacun des autres
calques et cliquer sur le lien Coller le style de calque. Vous remarquerez alors que l'ombre porte sera automatiquement
paramtre sur le calque slectionn. Et si vous avez bien suivi, vous devriez obtenir l'image suivante :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 84/574

Elles sont pas belles, nos feuilles de papier ? Grce aux ombres portes, nous avons ralis un effet de profondeur et avons
donn du relief au paquet de feuilles, ce qui a galement permis de styliser chaque feuille et de lui donner un ct "design". C'est
plutt basique mais franchement, je trouve a trs efficace. J'adore !

Ombre interne

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le nouveau document correspondant ce style de calque.
Tlcharger le fichier source
Ex_OmbreI.psd

Aprs l'ombre porte, je vous prsente l'ombre interne. Contrairement l'ombre porte qui permettait de crer une ombre externe
au calque slectionn, l'ombre interne cre une ombre non pas l'extrieur mais l'intrieur du calque.

Une ombre l'intrieur du calque ? Je te demande pardon ?

Cela peut paraitre bizarre peut-tre, mais croyez-moi, c'est une option trs intressante et mme surprenante dans la mesure o, si
l'ombre porte donne cet effet de profondeur que l'on a connu avec le paquet de feuilles, l'ombre interne, quant elle, va
permettre l'apparition d'un contraste sur les bords du calque et ainsi va nous permettre donner du relief au calque.

Comment a vous n'avez rien compris ? Allons, voyons voir cela de plus prs.
Veuillez slectionner l'option "Ombre interne" dans la liste (en prenant soin, une nouvelle fois, de bien cliquer sur "ombre
interne" et pas sur la petite case blanche ).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 85/574

Premire impression : les paramtres ressemblent trangement ceux de l'ombre porte. Quoi que, je dis trangement, mais je
vous avais plus ou moins prvenus que la catgorie "Structure" recensait quasiment les mmes paramtres chaque fois. J'ai
donc pris la dcision de ne pas vous refaire un tableau comme je l'ai fait pour l'ombre porte car cela alourdirait le tutoriel pour
pas grand chose de nouveau au final.

On peut noter une seule diffrence remarquable qui vient du paramtre "Maigri". Pour l'ombre porte, le nom de ce paramtre
tait "Grossi" : il fallait en effet grossir l'ombre. Pour l'ombre interne, il s'agit de la faire grossir " l'intrieur du calque", donc
l'inverse de la faire maigrir (c'est tordu, je l'admets...). Du coup, on va devoir indiquer une valeur en % : si la valeur est gale
100%, alors l'ombre interne occupera 100% du calque. Vous me suivez ?

L'essai

L'image sur laquelle nous travaillerons est la suivante. Je vous rappelle que l'on va rgulirement effectuer des essais chaque fois
qu'une nouvelle notion sera aborde .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 86/574

Nous effectuerons cet essai sur le calque nomm Calque 4 dans la zone de travail. Pareil, je vous donne les valeurs indiquer
dans les champs prvu cet effet :

Mode de fusion : Produit


Couleur : Par dfaut (noir)
Opacit : 27 %
Angle : 120
Utiliser l'clairage global : oui ( cocher)
Distance : 0 px
Maigri : 20 %
Taille : 90 px

En paramtrant le style de calque avec ces valeurs, le rsultat sera le suivant :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 87/574

Je vous le disais, l'ombre interne peut servir donner du relief au calque. Il s'agit d'un effet plutt courant et grce auquel on
peut rendre une cration plus sophistique qu'elle ne l'tait dj. La preuve, s'il on applique une ombre interne tous les ronds
du document Photoshop que je vous ai fourni, on obtient une image tout de mme plus labore :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 88/574

Dans cet exemple, j'utilise l'ombre interne pour crer une sorte de relief qui donne l'impression que le rond est
maintenant une boule. Notez qu'on peut utiliser l'ombre interne pour bon nombre d'exemples et qu'il ne faut pas se
focaliser sur celui-ci seulement.

Vous savez, on pourrait mme accentuer ce relief en modifiant par exemple l'angle, la distance ainsi que l'opacit de l'ombre
interne. Voyez plutt :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 89/574

Pas mal, n'est-ce pas ? Je vous laisse deviner tout seuls quelles valeurs j'ai pu indiquer pour paramtrer l'ombre interne, je suis
sr que vous y arriverez. Au pire, n'hsitez pas demander de l'aide sur le forum Graphisme du Site du Zro.

Lueur externe

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant ce style de calque.
Tlcharger le fichier source
Ex_LueurE.psd

On en a termin avec les ombres, il est temps de s'intresser aux lueurs en commenant par la lueur externe.

Comme son nom l'indique, ce style de calque permet de crer une lueur, c'est--dire des rayons lumineux que l'on dit "externes"
car ils dbutent partir des contours du calque vers l'extrieur, l'image de l'ombre porte quand sa distance est paramtre 0
px. Je tiens ce que vous ne confondiez pas la lueur externe et l'ombre porte. Je rpte que c'est une lueur, semblable des
rayons de lumire qui s'chappent des contours du calque.

Certains paramtres de styles de calque reviennent rgulirement, ne vous tonnez pas si je ne reviens pas dessus.

Paramtre Valeur

Mode de
Dj vu.
fusion
Opacit Dj vu
Si je vous parle d'effet "neige", savez-vous ce que cela signifie ? Vous savez, ce sont ces petits pointills que l'on
Bruit retrouve notamment lorsque l'on ne capte plus une chaine de tlvision. Et bien, on peut aussi nommer cet effet
"neige" du bruit, et modifier la valeur de ce paramtre va alors avoir pour consquence de brouiller la lueur.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 90/574

Dj vu. Il faut cliquer sur le petit carr noir pour faire apparaitre une fentre partir de laquelle vous pourrez
modifier la couleur.
Couleur
Je vous demande de bien vouloir ne pas vous proccuper du rectangle formant un dgrad situ
droite du carr noir. Cela sert justement crer des dgrads et je leur ai consacre toute une partie
dans la suite de ce chapitre. Les dgrads font d'ailleurs offices de styles de calque !

Ce paramtre dtermine la prcision de votre lueur. Si vous choisissez l'option "prcise", alors la lueur sera moins
Technique dtendue, plus compacte, plus forte et plus... prcise . Si vous aviez laiss l'option "plus tamise", votre
lueur aurait t plus approximative, plus floue, plus dtendue... tamise quoi.

Grossi Dj vu.
Taille Dj vu.

L'essai

C'est parti pour une nouvelle manipulation. Cette fois-ci, vous avez tlcharg cette image :

Je vous invite rentrer les informations qui suivent sur le Calque 2.

Mode de fusion : Normal


Opacit : 97 %
Bruit : 3 %
Couleur : #FFFFD6

Ce code de couleur est insrer au niveau de l'encadrement rouge sur cette image (sans le #) :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 91/574

Grossi : 1 %
Taille : 46 px

Veuillez laisser les autres paramtres tels que vous les avez trouvs (par dfaut). Vous devriez obtenir ceci :

Lueur interne

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 92/574

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant ce style de calque.
Tlcharger le fichier source
Ex_LueurI.psd

La lueur interne par rapport la lueur externe est l'image de ce qu'est l'ombre interne par rapport l'ombre porte. C'est--dire
que la lueur interne fonctionne de la mme manire que l'ombre interne, elle sera prsente l'intrieur du calque.

Vous connaissez, l aussi, la plupart des paramtres de cette option. La nouveaut en revanche, c'est qu'il est possible de choisir
la source de dpart de la lueur, chose qui n'tait pas permise avec l'ombre interne (en mme temps, une ombre reste une ombre, il
s'agit d'une silhouette ni plus ni moins) : .

Choisir la source de dpart de la lueur, c'est dfinir quel endroit elle va dbuter.

Soit votre lueur part du contour de votre calque (comme la lueur externe et les deux types d'ombres).
Soit votre lueur part du centre de votre calque (et c'est la nouveaut).

Un exemple ne vous ferait pas de mal, je crois ...

L'essai

Nous effectuerons deux essais, chacun prsentant le rsultat selon les deux sources paramtrables. L'image sur laquelle nous
travaillerons est la suivante :

Nous travaillerons sur le calque nomm Calque 2.

Dans le premier exemple, la source de la lueur interne sera le contour du calque, comme l'indiquent les instructions suivantes :

Mode de fusion : Normal


Opacit : 75 %
Bruit : 0 %
Couleur : #FFFF78
Technique : Plus tamise
Source : Contour
Maigri : 10 %
Taille : 98 px

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 93/574

Observons le rsultat si l'on changeait la source de la lueur, ainsi que quelques autres paramtres :

Mode de fusion : Normal


Opacit : 100 %
Bruit : 0 %
Couleur : #FCFE7D
Technique : Plus tamise
Source : Centre
Maigri : 0 %
Taille : 62 px

Dans le premier exemple, la lueur a pris forme partir des bords de l'ampoule (autrement dit de son contour). A l'inverse, dans cet
exemple, la lueur a dbut au centre de l'ampoule.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 94/574

Utilisez plusieurs styles de calque en mme temps !

N'hsitez pas combiner plusieurs styles de calques si vous pensez qu'ils peuvent aller ensemble. C'est le cas pour notre
ampoule, regardez. De base, l'ampoule ressemble a :

En lui ajoutant les options de fusion que nous avons vues (voir liste ci-dessous), voyez comment j'ai pu l'amliorer :

Ombre porte
Ombre interne
Lueur externe
Lueur interne

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 95/574

Biseautage et Estampage

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant ce style de calque
Tlcharger le fichier source
Ex_Biseautage.psd

Veuillez ouvrir la page des options de fusion (c'est--dire la fentre des styles de calque) puis cliquer sur l'option "Biseautage et
estampage".

C'est un style de calque vraiment trs, trs intressant, compte tenu de son puissant pouvoir. Il permet de donner du relief au
calque !

Bah, c'est ce que l'on vient tout juste de faire ! Tu sais, avec l'ombre porte... ?

Ah. En effet, l'ombre porte permettait de donner du relief, tout comme l'ombre interne d'ailleurs. Mais voil, ce n'tait pas un
relief concret, disons que c'est par le biais de l'ombre que nous arrivions percevoir un effet de profondeur. Or, avec l'option
biseautage, nous allons concrtement modifier le calque pour crer un relief, un vrai. Vous me suivez ?

Dcortiquons chaque paramtre de l'option, comme on a dsormais l'habitude de faire, avant de procder notre essai coutumier
:

Catgorie Structure
Paramtre Valeur

Le style permet de dfinir quel type de biseau ou d'estampage (autrement dit quel type de relief) nous donnerons
Style
notre calque.

Technique Il s'agit de choisir la forme que prendra le relief. En d'autres termes, quelle tte aura notre relief .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 96/574

Ce paramtre permet de dfinir la profondeur du relief. Plus la valeur de ce paramtre est leve, plus le relief va
Profondeur
se renforcer, donnant un effet de profondeur plus important.
Il s'agit d'indiquer la direction que prendra le relief. Quand un relief se cre (o que ce soit), on a forcment
besoin d'une petite source de lumire pour l'apercevoir, car les cts du relief n'ont pas la mme intensit de
Direction couleur (et c'est ce qui donne ce relief justement). Quand on parle de direction, on dfinit le ct d'o la source
provient (vers le haut ou vers le bas). Je vous invite essayer, n'oubliez pas de cocher l'aperu en tant rel .

Ce paramtre dtermine la taille du relief. Plus la valeur de ce paramtre est leve, plus le relief va gagner en
Taille
hauteur et prendre la forme d'une pyramide ou d'un cube (selon l'angle et la direction donne au relief).
Flou Permet de donner du flou au relief.

Le paramtre Angle fonctionne de la mme manire que celui des ombres. Il s'agit simplement, cette fois-ci, de
Angle
dfinir un angle de la fameuse source de lumire, l'image du paramtre "Direction".

Je ne souhaite pas m'terniser sur les autres paramtres, mais je ne vous empche pas de les essayer par vous-mme. Nous en
avons assez vu, on a du pain sur la planche ! Mais avant de passer au style de calque suivant...

L'essai

Une nouvelle fois, je vous propose deux essais afin de constater de deux rsultats en fonction des paramtres proposs. Nous
travaillerons sur le calque nomm Calque 1 (en mme temps, c'est le seul sans compter l'arrire-plan).

Tout d'abord, comme l'accoutume, un aperu de l'image que vous avez tlcharge sur laquelle nous allons travailler, suivi des
instructions habituelles .

Style : Biseau Interne


www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 97/574

Technique : Ciselage marqu


Profondeur : 281 %
Direction : Haut
Taille : 4 px
Flou : 0 px
Utiliser l'clairage global : non ( dcocher)
Angle : 120
lvation : 30

Continuons avec le deuxime essai.

Style : Estampage oreiller


Technique : Lisser
Profondeur : 461 %
Direction : Haut
Taille : 8 px
Flou : 5 px
Utiliser l'clairage global : non ( dcocher)
Angle : 120
lvation : 30

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 98/574

Dans les deux exemples, on peut constater que le tableau a pris du relief. Dans le premier, il a gagn en profondeur. Dans le
deuxime exemple, on a incrust le tableau dans le mur, laissant nouveau apparaitre un effet de profondeur.
Les styles de calque (2/2)
Je vous avais averti au tout dbut du chapitre, je ne souhaite pas m'arrter sur chaque style de calque prsent dans la liste. Nous
mettrons donc les styles de calque suivants de ct :

Satin
Incrustation de motif

Incrustation couleur

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant ce style de calque.
Tlcharger le fichier source
Ex_Incrustation_Couleur.psd

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 99/574

Je crois que cette option parle d'elle-mme ( se demander parfois quoi je sers ). Elle sert incruster de la couleur dans nos
calques, autrement dit les remplir d'une couleur unique.

Ainsi, si je coche ce style de calque, je vois mon calque (qui est en l'occurrence le Calque 2 dans le document que je vous ai
fourni) rempli de la couleur rouge.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 100/574

Le rouge est la couleur donne par dfaut. Il est bien entendu possible de la modifier, pour cela il faut cliquer sur le petit
rectangle droite de la fentre. Ce rectangle est rouge, c'est la couleur actuellement slectionne. Une nouvelle fentre apparait
ds lors que vous avez cliqu sur le rectangle rouge.

Il s'agit du slecteur de couleurs. Cette fentre ne nous est pas vraiment inconnue, nous avions eu l'occasion de nous en servir
tout l'heure, souvenez-vous il tait question de changer la couleur de la lueur externe. Je vous avais simplement donn un code
de couleur qui ressemblait a : #000000 (non, ce n'est pas un code binaire ), sans vous donner de plus amples explications.

Mais alors, c'est quoi ce truc ?

Un code de type #000000 est appel code hexadcimal de couleur. Un code hexadcimal de couleur est compos de six chiffres

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 101/574

et/ou lettres prcd(e)s par le signe #. Ces chiffres sont le fruit de calculs mathmatiques gnrs par Photoshop.

Les codes hexadcimaux sont utiliss en programmation web, notamment dans les langages (x)HTML et CSS. On les
utilise par exemple pour donner une couleur des textes.

Chaque couleur possde son propre code hexadcimal. Par exemple, le code de la couleur rouge (lorsque vous ouvrez la fentre
d'incrustation de couleur, c'est la couleur par dfaut) est #FF0000 .

Vous pouvez vous amuser modifier les deux derniers chiffres de ce code par le 4 et le 5 (par exemple). Vous obtiendrez une sorte
de rouge ros .

Nous avons donc deux faons de dfinir une couleur. La premire, vous la connaissez dsormais, il s'agit de taper un code
hexadcimal. Quant la deuxi...

...QUOI ? Tu veux dire qu'on va devoir apprendre le code hexamachin de chaque couleur ??? Il doit y en avoir des
milliers, mme pas la peine de compter sur moi !

Il y en a des millions . Bah quoi, le travail d'infographiste, c'est pas de tout repos hein ...
Mais videmment que non, parce que si c'est a tre infographiste, je vous invite cliquer sur la petite croix rouge en haut
droite de votre cran .

Il existe une solution bien moins complexe, encore heureux. En fait, ce qui va le plus nous intresser, c'est la zone de gauche,
avec toutes les couleurs sous forme de dgrad.

Dans cette zone, veuillez observer le petit cercle aux contours blancs. Ce cercle, il cible la couleur que vous souhaiterez incruster
dans le calque :

1. Avec ma souris, je dplace le cercle dans le carr gauche de la fentre, l o se trouvent les diffrents rouges ainsi que
le noir, le gris et le blanc (je ne peux pas tre plus prcis ).
2. L'ide, c'est de cibler une couleur qui m'intresse avec ce cercle. Quand c'est fait, je clique une fois. La couleur cible dans
le cercle a t automatiquement enregistre, on peut d'ailleurs voir un aperu de cette couleur gauche du bouton OK de
la fentre : le petit rectangle a chang de couleur.
3. Enfin, je clique sur le bouton OK si je suis satisfait.

J'aimerais changer de couleur et mettre du bleu. Comment faire ?

Il faudrait alors de modifier la dominante de rouge prsente dans le zone de gauche pour que l'on puisse cibler une couleur

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 102/574

diffrente. Et je suis sr que cela ne vous est pas pass inaperu, il y a une sorte de frise verticale avec plein de couleurs au
milieu de la fentre.

C'est par le biais de cette frise que nous allons dfinir une nouvelle couleur dans la zone de gauche.

Aux extrmits gauches et droites de cette frise, vous devriez apercevoir deux flches symtriques, l'une pointant vers l'autre.
Ces flches ciblent l'intrieur de la frise, savoir les couleurs. Il faudrait donc les dplacer et leur choisir une cible.

Pour ce faire, veuillez maintenir le clique sur l'une des deux flches et la faire glisser de haut en bas. Quand la couleur cible vous
convient, lchez le clique : la couleur dominante dans la zone de gauche a chang. C'est ensuite vous de cibler la couleur
recherche.

Toutes les couleurs existantes et gres par nos crans d'ordinateur sont prsentes dans ce slecteur de couleur.

L'essai

Aprs la thorie, place la pratique, mme si j'ai prvu de ne pas y passer des heures.

Nous travaillerons sur le document de l'exemple du dbut de cette partie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 103/574

J'ouvre la palette des options de fusion pour le Calque 2 et clique sur l'option "Incrustation de couleur". Nous choisirons les
paramtres suivants :

Mode de fusion : Normal


Opacit : 100%
Code hexadcimal : #678457

Le cur change alors de couleur et prend la couleur donne par le code hexadcimal :

J'applique maintenant une couleur aux autres calques de ma zone de travail, except le Calque 1 (il s'agit du t-shirt) et l'arrire-
plan. Voici le rsultat que j'obtiens :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 104/574

Incrustation de dgrad

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant cette option de fusion.
Tlcharger le fichier source
Ex_Incrustation_Dgrad.psd

Ahhhh, les dgrads ! L'tape la plus importante et la plus dlicate sans doute aussi de ces deux dernires parties .

Vous le savez, je suis cens vous faire partir de zro dans ce cours, je considre alors que je dois tout vous expliquer, mme
quand a ne semble pas ncessairement essentiel. Par consquent, pour commencer cette partie en douceur, je vous propose de
consulter la dfinition du mot dgrad, pompe sur vous-savez-o et revisite par vous-savez-qui :

Citation : Wikipdia
Un dgrad de couleur est une transition progressive d'une couleur vers une autre.

Il en existe diffrents styles. Photoshop nous en propose cinq :

Radial
Linaire
Angle
Rflchi
Forme clate

Mais alors pourquoi les dgrads me passionnent tant ? Tout simplement parce qu'ils sont l'option qui produit selon moi les
effets les plus puissants et les plus convoits et notamment celui que je prfre : le reflet. J'estime que le reflet fait partie des
effets qui contribuent le plus rendre une image raliste, un peu l'image d'un objet cr l'aide d'un logiciel de modlisation 3D.

Allez, on rentre dans le vif du sujet, il est temps d'ouvrir la fentre de l'option de fusion "Incrustation de dgrad" ( partir du
calque nomm Calque 1).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 105/574

D'une manire gnrale, vous connaissez la moiti des paramtres de l'option. Nous avons un mode de fusion dfinir, un angle
ainsi que l'opacit du dgrad. Rien de bien sorcier jusqu'ici .

C'est aprs que a se corse. Nous rencontrons pour la premire fois les paramtres nomms Inverser, Aligner sur le calque et
l'chelle (ceci sans compter le menu du paramtre Style, que nous avons dj rencontr pour le style de calque Biseautage).
Mais ce qui devrait vous intriguer tout particulirement, c'est que nous retrouvons le fameux rectangle horizontal rempli d'un
dgrad allant du noir vers le blanc, nous l'avions rencontr dans les rglages du style de calque "Lueur externe".
Eh bien figurez-vous qu'il s'agit du cur de l'option de fusion "Dgrad". C'est en cliquant dessus que l'on s'aperoit quel point
cette option est complte puisqu'une nouvelle fentre dans laquelle se trouvent de nouveaux paramtres apparait. Prenez soin de
bien cliquer dans le rectangle (en plein dans le dgrad) et non sur la petite flche noire situe sa droite.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 106/574

Cette fentre, c'est l'diteur de dgrad. Nous dcomposerons cette fentre en deux parties :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 107/574

Commenons par la premire partie de la fentre, c'est--dire celle ancre de rouge.

Nous avons de la chance, les crateurs de Photoshop en ont fait une catgorie, elle s'appelle "Paramtres prdfinis".

Comme pour tous les styles de calque jusqu'ici tudis, nous les avons d'abord paramtrs avant de les ajouter concrtement au
calque. Cette rgle n'chappe videmment pas aux dgrads de couleurs, comme vous vous en doutez.

Si je vous dis cela, ce n'est pas pour rien. En effet, dans la catgorie "Paramtres prdfinis", vous remarquez une succession de
carrs remplis de couleurs qui forment toutes des dgrads. Comme son nom l'indique, il s'agit de paramtres dj prts
l'utilisation. C'est--dire que les dgrads sont dj crs, paramtrs et prts l'emploi. Le seul travail de l'infographiste dans ce
cas serait de cliquer sur le dgrad de son choix (histoire de ne pas trop s'fouler ).

Les paramtres que vous avez sous les yeux sont censs tre ceux proposs par dfaut sur Photoshop, c'est--dire la premire
ouverture du logiciel. Il existe en fait un tas d'autres dgrads dont les paramtres sont prdfinis, et ce n'est pas pour nous
dplaire d'ailleurs . Pour accder aux autres dgrads de couleurs, il faut cliquer sur la petite flche en haut droite de la
fentre.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 108/574

Une nouvelle liste apparait alors. Dans la premire partie de cette liste, vous pouvez dterminer l'affichage des petits carrs
remplis de dgrad (Photoshop les appelle plus justement des vignettes) :

Texte seul
Petite vignette
Grande vignette
...

La deuxime partie de la liste consiste rinitialiser les dgrads (encore faut-il les avoir modifis) ou les remplacer. Pour
remplacer un dgrad, il faut ouvrir un fichier dont l'extension est GRD. Il est possible de tlcharger des dgrads dont les
paramtres sont prdfinis sur internet, vous pouvez mme crer vos propres dgrads ! Mais chaque chose en son temps, cette
tape est la suivante . Pour l'heure, nous nous arrterons sur la dernire partie de la liste :

Bruits
Effets spciaux
Harmonies des couleurs 1
...

Vous vous en doutez bien, tous les lments contenus dans cette liste constituent les dgrads aux paramtres prdfinis fournis
par Photoshop. Pour laisser apparaitre ces paramtres l'emplacement des petites vignettes (c'est--dire dans la catgorie
"Paramtres prdfinis" dans l'diteur de dgrad), il faut videmment cliquer sur l'un des paramtres de la liste.

Chaque paramtre reprsente un thme pour donner une ide gnrale des types de dgrads auxquels nous aurons droit en les
choisissant. Essayons de cliquer sur les dgrads de type "Pastel".

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 109/574

Comme vous pouvez le constater, les vignettes reprsentant les dgrads aux paramtres prdfinis dans l'diteur de dgrad ont
chang.

Toutes les dgrads forment maintenant des vignettes aux couleurs pastelles. Essayez les autres paramtres si vous voulez .

Les dgrads d'une seule couleur

Avez-vous remarqu cette petite vignette avant de modifier la liste des paramtres prdfinis ?

Cette petite vignette reprsente l'incrustation d'un dgrad d'une seule couleur.

Comment un dgrad peut-il n'avoir qu'une seule couleur, puisque par dfinition, un dgrad c'est une transition
progressive entre deux couleurs ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 110/574

Observez avec moi la vignette. On remarque une transition progressive entre la couleur noir et des espces de petits carrs gris
et blancs. En fait, ces petits carrs, ils reprsentent la transparence sur Photoshop. C'est d'ailleurs le cas aussi pour l'arrire-plan
d'une zone de travail : s'il n'y en a pas, le fond prendra alors cette mme apparence :

Aprs avoir masqu l'arrire-plan (le petit il gauche du calque est absent), on constate que le fond de la zone de travail
prend l'apparence de petits carrs blancs et gris.

En fait, mme si l'on utilise qu'une seule couleur, on parle toujours de dgrad car on a une transition progressive entre la couleur
(le noir) et la transparence. C'est un peu tordu mais c'est pourtant logique .

Crer un dgrad personnalis

Pour l'instant, tout ce que l'on a su faire, c'est choisir des dgrads tout prpars et prts l'emploi. Autant dire que l'on ne s'est
pas trop foul. On va donc faire semblant de travailler un peu et nous allons dfinir nos propres paramtres, des paramtres que
nous personnaliserons selon nos gots et nos besoins !

Nous allons devoir passer la deuxime partie de la fentre.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 111/574

Voici la liste des nouveaux paramtres que nous avons sous les yeux, suivis d'une petite explication :

Titre Dfinition

Nom Donnez un nom au dgrad que vous crez.


C'est le bouton qui vous permet de sauvegarder le nouveau dgrad que vous avez cr. Ds lors que vous aurez
Nouveau enregistr un nouveau dgrad, il apparaitra sous forme de vignette dans l'espace "Paramtres prdfinis" et sera
prt l'emploi.

Vous pouvez choisir Uniforme ou Bruit. Le premier, c'est le dgrad que nous connaissons. Si vous choisissez
Type de Bruit, votre dgrad changera compltement de forme et paraitra plus "clat". C'est assez compliqu expliquer, je
dgrad vous invite essayer, vous vous rendrez vite compte de la diffrence .

Cela vous permet de lisser votre dgrad. Ici aussi, c'est trs difficile expliquer, vous comprendrez plus facilement
Lissage
en essayant.

Nous allons dsormais nous intresser la barre de dgrad qui suit. Nous constatons que le dgrad part du noir vers le blanc :
ce sont les paramtres initiaux du dgrad. Notre objectif sera de modifier ces couleurs et d'en ajouter d'autres.

Changement de couleurs

Il faut tout d'abord modifier le noir qui se situe gauche de la barre.

A ce mme endroit, il y a deux petits carrs : l'un est au-dessus de la barre, l'autre juste en-dessous. Nous ne
nous intresserons d'abord qu' celui du dessous.

Il faut cliquer une fois dessus et ainsi, vous activerez ce que l'on appelle l'Arrt "couleur" que vous
trouverez en bas de l'diteur de dgrad.

Une fois activ, l'arrt "couleur" n'est plus gris, il devient oprationnel.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 112/574

Pour remplacer le noir, il vous suffit simplement de cliquer sur le rectangle de cette mme couleur pour laisser apparaitre le
slecteur de couleurs. Aprs, vous savez faire . Ne faite pas attention la petite flche de droite.

Concernant le blanc, la procdure est la mme . Vous cliquez une fois sur le petit carr situ droite et en dessous de la barre
(il est blanc cette fois-ci), puis vous choisissez la couleur que vous souhaitez dans le slecteur de couleurs.

Vous n'tes pas obligs de passer par l'arrt "couleur". Vous pouvez en effet faire un double-clique directement sur les
petits carrs en-dessous de la barre pour ouvrir le slecteur de couleur et dfinir une nouvelle couleur.

La position

A ct de l'arrt "couleur", il y a l'arrt "position".

Cet arrt permet de dfinir quelle position occupe une couleur dans la barre de dgrad. Cette valeur est dfinie en pourcentage.
Pour comprendre comment cela fonctionne, il faut considrer que la barre de dgrad vaut 100% .

Si l'on inscrit par exemple 50% pour la couleur noir, alors le petit carr en-dessous de la barre de dgrad se dplacera jusqu'
atteindre la moiti de la barre (50% tait la moiti de 100%). Par dfaut, on aura compris que la couleur noire est 0% de la barre
de dgrad (car tout gauche) et la couleur blanche 100% car elle est tout droite de la barre. Cela fonctionne donc dans les
deux sens. Notez qu'en modifiant la valeur de cet arrt, les petits carrs en-dessous de la barre de dgrad se dplacent de
gauche droite le long de la barre.

Ici aussi, vous n'tes pas obligs de passer par l'arrt "position" pour changer la position des couleurs. Pour aller plus
vite, vous pouvez en effet dplacer manuellement les petits carrs en-dessous de la barre de dgrad tout le long de
celle-ci. Il faudrait alors cliquer dessus (en maintenant le clique) et dplacer la souris de gauche droite.

Ajouter une couleur au dgrad

Jusqu'ici, nous n'avons travaill que sur deux couleurs, nous avons donc paramtrer seulement deux petits carrs (un noir et un
blanc). Il faut dire que c'tait la barre fournie par dfaut au moment d'ouvrir l'diteur de dgrad :

Comme nous l'avons vu, les petits carrs en bas de notre barre de dgrad reprsentent les couleurs qui la composent. Et bien
sr, les couleurs qui composent la barre de dgrad sont les couleurs qui figurent sur le calque slectionn.

Notre objectif sera donc d'ajouter un nouveau carr en-dessous de cette barre de dgrad pour ensuite lui donner une nouvelle
couleur.
Bizarrement, il n'y a pas de bouton prvu cet effet. Nous avons cependant deux solutions que vous tes libres de choisir :
www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 113/574

Vous choisissez un dgrad aux paramtres prdfinis et ayant dj trois ou quatre couleurs (vous avez un aperu dans la
vignette, souvenez-vous). Vous pourrez alors changer les couleurs de chaque carr et les dplacer votre guise.
Vous prfrerez peut-tre crer vous-mme chaque nouveau petit carr. Et pour faire a, il faut cliquer entre les deux petits
carrs en-dessous de la barre de dgrad, c'est--dire dans la zone rose dessine ci-dessous.

Cliquez n'importe o dans cette zone, et un nouveau carr sera cr. Vous pouvez ensuite modifier sa position et sa couleur
comme nous venons de le voir . Par exemple...

Les styles de dgrad

Souvenez-vous, dans la dfinition des dgrads de Wikipdia, Wikipdia je vous parlais des styles de dgrad. Il serait bien de
savoir ce que chacun a dans le ventre.

Avant cela, veuillez quitter l'diteur de dgrad pour revenir la fentre du style "Incrustation de dgrad". Vous allez apercevoir
une liste droulante prcde de la mention "Style :". Le premier paramtre slectionn est le dgrad linaire. C'est le dgrad
par dfaut, celui que l'on tudie depuis tout l'heure.

Je vous propose de visualiser via un exemple illustr pour chacun d'eux ce que chaque style de dgrad affiche.

Le dgrad linaire

Le dgrad radial

Le dgrad rflchi

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 114/574

Le dgrad d'angle

Le dgrad de forme clate

Pas mal, n'est-ce pas ?

Quel que soit le style de dgrad choisi, les paramtres sont les mmes. Seul l'apparence changera dans la zone de
travail !

En-dessous des styles de dgrad, nous retrouvons notre fameux cercle qui permet de dfinir un angle. Il fonctionne de la mme
manire que pour les autres styles de calque que nous avons dj tudis, vous ne m'en voudrez pas si nous revenons pas
dessus .

On va terminer cette partie sur les dgrads avec le dernier (et nouveau) paramtre, l'chelle ! J'entends dj des "ouf" .
Bon, ce n'est pas trs compliqu. Plus la valeur que vous lui attribuez est leve, plus vous "zoomerez" sur le centre du dgrad.
Vous vous concentrerez donc sur le centre du dgrad. Essayer vous semblera sans doute plus explicite que ma piteuse mon
explication .

L'essai

Je vous rappelle que nous travaillerons sur ce document :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 115/574

Nous ajouterons un dgrad au calque nomm "Forme 1" avec les paramtres suivants :

Mode de fusion : Normal


Opacit : 85%
Dgrad : voir ci-dessous
Style : Linaire
Aligner sur le calque : Oui ( cocher)
Angle : 52
chelle : 100%

Concernant le paramtre "Dgrad", voici celui que j'ai cr. Vous tes censs savoir comment reproduire ce dgrad
personnalis rien qu'en ayant cette image sous les yeux et en vous donnant les codes hexadcimaux des deux couleurs que j'ai
utilises :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 116/574

Codes hexadcimaux : Blanc (#FFFFFF) et Bleu (#C0F5FF)


Type de dgrad : Uniforme
Lissage : 0%

Voici le rsultat obtenu :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 117/574

Contour

Avant de commencer la lecture, assurez-vous d'avoir tlcharg le document correspondant cette option de fusion.
Tlcharger le fichier source
Ex_Contour.psd

Pour conclure cette longue partie sur les styles de calque, voyons de plus prs le style de calque dont le nom est "Contour".

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 118/574

Cette option, comme son nom l'indique partiellement, permet de donner un contour au calque slectionn (wahou, a, c'est de
l'info ! ). Reprenons nos bonnes vielles habitudes et dterminons le mode d'action de chacun des paramtres.

Paramtre Dfinition

Taille Il s'agit de dfinir une taille de contour. Plus la valeur est leve, plus le contour s'paissit.
Il est question ici de dterminer la position du contour vis--vis du calque. Le contour doit-il tre visible
Position
l'extrieur, l'intrieur ou au centre (entre les deux) du calque ?
Mode de
fusion

Opacit Non, je ne me rpterai pas l non plus.


Vous choisissez ici quel sera le type de contour de votre calque. Quand on parle du type de contour, on a droit
3 possibilits : la premire, c'est la plus commune, c'est le contour couleur unique (rouge, bleu, vert, bref une
seule couleur comme on l'a fait pour l'option de fusion "Inscrustation de couleur"). La deuxime, moins frquente,
Type
c'est le contour motif. Il s'agit d'un contour caractris par des motifs, n'hsitez pas tester si cela vous
intresse. Enfin, le troisime et dernier type de contour est le contour dgrad. Il s'agit ni plus ni moins d'un
contour non pas caractris par une couleur unique mais par un dgrad.

Une configuration est ncessaire pour chacun des types de contour. Si vous choisissez le type "couleur", vous aurez la
possibilit de dfinir quelle couleur apparaitra. Il en est de mme pour les dgrads et les motifs.

L'essai

Et maintenant, essayons de configurer un contour sur le projet que je vous ai demand de tlcharger :

Taille : 7 px
Position : Extrieur
Mode de fusion : Normal
Opacit : 100 %
www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 119/574

Type de remplissage : Couleur


Couleur (0%) : #FFFFFF

Rsultat :

Un contour blanc s'est alors form tout autour du texte.


Pfiou ! C'est fini, FI-NI ! Faut dire que les styles de calque m'ont particulirement fatigu !

J'espre que vos premiers effets vous ont plu ! Vous n'tes qu'au troisime chapitre de ce tutoriel et vous avez dj acquis une
certaine base, a c'est certain. Mais ce n'est pas termin, nous avons encore du pain sur la planche et c'est le moins que l'on
puisse dire !

Allez, on passe la suite !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 120/574

Les outils pratiques


Il est temps de manipuler vos premiers outils. Il ne s'agit pas d'tudier des outils ncessairement essentiels pour la construction
de vos projets venir, mais plutt de ctoyer ce que j'appelle les outils pratiques.

Il est intressant de les connaitre avant de continuer notre apprentissage car ils vous permettront de travailler de manire plus
fluide et plus prcise. En d'autres mots, ils vous faciliteront la vie et on ne va pas s'en plaindre . Par exemple, effectuer un
zoom important puis se dplacer dans la zone de travail zoome rapidement.

Cette premire approche avec les outils de Photoshop en devient donc ncessaire avant d'tudier les autres, a vous laissera la
possibilit de vous familiariser avec eux.
Effectuer un zoom
Tentons de comprendre comment fonctionne l'incontournable Zoom, que l'on peut retrouver dans bon nombre de logiciels,
graphisme ou non.

L'outil zoom, c'est celui avec la petite vignette dans laquelle se trouve une loupe : .

J'imagine que vous tes beaucoup savoir comment on utilise un zoom sur un ordinateur tant cette fonctionnalit est devenue
usuelle. L'outil zoom de Photoshop se veut pratique et performant et c'est l'une des raisons qui m'a pouss lui consacrer cette
sous-partie. Croyez-moi, on est trs loin de l'outil zoom que l'on retrouve entre autres sur Paint et encore Microsoft Word et cela
mrite d'tre tudi un peu plus minutieusement .

Fonctionnement

Techniquement, le zoom sert grossir ou rapetisser l'cran la zone de travail. Cela aura ainsi pour effet de rendre chaque pixel
de notre document beaucoup plus apparents (ou l'inverse beaucoup plus difficiles distinguer si on "dzoom").

Toutefois, cela ne signifie pas que la zone de travail va tre dfinitivement agrandie. Le zoom sert effectuer un grossissement
provisoire de la zone de travail, le temps d'effectuer une modification dessus, bien que l'on puisse aussi utiliser le zoom pour
simplement avoir un aperu plus prcis d'un lment qui compose la zone de travail. On peut zoomer ou dzoomer n'importe
quand, la taille originelle de l'image ne changera pas, seuls les pixels grossiront jusqu' que l'on dzoome pour restituer la taille
d'origine des pixels. La taille de l'image n'est absolument pas affecte. (Allez, a va rentrer !)

Ce phnomne peut d'ailleurs tre compar celui que produit une loupe. En effet, en utilisant une loupe, on peut grossir la
partie qu'elle cible. Elle grossit cette partie en fonction de la distance qui la spare d'elle. Plus la loupe est loigne, plus le zoom
effectu sur la cible est important.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 121/574

L'intrt pour un infographiste d'utiliser le zoom est d'avoir un plus grand contrle sur l'ensemble de la partie de la zone de travail
zoome, lui permettant ainsi d'avoir accs aux dtails les plus inaccessibles et de travailler de manire plus prcise et minutieuse
pour un travail des plus optimal.

Utilisation

Zoomer sur Photoshop n'a rien de sorcier, c'est mme trs facile. Il existe diffrentes faons de procder, voici celles que vous
serez susceptibles d'utiliser le plus frquemment.

Avec la souris

La premire mthode consiste utiliser l'outil l'aide de la souris de votre ordinateur (cela sous-entend donc qu'il existe une
mthode ne ncessitant pas l'utilisation de la souris).

Pour slectionner l'outil Zoom dans Photoshop, rendez-vous dans la boite outils gauche du logiciel et cliquez sur son
icne reprsentative (il s'agit tout bonnement de la loupe, au risque de me rpter ).

Une fois l'outil en main, il ne nous reste plus qu' l'utiliser, et pour ce faire, il faut tout d'abord cibler une partie de la zone de
travail, celle bien entendu que nous souhaitons grossir. Une fois cible, il va nous suffire de cliquer une fois pour voir l'lment
grossir une premire fois.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 122/574

Ce premier zoom a permis un agrandissement de l'ensemble de la zone de travail qui s'lve 200%. Ce chiffre reprsente l'chelle
laquelle nous nous situons. Cela signifie que, par dfaut, la zone de travail est affiche 100% de sa taille. En zoomant, on
augmente ce pourcentage. En dzoomant, on le rduit logiquement.

Sur Photoshop, vous ne pouvez pas cliquer plus de 10 fois, c'est--dire que vous pouvez agrandir 10 fois votre zone de travail.
Le premier zoom permet d'agrandir deux fois votre zone de travail, passant de 100% 200% comme nous venons de le voir. Et
plus on clique, plus l'chelle augmente allant jusqu' 3200% . Autant dire que le zoom est norme et que vous pourrez rarement
trouver aussi prcis sur d'autres logiciels "basiques" pourvu d'un outil zoom.

N'hsitez pas tester le zoom en mme temps que moi !


Tlcharger l'image
Zoom.png

Zoom 100% (par dfaut, au moment de crer la nouvelle zone de travail)

Cliquez sur l'image pour l'agrandir

Zoom 800% (aprs avoir cliqu 7 fois)

Cliquez sur l'image pour l'agrandir

Zoom 3200% (aprs avoir cliqu 10 fois)

N'oubliez pas qu'en ciblant un lment de votre zone de travail, c'est sur celui-ci que le zoom sera effectu.

Pour "dzoomer" avec le zoom, autrement dit rtrcir les pixels de la zone de travail, il n'y a pas 36 solutions : il suffit de se rendre
dans la barre des options (en haut de votre logiciel, avec l'outil zoom slectionn) puis de cliquer l'image suivante : . Au fait,
aussi incroyable et inutile que cela puisse paraitre, on peut dzoomer trs prcisment 19 fois et ainsi rduire la zone de travail
l'chelle 0,222% ! C'est assez insolite pour que je vous en touche un mot et suffisamment inutile pour que je vous en parle
davantage .

Z puis Alt
(maintenir la touche Alt puis cliquer)

Z + Option

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 123/574

(maintenir la touche Option puis cliquer)

Avec le clavier

La deuxime solution consiste effectuer un zoom l'aide des touches de votre clavier d'ordinateur. Et honntement, entre nous,
cette manuvre me semble tre la plus rapide et c'est celle que j'ai adopte. Cela vite en effet de passer par la souris, ce que
j'estime comme tant un gain de temps considrable.

T'es vraiment un sacr cossard, toi !

Je suis convaincu qu'avec l'exprience, vous me donnerez raison et vous regretterez de m'avoir coll une tiquette de flemmard
puisque vous adopterez vous aussi mes "techniques de travail" tellement elles s'avrent concrtes et efficaces.

Bref, assez parl, comment on fait pour zoomer sans la souris ? Et bien, on utilise le clavier, videmment !

Ce n'est pas bien dur ici non plus car il suffit d'appuyer sur le touche contrle (Ctrl) (ou Commande si vous tes sur Apple) de
votre clavier dans un premier temps puis d'appuyer simultanment sur la touche + de votre clavier (si vous souhaitez zoomer) ou
la touche - (si vous cherchez dzoomer).

Pour zoomer...

CTRL et +

Command (ou Pomme) et +

Pour dzoomer...

CTRL et -

Command (ou Pomme) et -

Vous comprenez, maintenant, pourquoi j'utilise le clavier plutt que la souris ? N'y voyez pas d'incitation aucune, je veux juste me
justifier et vous expliquer le pourquoi du comment et c'est incontestable, la mthode "clavier" s'avre franchement plus rapide.

Le problme du clavier, c'est que je ne peux pas de "cibler" une partie de ma zone de travail. Le zoom se fait au centre de
la zone de travail...

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 124/574

Justement, pour contrecarrer ce petit "problme" qui n'en est pas vraiment un d'ailleurs, on va avoir recours un outil que je
vous prsente dans ce mme chapitre. On y arrive .
Se dplacer dans la zone de travail
Quand on zoome dans la zone de travail, on l'agrandit au point mme que notre cran ne suffise plus l'afficher entirement.
L'image est devenue aussi grande voire plus grande que l'espace de travail lui-mme et mme de l'cran et ainsi, on n'a accs qu'
une seule partie de la zone de travail, celle cible :

Merci Sh4rk de m'avoir autoris utiliser le meilleur des Zozor jamais conu jusqu'ici .

On a vu qu'en utilisant le clavier pour zoomer, celui-ci ciblait le centre de la zone de travail et on n'avait donc pas la possibilit de
choisir exactement o zoomer. On va procder de la manire suivante :

1. On zoome d'abord (que ce soit avec le clavier ou avec la souris).


2. Puis on se dplace dans la zone de travail avec le zoom toujours effectif.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 125/574

Que signifie "se dplacer dans la zone de travail", en fait ?

On peut se dplacer dans la zone de travail partir du moment o celle-ci est plus grande que l'espace de travail, comme le
montrait le schma ci-dessus aprs avoir zoom sur Zozor. Sur cet exemple, nous avions zoom sur les yeux de la mascotte du
SdZ. Se dplacer dans la zone de travail consisterait donc changer de cible pour avoir une autre partie de la zone de travail en
champs de vision.

Pour se dplacer dans la zone de travail, le premier rflexe du dbutant est logiquement d'utiliser les petites flches que l'on
retrouve autour de la zone de travail et qui permettent de se dplacer de haut en bas et de gauche droite (et ce pour n'importe
quel logiciel), comme le montre l'image ci-dessous.

Cliquez sur l'image ci-dessus

Quand ces petites flches apparaissent, c'est que l'espace de travail ne peut pas afficher tout le contenu de la zone de travail et
donc, cela signifie que l'on va pouvoir se dplacer dans la zone de travail.

La raison pour laquelle je vous parle de ces flches, c'est parce que nous n'allons pas les utiliser . On va user d'un outil
beaucoup plus pratique que vous retrouverez dans la boite outils, la Main .

Le principe est simple, il faut cliquer n'importe o sur la zone de travail en maintenant le clique et dplacer le curseur de la souris.
Alors, l'outil main va jouer le mme rle que les flches, il va nous permettre de nous dplacer dans la zone de travail. Si je clique

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 126/574

et que je dplace mon curseur vers le haut, je dplace l'ensemble de ma zone de travail vers le haut et je vais alors avoir accs au
contenu du bas de la zone de travail. A l'inverse, si je clique et dplace mon curseur vers le bas, je vais pouvoir accder au
contenu du haut de ma zone de travail. N'oubliez pas que cette cette manuvre n'est possible que si ma zone de travail n'est pas
totalement visible comme c'est trs souvent le cas quand on effectue un zoom .

On sait qu'une zone de travail n'est pas totalement visible partir du moment o les petites flches latrales apparaissent. Si elles
sont visibles et oprationnelles, c'est que vous n'avez pas toute votre zone de travail en champ de vision, alors l'outil main est
ncessaire pour se dplacer dans les zones invisibles. Dans le cas contraire, l'outil ne servirait rien, car la totalit de la zone de
travail est visible, nullement besoin de se dplacer.

Et avec le clavier, a donne quoi ?

Plutt que de passer, encore une fois, par la souris, vous avez la possibilit d'utiliser une touche de votre clavier d'ordinateur. Il
s'agit de la touche Espace.

Par consquent, il vous suffit d'appuyer sur la touche Espace de votre clavier pour activer l'outil main, puis de cliquer sur le
bouton gauche de votre souris tout en dplaant son curseur.

Facile, n'est-ce pas ?


Un condens des deux, a existe ?
Quand nous rorganisions notre espace de travail au dbut du cours, je vous avais demand d'ajouter la palette flottante
nomme "Navigation". Elle se situe alors thoriquement en haut droite de votre espace de travail et, quand vous ouvrez une
nouvelle zone de travail, elle ressemble ceci :

On peut dire que cette petite fentre est effectivement un condens des deux outils que nous venons d'tudier car elle permet
la fois de zoomer dans la zone de travail et de se dplacer l'intrieur.

Un zoom plus prcis.

En bas de cette petite palette figure une petite jauge prcde d'un champs rempli par la valeur 100% . Si vous avez bien suivi,
vous tes cens avoir dj compris de quoi il s'agit. Vous ne voyez pas ? C'est bien entendu l'chelle de notre zoom, pardi !

Aucune raison d'utiliser cette petite fentre ! J'ai mon outil zoom et franchement, moi, a me suffit...

Par le biais de cette palette Navigation, vous aurez la possibilit d'effectuer LE zoom parfait, c'est--dire le zoom qui correspond
prcisment vos attentes en terme de prcision.

Je ne vois pas o tu veux en venir...

Tout l'heure, nous avons su effectuer 10 zooms, chaque zoom correspondant un pourcentage, le tout allant de 100% (valeur
par dfaut) 3200% (valeur maximale du zoom).
En utilisant cette petite jauge, ce n'est plus 10 zooms que l'on va pouvoir faire mais autant de zoom qu'il y a de pourcentage, tant
que le nombre est entier. Je veux faire un zoom 200% ? Pas de problme ! Je veux faire un zoom 2148% ? Pas de problme non
plus, tant que ce pourcentage est compris entre 100% et 3200% (pour zoomer, et non dzoomer) et que c'est un nombre entier,
c'est--dire sans virgule.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 127/574

La premire mthode est la plus simple : vous modifiez le 100% dans le champs blanc par une nouvelle valeur. Ne
dpassez pas 3200% au risque de faire rouspter le logiciel.

Le pourcentage minimal est dtermin en fonction de la taille de l'image. On s'en fiche un peu, on ne s'amusera jamais
dzoomer autant notre zone de travail .

La deuxime mthode consiste dplacer le curseur de la jauge de gauche droite. Plus vous irez droite, plus le zoom
sera important.

Se dplacer encore plus rapidement !

Intressons-nous maintenant la deuxime fonctionnalit que prsente la palette Navigation. Il s'agit du cur de la palette, ce
fameux carr blanc au contour rouge :

En ralit, ce carr, c'est votre zone de travail .

Gn ?

Si je devais utiliser les termes exactes, je dirais qu'il s'agit en fait d'un aperu de votre zone de travail. Si on a un carr tout blanc
ici, c'est parce que j'ai ouvert une nouvelle zone de travail vide. Ainsi, si j'ouvre par exemple une image dans ma zone de travail
(l'image de Zozor par exemple), ce n'est pas un carr blanc qui va apparaitre mais bien mon image.

Vous me direz, quoi cela peut-il bien servir d'avoir un aperu miniature de notre zone de travail sachant qu'on l'a en grandeur
nature en face de nous, quand on travaille dessus ? La rponse est pourtant toute trouve : elle va nous permettre de nous
dplacer en quelques clics dans la zone de travail ! En effet, l'atout de cet aperu, c'est qu'il ne change pas de taille. Quand on
zoome dessus sur la zone de travail, l'image de l'aperu n'est pas agrandie ! Non, la place, c'est le contour rouge qui va se

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 128/574

rtrcir et cibler la partie zoome !

On obtient cet aperu en zoomant de cette manire sur la zone de travail :

Cliquez sur l'image pour l'agrandir.

Ce qui est visible l'cran est entour du cadre rouge. Cela revient en fait reprendre mes illustrations des sous-parties ci-
dessus, si vous voyez desquelles je parle .

Et quoi tu veux en venir, en fait ? Car l, je n'ai rien de vraiment nouveau : on a juste zoom.

L o je veux en venir, c'est qu'une fois le zoom effectu, vous pouvez cliquer n'importe o dans l'aperu pour dplacer
automatiquement le contour rouge l o vous aurez cliqu et ainsi, vous dplacer dans la zone de travail ! Essayez de zoomer
encore un peu puis de cliquer ici, par exemple :

Cela engendrera systmatiquement une modification de position du cadre rouge...

...et cela vous permettra ainsi de vous dplacer !

Cliquez sur l'image pour l'agrandir

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 129/574

C'est franchement simple et la fois trs efficace, notamment quand on travaille sur une trs grande image (imaginez devoir se
dplacer avec l'outil Main sur une image immense, on en aurait pour des heures, alors qu'en un clic, on passe d'un point A un
point B en un rien de temps !).
Slectionner et dplacer un calque
Nous passons dsormais la suite, et nous nous apprtons tudier l'outil dplacement .

Cet outil fait partie de ceux que vous utiliserez le plus souvent dans la mesure o vous devrez sans cesse passer par lui pour
dplacer des calques ou groupes de calques dans votre zone de travail.

Attention, il ne s'agit pas de se dplacer dans la zone de travail tel que le permet l'outil Main . Ici, on va directement dplacer
un lment de la zone de travail, c'est--dire l'un des calques qui la compose.

Slectionner un calque

Lorsqu'un calque est slectionn, il est caractris par un fond bleu comme le montre l'image ci-dessous.

Ici, c'est la Forme 1 qui est slectionne.

En premier lieu, il va falloir slectionner le calque que nous souhaitons dplacer (on ne met pas la charrue avant les bufs).
D'ailleurs, il faut forcment que le calque soit pralablement slectionn pour que l'on puisse le dplacer.

On pourrait alors passer par la fentre de calques pour slectionner un calque, cela semble logique aprs tout. On se rendrait
alors dans la fentre de calques, rechercherait celui que nous souhaitons dplacer puis le slectionnerait.

Mais en fait, voil, il existe un moyen beaucoup plus pratique. L'ide, ce serait de passer directement par la zone de travail, pas
touche la fentre de calques .
On rechercherait alors directement dans la zone de travail l'lment que nous souhaiterions voir slectionn dans la fentre de
calques, ce qui nous viterait alors de nous embter rechercher le calque dans la fentre de calques (en sachant que s'il existe
des centaines de calques, on va mettre normment de temps le retrouver). Vous me suivez ?

Pour slectionner un calque directement dans la zone de travail, on va avoir recours l'outil dplacement . On l'utilisera
galement pour effectuer des dplacements.

Afin de prendre l'outil en main, veuillez cliquer sur l'icne correspondant l'outil.

N'hsitez pas travailler en mme temps que moi !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 130/574

Tlcharger le fichier source


Selectionner_calque.psd

Vrifiez que la case "Slection du calque" situe dans la barre des options soit bien coche. Ainsi, il suffit de cibler un lment de
la zone de travail et de cliquer dessus pour slectionner le calque de cet lment dans la fentre de calques (j'ai cr une flche
blanche sur le calque slectionn pour amliorer la lisibilit de mon exemple et que vous compreniez que c'est le calque bleu qui
est slectionn).

Dans ma zone de travail gauche, j'ai cliqu sur le carr bleu. Comme on peut l'apercevoir, c'est le calque "Carr bleu" qui est
slectionn. Si je clique sur le carr rouge, c'est le calque nomm "Carr rouge" qui sera slectionn.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 131/574

Pareil, j'ai cr une nouvelle flche blanche au niveau du carr rouge pour que vous appuyer mon exemple. Dans le fichier que
vous avez tlcharg, cette flche est inexistante et c'est normal .

En dcochant l'option "Slection du calque" dans la barre d'options des outils, vous serez en mesure de slectionner le calque
manuellement dans la zone de travail. Pour cela, il vous faudra taper simultanment sur la touche Ctrl.

CTRL + Clique

Command (ou Pomme) + Clique

Dplacer le calque slectionn

Bon, c'est bien beau de faire tout a, mais faut bien que cela nous serve quelque chose. L'outil possde deux fonctionnalits :

Slectionner un calque (dj fait).


Dplacer le calque slectionn.

Dplacer un calque consiste changer sa position dans la zone de travail, c'est--dire que l'on va le dplacer d'un point A vers
un point B.

Votre outil dplacement en main, il suffit que vous mainteniez le clique l'intrieur de votre zone de travail (je vous conseille
de cibler l'lment dplacer mme si vous n'tes pas oblig) et que vous dplaciez le curseur de votre souris. Ainsi, l'lment
slectionn va suivre le curseur et de ce fait, changer de position.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 132/574

Un exemple arrive, n'hsitez pas travailler en mme temps que moi !


Tlcharger le fichier source
Deplacer_calque.psd

La zone de travail du document que vous venez de tlcharger est la suivante :

1. Je slectionne le calque nomm Objet et y maintiens le clique.

2. Je dplace ensuite mon curseur de sorte dplacer en mme temps le calque Objet.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 133/574

3. Quand je suis satisfait de la nouvelle position donne au calque, je relche le clique.

>

Libre vous ensuite de dplacer vos calques o vous le souhaitez. Vous pouvez mme les dplacer hors de la zone de travail ! Ils
ne seraient alors plus visibles :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 134/574

C'est tout pour l'outil dplacement !


Ecrire des annotations
A l'image de nos amis dveloppeurs, il nous est possible d'crire des petites notes mme la zone de travail sans pour autant
qu'ils soient visibles au moment d'enregistrer le document.

Les dveloppeurs, lorsqu'ils rdigent leurs codes, ont un moyen simple de laisser des commentaires cachs, que seuls eux
peuvent apercevoir et modifier via le document source de leur travail. Pour les connaisseurs, il s'agit des balises suivantes en
XHTML :

<!-- Commentaire -->

Le principe est le mme sur Photoshop : vous ajoutez des petites annotations, sous forme de petites images que l'on peut
facilement masquer et qui se situent dans la zone de travail.

Est-ce vraiment ncessaire ?

De manire gnrale, ce code est fait pour vous, il est l pour vous servir de rappel. Il peut donc devenir ncessaire dans
certaines circonstances. Par exemple, il suffit que votre image soit trs grande ou encore que vous ne l'ayez pas travaille depuis
plusieurs semaines pour que les petites notes vous aident vous souvenir de tout ce que vous seriez susceptible d'avoir oubli.

Pour crire une note, il vous faut tout d'abord slectionner l'outil Annotations dans la boite outils.

Puis, il ne vous reste plus qu' cliquer une fois sur la cible de votre choix l'intrieur de la zone de travail pour qu'une petite
fentre apparaisse.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 135/574

Une fois que vous avez fini d'crire un commentaire, vous pouvez le cacher en cliquant sur le petit carr blanc qui se situe en
haut droite de la fentre.

Pour supprimer une annotation, cliquez droit sur la petite note (voir les images ci-dessous) puis sur "supprimer l'annotation".

Vous avez un micro ?

Si les notes crites ne vous suffisent pas, Photoshop vous offre la possibilit de crer des notes audio. Le principe est
exactement le mme, l'exception qu'il vous faut disposer d'un micro et que vos notes seront sonores.

Alors, vous enregistrerez votre voix et ferez le commentaire comme si vous le faisiez l'crit, puis vous serez libre de l'couter
directement en travaillant sur votre zone de travail.
La pipette
Je suis prt parier ma bouteille d'eau que la majorit d'entre-vous a eu un petit sourire en lisant le titre de cette partie .

Savez-vous ce qu'est une pipette ? Il s'agit de ce petit outil qui permet d'absorber un liquide et que l'on utilise gnralement dans
les laboratoires de chimie.

Dans votre boite outil, la pipette est reprsente par cette icne : . Je vous invite cliquer dessus.

Sur Photoshop, la pipette joue un rle relativement proche de la pipette des laboratoires dans la mesure o elle sert elle

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 136/574

absorber n'importe quelle couleur de la zone de travail.


Le principe est simple, il faut slectionner l'outil, cibler une partie de la zone de travail puis cliquer dessus. Alors, la pipette
absorbera la couleur cible et transfrera son code hexadcimal dans la palette de couleurs (souvenez-vous, vous avez dj
entendu parl de ces termes dans la deuxime partie des options de fusion).

Il devient intressant d'utiliser la pipette lorsque l'on souhaite, par exemple, reprendre une couleur d'une image ou bien, lorsque
l'on a dfini une couleur l'un des lments qui compose notre zone de travail et notamment si l'on n'a pas conserv son code
hexadcimal.

Exemple

N'hsitez pas travailler en mme temps que moi !


Tlcharger le fichier source
Ex_Pipette.psd

Pour cet exemple, j'ai dcid de choisir un arc-en-ciel pour que vous distinguiez bien chaque couleur qui compose l'image.

Tout d'abord, je slectionne l'outil Pipette . Puis, jetons un il sur la palette de couleurs et plus prcisment sur la couleur de
premier-plan.

Ici, la couleur de premier plan est le noir, la couleur d'arrire-plan est le blanc.

Je place mon curseur sur l'un des 7 arcs, disons le jaune pour commencer.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 137/574

Cliquez sur l'image pour l'agrandir

Une fois la partie de ma zone de travail cible, je clique dessus, puis, je jette nouveau un il sur ma palette de couleurs. Le
rsultat parle de lui-mme, la couleur de premier-plan a chang, il s'agit dsormais du jaune de mon arc-en-ciel .

Je vous invite essayer, vous pouvez d'ailleurs utiliser une autre image si vous le souhaitez !
Nous avons fait le tour des "outils pratiques". Il y en a d'autres, je ne vous le cache pas, mais je crois que nous avons pass en
revue les principaux. C'est en tout cas ceux que j'utilise le plus rgulirement si a peut vous rassurer .

Pour les parties suivantes, nous continuerons de nous intresser au contenu de la boite outils (c'est d'ailleurs le cas pour la
plupart des prochaines parties de ce tutoriel) et le prochain outil va nous permettre d'effectuer des slections simples.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 138/574

La slection simple
Si l'on associe rgulirement l'activit de graphiste aux outils tels que le pinceau ou le crayon de papier, il ne faut pas oublier que
nous, infographistes, avons l'norme avantage de pouvoir utiliser de nouvelles technologies lies l'informatique. Cela nous
permet ainsi de pouvoir profiter des irremplaables calques, mais aussi des "retours en arrire" (c'est--dire que l'on peut annuler
de mauvaises manipulations avec les touches Z combine la touche Ctrl (PC) ou Command (Mac)), sans parler du nombre
illimit de feuilles mis notre disposition .

Parmi les fonctionnalits avantageuses que nous offrent l'informatique et plus exactement Photoshop, il y a les outils de
slection.

Il n'est pas question de slectionner un calque dans la fentre de calque comme on a appris le faire avec l'outil dplacement,
mais de crer une slection directement dans la zone de travail pour ne travailler que ce qu'il y a l'intrieur de cette slection et
protger tout le reste.

Ainsi, on va apprendre conserver la partie slectionne afin d'y apporter des modifications. Mais je ne vous en dis pas plus.

S'ils ne font pas partie des outils que je nomme "outils pratiques", cela ne fait pas moins d'eux des outils utiles et efficaces .
Outil rectangle de slection
Proprit d'une slection

Je vous le disais, nous nous apprtons crer des slections. Lors des deux premires parties de ce chapitre, nous apprendrons
manipuler les deux outils de slection existants. J'ai consacr une dernire partie pour vous expliquer quoi peuvent
ventuellement servir ces outils. Parce que savoir les manipuler, c'est bien, mais en faire quelque chose d'utile, c'est encore mieux
!

Je vous rassure, cette partie est plus courte et peut-tre moins complexe que celle qui concernait les modes et les options de
fusion, de quoi vous reposer un peu avant d'attaquer la prochaine partie .

A force de travailler sur Photoshop, je me suis rendu compte que certains outils devenaient indispensables, quels que soient les
projets sur lesquels je travaillais. Les outils de slection font justement partie de ces ustensiles desquels je ne me spare plus.

Mme si j'ai ma petite ide, qu'est-ce qu'une slection ?

Une slection se caractrise sous la forme de petits pointills anims formant un contour ferm. On ne peut crer une slection
qu' l'intrieur de la zone de travail.

Crer une slection dans la zone de travail revient "encadrer" une partie de cette zone pour travailler dessus et seulement
dessus. Ainsi, tout le reste (ce qui n'a pas t slectionn) est protg, on ne peut plus y toucher.

Image utilisateur

Sur ce schma, la zone colore est la zone en slection. Elle est donc prte subir des modifications. Le reste (que j'ai blanchi) est

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 139/574

protg : aucune modification n'est possible ici.


Quand vous effectuerez une slection (on y vient bientt), la partie protge ne sera pas blanchie comme elle l'est sur l'image ci-
dessus, c'est juste pour l'exemple bien entendu .

Une rgle reste inchange : on ne peut apporter des modifications qu'aux calques qui sont slectionns dans la fentre
de calques. Cela signifie qu'il vous faut forcment slectionner un calque dans la fentre de calques pour le modifier. On
peut ensuite crer une slection autour du calque pour y apporter des modifications l'intrieur de la slection cre.
Vous me suivez ?

Outil rectangle de slection

Fonctionnement

Voyons maintenant que ces outils ont dans le ventre. Concrtement, il existe quatre outils de slection et nous n'allons en tudier
que deux proposant chacun une forme gomtrique diffrente :

Rectangle de slection
Ellipse de slection

Nous commencerons par l'outil rectangle de slection que je vous invite prendre en main en cliquant sur sa petite vignette
dans la boite outils gauche de votre cran.

L'outil rectangle de slection fait partie de la famille des outils de slections gomtriques. Avec cet outil, la slection que nous
allons crer va prendre la forme d'un rectangle quelconque, c'est--dire que la slection se verra dote de 4 angles droits.

Le moment est venu de vous expliquer comment l'utiliser !

N'hsitez pas travailler avec moi !


Tlcharger l'image
SouthPark.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Voici l'image sur laquelle nous allons travailler, on retrouve nos fameux personnages de la srie SouthPark :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 140/574

Finalement, je fais un long discours sur l'utilit certaine de ces outils. Mais... s'ils sont si utiles, c'est aussi parce qu'ils sont on ne
peut plus simples et pratiques ! Voyons comment cela fonctionne :

1. Tout d'abord, il faut choisir un point dans la zone de travail partir duquel la slection va tre cre et va prendre forme.
2. Ensuite, il va nous falloir cliquer sur ce "point de dpart" et maintenir le clique.
3. Une fois que c'est cliqu, dplacez le curseur de votre souris. C'est ainsi que des pointills apparaissent : ils caractrisent
la slection. Bon signe : celle-ci prend forme.
4. Relcher le clique quand la slection effectue convient : les pointills dansent, votre slection est termine.

Avouez que cela n'est pas bien compliqu ?

Exemple

Je vous invite copier l'image sur laquelle nous travaillerons puis la coller dans une nouvelle zone de travail, moins que vous
l'ayez dj fait. N'oubliez pas : si vous copiez une image, Photoshop prendra compte automatiquement de cette copie et retiendra
les dimensions de l'image copie. Vous n'avez donc pas taper la taille de la zone de travail puisqu'elle est auto-paramtre .

Pour faire cet exemple, je m'apprte suivre la lettre les quatre tapes indiques ci-dessus. Je vais ainsi illustrer chacune d'elle
par une image. Veuillez penser cliquer sur chacune des images suivantes pour les agrandir, merci.

J'ai dcid d'effectuer une slection autour de Kenny, le seul personnage habill de la tte au pied en orange et marron et couvert
d'une cagoule dans l'image. Je place alors mon curseur en haut gauche de ce personnage car c'est ici que je souhaite voir
prendre forme mon rectangle de slection (tape 1).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 141/574

Je clique ensuite sur le point que j'ai cibl avec mon curseur puis je maintiens le clique comme le demande l'tape 2.
Sur l'image ci-dessus, le carr rouge simule la zone dans l'image que nous souhaiterons slectionner. Ce n'est pas une
slection, juste un moyen pour moi de vous montrer qu'est-ce que je veux slectionner et comment faire .

Je dplace mon curseur et je laisse apparaitre les pointills de la slection (tape 3).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 142/574

Enfin, quand je suis satisfait de ma slection, je lche le clique : ma slection est termine (tape 4).

Nous venons de raliser notre premire slection !

J'ai lch le clique trop vite, ma slection n'est pas correcte ! Que faire ?

Si vous n'tes pas satisfait de votre slection, vous n'avez pas de quoi la rattraper malheureusement, mais vous pouvez toutefois
la supprimer pour la recommencer ou bien la dplacer.

La slection n'est pas bonne, vous souhaitez la supprimer pour la recommencer : cliquez une fois et n'importe o dans la
palette flottante de la zone de travail (que ce soit l'intrieur de la zone de travail ou en dehors, si c'est dans cette fentre,
cela fonctionnera). Ce clique effacera la slection en activit, vous pouvez alors en recommencer une.

CTRL + D

Command (ou Pomme) + D

La forme donne votre slection est correcte, mais vous souhaitez la dplacer de quelques pixels : l'inverse, il faut
cliquer l'intrieur de la slection en maintenant le clique puis dplacer le curseur de la souris.

C'est donc a, une slection...

Oui, mais rassurez-vous (enfin, si cela vous rassure), il s'agit l d'une slection ultra simple (si ce n'est la plus simple) et nous
allons apprendre complexifier un peu les choses, histoire de ne pas s'arrter en si bon chemin .

La barre d'options
www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 143/574

Au dbut du cours, lorsque vous dcouvriez l'espace de travail, j'ai eu l'occasion de prsenter brivement la barre d'options des
outils, souvenez-vous.

Figurez-vous que nous allons enfin commencer travailler avec ces options, l'objectif est d'amliorer la forme de nos slections
qui sont pour le moment, vous me l'accorderez, un peu trop rectangulaires. Nous nous concentrerons sur cette srie de boutons :

Comme vous pouvez le voir, le premier bouton slectionn est celui qui se situe tout gauche de la barre. Il s'agit de l'option par
dfaut, l'option de base pour l'outil rectangle de slection. Elle n'apporte rien de plus que ce que nous avons pu faire jusqu'ici,
c'est--dire la crer une slection rectangulaire. Par contre, les autres boutons vont davantage nous intresser dans la mesure o
il s'agit d'options que nous n'avons pas videmment pas abordes.

Ajouter la slection

Testons en premier lieu l'option Ajouter la slection. Je vous invite cliquer dessus.

SHIFT (maintenir la touche)

Command (ou Pomme) (maintenir la touche)

Jusqu'ici, nous avons su crer une slection relativement simple, une slection qui n'tait pas plus labore que cela :

Grce l'option Ajouter la slection, nous allons tre en mesure de :

Effectuer de nouvelles slections en plus de la premire slection cre.


Additionner ces nouvelles slections avec la premire slection cre pour l'agrandir et lui ajout de nouveaux angles
droits.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 144/574

Effectuer de nouvelles slections signifie que nous allons crer plusieurs slections toutes en activit en mme temps. Par
exemple, nous avions slectionn Kenny tout l'heure. Et bien, nous allons maintenant pouvoir slectionner tous les
personnages de l'image ( savoir respectivement Cartman, Stan, Kenny et Kyle pour ceux qui ne connaitraient pas).

Il est par ailleurs galement possible de combiner deux slections et ainsi crer des formes plutt farfelues .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 145/574

Comme son nom le laisse penser, l'option permet d'ajouter une nouvelle slection celle initialement cre. Si la nouvelle
slection est cre l'intrieur de la slection mre, alors les deux slections ne prendront qu'une seule et mme forme (image ci-
dessus), tout en gardant chacune leurs paramtres respectifs.

Tu peux m'expliquer plus prcisment comment on fait ?

Sur l'image ci-dessous, j'ai cr une slection banale en gardant l'option Nouvelle slection slectionne.

Cliquez sur l'image pour l'agrandir.

J'ai ensuite cliqu sur le bouton reprsentant l'option Ajouter la slection. On remarque alors que le curseur de ma souris a
chang, il est dsormais accompagn d'un signe + (on comprend alors qu'il s'agit d'ajouter une slection).

Cliquez sur l'image pour l'agrandir.

On se souvient que pour crer une slection, il faut d'abord trouver un point o la dbuter. Pour le coup, il faut prendre soin de
bien dbuter la nouvelle slection l'intrieur de la premire slection cre et de la finir l'extrieur.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 146/574

Cliquez sur l'image pour l'agrandir.

Une fois l'opration termine, il ne reste plus qu' relcher le clique.

Cliquez sur l'image pour l'agrandir.

Les deux slections se sont alors additionnes pour ne former qu'une seule et mme slection .

Soustraire de la slection

Maintenant que l'option Ajouter la slection n'a plus de secret pour vous, la maitrise des deux autres sera trs vite acquise
.

ALT (maintenir la touche)

Option (maintenir la touche)

L'option Soustraire de la slection ne sert non pas ajouter une slection (a manquerait de sens d'ailleurs) mais supprimer
une partie de la slection. En fait, l'ide est simple, on utilise cette option de la mme manire que la prcdente mais en sachant
que l'effet sera inverse.

Il est donc possible de rutiliser l'exemple donn pour l'option prcdente, sachant qu'on rsultera sur une slection carrment
diffrente de la prcdente. Je reprends la slection de base :

J'ai ensuite cliqu sur le bouton reprsentant l'option Soustraire de la slection. Nouvelle remarque : le curseur de ma souris
a encore chang, il s'agit dsormais du signe - (on comprend alors qu'il s'agit de soustraire de la slection ).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 147/574

Je vous rappelle que je dois choisir le point de dpart n'importe o dans ma zone de travail, tant qu'une partie de la slection se
situe l'intrieur de la premire slection, sans quoi cette nouvelle slection n'aurait aucun effet sur la premire.

Une fois l'opration termine, il ne reste plus qu' relcher le clique.

La zone slectionne avec l'option a t efface.

Slectionner l'intersection

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 148/574

Travaillons prsent avec l'option Slection l'intersection . Je vous invite la slectionner, puis crer un rectangle de
slection basique sur fond blanc, l'image de l'exemple ci-dessous.

SHIFT + ALT (maintenir les touches)

Shift + Option (maintenir les touches)

Ensuite, pour bien comprendre comment cette option influence le rsultat final de la slection, il faut recrer un rectangle de
slection en le commenant l'intrieur du premier pour le finir l'extrieur (comme on l'a fait juste avant avec l'option "Ajouter
la slection"), ou bien en le commenant l'extrieur vers l'intrieur :

Alors, une nouvelle slection apparait :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 149/574

Je vous explique ce qui s'est pass ? En fait, avec l'option "Slectionner l'intersection", nous avons gard en slection la zone
qui se trouve tre la rencontre entre les deux slections mres. On a crois l'une avec l'autre, ce qui a engendr la formation d'un
trois rectangle de slection qui a t conserv...

Le style

Le style. Ce nom ne nous est pas inconnu, nous avons dj rencontr un paramtre semblable avec l'un des styles de calque
tudis. Ici, le style va nous permettre de fixer la slection sous deux formes diffrentes.

Le style par dfaut est "normal". On ne va pas revenir dessus, c'est celui que nous utilisons depuis le dbut et je crois qu'on a
compris . En droulant la liste, on aperoit toutefois deux nouveaux styles.

Proportions fixes
Taille fixe

En slectionnant le style "Proportions fixes", vous vous obligerez crer des slections carres. Pas de rectangle donc, les
quatre cts de votre slection seront de longueurs gales.

En slectionnant le style "Taille fixe", vous activerez les paramtres situs droite de l'option "Style".

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 150/574

En fait, ce qu'il faut savoir pour comprendre, c'est que vous pouvez donner une taille fixe votre rectangle (donc, une largeur
gauche et une hauteur (synonyme de longueur) droite), vous n'aurez donc plus besoin de recrer la slection, il suffira
simplement de cliquer sur la zone de travail pour qu'apparaisse automatiquement un nouveau rectangle de slection aux tailles
indiques dans les paramtres.

Nous reviendrons sur l'option "Contour progressif" un peu plus loin dans le cours. Pour l'heure, on a fait le tour des options
pour l'outil rectangle de slection et il est temps de passer la suite .
Outil ellipse de slection
Je ddie une nouvelle partie l'outil ellipse de slection car, mme si son utilisation est identique celle de l'outil rectangle de
slection, sa slection est diffrente et il me semble plus judicieux de les sparer en deux parties bien distinctes.

Il s'agit l aussi d'un outil faisant partie de la famille des outils de slection gomtrique. A l'instar de son confrre, l'outil
Ellipse de slection permet de raliser une slection de forme ronde ou ovale.

Parce qu'ils font partie de la mme famille, il faut cliquer droit sur l'icne reprsentant l'outil rectangle de slection pour laisser
apparaitre celle de l'outil ellipse de slection.

Les tapes permettant de raliser une slection sont exactement les mmes, je vous les rappelle au cas o :

1. Choisir tout d'abord un point dans la zone de travail partir duquel la slection va tre cr et prendre forme.
2. Cliquer sur ce point et maintenir le clique.
3. Dplacer le curseur de la souris. C'est ainsi que des pointills apparaissent : ils caractrisent la slection, cela signifie
qu'elle prend forme.
4. Relcher le clique quand la slection effectue convient.

L'avantage avec cet outil, c'est que sa slection n'est forme d'aucun angle droit. Du coup, c'est pratique si on veut slectionner
un objet de forme ronde, comme un ballon de football par exemple, ou alors quand il est question de slectionner un objet oval
comme... un ballon de rugby tiens . Mais cela devient encore plus intressant quand on fait intervenir les options de l'outil
prsentes dans la barre d'options des outils, srement plus intrigant que pour l'outil rectangle de slection .

Exemples

Nous avons dj pu manipuler l'outil rectangle de slection avec chacune de ses options. Je crois donc qu'il n'est pas ncessaire
de s'y atteler nouveau.

Je vous ai concoct une srie d'exemples avec chacune des options de l'outil ellipse de slection.

Slection ronde

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 151/574

Pour effectuer un cercle parfait, maintenir la touche Shift.

Slection ovale

Ajouter la slection

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 152/574

Soustraire de la slection

Slectionner l'intersection

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 153/574

N'hsitez pas non plus combiner les formes de l'outil rectangle de slection avec celles de l'outil ellipse de slection.

Et aprs, on fait quoi ?


Quel intrt pourrait-on trouver crer une slection ? C'est vrai, jusqu'ici nous avons ralis un tas de slections avec pour
chacune d'elle une forme diffrente, mais il faut bien qu'elles nous soient utiles quelque chose. C'est ce que l'on va dterminer
dans cette partie du cours.

Le moins que l'on puisse dire, c'est qu'on peut en faire, des trucs ! De tte, je dirais qu'on peut, entre autres :

Sauvegarder le contenu de la slection.


Fractionner un calque en plusieurs "petits" calques.
Copier ou couper le contenu slectionn.
Effectuer une modification du contenu slectionn et protger tout le reste.
Supprimer le contenu de la slection.
Dplacer le contenu slectionn.
Transformer le contenu slectionn.
...

Autant de possibilits auxquelles un infographiste peut avoir trs souvent recours.

Conserver le contenu slectionn

N'hsitez pas travailler avec moi !


Tlcharger l'image
Ptanque.jpg
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Je suis souvent amen ne conserver que certains morceaux d'une image quand je travaille sur Photoshop. Par exemple, il est
dj arriv que l'on me numrise une photo de famille et que l'on me demande de ne conserver que le portrait des enfants. J'ai
donc utilis l'un des outils de slection (pour slectionner la partie conserver) et ai cherch ne sauvegarder qu'elle. Voici les
dmarches que j'ai entreprises, notez simplement qu' la place d'un de mes portraits de famille, je vais utiliser une photo d'une de
nos parties de ptanque. Le but ici est d'amliorer l'image en n'en conservant que la partie intressante :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 154/574

vhf/victor

Testons votre logique ! A votre avis, qu'est-ce qui vous semble tre le plus intressant de slectionner dans cette photo ?

A l'unanimit, vous avez rpondu les boules de ptanque et le petit cochonnet. Que celui qui a rpondu les cailloux se dnonce
ou se taise jamais !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 155/574

1. J'ai effectu une slection autour de ce qui est le sujet de la photo : les boules de ptanque (et le petit cochonnet !).

2. Ensuite, j'ai cherch dans la barre des menus le menu "dition" puis j'ai cliqu sur "Copier". J'aurais aussi pu cliquer droit
l'intrieur de la slection pour faire apparaitre un nouveau menu et ensuite cliquer sur le lien "Copier".

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 156/574

CTRL + C

Command (ou Pomme) + C

3. Suite a, j'ai cr une nouvelle zone de travail dont la taille a automatiquement t paramtre en fonction de l'image que j'ai
copie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 157/574

Fentre de cration d'une nouvelle zone de travail

Nouvelle zone de travail

4. Pour finir, je clique nouveau sur "dition", puis cette fois-ci sur "Coller".

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 158/574

CTRL + V

Command (ou Pomme) + V

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 159/574

Zone de travail

Le contenu de la slection a bel et bien t conserv et il se trouve dsormais dans une nouvelle zone de travail. Il ne nous reste
plus qu' la sauvegarder comme nous l'avons appris .

Modifier le contenu de la slection

Je ne souhaite pas rentrer dans les dtails avec la modification de calque pour le moment. Pour tout vous dire, c'est ce que nous
allons constamment faire dans la deuxime partie de ce cours, on commence d'ailleurs dans le dernier chapitre de cette premire
partie ! Il n'est donc pas question de s'y terniser pour le moment, j'espre que vous comprenez.

Pourquoi l'avoir entame alors ?

En fait, j'aimerais simplement vous montrer un exemple de modification possible pour que vous compreniez ce que j'entends par
"modification". Si l'on peut modifier un calque en lui donnant de nouvelles formes (nous ferons ce que l'on appelle alors une
dformation), on peut aussi trs bien modifier le contenu mme du calque, par exemple ses couleurs.

Je ne souhaite pas trop vous en montrer pour le moment (vous risqueriez de ne plus pouvoir tenir et sauteriez directement la
deuxime partie du cours ), alors j'ai juste dcid de rendre la partie slectionne de mon calque en ngatif :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 160/574

1. Je cre la slection.

2. J'effectue la modification (rendu ngatif, on en parlera plus loin dans le cours).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 161/574

3. Je supprime ma slection mais conserve la modification apporte.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 162/574

Sur cette image, la partie slectionn a t modifie : les couleurs ont t changes, elles sont dsormais en ngatif. Je rpte que
nous irons beaucoup plus loin dans la prochaine partie. Patience .

Transformer le contenu de la slection

Bien que vous ayez dj acquis certaines bases sur Photoshop, vous n'tes pas encore mme d'effectuer des transformations.
Si vous voulez tout savoir, les transformations sur Photoshop font l'objet de deux chapitres complmentaires dans ce cours, ce
sont les derniers de cette premire partie.

Si toutefois je vous en touche un mot, c'est surtout pour vous montrer globalement en quoi cela consiste et ce que cela donne.
Enfin, j'avoue que c'est un peu aussi pour vous mettre l'eau la bouche, car je suis certain que cela va vous plaire ...

Admettons que nous soyons en train de travailler sur cette image :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 163/574

vhf/victor

Et que nous voulions insrer l'image suivante l'intrieur de la premire de sorte ce qu'elle apparaisse comme sortant de l'un
des crans/panneaux de la ville de New-York :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 164/574

Cette "pizza" est splendide... Je m'demande bien qui l'a faite .

Alors, nous allons transformer cette image pour qu'elle prenne de nouvelles dimensions et une nouvelle forme. Ensuite, on n'a
plus qu' !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 165/574

Supprimer le contenu de la slection

Une fois la slection en activit, vous appuyez sur la touche "retour" (back) de votre clavier ou alors vous passez par la barre
des menus en cliquant sur dition puis sur Supprimer. Facile .
Inutile de vous reposer, le cours n'est pas termin ! On passe la partie suivante et nous allons dvelopper nos connaissances
pour agrandir un peu plus nos possibilits de slection. Je ne vous en dis pas plus .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 166/574

Le dtourage
Vous savez quoi ? On n'en a pas termin avec les slections !

Hh, j'imagine dj la tte que vous tirez : !

En fait, les outils Rectangle et Ellipse de slection sont des outils de base et, mme s'ils sont utiles, il ne sont pas forcment
pratiques.

Dans nos exemples, nous avons su effectuer une slection sous deux formes communes et trs limites : circulaire et
rectangulaire. Cela nous a permis de slectionner le personnage Kenny et le dcor.

Imaginez maintenant que je ne veuille slectionner que sa silhouette, sans le dcor derrire lui. Je n'ose mme pas imaginer la tte
carre que je lui ferais si j'tais amen n'utiliser que l'outil rectangle de slection. Mais heureusement, ces nouveaux outils ont
justement t tudis pour rpondre nos besoins.

Mais la boite outils de Photoshop a plus d'un tour dans son sac, allons voir a de plus prs.
Le Lasso, une slection main leve
Laissez-moi vous prsenter le Lasso, premier outil de dtourage que nous allons tudier. Il fait partie d'une famille de trois outils
similaires qui servent tous dtourer, mais leur utilisation est diffrente.

Le Lasso est le premier de la liste, il est caractris par cette icne : . Pour faire apparaitre cette icne et slectionner l'outil
dans la boite outils, il faut cliquer droit sur cette petite vignette et cliquer sur l'icne de l'outil Lasso :

Votre outil est slectionn ? Alors on peut commencer .

Veuillez noter qu'il m'arrivera pendant le cours de dnommer cet outil le Lasso "classique". Il existe diffrents types de
lasso et celui-ci n'a aucune dnomination concrte. Ne soyez alors pas tonn si je dis "Lasso classique" et non
"Lasso" tout court .

Quand j'emploie le terme de dtourage, je veux en fait faire rfrence la prcision que peuvent avoir ces nouveaux outils. Car
oui, en fin de compte, la premire fonctionnalit des outils Lasso, c'est de crer des slections au mme titre que les outils de
slection prcdemment tudis. Toutefois, s'ils permettent tous de crer des slections, le principe des outils de dtourage est
totalement diffrent des outils de slection et c'est la raison pour laquelle ils n'appartiennent pas la mme famille et pour cela
que je ne les ai pas mis dans le mme chapitre non plus. En effet, cette fois-ci, vous allez voir qu'il faut d'abord faire un dtourage
manuel avec votre souris d'ordinateur afin de crer la slection.

Le chapitre "slection" portait sur la cration de slections simples tels que des rectangles ou des ronds. Dans ce chapitre, nous
allons apprendre tre maitres des slections dans la mesure o nous allons nous-mme tracer les slections de manire prcise
et de sorte lui donner l'apparence que l'on veut. Les slections simples prenaient forme automatiquement et nous n'avions pas
beaucoup de possibilits sur leur forme (rectangulaire, ovale ou circulaire). Cette fois-ci, c'est nous qui allons lui donner la forme
que nous souhaitons en la traant de A Z.

Tous les outils de type Lasso que nous nous apprtons tudier vont nous permettre de tracer une slection prcise grce au
dtourage. En fait, seule leur utilisation change et c'est ce qui fait toute la diffrence.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 167/574

Le lasso classique

Avec le Lasso classique, on dit que le dtourage se fait main leve. Il faudra donc crer un trac (un dtourage)
manuellement avec la souris de votre ordinateur, l'image de ce que vous feriez avec un crayon et une feuille de papier. En effet,
imaginez dessiner un cercle avec un crayon sur une feuille de papier.

Le principe est le mme sur Photoshop : vous formez une boucle et quand la boucle est ferme, ce cercle se transforme en une
slection.

Ton cercle est tout difforme ! Franchement, pourquoi s'embter avec cet outil alors que j'ai l'outil ellipse de slection qui
s'avre tre plus rapide et qui cre des cercles parfaits ?

Parce que vous n'tes pas obligs de crer des cercles ! videmment, si c'est pour crer une slection parfaitement ronde, l'outil
ellipse de slection est le plus adapt. Mais l'intrt du Lasso, c'est de pouvoir effectuer une slection... disons personnalise. Je
pourrais donc raliser ce genre de slection :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 168/574

Je comprends mieux ! Mais alors, pourquoi appeler ce chapitre "Le dtourage" ?

Si l'on utilise les outils lasso, c'est justement pour dtourer un lment de notre zone de travail. On n'utilise pas le Lasso comme
on utiliserait n'importe quel autre outil de slection du chapitre prcdent. L'intrt, c'est de pouvoir tracer la slection autour de
l'lment de la zone de travail (autrement dit le dtourer), c'est--dire tracer cette slection au niveau de ses contours pour qu'elle
n'entoure que cet lment.

Tout l'heure, nous avions slectionn Kenny, le personnage en cagoule orange de la srie South Park. Notre slection nous a
permis de rcuprer Kenny seul, sans ses camarades, mais nous avons t contraints de garder le fond de l'image :

Vous ne disposez plus de cette image pour travailler avec moi ?


Tlcharger l'image
Kenny.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Grce aux outils Lasso, nous sommes en mesure de ne conserver que le personnage et de retirer le fond de cette image. Je vous
explique la procdure suivre avec l'outil Lasso classique de la mme manire que je vous ai expliqu comment crer une
slection "simple", c'est--dire tape par tape.

1. En premier lieu, il faut choisir un point partir duquel mon dtourage va commencer, comme on l'a fait avec les outils de
slection simple. Je prends soin de bien commencer au niveau des contours du personnage.
2. Une fois le point de dpart choisi, cliquer avec la souris et maintenir ce clique.
3. Dplacer le curseur de la souris pour former le trac de la slection : il va maintenant falloir suivre les contours du
personnage de sorte le dtourer compltement.
4. Revenir jusqu'au point de dpart et lcher le clique : le trac se transforme en slection (des pointills apparaissent).

Voici cette mme procdure illustre par des images.

Je choisis un point de dpart partir duquel je vais dbuter le dtourage de Kenny. Pour plus de visibilit, j'effectue un zoom sur
l'image afin de pouvoir aussi travailler plus minutieusement.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 169/574

Je clique et maintiens ce clique puis je dplace mon curseur pour effectuer le trac de ma slection : le dtourage commence.

Une fois le trac termin, je lche le clique : ma slection est termine.

Si vous lchez le clique avant d'arriver jusqu'au point d'arrive au moment de dtourer, la slection prendra quand mme
forme. Photoshop simulera un trac entre votre point de dpart et le point o vous avez arrt le trac.
Pour recommencer un trac, cliquez une fois n'importe o dans la zone de travail afin de supprimer la premire slection
rate.
J'en profite pour vous dire que vous pouvez ici aussi utiliser les options lies la l'outil dans la barre d'options en haut
de votre logiciel. Vous pourrez alors par exemple ajouter une nouvelle slection une slection pralablement cre,
entre autres que vous connaissez dj.
Enfin, je vous signale galement que vous pouvez utiliser le raccourci clavier suivant pour recommencer votre
slection.

CTRL + D

Command (ou Pomme) + D

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 170/574

Revenons nos moutons. Comme vous pouvez le constater, la slection nous a permis de supprimer le fond et de ne conserver
que Kenny. Et voil le travail !

C'est super mal fait ton truc, a dborde de tous les cts !

Un peu de respect pour les artistes, je vous prie .

Trve de plaisanteries, ce dtourage est trs laid je dois vous l'accorder. On est franchement loin du rsultat que l'on peut
attendre d'un logiciel aussi clbre que Photoshop, il y a de quoi tre du. Si l'outil Lasso est utile dans certaines mesures, il
peut devenir l'un des outils les plus compliqus manier et il perdrait alors tout son intrt.

Alors oui, finalement, c'est un outil trs difficile manier car on n'a pas le droit l'erreur. Une fois que le dtourage est commenc,
on a ni le droit de dpasser, ni le droit de lcher le clique pour se reposer. C'est franchement pas pratique !

Et comme si on nous avait entendu dire a, un driv de l'outil Lasso a t conu et il va s'avrer beaucoup plus maniable. On
passe la partie suivante !
Le Lasso Polygonal : la prcision au bout des doigts
Il est temps de dcouvrir le Lasso Polygonal , nouvel outil appartenant la grande famille des outils Lasso, mme si on
peut facilement dire qu'il est franchement plus performant que son cousin le Lasso "classique" .

Le principe de cet outil reste identique celui de l'outil Lasso. Il permet d'effectuer une slection en dtourant un lment de la
zone de travail. Ce qui change vritablement, c'est la faon dont il faut utiliser l'outil. Plus de maniabilit pour plus de prcision,
telle est la particularit de ce Lasso que nous allons de suite dcouvrir .

On a vu que pour dtourer un lment avec l'outil Lasso "classique", il fallait le faire d'une seule traite, en maintenant le clique
puis en effectuant le trac de la slection sans que l'on ne puisse s'arrter.
Avec le Lasso Polygonal, on va l aussi dtourer, mais on note plusieurs fonctionnalits lui donnant clairement l'avantage :

Premier avantage de taille, on peut effectuer des arrts quand on dtoure. De cette manire, il n'est plus question de tout
faire d'une seule traite .
Avec l'outil Lasso classique, il n'tait pas permis de se tromper. Nous avons dsormais la possibilit de rectifier le tir en
cas d'erreur.

D'accord, l'outil prsente ses avantages, on l'a bien compris. Mais en quoi son utilisation est-elle vraiment diffrente ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 171/574

A l'inverse de l'outil Lasso "classique", on va crer ce que l'on appelle des points d'ancrage. Ces points d'ancrages sont toute la
diffrence entre les deux outils, car ils vont nous permettre de travailler doucement, minutieusement et srement. Voyons cela de
plus prs avec un exemple.

Voici l'image sur laquelle cet exemple va vous tre propos :

Cliquez sur l'image pour l'agrandir.

N'hsitez pas travailler avec moi !


Tlcharger l'image
Loupe.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Le Lasso Polygonal en main, je m'apprte dtourer la loupe afin d'y raliser sa slection.

N'oubliez pas que vous pouvez faire un zoom sur la zone de travail. Cela vous permettra d'y voir plus clair et de
travailler encore plus prcisment .

Je commence par dfinir un point de dpart : jusque l, rien de nouveau. Mon dtourage dbutera donc ici :

Cliquez sur l'image pour l'agrandir.

Une fois le point de dpart choisi, je clique dessus une fois sans maintenir le clique. Et de fait ! En ayant cliqu une fois sur le
bouton de ma souris sans maintenir le clique, je m'aperois qu'un trait se forme automatiquement entre le point de dpart que j'ai
choisi et le curseur de ma souris. Essayez vous aussi, vous verrez. Faites comme moi puis dplacez votre curseur dans la zone de
travail !

Cliquez sur l'image pour l'agrandir.

Ce trait, il reprsente le fameux traage qui me permet de dtourer mon lment (la loupe). Tout l'heure, ce traage apparaissait
quand nous maintenions le clique avec l'outil Lasso classique. Cette fois-ci, il faut d'abord cliquer une fois puis dplacer son
curseur pour dfinir la trajectoire et la longueur du trait (autrement dit du traage qui me permet de dtourer).

L'objectif, c'est de lui faire parcourir un chemin jusqu' le faire revenir au point de dpart pour que le dtourage soit termin
(comme on l'a fait avec le Lasso classique).

Comment je fais pour lui faire parcourir un chemin, sachant qu' priori, je ne peux pas faire mieux qu'un "trait"...

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 172/574

Nous allons crer des points d'ancrage. D'ailleurs, on en a dj cr un, il s'agit du point de dpart sur lequel nous avons cliqu
pour la premire fois. En cliquant, nous avons cr le premier point d'ancrage. Il va ensuite falloir crer un deuxime point
d'ancrage, puis un troisime, un quatrime... jusqu' revenir au point de dpart, c'est--dire le premier point d'ancrage. Je
m'explique :

1. Tout d'abord, j'ai choisi un point de dpart. j'ai donc cliqu une fois dessus (sans maintenir le clique) : un premier point
d'ancrage a t cr (un point d'ancrage sera systmatiquement reprsent par une flche dans mes schmas). Ds lors, j'ai la
possibilit de commencer mon dtourage en tirant le trait (qui est automatiquement cr par Photoshop), chose possible en
dplaant le curseur de la souris.

2. Je donne donc une trajectoire et une longueur au trait (toujours en dplaant mon curseur) de sorte ce que ce premier trait
suive le contour de l'lment dtourer : il ne faut donc pas que le trait soit trop long et il faut imprativement qu'il soit coll au
contour de la loupe sans quoi la slection ne sera pas correcte.

3. Le principe consiste crer autant de point d'ancrage que ncessaire pour "suivre" le contour de l'lment dtourer de
manire correcte. Chaque nouveau point d'ancrage permettra alors de donner une nouvelle trajectoire au traage l'aide d'un
nouveau trait.

4. La suite est la mme : il va falloir crer un certain nombre de points d'ancrage jusqu' russir dtourer tout l'lment de la zone
de travail, c'est--dire jusqu' revenir au point de dpart.

5. Quand tous vos points d'ancrage sont termins et que vous tes revenus jusqu'au point de dpart, le dtourage est termin, la
slection prend forme :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 173/574

Nous avons donc trac un chemin avec les traits du Lasso pour dtourer la loupe et crer une superbe slection franchement
plus labore que nos slections simples du chapitre prcdent.

A un moment, j'ai cr un point d'ancrage au mauvais endroit. Du coup, mon trait dbordait sur l'lment de ma zone de
travail. Que faire ?

Vous pouvez supprimer tous les points d'ancrage que vous aurez crs un un. Admettons que vous soyez en train d'effectuer
un dtourage et qu' un moment, vous criez un point d'ancrage pas suffisamment coll au contour de votre lment ce qui
signifie que la slection finale va "dborder". Il vous suffit simplement d'appuyer sur la touche Retour (backspace) de votre
clavier d'ordinateur ce moment l pour annuler le mauvais point d'ancrage et le recommencer. Vous pouvez effectuer cette
opration autant de fois que ncessaire.

Si vous avez totalement dtour l'lment de la zone de travail et que la slection a dj pris forme, il n'est plus possible
de revenir en arrire ! Vous serez oblig de recommencer, donc prudence !

Le cas Kenny

Retournons nos affaires . On se souvient qu'avec l'outil Lasso ("lasso classique" comme j'aime l'appeler), nous avions
tent d'amocher de slectionner le clbre Kenny, personnage culte de la srie South Park. On avait obtenu cette espce de truc :

J'interdis quiconque de se moquer ! C'est de l'art, vous pouvez pas comprendre .

Plus srieusement, je vous avais promis monts et merveilles avec le Lasso polygonal. Au premier regard, on se rend vite compte
que la slection est meilleure (et en plus, trs rapide) :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 174/574

Et en effet, je crois que le rsultat parle de lui-mme !

Fini les dbordements. La slection au dtourage "polygonal" s'est avre plus efficace que le dtourage " main leve" .

Vous ne disposez plus de cette image pour travailler nouveau dessus ?


Tlcharger l'image
Kenny.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Un petit mot sur le Lasso Magntique ?


Le Lasso Magntique est le dernier outil de la famille des Lasso. C'est un outil pourvu d'une intelligence remarquable, ce qui fait
de lui le plus facile utiliser parmi les trois de la mme famille.

Ce lasso est reprsent par cette petite icne : . Pour le slectionner, on se souvient qu'il faut faire un clique-droit sur la
vignette du Lasso Polygonal (dernier outil que nous avons normalement slectionn) pour faire apparaitre la liste des trois
outils Lasso .

Je ne vais pas vous surprendre en vous annonant que celui-ci produit le mme effet que les autres, on l'utilise aussi,
effectivement, pour dtourer un lment de la zone de travail puis pour faire apparaitre une slection. Et comme pour les autres
outils, l'utilisation de celui-ci est diffrente, le dtourage va s'avrer beaucoup plus intuitif (mais pas forcment plus prcis !).

En fait, le Lasso Magntique, c'est un peu un mlange des deux outils Lasso que nous avons dj tudis, bien qu'il soit en plus
dot d'une certaine intelligence. On n'a rien sans rien malheureusement, ce qui signifie que l'on pourra profiter de leurs
avantages, mais que leurs dfauts vont beaucoup nous restreindre.

On parle d'intelligence dans la mesure o il repre de manire autonome les contours de l'lment dtourer, ce qui engendre
alors une automatisation des points d'ancrage (pas besoin de cliquer, le logiciel le fait pour vous !). L'outil porte bien son nom : il
possde une sorte de magntisme qui lui permet de reconnaitre tout seul les bords du calque dtourer.

Tout ce que vous avez faire, vous, de votre ct, c'est guider un minimum l'outil vers les contours du calque slectionner
l'aide du curseur de votre souris. Si vous ne le guidez pas, l'outil ne saura pas quoi dtourer. Du coup, vous mchez la moiti du
travail, il fait le reste.

Comment est-ce possible ? Il ne peut tout de mme pas deviner ce que je souhaite slectionner !

Le Lasso Magntique dtient un pouvoir assez tonnant. Sans que nous ayons besoin de faire quoi que ce soit, il analyse et
dtecte les contours de l'lment dtourer en fonction de ses couleurs et de ses couleurs voisines. Ce que je veux dire, c'est
qu'il va reconnaitre les couleurs du contour de l'lment dtourer et va systmatiquement les diffrencier avec celles du fond
(donc, les couleurs externes cet lment, celles qui "touchent" ses contours).

Mais alors c'est gnial ! A bas le Polygonal, vive le Magntique !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 175/574

Je vous arrte ! Comme je vous l'ai dit, si ce nouvel outil prsente des avantages, il est pourvu d'assez gros dfauts. Dj, nous
n'avons pas un contrle total sur l'outil.

Il est intelligent, certes, mais une slection sera forcment plus soigne si elle est cre manuellement, comme on peut le faire
avec le lasso Polygonal. Mais en plus, il arrive trs souvent que l'outil se trompe ! Il peut alors ne pas dtourer correctement
l'lment cibl (dans ce cas, il lui arrive de dborder ou bien carrment de commencer dtourer un autre lment de la zone de
travail) ou alors ne pas effectuer une slection vraiment prcise et soigne comme on pourrait facilement le faire avec l'outil
Lasso Polygonal !

Je dois admettre que crer un exemple avec un tel outil n'a pas t chose simple, et je suis certain que vous comprendrez mieux en
faisant des essais. Voici toutefois quelques images prsentant le fonctionnement de l'outil Magntique .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 176/574

Notez qu'il vous est possible de crer des points d'ancrage manuellement si vous le dsirez. La procdure, vous la
connaissez dj : il faut simplement cliquer quand vous sentez qu'il est ncessaire de crer un point d'ancrage.
Attention : cela n'empchera pas l'outil de crer des points d'ancrage automatiquement .

La baguette magique, ou comment slectionner en un clic !


Avouez-le, le Lasso Magntique, c'est franchement pour les fainants . Enfin, personnellement, je ne trouve pas a plus mal
et d'ailleurs, on ne va pas quand mme pas s'arrter en si bon chemin, si ?

Il faut dire que le simple fait de savoir que l'outil que nous nous apprtons tudier s'appelle la baguette magique intrigue
pas mal.

En tout cas, il est encore question d'un outil intelligent et qui peut s'avrer vraiment trs pratique. D'ailleurs, l'inverse du lasso
Magntique, j'utilise trs souvent la baguette magique.

Ce nom n'a pas t choisi au hasard. On peut assurment parler de magie dans la mesure o cette petite baguette va travailler
notre place !

Hein ? Tu veux dire que je peux me la couler douce et ne rien faire ? a, c'est cool .

Bah, on peut dire que vous n'aurez pas grand-chose faire, en tout cas. En fait, vous n'aurez qu'une chose faire... cliquer !
Aucune manuvre dlicate ici, la seule chose qu'on vous demande, c'est cliquer avec votre souris !

Le principe est simple. Il faut d'abord cibler une partie dans un calque que nous prvoyons de slectionner. Ds lors, une seule
opration est demande : cliquer dans la partie cible avec le curseur de notre souris. Laissons ensuite oprer la magie : la zone
cible est automatiquement slectionne.

J'ai encore un peu de mal comprendre comment a fonctionne. C'est encore une histoire de couleurs ?

Tout fait, il est encore question de diffrenciation entre les couleurs. La zone cible par le curseur est remplie d'une certaine
couleur. La baguette va analyser cette zone et tout ce qu'il y a autour de cette zone. Elle va dterminer les couleurs les plus
ressemblantes, c'est--dire qu'elle va scruter TOUS les codes hexadcimaux et ne va slectionner que les pixels dont les couleurs
sont proches.

N'hsitez pas travailler avec moi !


Tlcharger l'image
www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 177/574

Baguette.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Veuillez observer l'image suivante.

Cette image est compose de deux couleurs majeures : un bleu clair et un bleu fonc. Pour slectionner le rectangle de couleur
bleu fonce, figurez-vous que je n'ai utilis ni l'outil rectangle de slection, ni l'outil Lasso polygonal. J'ai simplement cliqu
dessus avec la baguette magique.

Pourquoi la zone bleue fonce ? Car la baguette l'a diffrencie de la zone bleue claire, vous saisissez ? Ce qu'il faut bien
comprendre, c'est que sur cette image, la baguette n'a eu absolument aucun mal faire une slection parfaite car les deux
couleurs sont bien diffrentes l'une de l'autre. Mais la baguette prsente ses limites partir du moment o il y a trop de couleurs
diffrentes au sein d'une mme zone de travail. Par exemple, sur une photo compose de milliers voire de millions de pixels
coloriss, autant dire qu'elle sera inutilisable (comment voulez-vous qu'elle dtermine quelles couleurs prendre en compte s'il y
en a des millions, toutes diffrentes ?).

N'hsitez pas travailler avec moi !


Tlcharger l'image
Lac.jpg
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 178/574

vhf/victor

Admettons que j'aie essay de slectionner quelques nuages parmi ceux qui se situent dans la partie suprieure cette nouvelle
image. J'ai donc fait comme on a appris, c'est--dire que j'ai cliqu sur deux ou trois nuages (on a le choix !) l'aide de la baguette
magique.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 179/574

Comme vous pouvez le constater, la slection de la baguette magique ressemble tout sauf une slection propre et prcise. La
raison est toute trouve : imaginez quel point il est complexe pour la baguette de diffrencier les nuages du reste (le ciel, les
rayons du soleil, le soleil lui-mme) ! Elle a trs difficilement tent de ne slectionner que les lments dont elle jugeait les
couleurs ressemblantes et proches les unes des autres.

Vous le savez maintenant, une image, c'est la formation de plein de petits carrs de couleurs que l'on appelle pixels. Ici, la
baguette a jug que les pixels actuellement slectionns dans l'image ci-dessus se ressemblaient suffisamment pour tre
slectionns ensemble. Sauf que l'image prsente tellement de couleurs diffrentes que le rsultat est loin d'tre parfait ! Autant
le dire clairement : la slection est inutile.

Finalement, ce n'est pas un outil si pratique que a alors... C'est tout de mme rare de tomber sur des images dont les
couleurs sont vraiment distinctes.

Dtrompez-vous ! En infographie, cela arrive plus souvent qu'on ne le croit. De toute faon, quand on a besoin de faire une
slection un peu labore, on n'utilise pas la baguette magique. En revanche, on l'utilise trs souvent pour slectionner un
lment d'une zone de travail dont le fond est rempli d'une couleur unique. Plutt que de faire un dtourage la main, on va
profiter du fond couleur unique pour faire travailler la baguette magique qui va alors ne prendre en compte que la couleur de ce
fond.

Une erreur arrive frquemment. Si la couleur de fond est blanche par exemple, et que l'lment dtourer est compos
de blanc en minorit, il se peut que la baguette prenne en compte cette ressemblance et slectionne l'ensemble des

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 180/574

pixels pris en compte.

Configurer la baguette magique

Vous pouvez paramtrer la baguette magique pour influencer son analyse des couleurs et l'inciter exclure ou inclure des
nuances ou des intensits de couleur.
Pour modifier le jugement de la baguette, Photoshop nous propose l'option "tolrance" que vous trouverez dans la barre des
options.
Sa valeur par dfaut est cense tre de 32.
Avec cette option, vous dfinissez le degr de tolrance de votre baguette vis--vis des nuances et de l'intensit de couleur de
votre calque pour qu'elle effectue une slection plus juste.
Plus la valeur de la tolrance est leve, moins la baguette se souciera des diffrences de couleur entre les pixels. A l'inverse,
plus elle est basse, plus elle y prte attention.

Je vous invite faire des essais, a vaut le coup !

Si vous souhaitez effectuer plusieurs slections la fois sur diffrentes parties de votre calque, appuyez sur la touche
Shift de votre clavier au moment de cliquer.
La slection rapide
Comme si nous n'en avions pas assez, il existe un autre outil de slection qui, l'image de la baguette, produira 99% du travail
votre place. Elle porte bien son nom : la slection rapide, car avec cet outil, la slection est rapide.

Avec la baguette, il suffisait de cliquer une fois pour voir une slection apparaitre. Cette fois-ci, la tche sera lgrement plus
complique car il va falloir diriger la slection qui se formera en fonction de la trajectoire que prendra votre curseur. De la mme
manire que la baguette, la slection sera automatiquement cre.

Pour reprendre les termes de l'aide fournie par le logiciel, au fur et mesure que vous faites glisser la souris, la slection slargit
et suit automatiquement les contours dfinis de limage.

Je ne saisis pas. Quels paramtres permettent l'outil de savoir ce que l'on veut prcisment slectionner ? Avec la
baguette, on avait la tolrance...

Cet outil n'a pas besoin de tolrance, mais d'une configuration plus prcise. En ralit, il faut imaginer que l'on tient un pinceau
en main et que l'on va non pas taler de la peinture, mais de la "slection". Voyez plutt :

Ici, j'ai dessin un forme avec un pinceau...

Avec l'outil Slection rapide, ce n'est pas de la peinture qui se forme (comme ci-dessus), mais bien une slection.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 181/574

Attention, il faut bien faire la distinction entre pinceau et slection. Ici, on n'utilise pas de pinceau proprement parler (il existe
effectivement un outil pinceau, mais nous apprendrons nous en servir le moment venu) mais bien un outil de slection qui
ragit plus ou moins de la mme manire. La petite particularit de cet outil, c'est que comme la baguette magique, il tente de vous
guider en faisant attention aux diffrences de couleur.

Configuration

Comme tous les outils de Photoshop, la slection rapide est paramtrable. A l'image d'un pinceau que l'on peut acheter en
boutique, on va pouvoir choisir ici le diamtre (l'paisseur sur Photoshop) de l'outil, mais aussi par exemple sa duret, ou encore
sa forme. Pour ce faire, il suffit de se rendre sur la barre d'option puis de cliquer sur la vignette suivante.

vous de jouer.
Si les outils de slections du chapitre prcdent ont leur utilit et ne sont pas rejeter, on peut dire que l'on a franchement plus
de libert avec les outils que nous venons de voir.

Entrainez-vous Amusez-vous slectionner n'importe quoi parmi vos images personnelles, le tout tant de vous sentir l'aise
avec les outils .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 182/574

Les dimensions d'une zone de travail


Lorsque nous avions tudi pour la premire fois la cration d'une zone de travail, nous avions d dterminer ses dimensions.
C'est alors que je vous avais expliqu qu'une dimension tait le terme que l'on utilisait pour dsigner l'espace physique que la
zone de travail occupait, autrement dit sa taille (largeur * hauteur).

Une fois la zone de travail cre, sachez qu'il est possible de modifier ses dimensions mme si nous avons dj entam une partie
de notre travail. Et on va voir qu'il existe diffrentes faons de redimensionner une zone de travail grce quelques outils que
l'on peut, l aussi, nommer "outils pratiques" .
Taille de l'image
Nous allons d'abord voir comment modifier la taille d'une image dans la zone de travail.

En rgle gnrale, quiconque utilise rgulirement Photoshop vous dira qu'il existe un outil particulirement pratique pour
redimensionner un calque. Il s'agit d'une transformation que l'on nomme Homothtie. (oui, j'ai moi aussi tir une drle de tte
en lisant pour la premire fois ce terme quelque peu imprononable... pour info, il faut lire "o-mo-t-ci").
Je ne vais pas vous parler tout de suite de cette transformation car elle fait l'objet d'une sous-partie dans le chapitre suivant, ce
chapitre porte judicieusement le nom de "Transformations sur les axes X et Y".

Plutt que a, nous allons travailler avec la fonctionnalit d'dition appele Taille de l'image. Vous la trouverez en cliquant sur le
menu Image > Taille de l'image.

ALT + CTRL + I

Option + Command (ou Pomme) + I

Avant de commencer, veuillez vous procurer l'image sur laquelle nous allons travailler :

N'hsitez pas travailler avec moi !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 183/574

Tlcharger l'image
bulle.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Une fois l'image tlcharge puis ouverte sur Photoshop, vous pouvez ouvrir la fentre "Taille de l'image".

Nous allons nous servir de cette fentre pour modifier la taille de notre document. Cela signifie que, dans notre cas actuel, nous
modifierons les dimensions de toute la zone de travail, soit :

Les dimensions de la zone de travail vont changer (diminuer ou augmenter).


Tout ce qui se trouve l'intrieur de la zone de travail va aussi connaitre un changement. En effet, la taille du contenu de
la zone de travail va augmenter/diminuer proportionnellement au changement de taille connu par la zone de travail.

Observez trs attentivement ce schma. Ce sont des mathmatiques simples (je n'ai jamais t trs dou en maths et cela ne m'a
pas vraiment empch de le comprendre).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 184/574

La zone de travail a t rduite par deux, ce qui signifie que tout son contenu a lui aussi t rduit par deux. Ce principe
s'applique aussi bien si l'on essaye de doubler les valeurs : si une zone de travail mesure 100*100px et qu'on l'augmente
200*200px (autrement dit qu'on la double), la taille de tout ce qui se trouve l'intrieur va elle aussi augmenter de manire
proportionnelle, soit par 2. Ce serait d'ailleurs aussi la mme chose si nous avions multipli la taille de la ZDT par 3, par 10 et
pourquoi pas mme par 102,2 etc.

Faisons un essai et tentons de comprendre comment fonctionne la fentre Taille de l'image que je viens de vous faire ouvrir. On
remarque en premier lieu que cette fentre est dcompose en trois grandes parties :

Dimensions du pixel
Taille du document
Une srie de cases cocher suivie d'une liste droulante

Pour dire les choses simplement et grossirement, on peut dire que les deux premires catgories sont en fait les mmes
(dimensions du pixel et taille du document). Du moins elles ont toutes deux une fonction commune : dterminer la nouvelle taille
de notre image sur Photoshop. Que vous changiez la valeur des dimensions de pixel ou celles de la taille du document, vous
verrez que le rsultat est le mme : les dimensions de la zone de travail et de son contenu auront vraisemblablement t modifies
sur Photoshop.

On dit "taille de l'image" et non "taille de la zone de travail" car, comme on vient de le voir, ce n'est pas seulement la
zone de travail qui change mais aussi tout son contenu. C'est comme si nous changions les dimensions d'une image en
gnral .

Mais alors pourquoi faire deux catgories diffrentes ? Puis, d'abord, dans la catgorie "Taille du document", il y a
aussi la rsolution qu'on peut changer !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 185/574

Et bien, oui ! Elle est l, la rponse votre question ! Modifier la taille du document, c'est changer la largeur, la hauteur et la
rsolution de ce document. Vous saisissez l'ide ?

Non, pas du tout ? Bon, alors dans ce cas, trve de bavardage, on va tout de suite faire un exemple, a vaudra mieux j'en suis
sr.

L'exemple

Veuillez ouvrir l'image que vous avez tlcharge :

Actuellement, les dimensions de cette image sont 500*425 px.

Nous allons augmenter les dimensions de cette image en modifiant ces valeurs (que vous trouverez dans la catgorie
"Dimensions de pixel") par celles indiques ci-dessous :

Largeur : 1000 pixels


Hauteur : 850 pixels

Je rpte : les dimensions de l'image telle que vous l'avez tlcharges sont censes tre 500*425 px. Il faudrait maintenant
modifier ces valeurs par 1000*850px, soit prcisment le double.

Ah, bah en modifiant la valeur de la largeur (1000px), celle de la hauteur a automatiquement t remplace, et par celle
que tu m'as indique en plus, soit 850px !

Ceci est parfaitement logique puisque, je vous le disais, modifier la taille de la zone de travail via la fonctionnalit Taille de
l'image revient le faire proportionnellement.

On parle ici de proportionnalit dans la mesure o, comme la largeur de l'image tait l'origine de 500px et la hauteur de 425px, et

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 186/574

parce que vous avez modifi la largeur 1000px, la hauteur s'est "remise niveau". On a augment la largeur de 100%, donc la
hauteur s'est vue augmenter de 100% elle aussi.

Si vous ne dsirez pas travailler avec la proportionnalit et de ce fait avoir un contrle total sur les dimensions de la largeur ET
de la hauteur, il suffit de dcocher la case "Conserver les proportions" que vous trouverez en bas de la fentre.

En ce qui concerne les valeurs de la partie Dimensions de pixel de notre fentre, sachez qu'en les modifiant, vous engendrerez
par la mme occasion une modification des valeurs des champs de la catgorie "Taille du document". Si vous divisez par
deux les valeurs des "dimensions de pixel", vous diviserez par deux les valeurs de la "taille du document".

En attendant, je vous invite vrifier que vous avez bel et bien tap les valeurs suivantes :

Vous pouvez ensuite valider vos modifications en cliquant sur le bouton OK. Le rsultat ? Les dimensions de l'ensemble de notre
travail ont augmentes :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 187/574

1000*850px

Personnellement, j'ai plutt pris l'habitude d'utiliser cette fonctionnalit pour rduire une image beaucoup trop grande pour la
taille de mon cran (alors que, depuis le dbut, nous n'avons fait que grossir une image, l'exemple des petites bulles de couleurs).
C'est souvent le cas des photos que l'on prend avec nos appareils : elles sont gnralement trs, trs grandes. Essayez d'ouvrir
sur Photoshop une photo de votre collection. A condition que votre appareil soit suffisamment performant (ou sinon, cela
voudra dire que votre appareil est dpass et vous aussi d'ailleurs !), vous devriez avoir un aperu de votre photo semblable
celui-ci :

Cliquez sur l'image pour l'agrandir

L'aperu actuel est correct car il n'est pas dans son tat d'origine : il est affich avec un zoom de 33,3%, vous pouvez voir a au
niveau de l'onglet de la zone de travail, en haut gauche. Veuillez alors zoomer sur la zone de travail jusqu' qu'on est un aperu
100, comme ici :

Cliquez sur l'image pour l'agrandir

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 188/574

Comme vous pouvez le voir, on n'a pas accs l'intgralit de l'image sur notre cran du fait de sa grande taille. On a presque
l'impression d'avoir zoom dessus : pourtant, notre zoom est bel et bien de 100%.

Pour remdier au problme et rduire l'ensemble de l'image, j'ai tendance utiliser la fonctionnalit Taille de l'image. En l'ouvrant,
j'ai accs aux donnes de l'image et notamment ses dimensions :

Pour l'exemple mais aussi et surtout pour faire simple, je vais rduire par deux (encore une fois !) les valeurs de la taille du
document et ce de manire approximative. Ainsi, je vais remplacer 19,24 cm (largeur) par 10 cm en prenant soin de conserver les
proportions (cocher la case) pour que la hauteur soit automatiquement change en fonction de la largeur, soit 7,5 cm. Inutile
pour le moment de toucher la rsolution.

En validant, j'obtiens une image deux fois plus petite :

Cliquez sur l'image pour l'agrandir

A premire vue, je n'ai pas encore accs l'ensemble de mon image car celle-ci s'avre encore un peu trop grande. Il suffit
simplement de rduire encore peu plus les dimensions de la taille du document comme nous venons de le faire.

Mais en fait, on en fait quoi du champ rsolution dans tout a ?

La vraie question se poser, c'est "que fait la rsolution dans la partie dimensions du pixel et pourquoi n'est-elle pas dans la
partie taille du document ?". Et vous devriez savoir y rpondre. Si vous vous souvenez bien de la leon du tout premier chapitre
de ce cours, on dtermine les dimensions d'un pixel grce ... la rsolution !

Cela signifie que si vous modifiez la valeur de la rsolution (actuellement 72 ppp), vous modifierez en mme temps la dimension
des pixels. Mais attention ! En modifiant la rsolution, vous ne changez pas la taille du document, seulement la taille des pixels.
Et comme la taille des pixels change, la taille du document parait change.

Voici un schma pour mieux comprendre le fonctionnement de la rsolution dans le cas prsent.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 189/574

Merci Vivi's pour sa gnreuse participation (image + explications) !

Comme vous pouvez le lire, les deux carrs mesurent chacun 2 centimtres. Pourtant, tout comme moi, j'imagine que vous voyez
le carr du bas plus gros que celui du haut, et c'est normal. En fait, c'est la rsolution qui fait que l'image apparait plus grande
l'cran. Pourtant, techniquement parlant, ces deux images font exactement la mme taille, seuls les pixels sont plus nombreux .
J'espre avoir t clair, c'est un sujet relativement dlicat comprendre (et expliquer aussi, d'ailleurs !).

Pour info, plus la rsolution est importante, plus l'image est de bonne qualit. On peut faire cette constatation trs simplement :
en imprimant deux documents, l'un 72ppp et l'autre 300ppp, ce dernier sortira de meilleure qualit, comme si l'image tait plus
"dtaille" que l'autre. Vous pouvez essayer.

Comment faire si je veux agrandir la zone de travail sans affecter les dimensions de son contenu ? En d'autres termes, je
veux pouvoir largir mon plan de travail...

C'est simple, on va utiliser une autre fonctionnalit du logiciel que je vous propose de traiter tout de suite . En ce qui
concerne les deux autres cases cocher en bas de la fentre Taille de l'image, je ne juge pas ncessaire d'en parler car je crois
sincrement que cela ne nous sera pas utile dans l'immdiat. C'est assez spcifique et ce n'est pas ncessaire de s'taler sur le
sujet notre niveau .

Taille de la zone de travail


Nous nous demandions comment augmenter la taille de la zone de travail sans modifier la dimension des lments qui la
composent. Tout l'heure, quand on modifiait la taille de l'image, on avait droit par exemple ceci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 190/574

Alors que la zone de travail (ici en blanc au contour gris) augmentait, son contenu (la pice de puzzle) augmentait aussi de
manire proportionnelle.

Dsormais, nous aimerions faire en sorte d'augmenter la zone de travail sans que les dimensions des lments qui la composent
n'augmentent aussi, l'image de ce schma :

Veuillez tout d'abord ouvrir l'image sur laquelle nous venons de travailler puis ouvrir la fentre qui va nous permettre de modifier
la taille de la zone de travail. Il faut d'abord cliquer sur Image puis sur Taille de la zone de travail.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 191/574

ALT + CTRL + C

Option + Command (ou Pomme) + C

Voil la bte, c'est ici que tout se passe. Dcortiquons cette fentre comme nous avons dsormais l'habitude de le faire.

Cette fentre est divisible en deux parties : Taille actuelle et Nouvelle taille. La premire partie est de type informative, elle vous
rappelle la taille actuelle de votre document, soit 14,11*7,05cm ici.

On retrouve ces valeurs inscrites dans les champs blancs de la deuxime partie. On a donc la largeur et la hauteur, tous ceux
suivis de leur unit respective, le centimtre. C'est simple, il suffit de modifier ces valeurs pour modifier la taille de la zone de
travail. Si vous mettez une valeur suprieure 14,11 (cm) la largeur, alors la largeur de votre document augmentera. C'est
videmment la mme chose pour la hauteur.

Et ces espces de flches directionnelles, elles servent quoi alors ?

En modifiant les valeurs dans les champs blancs du dessus, on modifie soit la largeur, soit la hauteur. Ainsi, en prenant l'exemple
de la largeur, on obtient un tel rsultat...

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 192/574

Cette image reprsente ma zone de travail d'origine.

Cette image reprsente ma nouvelle zone de travail. J'y ai modifi les valeurs de la largeur, et celle-ci s'est largie aux deux
extrmits gauche et droite, de la mme taille.

Vous devez comprendre via cet exemple que, si par exemple, ma zone de travail mesure 200 pixels de largeur et que je l'augmente
de 200 pixels supplmentaires (soit 400 pixels en tout), il y aura 100 pixels de plus gauche, 100 pixels de plus droite.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 193/574

En utilisant les fameuses "flches directionnelles", on va avoir la possibilit de choisir un seul ct qui donner les 200 pixels
supplmentaires. Ainsi, si on veut largir la zone de travail de 200 pixels vers la gauche, on obtiendra un tel rsultat :

Voyons voir de plus prs cette srie de flches et tentons de les comprendre. Car figurez-vous qu'elles fonctionnent plutt...
bizarrement.

On a prcisment 9 petits carrs tous remplis d'une petite flche allant chacune vers une direction diffrente. Tous sauf un : celui
du milieu. Lui n'a pas de flche et il y a une raison. En fait, cette case vide indique la position de votre zone de travail partir de
laquelle les flches vont prendre leur direction et donc, cela indique quels cts vont tre agrandis ou rtrcis.

Heu... j'ai un peu de mal te suivre.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 194/574

C'est pas clair ? Trs bien, faisons un essai, vous allez tout de suite comprendre. Actuellement, on a la case du milieu qui est vide
et toutes les autres ont une flche pointant chacun dans une direction. Ainsi, si on modifie et augmente les valeurs de la hauteur
et la largeur dans les champs blancs, on sait que la taille de la zone de travail va tre augmente dans sa gnralit, c'est dire
vers la gauche, vers le haut, vers la droite et vers le bas.

Maintenant, si la case vide se trouvait par exemple la place de la flche pointant vers la gauche, comme cette image...

... on comprendrait alors que la taille ne serait plus affecte sur le ct gauche car il n'y a plus de flche pointant vers ce ct-ci.
Vous saisissez ? Ainsi, la taille de la zone de travail sera augmente vers la droite.

Pour modifier la position de la case "vide", il faut tout simplement cliquer sur la case de votre choix.

L, tu n'as fait qu'augmenter la taille de la zone de travail. Qu'est-ce que cela donne si je veux la rduire ?

C'est parfaitement la mme chose. Vous choisissez dans un premier temps la position de la case vide puis vous modifiez les
valeurs dans les champs blancs en prenant soin d'inscrire des valeurs plus petites. De cette manire, vous rduirez la taille de la
zone de travail en fonction de la direction des flches.
Rotation de l'image
A prsent que nous savons modifier la taille de la zone de travail et que nous savons utiliser les paramtres lis la "taille d'une
image", je vous propose de tenter une toute autre manuvre, toujours en rapport avec notre zone de travail.

Le principe de cette nouvelle fonctionnalit est de faire effectuer une rotation la zone de travail. On retrouve cette
fonctionnalit juste en-dessous de celle que nous venons d'tudier, en cliquant sur Image puis sur Rotation de la zone de travail
>. Ainsi, en laissant votre curseur sur ce dernier bouton, une liste fait son apparition :

Cette liste prsente prcisment 5 paramtres pr-rgls, tous permettant de faire pivoter la zone de travail selon un angle
diffrent. videmment, si vous choisissez 90, votre zone de travail va pivoter ... 90.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 195/574

En utilisant cette fonctionnalit, vous engendrerez un pivotement de l'ensemble de la zone de travail, un peu comme ce que
produisait la fonctionnalit Taille de l'image. Nous verrons dans le chapitre suivant comment modifier l'angle seulement d'un des
calques de notre zone de travail (et non toute la zone de travail comme c'est le cas actuellement).

On n'a pas beaucoup de choix... Comment faire si je veux faire pivoter ma ZDT 54, par exemple ?

On va devoir pass par le paramtre "Paramtre" que vous trouverez dans la mme liste. En cliquant dessus, cette petite fentre
apparait :

Il suffit simplement de modifier la valeur 0 dans le champs blanc par la valeur de votre choix.

Horaire : faire pivoter la zone de travail dans le sens normal d'une aiguille d'une montre.
Antihoraire : faire pivoter la zone de travail dans le sens contraire d'une aiguille d'une montre.

Je ne me suis pas attard sur les paramtres de symtrie (ex : Symtrie horizontale de...) car nous allons nous en servir
dans le prochain chapitre, ce qui va me permettre de vous en parler plus srieusement.

C'est tout pour la rotation .


Le recadrage
On conclut ce chapitre avec le recadrage, un outil vraiment trs pratique et qui fait le bonheur d'un bon nombre de photographes.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 196/574

Vous vous souvenez de l'outil de slection ? Du moins, vous vous souvenez de comment cela fonctionne ? Et bien c'est
exactement pareil. Enfin... une diffrence prs, et de taille ! Avec l'outil de slection, on protgeait tout ce qui ne se trouvait
pas l'intrieur de la slection. Ainsi, ce qui se trouvait l'intrieur tait ouvert la modification.

Si l'on utilise l'outil Recadrage de la mme manire (comme si on effectuait une slection), il ne sert pas tout--fait la mme
chose . Il est, comme son nom le laisse prsager, utilis pour recadrer une partie de la zone de travail. Alors, on encadre un
lment de la zone de travail puis cette dernire reprend les dimensions de ce mme lment.

Faisons un essai. Nous travaillerons sur cette image :

N'hsitez pas travailler avec moi !


Tlcharger l'image
helicoptere.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Comme vous pouvez le voir, la partie centrale de l'image est occupe par le sujet mme de l'image, c'est--dire l'hlicoptre. Grce
l'outil de recadrage, nous allons liminer les zone "inutiles" pour ne retenir que la partie avec l'hlicoptre.

Commencez par slectionner l'outil Recadrage.

Utilisez-le ensuite comme si vous utilisiez l'outil Rectangle de slection : vous vous rendrez compte qu'une slection va se
former progressivement... Faites-la bien autour de l'hlicoptre en y laissant une petite marge tout de mme hein.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 197/574

Une fois votre slection termine, c'est en relchant le clic que vous laisserez apparaitre ce cadre quadrill :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 198/574

Concentrez-vous sur le cadre et non sur le quadrillage. Ce cadre reprsente les nouvelles dimensions que vous donnerez la
zone de travail.

Et le quadrillage, il sert quoi dans ce cas ?

Le quadrillage va nous servir effectuer un recadrage correct et juste. On s'en sert pour cibler convenablement le sujet que nous
allons recadrer afin de le faire dans les bonnes mesures. Il existe plusieurs types de quadrillage que vous trouverez dans la barre
des options, le paramtre s'intitule "Incrustation repre recadrage" :

Sans : pas de quadrillage...


Rgle tiers : quadrillage que nous connaissons.
Grille : quadrillage beaucoup plus dtaill pour un recadrage encore plus prcis.

Vous pouvez par ailleurs modifier les dimensions de votre nouveau cadrage avant de le "valider" en dplaant les petits carrs
transparents que j'ai l'habitude d'appeler des poignes : . Cela vous permettra d'afficher le cadrage et de l'ajuster comme
bon vous semble. Pour utiliser une poigne, il suffit de dplacer l'un des petits carrs, il vous faudra alors placer votre curseur
dessus, cliquer sur ce petit carr, maintenir le clic puis, enfin, dplacer votre curseur.

Une fois le cadrage termin, appuyez sur la touche Entre de votre clavier...

Hey, une minute papillon. Ton truc, a revient faire une slection et enregistrer le contenu de cette slection dans une
nouvelle zone de travail... comme tu nous l'as dj appris ?

Oui, c'est bien vu. Mais alors voil, faire un recadrage avec l'outil de slection est une des nombreuses possibilits que nous
offre cet outil. Or, il est mon sens plus conventionnel d'utiliser l'outil de recadrage pour effectuer un recadrage (il ne porte pas
son nom pour rien) car, en plus d'tre beaucoup plus rapide, il sert avant tout recadrer une image et non "conserver un lment
d'une zone de travail" comme on l'avait fait avec le rectangle de slection.

Et "recadrer" peut aussi vouloir dire "remettre en place une image un peu incline" par exemple. Voici un exemple.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 199/574

Encore Londres, je sais.

N'hsitez pas travailler avec moi !


Tlcharger l'image
soldat.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Sur cette image, on note un lger basculement vers la droite de l'ensemble de la prise. Grce au recadrage, nous allons russir
remettre en place l'ensemble de la photo pour qu'elle ne paraisse plus incline. Commenons par effectuer une slection autour
de la maisonnette et du garde, comme ceci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 200/574

Nous allons maintenant incliner ce recadrage de sorte rendre son contenu 'droit' une fois valid. Pour ce faire, il faut placer son
curseur l'extrieur du recadrage jusqu' qu'il prenne l'apparence d'une double flche courbe, maintenir le clic et dplacer son
curseur de gauche droite :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 201/574

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 202/574

Appuyez sur la touche Entre une fois le recadrage termin et observez le rsultat :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 203/574

L'image n'est maintenant plus incline, du moins... en apparence. Mais on ne va pas s'arrter l car l'atout majeur de l'outil
recadrage repose sur sa flexibilit grce une option que l'on retrouve dans la barre d'options : la perspective. Cette option
n'apparait qu'une fois la slection de recadrage faite (mais pas valide), on la retrouve tout la droite (perspec.) :

Jusqu'ici, nous avons t en mesure d'effectuer deux oprations sur notre recadrage :

Agrandir ou rtrcir la slection du recadrage.


Faire pivoter la slection du recadrage.

A l'aide de l'option perspective, nous allons torsader la slection de sorte la moduler en fonction de l'lment de l'image que
nous allons chercher recadrer. Allez, on reprend les bonnes vieilles habitudes, c'est parti pour un exemple.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 204/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
sortie.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Notre objectif consistera recadrer l'image pour ne conserver que le panneau de sortie de secours vert mais avec une petite
difficult cette fois. Nous allons en effet chercher ne recadrer que ce panneau, nous retirerons ainsi toute trace de ce qui se
trouve autour comme la lumire ou le plafond.

La premire opration effectuer est celle que nous connaissons dj, c'est--dire que l'on va d'abord tracer la slection
rectangulaire de recadrage autour du panneau, comme ceci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 205/574

Dsormais, nous allons utiliser les poignes afin d'ajuster notre recadrage aux contours du panneau vert. Ainsi, aprs avoir
coch l'option perspective, vous n'avez qu' placer votre curseur sur l'un des carrs transparents du cadre (le curseur prend alors
une nouvelle apparence), cliquez dessus puis dplacez le curseur : vous pouvez alors articuler le cadrage selon vos souhaits.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 206/574

Reproduisez la mme opration sur l'ensemble des poignes de sorte obtenir ce rsultat-ci :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 207/574

Ajustez le cadrage et, une fois satisfait, appuyez sur la touche Entre de votre clavier pour le valider.

Le travail est maintenant termin, l'image est recadre. Je vous signale toutefois que l'on aurait pu recadrer l'image sur le panneau
en y laissant une petite marge :

Le travail peut toutefois s'avrer plus approximatif, j'ai par exemple ici l'impression que l'image n'est pas vraiment "droite", on

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 208/574

note une petite touche de perspective. C'est peut-tre parce que mon recadrage a mal t fait.
Ce petit chapitre sur l'dition des dimensions d'une zone de travail touche sa fin. Vous allez voir que la suite est parfois
ressemblante ce que nous venons de faire (dans la forme). Nous allons aborder la transformation, vritable outil de guerre dont
on aura constamment besoin pour la construction de nos projets venir.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 209/574

Techniques de transformation sur les axes X et Y


(1/2)
Nous voici aux huitime et neuvime chapitres de cette premire partie du tutoriel. Autrement dit les derniers !
Je suis vraiment heureux que vous en soyez arrivs l : cela prouve que vous tes motivs et dtermins, a fait plaisir voir
.

Le titre de ces deux chapitres de conclusion est assez vocateur et j'espre que vous vous plairez le lire. Nous allons apprendre
ensemble transformer un calque et le dformer notre guise. Autant de techniques de travail qu'il est impratif de maitriser si
vous voulez donner un sens vos futures crations.

Je dois vous avertir que je vais introduire ce premier chapitre par une explication thorique portant sur le thme de la symtrie.
Rassurez-vous, je vous ai pargn les dfinitions trop complexes et compagnie, vous devriez russir tenir le fil avec un peu de
concentration .

Puis, bon, c'est plutt facile et cela n'a rien de sorcier d'un point de vue technique, je suis convaincu que vous assimilerez trs
vite les informations qui vous attendent, de quoi vous reposer un peu en attendant les chapitres des prochaines parties .
La minute thorique : transformer l'aide de la symtrie
Le terme de "transformation" est employ plusieurs escients, en fonction des domaines pratiqus. Transformer un calque sur
Photoshop, c'est le transformer gomtriquement.

On a tous suivi des cours de gomtrie au moins une fois dans sa vie l'cole ? Et bien le principe est le mme.

Par dfinition, la gomtrie consiste en l'tude des figures dans l'espace. Sur Photoshop, on va considrer qu'une figure est un
calque et que la zone de travail constitue elle seule l'espace. Du coup, en transformant les calques sur Photoshop, nous allons
modifier leurs formes (c'est--dire les figures) ainsi que leurs positions gomtriques (rfrences l'espace).

On dtermine une position gomtrique sur deux axes, les abscisses et les ordonnes, que nous renommerons respectivement X
et Y. Ces axes sont perpendiculaires l'un l'autre et ils sont la rfrence quant la position du calque. On retrouve les axes X et Y
dans la zone de travail :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 210/574

Ainsi, on effectue des modifications sur ces deux axes : de haut en bas (on ne travaillerait alors que sur l'axe Y), de bas en haut
(idem, on transforme le calque sur l'axe Y), de gauche droite (ici, on modifie le calque sur l'axe X), de droite gauche (idem, axe
X), mais aussi pourquoi pas du bas droit vers le haut gauche (on transformerait alors le calque sur la diagonale, savoir sur les
deux axes : X et Y), ou du haut droit vers le bas gauche (X et Y aussi).

C'est par le biais de ces axes que nous allons tre aptes crer des lments en 2D mais qui prendront l'apparence d'objets en 3D.
Souvenez-vous l'exemple de l'ombre porte, vous savez le fameux paquet de feuilles superposes. Sur ce projet, nous avions bel
et bien travaill en 2D (Photoshop ne sait faire que cela, de la 2D, de toute manire) et pourtant, nos feuilles paraissaient tre en
3D : ceci tait d un effet de perspective gr par Photoshop, ce qui nous laissait croire que les feuilles taient en 3D, or elles
taient bien cres en 2D, la 3D n'tant que l'apparence finale du paquet de feuilles.

La technique utilise pour crer ces feuilles est la 2D.


L'apparence donne ces feuilles est la 3D.
En d'autres termes, nous avons cr un objet prenant une forme 3D grce un logiciel de 2D et une technique nomme la
transformation.

La symtrie, c'est quoi ?

Nous allons nous intresser plusieurs types de symtrie. Ne vous en faites pas, je ne vais pas vous demander de tout retenir, je
veux juste faire un peu de thorie, car cela me semble ncessaire pour comprendre certaines transformations. Il faut
imprativement passer par l avant d'tudier les fonctionnalits faisant l'objet de ce cours.

Symtrie axiale

Le premier type de symtrie dont je souhaite vous parler se nomme symtrie axiale.

Par dfinition, on dit que deux figures sont symtriques par rapport une droite si, en pliant la feuille au niveau de la droite, les
deux figures se superposent.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 211/574

Par exemple, la premire moiti d'un terrain de football est parfaitement symtrique avec l'autre moiti du terrain en fonction de la
ligne blanche du milieu, vous saisissez l'ide ?

La seule chose que je vous demande de retenir, c'est que cette droite, on l'appelle l'axe de symtrie.

'Voyez, c'est pas plus compliqu que cela, on peut dj passer au deuxime type de symtrie dont je voulais vous parler .

Symtrie centrale

Et on le nomme "symtrie centrale".

Si nous avions besoin d'un axe de symtrie pour la symtrie axiale, nous aurons cette fois besoin d'un point de symtrie. De ce
fait, on dira de deux objets qu'ils sont "symtriques" par rapport un point. Je vous explique rapidement comme se construit une
symtrie centrale .

On va tout d'abord crer ce fameux point. Il s'agira de notre point de symtrie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 212/574

Nous le disions, tout va se jouer en fonction de ce point. Voici l'lment avec lequel nous allons travailler, nous allons dterminer
son symtrique.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 213/574

La distance entre le point de symtrie et le losange n'a pas d'importance.

Pour dterminer le symtrique du losange, nous allons utiliser ses 4 pointes, partir desquelles nous allons tracer une droite
passant par le point de symtrie. Sur l'image ci-dessous, j'ai trac une droite en partant de la pointe du bas du losange et passant
par le point de symtrie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 214/574

J'ai pris soin de tracer une droite relativement longue, tout du moins aussi longue voire plus longue que la distance sparant la
pointe du point de symtrie.

L'objectif est dsormais d'effectuer la mme opration pour toutes les pointes du losange.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 215/574

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 216/574

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 217/574

En traant ces quatre droites, nous avons mch la moiti du travail. La deuxime tape consiste travailler sur chacune des
quatre droites. Commenons par la droite suivante, je l'ai remplie de rouge :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 218/574

Nous allons devoir utiliser un compas pour russir cet exemple. videmment, nous allons nous contenter d'imaginer un compas
(je me vois mal en utiliser un sur mon cran d'ordinateur...).

Qu'allons-nous faire avec un compas ? Et bien, nous allons tout d'abord utiliser sa pointe, que nous planterons sur le point de
symtrie :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 219/574

Quant la mine du compas, nous la poserons sur la pointe du bas du losange, c'est--dire la pointe partir de laquelle la droite
rouge a t trace (je vous rappelle que nous ne travaillons que sur cette droite pour le moment) :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 220/574

A prsent, nous allons tracer deux arcs de cercle l'aide du compas : le premier passera au niveau de la pointe du bas du
losange, l'autre traversera la droite du ct oppos la pointe du bas du losange.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 221/574

Quand les deux arcs de cercle sont tracs sur une droite, il faut recommencer la mme opration sur toutes les autres. J'ai
toutefois recr un exemple pour vous montrer nouveau comment faire. Voici la droite sur laquelle nous allons travailler :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 222/574

Je vous rappelle que l'on construit cette droite en la dmarrant de la pointe droite du losange et en la faisant passer par
le point de symtrie.

Je place la pointe de mon compas sur le point de symtrie et la mine la pointe droite du losange. Puis, je trace deux arcs de
cercle : le premier au niveau de la pointe droite du losange, quant au deuxime, je le fais traverser la droite du ct oppos de la
pointe droite du losange en fonction du point de symtrie.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 223/574

Voici le mme schma avec tous les arcs de cercle tracs :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 224/574

Je me suis permis de transformer ce schma afin de le simplifier et d'amliorer la lisibilit :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 225/574

En observant attentivement le schma et plus prcisment les petites croix, on peut constater qu'elles forment une figure
gomtrique et pas n'importe laquelle : un losange ! On a donc russi dterminer le squelette du losange originel, ou plutt le
squelette de son symtrique .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 226/574

Et qu'est-ce qu'on fait avec a ?

Tous ces schmas m'ont permis de vous expliquer le principe de la symtrie centrale. En gros, je vous ai prsent chaque tape
de construction d'une symtrie centrale. Ce que je veux dire, c'est que vous savez dsormais comment se construit une symtrie
centrale. Je vous propose maintenant de voir comment elle se prsente.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 227/574

Le losange en haut gauche est notre losange originel. Son symtrique est le losange en bas droite (forcment). On en dduit
facilement (et plus qu'une dduction, il s'agit d'une explication avre) que le losange a pivot autour du point de symtrie. C'est
d'ailleurs la raison pour laquelle les couleurs se sont inverses (vrifiez bien) .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 228/574

J'espre que vous avez bien compris comment fonctionnait la symtrie centrale, car si c'est acquis, alors vous comprendrez trs
rapidement la moiti des prochaines fonctionnalits.

Voil, c'est tout ce que j'avais besoin de vous dire, on va pouvoir vritablement dbuter le chapitre et envisager la
"transformation" dont on parle depuis tout l'heure !
Symtrie des axes
Symtrie des axes

Et on commence fort puisque l'on va directement avoir affaire la symtrie axiale. Tous les paramtres que nous nous apprtons
tudier ne sont pas des outils proprement dire. En tout cas, vous ne les retrouverez pas dans la boite outils. Je dirais plutt
que ce sont des fonctionnalits de Photoshop, fonctionnalits que vous retrouverez en totalit en droulant le menu dition puis
dans Transformation.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 229/574

Les premires transformations que nous allons produire sont les deux dernires de la liste, savoir "Symtrie axe horizontal" et
"Symtrie axe vertical".

Et bien devinez quoi ? Ces deux types de transformation consistent transformer un lment de la zone de travail... en son
symtrique grce la symtrie axiale !

C'est parti pour un exemple illustr .

N'hsitez pas travailler avec moi !


Tlcharger l'image
Main_gauche.png
P our tlcharger l'image, cliquez droit sur le lien puis "Enregistrer sous..."

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 230/574

vhf/victor

Voici l'image que nous allons transformer. Franchement, ce n'est vraiment pas compliqu maintenant que vous avez acquis la
notion de symtrie axiale. En reprenant l'exemple de la pomme, on sait que l'on dtermine le symtrique d'une image en fonction
de son axe de symtrie et partir du moment o, si l'on plie la feuille en deux partir de cet axe, les deux images se superposent.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 231/574

Ce cas est avr sur cet exemple. Nous avons d'un ct l'image originelle et gauche son symtrique que j'ai nomm
"transformation".

Vous l'aurez donc compris, avec les transformations "Symtrie axe", on est en mesure de transformer le calque en son symtrique.

Attention, il n'est pas question de crer un nouveau calque contenant le symtrique du calque originel car en transformant le
calque, vous le remplacez par son symtrique.

En d'autres termes, si l'image originelle est la suivante :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 232/574

En cliquant sur "Symtrie axe horizontal", vous la transformerez sur l'axe des abscisses et c'est son symtrique qui la remplacera.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 233/574

De la mme manire, en transformant l'image originelle sur l'axe des ordonnes (ce qui signifie la verticale), on la remplace par
son symtrique :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 234/574

D'accord, mais, va savoir pourquoi, j'ai l'impression que cette transformation n'est pas trs utile, je me trompe ?

Carrment que vous vous trompez ! Bon, aprs, on peut trouver ncessit cette transformation pour diffrents besoins, je
ne saurais dire lesquels exactement. Je peux toutefois vous donner un ou deux exemples, le premier qui me vient tant li au
domaine de la photographie. Je dois vous avouer que, mme si j'aime la photo, mes connaissances dans ce domaine sont
relativement limites et je ne suis pas assez renseign pour vous fournir des explications techniques et avres. J'ai alors
demand de l'aide victor, fidle membre du Site du Zro reconnu pour son mauvais caractre ses talents de photographe et qui
est par la mme occasion mon fournisseur officiel de photos pour ce tutoriel. Il s'est fait un plaisir de me donner ses explications
sur le sens directionnel d'une photo.

Citation : victor
Quand on prend une photo, il faut prendre en considration le sens de la lecture.
En Europe et en Occident de manire gnrale, on lit de gauche droite. Ainsi, dans les rgions o on lit de gauche droite,
faire "regarder" le sujet d'une photo vers la droite donne une illusion d'ouverture.

Faire regarder le sujet vers la gauche produit l'effet inverse : fermeture.

C'est trs prsent dans la faon d'apprhender et de comprendre une image chez les photographes, et mme si c'est
totalement inconscient chez la majorit des gens qui ne sont pas forcment renseigns, cela influence normment votre
lecture (on parle de lecture d'image pour dire apprhension, comprhension) d'une image ( votre insu).

Exemple

Une voiture qui se dirige vers la droite donne l'impression de partir.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 235/574

Si elle va vers la gauche de l'image, on pensera alors qu'elle arrive.

Idem pour un objet volant. Par exemple l'avion ou l'oiseau, pour faire croire qui s'lve dans le ciel, devra le faire d'en bas
gauche en haut droite. L'inverse, d'en bas droite en haut gauche, serait en quelque sorte inesthtique pour des
raisons purement lies la photographie. Je peux te parler par exemple de la lecture en Z, mais a, c'est une autre histoire (qui
aurait beaucoup plus sa place dans un article de photographie que dans un cours ddi Photoshop) ...

Du coup, on peut avoir recours cette transformation quand on a besoin de modifier la direction de notre sujet :

vhf/victor

Ici, on peut se poser une question : lequel de ces couloirs est celui d'o on est venu et lequel celui o nous allons ?

Merci encore lui pour ces quelques lignes ma foi fort intressantes .

Bon, il faut que je vous mette en garde sur un point essentiel : la transformation de type "miroir" (comme on vient de le faire avec
la main). Celle-ci est proscrire sur du texte ou un objet, une personne ou un paysage reconnaissable. En effet, une fois
transforme sur l'axe des X ou des Y, le sujet de l'image pourrait ne plus tre reconnaissable et votre transformation perdrait alors
toute sa crdibilit .
J'ai justement concoct un petit exemple pour vous. L'image suivante prsente un appareil photo des plus traditionnels.

vhf/victor

Pourquoi n'est-il pas permis de transformer cette photo sur l'axe des abscisses de sorte crer un effet "miroir" l'exemple de
l'image ci-dessous votre avis ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 236/574

Outre le problme pos par l'inversion du texte, la transformation symtrique de cette image montre un appareil photo qui n'existe
pas dans la ralit. Ou alors... ce serait un appareil "pour gaucher", vu qu'il forcerait son utilisateur faire tout l'inverse des
appareils habituels : mise au point de la main droite, dclenchement et recharge de la main gauche ... Vous saisissez ?

L'utilisation de cette transformation du texte n'est toutefois pas impossible ! On peut par exemple sans problme profiter de la
symtrie verticale pour crer un effet assez sympa, j'ai justement prvu un exemple pour vous. Ainsi, on partirait de ce texte :

Admettons que l'on veuille crer une sorte de reflet partir de ces textes. On va alors devoir dupliquer le calque du texte (on
verra plus tard comment crer un calque de texte) et lui diminuer le pourcentage d'opacit de ce nouveau calque.

Enfin, on transforme ce nouveau calque verticalement et on le colle comme ceci au calque d'origine.

Comme quoi, on peut en faire des choses, avec ces deux transformations mine de rien .
Rotation
Je vous rappelle que toutes les transformations se trouvent dans le mme menu (dition > Transformation).

Nous allons prsent utiliser la transformation nomme "Rotation". Sur Photoshop, la rotation dsigne le fait d'effectuer un
mouvement autour d'un seul et mme point. Si vous avez bien suivi le chapitre, ce que je viens de dire devrait faire "tilt"... Vous
voyez o je veux en venir ? Je veux faire rfrence au fameux point de symtrie que nous avons rencontr lors de mon explication
sur la symtrie centrale. On va donc avoir affaire elle (comme par haaaasard ! )!

Un exemple arrive, n'hsitez pas travailler avec moi !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 237/574

Tlcharger le fichier source


Rotation.psd

Voici l'image sur laquelle je vais vous expliquer comment cela fonctionne.

Souvenez-vous, la symtrie centrale se construit l'aide d'un lment essentiel : le point de symtrie (dj rpt maintes et
maintes fois). On se souvient alors que l'on avait trac des droites puis des arcs de cercle permettant de crer le squelette du
symtrique. Je vous rassure, nous n'aurons pas besoin de faire tout cela : tout est automatis, nous n'aurons qu' cliquer sur des
boutons figurant dans le menu Transformation. D'ailleurs, en droulant ce menu (dition > Transformation), on a droit trois
fonctionnalits :

Rotation 180
Rotation 90 horaire
Rotation 90 antihoraire

Ces trois boutons vont nous permettre de dfinir un angle de rotation.

Rotation 180 : on "rotationne" (fait pivoter) la figure en fonction du point de symtrie sur 180
Rotation 90 horaire : on fait pivoter la figure autour du point de symtrie dans le sens des aiguilles d'une montre sur
90
Rotation 90 antihoraire : mme fonctionnement, sauf que la rotation se fait dans le sens contraire des aiguilles d'une
montre sur 90

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 238/574

On donne alors trois angles partir desquels l'lment slectionn va effectuer une rotation, vous saisissez ?

Je vous prsente le rsultat de la transformation lorsque l'on demande l'image d'effectuer une rotation 90 horaire.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 239/574

Et maintenant, le rsultat une fois une rotation 90 de type antihoraire effectue.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 240/574

De la mme manire, toutes les feuilles ont t dplace de 90 mais dans le sens contraire d'une aiguille d'une montre.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 241/574

Quand on fait pivoter un lment 90, il faut juste "imaginer" que l'image de base est l'origine prsente l'horizontale pour se
rendre compte qu'il s'agit bel et bien d'une symtrie centrale .

A l'image des transformations "Symtrie axe", une fois l'lment transform, il est remplac par son symtrique.

Transformation en homothtie
Homotquoi ? Encore un mot tordu apprendre !

Aucune raison de paniquer ni de s'nerver, je ne vous demanderai pas de retenir ce terme. D'autant plus que pour un nom aussi
tordu que celui-ci comme vous le dites, vous allez voir que sa difficult d'utilisation est moindre compare ce que l'on a pu faire
jusqu'ici .

Bon, j'ai quand mme une mauvaise nouvelle. En fait, il est encore question de symtrie, surtout qu'il s'agit d'un type de symtrie
encore diffrent de ceux que nous avons dj tudis. D'ailleurs, l'homothtie, c'est aussi une transformation gomtrique.

Cette fois-ci, je vous pargne sa dfinition type que je juge franchement trop complexe pour nous , on va se contenter
d'utiliser la transformation en s'accompagnant de quelques explications, ce sera bien plus significatif et explicite pour vous, je
vous l'assure .

Jusqu'ici, nous n'avons pas eu besoin de manipuler quoi que ce soit. Tout ce que l'on a fait, c'est cliquer sur des boutons du
menu partir desquels une transformation s'effectuait automatiquement. Cette fois-ci, on change la donne : si nous cliquons sur
le bouton Homothtie dans le menu Transformation, nous ne faisons qu'activer la fonctionnalit que nous serons alors amens
utiliser manuellement avec la souris de notre ordinateur.

Un exemple arrive, n'hsitez pas travailler avec moi !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 242/574

Tlcharger l'image
SdZ.png

Pour cet exemple, je travaillerai sur ce document :

On aura tous reconnu le devenu-clbrissime logo du Site du Zro. En allant chercher la transformation dans dition >
Transformation > Homothtie et en cliquant dessus, je m'aperois d'un changement au sein de ma zone de travail : une sorte de
cadre apparait.

Ce cadre signifie que la transformation est active : nous allons pouvoir effectuer la transformation. Notre travail, nous,
consistera dplacer les petits carrs transparents que l'on peut apercevoir aux bords et aux coins de l'image.

Leur utilisation est relativement simple : il suffit de rester cliquer sur l'un des carrs (c'est--dire maintenir le clique dessus) et de
bouger le curseur de la souris. De cette manire, on transforme le calque dans la mesure o l'on va dplacer le carr transparent,
ce qui va engendrer une modification du fameux cadre et donc de l'lment encadr. Une fois qu'un lment est encadr par la
transformation, il le reste, mme si l'on y modifie son cadre.

D'accord, mais en quoi l'homomachin est-elle une symtrie ?

Si j'utilisais la dfinition donne par Wikipdia et que je vous demandais ensuite si vous avez rellement compris comment
fonctionnait la transformation, je suis certain que beaucoup serait aux abonns absents . Ah non ? Entendu :

Une homothtie est une transformation gomtrique d'un espace affine dans lui-mme, fixant un centre de l'homothtie, et
transformant un hyperplan en un hyperplan parallle.

Non, franchement, je ne sais pas vous, mais je ne trouve pas qu'une telle dfinition est vraiment parlante, je crois qu'il vaut mieux
que l'on dcouvre la nouvelle fonctionnalit via des exemples illustrs, comme j'ai davantage l'habitude de faire maintenant .
Simplement, je peux vous dire sans rentrer dans des dtails techniques que cette transformation comme telle qu'on l'utilise en
infographie va nous permettre de rduire ou agrandir une image sur la largeur ou la hauteur.

Voyons comment cela fonctionne .

Nous avons la possibilit de modifier la position de 8 carrs transparents : 4 aux coins et 4 sur les artes (c'est--dire les bords de
l'image, pas besoin de vous faire un dessin non plus ). Chaque carr permet de transformer l'lment d'une certaine manire.
Par exemple, en travaillant sur le carr suivant, on va tre en mesure de modifier la hauteur du cadre (et donc de l'image, je vous
rappelle que l'on travaille la hauteur sur l'axe des ordonnes (Y)).

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 243/574

De mme, en travaillant sur le carr gauche situ au bord de l'image, on peut modifier la largeur de cette dernire :

Enfin, en modifiant la position de l'un des carrs transparents situs aux coins de l'image, on peut modifier la taille gnrale de
l'image, c'est--dire la rtrcir sur la largeur et/ou sur la hauteur, c'est--dire sur la diagonale.

Je vous rappelle qu'il faut maintenir le clique sur le carr transparent pour pouvoir le dplacer avec le curseur. Pour cet exemple,
j'ai commenc par dplacer le carr transparent situ en haut, sur le bord de mon image. J'ai eu deux choix : soit agrandir la
hauteur du calque, soit la rtrcir. Pour le coup, je l'ai rtrcie :

Remarque : sur l'exemple ci-dessus, on peut apercevoir en fond l'image originelle, c'est--dire celle qui n'a pas t transforme. Ne
vous laissez pas tromper, c'est pour l'exemple uniquement .

Pour valider la transformation (c'est--dire retirer le cadre et donc laisser l'image telle qu'on l'a transforme), j'ai utilis la touche
Entre de mon clavier. Notez que j'aurais trs bien pu cliquer sur le bouton suivant dans la barre des options : .

Qu'est-ce que cela donne si je dplace l'un des carrs transparents situs aux coins de l'image ?

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 244/574

Comme je vous l'ai dit, si l'on dplace l'un de ces petits carrs, nous pouvons transformer le calque sur l'axe X et Y (abscisses et
ordonnes) c'est--dire sa largeur ET sa hauteur (on va alors effectuer un dplacement en diagonale). Faisons un essai .

Pour effectuer une transformation de manire proportionnelle, il faut appuyer simultanment sur la touche Shift de votre
clavier d'ordinateur.

Pour cet exemple, je travaillerai sur ce petit carr transparent.

Je vais alors cliquer dessus et appuyer simultanment sur ma touche Shift afin d'effectuer une diminution des tailles de l'image de
manire proportionnelle.

On constate que l'image a globalement rtrci. Je valide ensuite la transformation, et voici le rsultat obtenu !

Par comparaison, on remarque le changement de taille radical :

Transformer en homothtie, pour quoi faire ?

C'est une question qui va souvent revenir dans ce chapitre et celui qui suit. C'est la raison pour laquelle je vais, chaque fois que
je juge ncessaire de le faire, vous proposer un exemple concret de ce quoi peut servir telle ou telle transformation. Ainsi, vous
pourrez vous faire une ide de l'utilit de chacune d'entre elles .

L'exemple que j'ai choisi pour l'homothtie est bas sur l'incrustation d'une image dans un cran de tlvision. On va donc
commencer par choisir une tlvision .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 245/574

J'ai alors cherch une image relative la tlvision insrer dans cet cran. Allez savoir pourquoi, la premire ide qui m'est
venue est... le JT ! Et qui dit JT dit... PPDA .

Notre objectif sera le suivant : nous allons tenter de rduire la taille de cette image de sorte ce que ses nouvelles dimensions
nous permettent de l'insrer dans l'cran d'ordinateur. On va donc activer la transformation Homothtie avant de rtrcir l'image
puis de la placer au niveau de l'cran.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 246/574

Un nouvel exercice amusant !

Et si nous travaillions l'homothtie d'une toute autre manire ? On pourrait par exemple utiliser deux images aux sujets communs
mais aux chelles diffrentes...

Mais qu'est-ce qu'il est en train de me raconter, l... ?

Pour illustrer l'homothtie, victor m'a suggr un petit exercice de mise l'chelle. Il m'a fourni deux photos que je vous prsente
ci-dessous. Chacune d'elles prsente un appareil photo et une rgle. Votre mission, si vous l'acceptez, consiste "runir" ces
deux photos en une seule et mme image sur laquelle les appareils photos apparaitront la mme chelle, ceci parce que l'on va
faire superposer les mesures des deux rgles et pour que l'on se rende bien compte de leur diffrence de taille.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 247/574

Konica - vhf/victor

Minox - vhf/victor

N'hsitez pas travailler avec moi !


Tlcharger l'image KONICA
Konica.jpg
Tlcharger l'image MINOX
Minox.jpg
P our tlcharger les images, cliquez droit sur les liens puis "Enregistrer sous..."

Voici les consignes : on va chercher dans un premier temps superposer les deux images. Ensuite, pour russir l'exercice, nous
allons rduire l'image de l'appareil photo Minox l'aide de l'homothtie de sorte ce que les mesures de la rgle se superposent

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 248/574

celles de la rgle de l'image du Konica.

Veuillez tout d'abord crer une nouvelle zone de travail aux dimensions suprieures celles des deux images. Par exemple :
800*650px. On aura ainsi toute la place pour travailler .
Puis, veuillez copier et coller les deux images ci-dessus ou les ouvrir dans Photoshop pour les faire ensuite glisser dans la zone
de travail que vous venez de crer. Au final, la fentre de calques doit ressembler celle-ci :

Veillez ce que les deux calques des photos (Minox et Konica dans la fentre de calques ci-dessus) ne soit pas
verrouills ! Je vous signale aussi que le calque Minox doit figurer en tte de liste (pareil, comme sur la fentre de
calques d'au-dessus) dans la fentre de calque. Enfin, veuillez placer l'appareil photo Minox au-dessus de l'appareil
photo Konica dans votre zone de travail l'aide de l'outil Dplacement.

Nous allons maintenant rduire le calque Minox afin que les mesures de sa rgle se superposent avec celles de la rgle Konica.

Petit problme : la rgle Konica est totalement masque par le calque Minox qui figure en premier plan dans la fentre de calques.
Si vous avez bien suivi depuis le dbut, vous savez qu'il existe une solution trs efficace qui consisterait modifier la
transparence d'un calque, en l'occurrence celui de Minox, ceci dans le but de laisser apparaitre celui de Konica ... Je vous
invite alors rduire l'opacit du calque Minox 50% puis activer la transformation Homothtie sur ce mme calque.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 249/574

Nous allons utiliser l'homothtie afin de rduire l'image de l'appareil photo Minox pour que les mesures de sa rgle se
superposent celles de la rgle de l'appareil photo Konica. En d'autres termes, nous allons faire en sorte que les mesures 0 et 10
des deux rgles ne fassent qu'une.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 250/574

Allez-y, commencez. Utilisez l'homothtie afin de rduire proportionnellement (appuyer simultanment sur la touche Shift ou
Command) l'image Minox et rassembler les deux mesures de chaque image que je viens de vous donner. Voil o je veux en venir :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 251/574

Validez la transformation quand vous la jugez correcte puis rtablissez l'opacit de l'appareil photo 100%. Le travail est termin,
vous venez d'ajuster une image l'chelle d'une autre .

On a pu, ainsi, se rendre compte de la diffrence de taille entre l'appareil photo Konica (plus imposant) et l'appareil photo Minox
(plus petit) grce la transformation en homothtie .
Inclinaison
Ahhh, cette nouvelle transformation, elle va vous plaire, cela ne fait aucun doute ! Nous nous intressons dsormais la
transformation nomme Inclinaison.

Quand on clique dessus, nous n'avons priori rien de nouveau. On retrouve notre espce de cadre avec ses fameux petits
carrs transparents. Ce qui change, c'est quand on manipule ces petits carrs.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 252/574

Ici, il n'est plus rellement question de symtrie mais de redressement. Nous allons tout bonnement incliner le calque (pas
difficile deviner, je le conois ), c'est--dire que l'on va le pencher et pourquoi pas mme le coucher.

Un exemple arrive, n'hsitez pas travailler avec moi !


Tlcharger le fichier source
Inclinaison.psd

Voici l'image sur laquelle je vais vous proposer d'effectuer une inclinaison.

Une fois la transformation Inclinaison choisie, on l'active :

En maintenant le clique sur le carr transparent situ en haut au milieu de l'image puis en dplaant le curseur vers la droite, on
remarque que le haut du calque se dplace en consquence sans que le bas ne bouge.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 253/574

En transformant l'image partir d'un des carrs situs en son milieu (comprendre tous les carrs sauf ceux qui se situent dans les
coins de l'image), on ne travaille que sur l'axe des abscisses ou l'axe des ordonnes. Sur cet exemple, nous avons travaill sur
l'axe des abscisses (nous avons effectu un transformation de gauche droite). On remarque alors que le dplacement a t
totalement linaire (si nous avions cliqu sur le carr transparent situ au coin infrieur droite par exemple, nous aurions pu
effectivement travailler sur l'axe des ordonnes et des abscisses car nous aurions pu effectuer un dplacement de haut en bas et
de gauche droite).

Continuons. L, on peut dj dire que l'image est incline, mais allons accentuer cette inclinaison en travaillant sur ce petit carr.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 254/574

Je dplace alors ce carr vers le bas.

Je vous invite comparer les deux dernires images. La diffrente n'est pas trs importante, mais clairement visible. N'oubliez pas
qu'il faut taper sur la touche Entre de votre clavier (ou cliquer sur le bouton prvu cet effet dans la barre des options) pour
appliquer la transformation.

Pour le plaisir, j'ai ajout une petite ombre porte l'image pour lui donner un peu plus de style.

Qu'est-ce que cela donne si on transforme le calque partir des coins de l'image ?

En travaillant avec les coins de l'image, l'inclinaison sera encore plus prononce. Je dirais mme que l'image sera couche, on
donnera l'impression qu'il existe un sol invisible sur lequel l'image s'est pose.

Je vous propose un petit essai, toujours sur la mme image bien entendu.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 255/574

Nous allons maintenir le clique sur le coin infrieur droite de l'image.

Puis, nous dplaons notre curseur comme nous l'avons appris. On note encore une fois la linarit sur les deux axes .

On y ajoute un petite touche personnelle, et voil le rsultat ...

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 256/574

Plutt sympa cet effet de perspective, n'est-ce pas ?


Allez, on passe au huitime et dernier chapitre de cette premire partie. Courage !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 257/574

Techniques de transformation sur les axes X et Y


(2/2)
Suite et dernier chapitre de cette premire partie portant toujours sur les techniques de transformation sur les axes X et Y.

Plus on avance et plus les transformations vont s'avrer importantes. Nos premires transformations taient relativement
simples, nous dirons que l'inclinaison tait dj plus labore. Et bien, avec la torsion (premire transformation de ce nouveau
chapitre), on va aller encore plus loin et vous n'tes pas au bout de vos surprises !
Torsion
Vous savez maintenant parfaitement o se trouvent les transformations, je n'ai pas besoin de vous le rappeler . Nous allons
travailler avec la "Torsion".

Avant de cliquer o que ce soit, voici l'image sur laquelle je souhaite vous prsenter mon exemple :

N'hsitez pas travailler avec moi !


Tlcharger le fichier source
Torsion.psd

Maintenant, on peut cliquer sur la transformation "Torsion" .

Une nouvelle fois, on retrouve le cadre avec ses petits carrs transparents. Rien de nouveau donc, nous allons devoir travailler
avec ces derniers comme nous venons tout juste de le faire avec la transformation prcdente.

En quoi consiste cette transformation ?

On appelle "torsion" l'action qui consiste tordre quelque chose. Cela veut dire que nous allons apprendre ... tordre un calque
(si a, c'est pas tordu !) .

Le principe est toujours le mme, on va choisir un carr transparent parmi les 8 visibles, maintenir le clique dessus puis dplacer
le curseur de notre souris pour effectuer la torsion. Exemplifions .

J'ai dcid que j'allais tordre l'image partir de son coin suprieur gauche.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 258/574

D'un mouvement de souris qui m'a permis de dplacer son curseur et donc le coin suprieur gauche de l'image vers l'intrieur de
cette image, je suis parvenu la tordre de cette manire.

Mais je ne me suis pas arrt l ! Avant de valider cette transformation, j'ai entrepris une nouvelle torsion au dpart du coin
infrieur droite de l'image.

J'ai ensuite effectu la mme opration que pour ma premire torsion, c'est--dire que j'ai dplac le petit carr transparent vers
l'intrieur de l'image.

Voici le rsultat final :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 259/574

Je n'ai pas l'impression d'avoir vritablement tordu l'image, l...

Si l'image finale n'y prend l'apparence, nous avons pourtant bel et bien effectu une torsion. C'est--dire que nous avons tordu
l'image sans qu'au final, on puisse se rendre vritablement compte qu'elle ait t tordue. Du coup, on a donn de nouvelles
apparences et perspectives nos images, regardez.

Je trouve cette transformation vraiment passionnante. La diversit des formes qu'il nous est possible d'effectuer m'incite tout
particulirement en faire usage dans mes projets . D'ailleurs, est-ce que vous vous souvenez de l'exemple que je vous avais
propos dans le chapitre des slections ?

Comment a, quel exemple ? Cet exemple, pardi ! (section "Transformer le contenu d'une slection") On avait incrust l'image
d'une pizza dans un cran New-Yorkais, un peu l'image de ce que l'on a fait avec notre PPDA national. Simplement,
l'incrustation dans l'autre exemple est plus complexe dans la mesure o l'cran est quelque peu inclin. Enfin, vous savez
comment faire maintenant, on peut soit utiliser l'inclinaison ou, si l'angle ne nous le permet pas, user de la torsion .
Perspective
www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 260/574

La transformation suivante ne porte pas son nom au hasard : elle consiste donner de la profondeur au calque de sorte ce
qu'un effet de perspective apparaisse.

La perspective, tu dis ?

Oui, la perspective. S'il s'agit d'un terme utilis plusieurs escients, nous utiliserons la dfinition de la perspective gomtrique
(comme c'est tonnant !). Voici comment Wikipdia la dfinit :

Citation : Wikipdia
La perspective gomtrique est une technique de reprsentation d'objets en 3 dimensions sur une surface et tenant compte
des effets de l'loignement et de leur position dans l'espace par rapport l'observateur.

Ne vous en faites pas, moi non plus je n'ai pas compris cette dfinition la premire fois que je l'ai lue . En prenant le temps de
la rflexion, on peut russir en tirer deux-trois informations cl : 3 dimensions, loignement et position. Ce sont les mots cls de
cette dfinition et je vous propose un exemple pour l'illustrer, cela devrait vous parler davantage .

Avant tout, je dois vous faire part d'une information essentielle pour comprendre comment fonctionne la perspective. Il va nous
falloir absolument imaginer un point de fuite. Il s'agit d'un point inexistant et imaginaire sur lequel nous nous baserons pour
concevoir la perspective. Voyez le schma ci-dessous.

Ce sont deux lments permettant de transformer une image et lui donner de la perspective.

En haut, il y a le point de fuite : il n'existe pas, vous tes censs l'imaginer. S'il apparait sur cette image, c'est bien entendu pour
l'exemple .

En bas, il y a le carr gris. Il s'agit de notre image, c'est elle que nous allons transformer. Je l'ai nomme Figure.

Nous allons commencer par activer la transformation en cliquant sur "Perspective" dans le menu dition > Transformation.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 261/574

Ainsi, en dplaant l'un des coins suprieurs de la figure, ici le coin gauche...

... vers le point de fuite que l'on imagine, on va galement engendrer le dplacement simultan du coin oppos qui va alors lui
aussi s'approcher vers le point de fuite et ce de manire totalement symtrique.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 262/574

Ainsi, on cre une perspective car les cts gauche et droit du carr se dirigent vers ce point de fuite. Pour que cet effet de
perspective soit encore plus marquant, on peut rapprocher les deux coins du carrs de sorte ce qu'ils se touchent carrment.

La perspective prend alors tout son sens quand on a donn de la profondeur l'image.

Gn ? Je ne vois en aucun cas un effet de profondeur dans cette image. a fait juste un triangle .

Cela ne se voit pas car l'image est grise et ne signifie rien du tout. En reprenant le mme exemple mais avec une image avec un
contenu, une route par exemple, on peut obtenir un rsultat tout--fait convenable.

N'hsitez pas travailler en mme temps que moi !


Tlcharger le fichier source
Route.psd

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 263/574

Voici une route des plus traditionnelles. Comme je vous le disais, en y ajoutant de la perspective, la route prend une toute autre
apparence, on a alors l'impression qu'elle s'loigne et que l'image elle-mme est en 3D (les fameux mots cls !) :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 264/574

Au fait, on n'est pas oblig d'imaginer un point de fuite au centre de la figure. En effet, en travaillant avec les carrs transparents
du milieu (c'est--dire tous les carrs transparents qui ne sont pas aux coins de l'image comme ceux que l'on vient tout juste
d'utiliser), on peut dplacer le point de fuite imaginaire. Regardez :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 265/574

La perspective est la mme. J'ai simplement modifi la trajectoire de la route en fonction d'un nouveau point de fuite. Pour
modifier cette trajectoire, j'ai dplac ce carr transparent :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 266/574

Pas mal, n'est-ce pas ?


Dformation
Eh bien mes amis, il faut dire que tout cela passe bien vite. On en est dj la dernire transformation ! Dsormais, on va
travailler avec la dformation .

Le plus gros de notre temps, nous avons appris dplacer une image dans l'espace. Nous l'avons alors incline, couche,
tordue, perspective bref, de bien belles choses, mais nous ne l'avons pas encore vritablement dforme.

Tu plaisantes ? Regarde donc tes silhouettes noires, elles sont toutes dformes !

Oui, c'est vrai, mais vous allez vous rendre compte que les possibilits sont plus nombreuses avec la dformation et que les
rsultats sont franchement plus labors.

Par dfinition et sur Photoshop, on dit qu'une dformation est la modification de la forme ou de la taille dune image. C'est donc
ce que l'on va faire, ensemble, en travaillant sur cette image :

N'hsitez pas travailler en mme temps que moi !


Tlcharger le fichier source
Firefox.psd

Souvenez-vous, pour chacune des transformations tudies, chaque fois que l'on en activait une, notre image se voyait entoure
de ce cadre :

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 267/574

Eh bien, figurez-vous que cela change lgrement quand on active la dformation.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 268/574

Tout d'abord, il n'y a plus huit carrs transparents mais seulement quatre ! On les retrouve chaque coin de l'image. D'autre part,
on remarque l'apparition de nouveaux lments, je veux parler de la grille qui traverse l'image et qui relie chacun de ces nouveaux
points gris :

Cette grille, elle est l'atout principal de la dformation. C'est une fonctionnalit que l'on ne connait pas (elle n'est pas nouvelle
pour rien) et le moins que l'on puisse dire, c'est qu'elle en a dans le ventre !

En activant la dformation (je dis bien en l'activant seulement), on va rendre notre calque lastique. On va donc pouvoir l'tirer
notre guise pour le dformer (d'o le nom dformation), et pour cela, on va justement faire usage de cette grille.

Le principe de la dformation, c'est d'utiliser les diffrentes parties de la grille que l'on va alors tirer avec le curseur de notre
souris. Avant, nous ne pouvions utiliser que les huit carrs transparents suivants :

Dsormais, on va pouvoir utiliser entirement l'image, c'est--dire la dformer dans sa totalit. Qu'il s'agisse des petits carrs
transparents, des points gris ou de l'image en elle-mme (c'est--dire l'intrieur mme de cette image), vous effectuerez bel et
bien une dformation !

Avant toute manipulation, je vous signale que j'ai nomm certains lments de la nouvelle grille.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 269/574

Dans l'exemple ci-dessous, j'ai maintenu le clique sur le carr transparent du haut gauche de mon image et ai dplac mon curseur
vers son intrieur.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 270/574

La dformation s'est correctement droule comme vous pouvez le voir. On a tir le coin du haut gauche de l'image vers son
intrieur comme convenu. On note cependant une nouveaut lie aux petits points gris : ils n'ont pas bougs et sont toujours
relis avec le carr transparent.

En fait, on va les manipuler pour changer la courbe de l'image qui se situe entre le carr transparent que nous venons de dplacer
(il s'agit du carr que j'ai nomm C1) et les carrs transparents nomms C2 et C4. Si vous voulez tout savoir, nous aurions trs
bien pu les modifier avant mme d'avoir touch au carr transparent.

videmment, on utilise ce point gris de la mme manire que les carrs transparents, il suffit juste de maintenir le clique dessus et
de dplacer son curseur .

On peut remarquer que la courbe a bel et bien t modifie !

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 271/574

Je vous ai concoct une petite image anime pour que vous puissiez comparer la courbe avant et aprs la dformation du point
gris.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 272/574

On ne va pas s'arrter l. Un autre avantage que prsente la dformation est de pouvoir dformer l'intrieur de l'image. Cela veut
dire que l'on va procder exactement pareil qu'avec les petits carrs transparents et les points gris, sauf que notre point de
rfrence cette fois-ci, ce sera la grille qui traverse l'image.

Du coup, en dformant le milieu de l'image, on note une dformation de la grille :

Aucun carr ni point n'ont t dplacs sur cet exemple. Je n'ai fait que maintenir le clique en plein milieu de l'image et le dformer
en bougeant mon curseur. Ainsi, on se rend compte quel point la dformation est intressante. On utilise trs souvent cette
fonctionnalit de Photoshop pour des images abstraites mais aussi normment dans le domaine de la dformation
photographique .

Histoire de vous inciter essayer la dformation autant que vous le pouvez, je vous propose un exemple. Je suis parti de ce rond
:

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 273/574

Avec un peu de jugeote, on peut laisser parler sa crativit la plus profonde .

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 274/574

Plus srieusement, j'espre que vous avez saisi quel point cette transformation est puissante. N'hsitez vraiment pas faire des
essais, vous serez sans aucun doute souvent amens utiliser la dformation .
Transformation manuelle
Dernire sous-partie de ce dernier chapitre de cette dernire partie. Pfiou, si a c'est pas la classe absolue .

Bon, mme si je redoute vos ractions, je dois vous faire une confidence. Allez, je me lance. Ce que j'essaie de vous dire, c'est
que... et bien, je n'utilise absolument jamais les transformations que nous venons d'tudier pour en raliser.

Tu me fais marcher ? *Rire jaune*

Je suis au regret de vous annoncer que c'est la stricte vrit. Enfin, quand je dis que je n'utilise pas les transformations, disons
que je ne passe pas par le menu "Transformation", j'utilise un moyen beaucoup plus simple, j'utilise la Transformation manuelle.

Bon Dieu, si c'est plus simple, pourquoi nous avoir enquiquin avec toutes tes transformations la noix ?

Du calme ! Je ne suis pas fou. Si vous voulez tout savoir, la transformation manuelle regroupe absolument toutes les
transformations que nous avons jusqu'ici tudies, qu'il s'agisse de la rotation, de l'inclinaison ou bien mme de la dformation. Il
s'agit d'un tout-en-un que je prfre personnellement utiliser, aprs je n'oblige personne me suivre, chacun procde comme il le
veut.

Pour activer la transformation manuelle, il faut ouvrir le menu dition et cliquer sur "Transformation manuelle" (juste au-dessus
du menu "Transformation").

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 275/574

CTRL + T >

Command (ou Pomme) + T

Une fois active, la transformation laisse apparaitre le cadre suivant.

www.siteduzero.com
Partie 1 : Dcouverte de Photoshop (acquisition des bases) 276/574

Comme vous pouvez le remarquer, il s'agit du premier cadre que l'on ait connu avec la plupart des transformations tudies
(finalement, seul le cadre de la dformation changeait). Et bien figurez-vous que cette fois-ci, vous allez pouvoir effectuer toutes
les modifications jusqu'ici tudies rien qu'avec ce cadre et les touches de votre clavier (quand c'est ncessaire d'en utiliser).

Par exemple, en maintenant le clique sur l'un des carrs transparents situs sur les coins de l'image suivante et en appuyant
simultanment sur la touche Shift du clavier, nous serons en mesure d'effectuer une transformation en homothtie. De mme, si
l'on r-effectue cette mme opration mais maintenant le clique sur le carr transparent situ en haut du calque au niveau de son
bord et en appuyant cette fois-ci sur les touches Shift et Ctrl (ou Command/Pomme), nous aurons la possibilit d'incliner le
calque .

Voici la liste des diffrents raccourcis connaitre (aprs avoir activ la transformation).

Homothtie : ne ncessite aucun raccourci. Il suffit de cliquer sur l'un des coins de l'image (et d'appuyer sur la touche
SHIFT pour la proportionnalit).
Rotation : ne ncessite aucun raccourci. Il suffit de maintenir le clique n'importe o en dehors du cadre puis de dplacer
son curseur. Vous dfinissez alors trs prcisment l'angle de la rotation .
Inclinaison : SHIFT + CTRL (ou SHIFT + COMMAND si vous tes sur MAC)
Torsion : CTRL (ou COMMAND si vous tes sur MAC)
Perspective : aucun raccourci.
Dformation : aucun raccourci clavier. Cependant, vous trouverez le bouton dans la barre des options permettant
d'activer la transformation.

Et voil que se termine ce dernier chapitre . Le moins que l'on puisse dire, c'est qu'on en aura appris des choses !

Selon moi, les infographistes ont constamment recours aux transformations dans leurs projets, mme quand a parait improbable
au dpart. C'est tout du moins mon cas. D'ailleurs, je n'ai pas besoin de vous dire qu'il ne faut en ngliger aucune, hein .

Ce qui est gnial, c'est que l'on est en plein dans la modification de calque. Et maintenant que l'on est dans le vif du sujet, nous
ne ferons que cela dans les prochains chapitres ! Modifications, modifications et modifications !

En mme temps, y lire le titre de la prochaine partie, c'est facile deviner...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 277/574

La premire partie de ce tutoriel s'achve ici. On peut dire sans retenue que vous n'tes maintenant plus un novice. Dbutant,
certes (vous venez tout juste de dbuter aprs tout !), mais ayant acquis une premire exprience et donc certaines bases sur
Photoshop.

Nous allons approfondir nos connaissances dans la prochaine partie en s'intressant un domaine particulirement friand du
logiciel Photoshop, je veux parler de la retouche photographique.

Je ne vous en dis pas plus, si cela vous intresse, vous n'avez qu' continuer de lire le tutoriel .

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 278/574

Partie 2 : La retouche photographique (nouvelles notions en perspective)

J'aime supposer que si vous suivez ce cours, c'est pour apprendre maitriser le logiciel Adobe Photoshop, mais aussi et
surtout parce que vous envisagez de l'utiliser pour vos projets. Quel qu'ils soient, vous serez un jour amens utiliser des outils
permettant de modifier une image.

Par exemple, un domaine trs connu est celui de la retouche photographique, dont usent d'ailleurs les magazines "people" la
majorit de leur temps. Ces magazines ont recours aux outils que je nomme "outils de retouche", car ils ont pour fonctionnalit de
modifier le contenu d'un calque (il ne s'agit pas d'ajouter un nouvel lment ou d'effectuer une modification automatique (
l'image des options de fusion), mais bel et bien de transformer le contenu).
Le plus souvent, les images sont travailles de sorte ce qu'elles ne paraissent pas retouches. On pourrait alors trs facilement
vous tromper en supprimant par exemple les rides d'un homme g ou encore en ajoutant du volume aux cheveux de Britney
Spears.

Amy Dresser

Vous vous en rendrez compte suffisamment vite, ces outils sont vraiment impressionnants .

La minute thorique, pour vous en faire voir de


toutes les couleurs !
Tiens, vous tes toujours avec moi ? Quelle assiduit, je constate que votre soif d'informations n'est pas en reste et cela me
convient parfaitement, j'ai encore un tas de trucs vous raconter .

D'un point de vue technique, savez-vous ce qu'est une couleur ?


Je veux dire... vous savez utiliser certains outils du logiciel et quelques une de ses fonctionnalits et c'est dj un trs bon dbut,
croyez-moi. Toutefois, on ne se dit pas infographiste avec si peu d'arguments. Savoir utiliser un logiciel, c'est bien. Connaitre la
technicit de ce que vous effectuez, c'est vous permettre de comprendre ce que vous faites et comment cela fonctionne, un peu
l'image de ce que vous avez appris sur le pixel, la rsolution et le matriciel.

Par consquent, avant de dbuter le cours (qui porte davantage sur l'utilisation et le paramtrage des couleurs d'une image, soit
dit en passant), je vous ai concoct une petite minute thorique, comme vous les aimez !
Je dois dire que le titre de cette partie est un peu provocateur, je suis convaincu que vous savez ce qu'est une couleur.
Simplement, je souhaite aller plus loin dans la rflexion et dterminer le pourquoi du comment. C'est la fois bon pour vous et
fondamental si vous voulez un jour vous vanter d'tre infographiste.

Dans la premire partie, nous avons vu l'essentiel en ce qui concerne la base des bases pour l'utilisation des outils et
fonctionnalits de Photoshop. Si vous voulez, c'tait une "partie introductive". Toutefois, on a pu voir quel point la notion de
couleur pouvait devenir complexe, notamment depuis que l'on a utilis les fameux codes hexadcimaux. Un petit point sur les
couleurs ne serait donc pas une mauvaise chose.

Plus qu'un cours thorique banal comme on en trouve un peu partout (mme l'cole), il s'agit d'une vraie mine d'information qui
ne fera pas de mal votre culture personnelle.
C'est quoi, une couleur ?
Un jour d'cole, et plus prcisment pendant un cours d'arts plastiques, le professeur nous avait demand, mes camarades de
classe et moi, si nous savions ce qu'tait une couleur.

"Une couleur ? Tss, fastoche."

Alors, tout le monde (moi compris) s'est empress de demander la parole pour donner la rponse. Pourtant, quand le professeur
m'a interrog, je me suis retrouv absolument sans rponse.

"Une couleur ? Hum... Je sais ce que c'est... Mais pourtant, je suis incapable d'expliquer quoi que ce soit ..."

Je ne vous raconte pas la honte . Et si c'tait mon tour de vous demander si vous savez ce qu'est une couleur ? Sauriez-vous

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 279/574

vraiment me rpondre ? Je vais faire en sorte de vous viter ce supplice et vous proposer une explication avec des mots simples
et accessibles tant la dfinition scientifique est trop complexe mon got.

Bon, vous le savez maintenant, je ne suis pas trs dou pour les dfinitions. Celle-ci est tire de l'encyclopdie Wikipdia, comme
j'ai dsormais l'habitude de le faire .

Citation : Wikipdia
La couleur est une sensation qui provient de la capacit de l'il humain de distinguer trois analyses diffrentes d'une vue : la
vision rouge, la vision verte et la vision bleue.

La combinaison de ces trois visions permet de voir en couleurs.

En langage informatique, on nomme une telle combinaison un mode colorimtrique. Nous en avons dj vaguement entendu
parler dans le chapitre portant sur la cration d'une zone de travail . On prsente les modes colorimtriques sous leurs
abrviations respectives :

RVB (du franais Rouge-Vert-Bleu)


RGB (de l'anglais Red-Green-Blue)

De manire mtaphorique, on peut dire que l'il humain est configur au mode colorimtrique RVB. Il s'agit donc d'un mode
"naturel" et commun tous.
Le mode RVB
Comment fonctionne le mode RVB ?

Le mode RVB est dfini par trois couleurs : le rouge, le vert et le bleu (au risque de me rpter). Ce sont les couleurs primaires
du RVB (c'est--dire ses couleurs d'origine).

Lorsque l'on mlange ces trois couleurs entre elles (on appelle cela une synthse additive, mais je ne vous demande pas de
retenir ce terme), on engendre l'apparition de nouvelles couleurs : ce sont les couleurs secondaires. Par exemple, si on mlange le
rouge et le vert, on obtient du jaune. De mme, si on mlange le rouge mais avec le bleu cette fois, on obtient du magenta. Mais
ne vous y trompez pas : cela fonctionne si et seulement si les couleurs proviennent d'une source lumineuse. On ne parle donc
pas de peinture ou d'encre, juste de lumire.

Afin de gnrer diffrents tons de couleur, par exemple du jaune fonc ou du jaune clair, on va jouer avec l'intensit des
couleurs primaires.

Leur quoi ? Qu'est-ce que c'est que a ?

Oui, chaque couleur primaire du mode RVB et d'un quelconque autre mode colorimtrique d'ailleurs est caractrise par son
intensit. Pour le mode RVB, on dfinit cette intensit l'aide de valeurs allant de 0 255 pour chacune d'elles.

Rouge : 0 (nulle) 255 (max.)

Vert : 0 255

Bleu : 0 255

Il existe un schma qui permet de reprsenter graphiquement la combinaison de chacune des couleurs. A premire vue, il semble
un peu complexe comprendre mais avec un peu de concentration, vous russirez le dchiffrer :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 280/574

Je n'y arrive pas, je ne comprends absolument rien... a veut dire quoi, tous ces codes ?

Allez, un petit effort. Prenez 5 minutes pour bien analyser le schma et le comprendre. Tout en haut, au-dessus de la couleur
rouge, il est indiqu :

R : 255
V: 0
B:0

Ici, l'intensit du rouge est maximale (elle a atteint la valeur max. de 255). A contrario, celle des couleurs vert et bleu est nulle, c'est
pourquoi il n'y a que le rouge qui apparait. C'est aussi le cas pour le vert (en bas gauche) et le bleu (en bas droite).

D'accord ! Et concernant les trois autres couleurs, ce sont des combinaisons, c'est bien a ?

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 281/574

Oui, pour obtenir le cyan (en bas du schma), on a combin le vert et le bleu. Du coup, si l'on regarde le code d'intensit, a
donne :

R : 0 (pas de rouge du tout)


V : 255
B : 255

Les valeurs du vert et du bleu sont maximales tandis que celle du rouge est nulle. C'est ainsi que le Cyan est form. Et quand on
mlange carrment les trois couleurs primaires (donc que l'on mlange le rouge, le vert et le bleu, tous trois en intensit maximale
255), a donne du blanc ! Oui, oui, du blanc !

Attention, je vous rappelle que les couleurs RVB sont visibles par l'humain partir du moment o ils sont tirs d'une source
lumineuse. Du coup, si vous allumez deux lampes torches, l'une dont l'clairage est vert et l'autre dont la lumire mise est bleue,
et que vous ciblez les deux lampes un mme endroit, vous laisserez apparaitre non pas du vert ni du bleu, mais... du cyan.
Et comme les pixels de votre cran envoient de la lumire, on peut facilement en dduire que les pixels sont "cods" en... RVB,
c'est bien, vous suivez !
Le mode CMJN
Tu veux dire qu'il existe un autre mode colorimtrique diffrent du RVB ?

Si vous voulez tout savoir, il existe bien d'autres modes colorimtriques que le RVB. Sur Photoshop, la liste est relativement
longue, je peux nanmoins vous en citer quelques uns pour l'exemple, comme le RVB, les niveaux de gris, les couleurs indexes
et... le CMJN !

Il s'agit d'un mode que l'on appelle galement quadrichromie et qui s'crit CMYK en anglais. Si RVB signifie Rouge-Vert-Bleu, le
CMJN regroupe quatre teintes :

Cyan
Magenta
Jaune
Noir

Attends, attends... les trois premires de ta liste sont les couleurs secondaires du RVB, non ? Celles qu'on obtient en
combinant ses couleurs primaires !

D'un point de vue schmatique, on peut effectivement inverser toutes les couleurs du mode RVB pour obtenir celles du mode
CMJN. Ainsi, on appellera la combinaison des couleurs du CMJN une synthse soustractive, terme que je ne vous demande pas
de retenir encore une fois.

Un mode "dpass"

Le mode CMJN n'a pas connu le jour tout de suite. En ralit, au dpart, le mode n'tait pas compos de quatre couleurs mais de
trois seulement : on connaissait alors le mode CMJ pour Cyan-Magenta-Jaune (donc pas de noir).

Comment on faisait, alors, sans noir ?

Vous vous mprenez : le noir existait bel et bien. Et pour l'obtenir, c'tait finalement assez simple, il suffisait de combiner les trois
couleurs primaires du CMJ que l'on connait maintenant : le cyan, le jaune et le magenta. Un peu l'instar du blanc que l'on
obtient avec les couleurs primaires du RVB d'ailleurs. Regardez plutt la reprsentation graphique du mode CMJ, cela vous
parlera peut-tre plus tant donn qu'il ressemble comme deux gouttes d'eau celui du RVB :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 282/574

Nanmoins, on a constat que le mode CMJ n'tait pas particulirement efficace, du moins on s'en est aperu quand on l'utilisait
pour imprimer. En fait, l'explication, c'est que les cartouches d'imprimante n'taient pas entirement remplies de leurs couleurs
respectives, elles ne l'taient pas 100% contrairement ce que peut afficher le schma ci-dessus (qui est correct, je vous
l'assure : c'est juste l'impression que l'on se rendait compte du contraire). Problme, si ces trois couleurs n'ont pas 100% de leur
intensit, forcment, on n'a pas 100% de noir (mais plutt du gris).

Ainsi, pour palier ce problme de noir pas vraiment noir, il a juste fallu rajouter du noir pur, d'o ce nouveau mode que l'on
connait et utilise aujourd'hui, le CMJN .

Ici encore, on pourrait reprsenter graphiquement le CMJN et ses combinaisons de couleurs avec un schma assez diffrent
finalement des deux autres puisqu'on n'a pas trois couleurs, mais quatre : le cyan, le magenta, le jaune et... le noir !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 283/574

Mais pourquoi ne pas utiliser le RVB pour imprimer ?

On peut trs bien utiliser le RVB pour imprimer. Du moins, en soi, c'est faisable. Mais on a tendance utiliser le mode CMJN pour
imprimer car il est fait pour a. Disons que ce n'est pas une obligation, mais une possibilit. En fait, il vaut mieux qu'une image
imprimer soit code au mode CMJN car le rsultat sera plus optimal. Pourtant, quand vous prenez une photo avec votre appareil
photo, vous allez capter les lumires de l'environnement et crer une photo numrique, c'est--dire au mode RVB...

Hum... donc je peux imprimer une photo prise avec mon appareil photo, mme si cette photo est en RVB ?

Oui, de toute manire votre photo sera forcment en RVB si elle sort de votre appareil. Pour que l'impression fonctionne, il existe
une automatisation qui consiste convertir votre image RVB en une image CMJN. C'est d'ailleurs pour cela que je vous disais
qu'il n'tait pas obligatoire d'avoir une image au mode CMJN pour imprimer, mme si techniquement l'image sera imprime avec ce
mode grce l'automatisation.
Notez toutefois que, d'une manire gnrale, les professionnels de l'imagerie ont tendance convertir eux-mmes leurs travaux
RVB au mode CMJN (comprendre "manuellement") car l'automatisation peut engendrer une perte de qualit suffisamment
importante l'impression pour qu'une telle dmarche soit ncessaire. D'ailleurs, la majorit des imprimeries vous demandera
coup sr des images CMJN.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 284/574

La fentre Couleur sur Photoshop


On peut dire que la minute thorique est plus ou moins passe maintenant car vous allez devoir ouvrir Photoshop pour cette
sous-partie. Avant cela, vous auriez trs bien pu suivre ce chapitre sans mme l'avoir ouvert au pralable, hein.

On va se concentrer quelques minutes sur la palette flottante "Couleur" que j'appellerai fentre Couleur tout au long de cette
partie pour que vous ne la confondiez pas avec un autre lment que nous allons aborder en mme temps. Vous trouverez la
fentre Couleur droite de votre logiciel, moins que vous ayez dispos votre espace de travail votre sauce (le mec qui ne
lche rien).

Au premier abord, vous ne devriez pas tre trop perdu par l'interface de cette fentre. Si c'est le cas, ce n'est pas trs grave je
vous rassure. On a de toute faon dj fait une belle avance, moi qui disais il y a encore quelques chapitres que vous serez plus
l'aise avec l'interface de Photoshop au fur et mesure que vous lirez le tutoriel, je suis sr que c'est un peu le cas.

Comment lire et comprendre la fentre Couleur ? C'est plutt simple en fait, d'ailleurs vous connaissez dj peu prs tous les
lments qui la composent. Cette fentre n'est en fait qu'un concentr de tous les lments que l'on retrouve dans la palette de
couleurs que nous utilisons pour ouvrir le slecteur de couleur et en dfinir une. Mieux encore, elle est un raccourci vers ce
slecteur.

La fentre Couleur dsigne la palette flottante situe droite de votre logiciel, c'est elle qui fait l'objet de ce chapitre. A
ne pas confondre avec la palette de couleurs dont nous allons parler tout de suite !

A gauche de la fentre, juste en-dessous de l'onglet "Couleur", vous apercevez ceci : . Si vous avez bien suivi le cours,

vous vous souviendrez ce sont les couleurs de premier plan et d'arrire-plan. Il s'agit tout bonnement d'un raccourci, car on
retrouve cette mme palette dans la boite outils :

Sur cette image...

La couleur de premier plan est le noir.


La couleur d'arrire-plan est le blanc.

Je vous invite cliquer sur l'aperu miniature de la palette de couleurs afin de remettre par dfaut les couleurs de premier et
d'arrire-plan. En cliquant, ce sont les couleurs noir et blanc qui remplaceront les prcdentes.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 285/574

Bon, essayons de creuser un peu et de voir comment fonctionne le reste de cette fentre. Nous nous intresserons aux trois
lments ci-encadrs :

Chaque ligne se prsente par une lettre suivie d'une jauge/frise et d'un champ blanc au chiffre 0. Les lettres reprsentent l'initiale
des couleurs primaires du RVB, ce qui ne devrait pas vous tonner suite ce que l'on vient d'tudier sur les modes
colorimtriques.

Les jauges permettent de dfinir l'intensit des couleurs. En dplaant le curseur de la jauge de gauche droite, on rduit ou
augmente l'intensit de couleur de 0 255. On peut aussi taper une valeur dans le champ blanc prvu cet effet, il suffit de
remplacer le 0.

Par exemple, en inscrivant la valeur 255 la couleur rouge (R) et 255 la couleur bleue, comme ceci...

... on obtient, oh, tiens, du magenta ! Cela ne vous rappelle rien ? Oui, rouge + bleu = magenta !

Finalement, c'est assez simple, vous inscrivez les valeurs de chaque couleur (rouge et/ou vert et/ou bleu) et vous obtenez leurs
couleurs secondaires en fonction de l'intensit des couleurs que vous aurez dfinies grce la jauge ou le champ blanc.

Terminons avec le dernier lment de la fentre Couleur. Je veux parler parler de la petite frise colorimtrique que l'on trouve tout
en bas :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 286/574

C'est un vrai petit bijou car, en plus d'tre super fonctionnelle, cette frise constitue la miniature du slecteur de couleurs. Elle
recense ici toutes les couleurs existantes du mode RVB : on a alors le rouge, le jaune, le vert, le cyan, le bleu et le magenta, sans
parler du noir et du blanc. On les aperoit ici mme sur l'horizontale de la frise :

A l'image du slecteur de couleurs, on peut dfinir la luminosit et la saturation des couleurs. Sur le slecteur de couleurs, on
faisait cela en dplaant le rond transparent respectivement la verticale et l'horizontale :

Avec ce slecteur miniature, c'est la mme chose. Je dirais mme que c'est plus simple (mais pas forcment trs prcis), on clique
sur une couleur et hop, elle apparait en couleur de premier-plan dans la palette de couleurs. Et ainsi, les couleurs R V et B sont
paramtres comme le montre l'image ci-dessous.

N'essayez mme pas de rentrer une valeur suprieure 255, quelle que soit la couleur, qu'il s'agisse du bleu, du rouge
ou du vert, cela n'aura aucun effet. Ou du moins si, vous affolerez Photoshop qui vous lancera de pleine face :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 287/574

Pour info, si l'on pouvait aller plus loin que le rouge dans la jauge (le rouge de gauche), on obtiendrait de l'infrarouge.
De mme, en allant au-del du violet ( droite), on obtient... l'ultraviolet !

Notre petit tour de fentre n'est pas encore termin. Avez-vous remarqu le petit point d'exclamation accompagn d'un carr de
couleur en bas gauche ?

En fait, ce petit panneau "attention" vous indique que la couleur en vigueur n'est techniquement pas imprimable. Tout du moins
c'est ce que constate Photoshop, lui qui n'en a que pour le CMJN quand il s'agit d'imprimer. Cet avertissement est trs utile si
vous projeter d'imprimer votre document, cela vous permet de savoir si vos couleurs passeront correctement ou non. De ce fait,
Photoshop met une autre fonctionnalit votre disposition : il vous gnre automatiquement une alternative la couleur non-
imprimable que vous avez choisie. D'o le petit carr de couleur que vous trouverez juste ct du panneau de signalisation sur
lequel il faut cliquer pour le rendre effectif . En rsum :

Je dfinis une couleur via mon slection de couleurs.


Cette couleur n'est pas gre par le mode CMJN, donc non-imprimable sans perte de qualit.
Alors, le panneau "attention" vous signale que Photoshop vous suggre une nouvelle couleur proche de la vtre que
vous tes libre de choisir en cas d'impression.

Je vous avais promis qu'on allait parler de couleur, je ne vous ai pas menti ! Ceci dit, je suis convaincu que vous avez appris des
choses, aujourd'hui .

Le cours est loin d'tre termin, je dirais mme qu'il commence vritablement maintenant. On est parti pour travailler les couleurs
d'une photo pendant quasiment toute cette partie, mme si bien entendu d'autres surprises vous sont rserves .

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 288/574

Travailler la chromie
Je ne vous apprends rien en vous disant que Photoshop est troitement li la photographie. Quiconque est photographe a dj
touch au moins une fois dans sa vie le logiciel la plume. Pourquoi ? Parce que photographie rime trs souvent (pour ne pas
dire constamment) avec retouche. D'o le terme de retouche photographique devenu courant dans la vie de tous les jours.

Les lecteurs moins avertis se demanderont lgitimement pourquoi ils utilisent Photoshop et pas un autre. A vrai dire, s'il s'agit
d'un choix qui leur est propre et bien qu'il existe des alternatives (parfois mme gratuites !), on a tendance utiliser Photoshop
plus qu'un autre car il est reconnu comme tant le logiciel le plus complet et le plus performant. J'ose d'ailleurs croire que c'est
l'une des raisons qui vous a pouss lire ce tutoriel ...

Les termes de "retouches photographiques" sont tellement rpandus que je suis persuad que la majorit des lecteurs ici
prsents savent ce que c'est. Pourtant, je me permets de croire que vous n'imaginez pas rellement quel point retoucher une
image peut s'avrer utile et intressant. Qui n'a jamais t confront aux yeux rouges aprs une prise avec flash ? Qui n'a jamais
obtenu des photos rates cause d'un satan contre-jour ? Qui n'a jamais rv de donner des couleurs une photo qui est
l'origine trop fade, sans vie ? Autant de dfauts que Photoshop nous permet de rgler grce des paramtres prvus cet usage.

Rendez-vous compte : on ouvre des fentres qui servent rgler des paramtres de l'image, on y rajoute un zeste de jugeote et
hop, le tour est jou. On appelle cela la chromie, et c'est maintenant que a se passe .
L'exposition avec les niveaux de couleur
De nos jours, prendre de belles photos est la porte de tout le monde. On ne compte plus le nombre d'appareils photo
performants que l'on trouve sur le march, mme les tlphones portables en sont maintenant quips, c'est dire.

Trs souvent pourtant, il arrive que les rsultats ne sont pas ceux escompts cause, par exemple, d'une lumire trop importante
mise sur le sujet de la prise. Cette lumire peut provenir de diffrentes sources : le soleil, une lampe, et mme trs souvent le
flash de l'appareil lui-mme ! Ce problme rcurrent est d au fait que l'appareil a capt trop de lumire au moment de la prise.

En photographie, on utilise un terme pour dfinir l'action d'un rayonnement lumineux sur une pellicule photographique : il s'agit
de l'exposition. Ainsi, quand une photo est trop claire, disons plutt trop lumineuse, on parle de surexposition, on dira alors que
la photo est surexpose. On peut aussi trs bien dire qu'une photo est sous-expose, cela serait alors d un manque de lumire.

Notre objectif dans ce chapitre va tre de rgler cette surexposition drangeante. Vos photos seront alors retouches, certes.
Mais au moins, elles ne seront plus bonnes jeter la poubelle et vous pourrez vous vanter d'avoir remis sur pied une photo
l'origine rate .

Niveaux de couleur

La premire fonctionnalit que nous dcouvrirons dans ce chapitre consiste rgler les niveaux de couleur d'une image. Veuillez
crer une nouvelle zone de travail puis ouvrir la fentre correspondant aux niveaux de couleur, via le menu Image > Rglages >
Niveaux.

Mais au fait, il s'agit d'un rglage ! Et, souvenez-vous, il existe justement un calque spcialement ddi aux rglages ! Il s'agit du
calque appel Calque de rglage. Il vous suffit simplement de cliquer sur le bouton en bas de la fentre de calque puis de
cliquer sur "Niveaux". Ainsi, la fentre des niveaux de couleur s'ouvre, alors qu'un nouveau calque est cr :

CTRL + L

Command (ou Pomme) + L

Je vous conseille personnellement de crer un nouveau calque de rglage chaque fois. C'est franchement plus pratique car il
suffit simplement de supprimer ce calque pour annuler les rglages effectus, en admettant que vous ayez besoin de les
supprimer, bien entendu .

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 289/574

Je crois que vous serez d'accord avec moi, la premire chose que l'on remarque en ouvrant cette fentre, c'est cet espce de
graphique noir pas trs esthtique. En ralit, il s'agit d'un graphe que l'on appelle histogramme. Nous allons dcouvrir en quoi
cet histogramme consiste et comment il faut le lire .

Sur Photoshop, l'histogramme indique le niveau (de dtail) des tons d'une image. Il nous permet en fait de savoir si les tons de
l'image sont suffisamment clairs ou suffisamment foncs pour ensuite faire des rglages si ncessaire. Ainsi, on retiendra trois
types de tons :

Tons clairs, que l'on assimile aux couleurs claires (blanches) d'une image.
Tons moyens, que l'on assimile aux couleurs comprises entre le blanc et le noir (grises) d'une image.
Tons foncs, que l'on assimile aux couleurs sombres (noires) d'une image.

Reconnaitre une image surexpose d'une image sous-expose

Vous l'aurez compris, si les tons d'une image sont trop clairs, l'image est surexpose. A l'inverse, si les tons sont trop foncs, trop
sombres, l'image est sous-expose.

Pour diffrencier une surexposition d'une sous-exposition sans mme comparer deux images l'une avec l'autre, on peut tout
simplement jeter un il sur l'histogramme de chacune d'elle. Je vous explique comment cela fonctionne.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 290/574

Le cercle noir encadre la petite flche remplie elle-mme de noir. En dplaant cette flche vers la droite, on rgle
l'intensit des sombres prsents sur l'image. En d'autres termes, ce rglage permet de corriger les couleurs se rapprochant
du noir sur l'image.
La flche blanche situe quant elle droite et qui est justement entoure par le cercle blanc permet d'augmenter le
niveau de luminosit des fortes lumires visibles l'image.
Enfin, le cercle gris encadre la petite flche remplie elle-mme de gris (les choses ne sont pas faites au hasard ). On
peut cette fois-ci faire varier la flche de gauche droite.

- Dplacer le curseur vers la gauche permet de rduire la fois l'intensit et le contraste de l'image.
- Dplacer le curseur vers la droite permet d'augmenter l'intensit et le contraste de l'image.

Attention, cela n'affecte en rien les modifications apportes l'aide des flches noire et blanche.

Vous savez maintenant comment grer les niveaux de couleur. A gauche, ce sont les tons sombres. A droite, les tons clairs. Au
milieu, les tons moyens, comme le montre le schma ci-dessous.

vhf/victor

Sur l'histogramme de l'image A, on remarque que le graphique n'occupe que la partie gauche de l'espace dans lequel il se trouve.
Cela signifie que les valeurs de l'histogramme dans la partie droite (o le graphe n'apparait plus) sont nulles. L'image est sous-
expose.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 291/574

A l'inverse, l'image C prsente un graphique qui n'occupe que la partie droite de l'espace qui lui est rserv. Les valeurs de
l'histogramme gauche sont donc maintenant nulles : l'image est surexpose.

Enfin, l'histogramme de l'image B occupe toute la largeur dans l'espace qui lui est ddi, cela correspond une image dont
l'exposition est relativement correcte (malgr les variances que l'on peut constater mais l'essentiel, c'est que le graphe occupe
toute largeur).

Si cela vous intresse, voici un graphique un peu plus rgulier afin que vous vous fassiez une petite ide :

Corriger un contre-jour
N'hsitez pas travailler avec moi !
Tlcharger le fichier source
Contrejour.png

Il s'agit sans doute du cas le plus courant de surexposition et de sous-exposition. On parle de contre-jour dans une photo quand
une forte source de lumire est face celui qui prend la photo et claire le sujet par derrire. Alors, le plus souvent, l'arrire-plan
est trs surexpos tandis que le sujet de la prise est quant lui beaucoup sous-expos. Voici un cas de contre-jour :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 292/574

Tiens, a tombe bien, c'est l'image que je vous ai faite tlcharger . On reconnait un cas de contre-jour sur cette photo
cause de la forte source de lumire provenant du ciel (ou plus prcisment du soleil, pour ceux qui ne l'auraient pas remarqu...).

Pour l'heure, je vous propose de retravailler toute la partie sous-expose de cette image. Et devinez quoi ? Nous allons rgler les

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 293/574

niveaux de couleurs de cette image !

Je n'ai pas besoin de vous rappeler comment on ouvre cette fentre, hein .

Il y a clairement un souci, l ! Le graphe de l'histogramme occupe toute la largeur de la fentre. Pourtant, l'image est
surexpose ET sous-expose, tu l'as dit toi-mme !

C'est un peu plus compliqu que a, vrai dire... Je vous ai dit que si le graphe n'occupait que la partie gauche ou la partie droite
de l'espace qui lui est rserv, c'est que l'image tait soit trop expose, soit pas assez. Du coup, si on suit cette logique, on en
conclut aisment que si ce graphe occupe toute la largeur de cet espace, c'est que l'image est correctement expose. Pourtant, je
vous avais tout de mme signal qu'un autre facteur devait tre pris en compte : la variation du graphe.

La variation du graphe ?

Oui, la variation du graphe, regardez par exemple celui-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 294/574

Ici, il occupe toute la larguer disponible. En revanche, on remarque que la courbe n'est pas du tout constante : elle monte en
flche, puis redescend d'un coup, etc... autant de variations qui sont dues l'intensit des tons de la photo (donc de son
exposition). Je vous avais donc propos un exemple d'un graphe plus constant, souvenez-vous :

Sur cet histogramme, le graphe est constant, rgulier et occupe toute la largeur de la fentre .

Continuons avec la photo sur laquelle nous travaillions initialement. Notre objectif, je vous le disais, sera de rgler la sous-
exposition pour que l'image finale reprenne des couleurs et que l'exposition en devienne meilleure. Notre premire manuvre
consistera alors slectionner toute la partie sombre de l'image afin de ne travailler qu'elle et de protger la partie surexpose de
l'image. Si nous n'effectuons pas cette manuvre, absolument toute l'image va gagner en luminosit : la fois la partie sous-
expose (ce qui nous intresse) et la partie surexpose (ce qui nous intresse moins !). Et pour effectuer cette slection, rien de
mieux que notre bon vieux Lasso polygonal !

Le retour du Lasso Polygonal !

Veuillez tout d'abord slectionner votre outil . Je vais ensuite devoir vous demander de crer une slection autour de la partie
surexpose de l'image, comme le montre mon exemple ci-dessous. Si je peux vous conseiller, vous n'tes pas obligs de faire a
minutieusement, ce serait trop complexe. Contentez-vous simplement de dtourer " peu prs" la zone surexpose de la photo.

N'hsitez pas sortir de la zone de travail en dtourant la photo. Cela n'empchera pas la slection de se former autour
de celle-ci.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 295/574

En effectuant cette slection, nous nous sommes donns la possibilit de travailler la zone surexpose de l'image. Pourtant, ce
qui nous intresse, nous, c'est de retravailler la partie sous-expose...

Bah, c'est un peu stupide de nous avoir fait slectionner la mauvaise partie de l'image...

J'en suis bien conscient, mais vous imaginez bien que je n'ai pas fait les choses au hasard . A vrai dire, il existe une option
qui permet de changer la partie slectionne avec celle qui ne l'est pas. Admettons que l'on ait slectionn 1/4 d'image. Cela veut
dire donc dire que les 3/4 restants ne sont pas slectionns. Et bien grce cette option, la slection va s'intervertir et ce seront
dsormais les 3/4 de l'image restants qui seront slectionns.

Assurez-vous de bel et bien avoir l'outil Polygonal entre les mains. Puis, veuillez cliquer droit l'intrieur de la zone slectionne.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 296/574

C'est alors que la partie surexpose de l'image n'est plus slectionne. En ralit, c'est maintenant la zone sous-expose qui l'est !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 297/574

Nous sommes donc fin prts rgler la sous-exposition de l'image maintenant que celle-ci est correctement slectionne ! Et on
ne va pas chmer, ouvrons directement la fentre qui nous permet de faire des merveilles !

Comme moi, vous aurez remarqu la transformation subie par le graphe. En fait, il change en fonction de ce que nous avons
slectionn dans l'image. Du coup, il occupe majoritairement la partie gauche de la fentre, sous-entendu que la partie de l'image
slectionne est sous-expose (et c'est ce que nous recherchions, a tombe bien !).

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 298/574

Comment je fais pour modifier mon image, alors ? Je dplace les petites flches des niveaux pour modifier les tons ?

Vous avez compris le principe, oui. Toutefois, travailler la chromie d'une image grce aux niveaux de couleur ne se rsume pas
qu' "dplacer les petites flches". C'est un vrai travail qui demande rflexion et prcision. Pourquoi ? Parce que si on ne rflchit
pas et que l'on se lance n'importe comment, on arrive trs vite des rsultats... sophistiqus .

videmment, je caricature, il ne faut pas tout prendre au pied de la lettre. Nous travaillerons les tons clairs et moyens de la partie
sous-expose pour justement qu'elle ne le soit plus et qu'elle gagne en clart. On ne va pas y aller par quatre chemins, je vous
propose un exemple de graphe retravaill :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 299/574

Si vous dcidez de reproduire ce graphe, vous pouvez utiliser les valeurs des niveaux d'entre que voici : 6 - 2,73 - 193. Et l,
surprise ! Votre image est totalement transforme, les couleurs sont clairement plus vives, on a attnu comme il fallait cette
sous-exposition drangeante.

Mais alors voil, il subsiste un problme de taille que l'on remarque plus aisment quand on retire la slection actuellement en
route (pas le contenu hein, juste la slection en elle-mme ).

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 300/574

Bon sang comme c'est affreux ! Malheureusement, la zone retouche ayant subi des modifications colorimtriques (lies la
couleur des nuages entre-autres), on note une distinction trop importante avec la zone non-retouche et faut dire que cela gche
un peu tout le travail jusqu'ici effectu .

Mais alors, comment remdier au problme, c'est super moche, l... ?

Il faudrait faire en sorte d'attnuer cette distinction entre la partie retouche et celle intouche pour que l'on remarque moins le
contour trop net et 'cassant'. Pour cela, nous allons faire appel au fameux contour progressif . Il s'agit d'une option lie au Lasso
Polygonal que l'on retrouve dans la barre d'options des outils :

Il est crit 0 px dans le champs blanc du milieu. Cela signifie que l'on peut crire un nombre de pixels mais aussi que ce nombre
indique le taux de progression du contour de la slection que l'on va justement exprimer l'aide de cette unit (px)... Ainsi, plus le
nombre de pixels est important, moins le contour de la slection est net (le contour prendra alors une apparence floue). Sous
entendu que, si vous laissez le contour progressif 0 px, le contour restera trs net comme a a t le cas maintenant.

De ce fait, il va falloir ajouter un taux de progression au contour de la slection pour attnuer le contour du calque pour qu'il
n'apparaisse pas aussi net l'cran. On y verra alors que du feu !

Tu veux dire qu'on va devoir recrer une slection ? Tu veux pas nous donner l'une de tes combines habituelles pour
aller plus vite ?

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 301/574

Un moyen de ne pas trop vous fatiguer, vous voulez dire ?

Ce qui me semble tre le plus rapide (et surtout le moins fatiguant, oui, je sais...) en ce contexte serait d'annuler les dernires
manipulations effectues dans la zone de travail grce l'historique. Ainsi, en remontant cet historique, vous retrouverez la
slection de tout l'heure, celle que vous avez supprime quand je vous ai demand de le faire.

CTRL +Z

Command (ou Pomme) + Z

Remontez deux fois : une premire fois pour retrouver votre slection, une deuxime fois pour annuler la retouche. Il va falloir la
recommencer .

Ici, vous ne pouvez pas utiliser la barre d'option des outils et inscrire un contour progressif la slection car celle-ci a t cre
avant. Il faut toujours indiquer un contour progressif avant d'effectuer la slection. Mais au lieu d'en recrer une, on peut avoir
recours effectivement l'historique. Une fois la slection sous les yeux, il vous faudra cliquer droit l'intrieur de cette slection
puis cliquer sur le bouton "Contour progressif". Une nouvelle fentre apparaitra alors dans laquelle je vous invite entrer la
valeur 20px.

On remarque alors l'apparence nouvelle de la slection qui devient beaucoup plus ronde : c'est bon signe, le contour est
maintenant progressif.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 302/574

Maintenant que le contour progressif est valid, il ne nous reste plus qu' retoucher nouveau l'image comme on vient de le
faire. Ainsi, en retirant la slection en route pour plus de visibilit...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 303/574

Notre image s'est vue revtir de couleurs belles et vives. Finie la sous-exposition, on peut dire qu'on y voir plus clair . Je
vous laisse le soin de comparer l'image initiale et l'image retouche, je crois qu'il n'y a pas photo (faut que j'arrte les jeux de mot
bidons) ! N'hsitez pas retravailler les niveaux de couleur mme aprs les avoir rgls une premire fois .

Concernant la partie surexpose, vous tes dsormais capables de le faire tout seul, la procdure tant la mme. Allez, une seule
petite difficult peut-tre, vous devez non pas modifier les tons clairs mais les tons foncs de la zone (wooah !) .
Retravailler un visage surexpos
Je ne pouvais pas passer la partie suivante sans traiter ce cas de mauvaise exposition ultra connu.

Quand on prend une photo portrait, c'est--dire une photo d'un visage (humain), ce qu'il en ressort est parfois loin de ce quoi
on s'attendait : le visage peut s'avrer trop sombre ou souvent trop clair. Les traits sont alors moins visibles, les couleurs moins
apparentes et je ne vous parle mme pas la mauvaise mine que cela donne la personne photographie !

Pour traiter un visage endommag par une source de lumire trop importante, il existe une technique que nous avons dj
tudie et mme employe auparavant dans le cours. Si nous aurons nouveau besoin des niveaux de couleurs comme vous
vous en doutez, nous commencerons en revanche notre retouche photographique l'aide des modes de fusions !

J'ai choisi de traiter le visage suivant. Vous approuverez mon choix quand vous verrez quel point il est surexpos...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 304/574

N'hsitez pas travailler avec moi !


Tlcharger le fichier source
Visage.png

Je ne vous mentais pas, hein, cette photo est bien caractrise par une surexposition car on peine srieusement reconnaitre les
traits de ce visage, tandis que les couleurs du visage sont relativement froides.

Et tu vas nous faire croire que le simple fait d'utiliser un mode de fusion va arranger tout cela, d'un coup ?

C'est bien possible, oui ! Mais bon, si on se rend compte que cela ne suffit pas, on pourra toujours par la suite rgler les niveaux
de couleur de l'image, rien ne nous en empche du moins .

Avant tout, il va nous falloir dupliquer le calque du visage pour que l'on utilise le mode de fusion sur cette copie afin qu'elle
fusionne avec l'originale. Souvenez-vous, on utilise un mode de fusion pour que le calque de premier plan fusionne avec ce qui
se trouve en arrire-plan.

CTRL + J

Command (ou Pomme) + J

Une fois le calque dupliqu, il ne nous reste plus qu' lui dfinir un mode de fusion. Il suffit alors de faire drouler la liste et de
cliquer sur le mode qui nous intresse, savoir ici le mode PRODUIT.

Pourquoi ce mode ? Il y en a une tonne !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 305/574

Vous imaginez bien que je n'ai pas choisi le mode produit au hasard . Bien au contraire, j'ai dcid de prendre ce mode de
fusion plutt qu'un autre pour la bonne et unique raison qu'il a la vertu de "capturer" un excs de lumire et ainsi d'attnuer la
luminosit trop prsente au sein d'une image. Ainsi, le rsultat final parait moins clair et cela s'avre trs utile sur un visage car
les traits en ressortent et cela tombe bien car c'est ce que l'on cherche faire dans cet exemple !

Voyons ensuite quoi ressemble notre zone de travail et plus prcisment notre image :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 306/574

Sans mme avoir paramtr les niveaux de couleurs, nous avons russi ajouter du contraste l'image et faire ressortir chaque
trait de celui-ci, sans oublier que les couleurs sont maintenant lgrement plus chaudes, plus apparentes. L'aspect gnral de la
photo reste relativement froid, mais c'est aussi le sujet qui le veut : notre objectif n'tait pas de modifier l'environnement de la
photo mais bel et bien de renforcer les traits du visage et d'insister sur les couleurs pour qu'elles paraissent moins froides (et non
chaudes).

J'estime personnellement qu'il n'est pas ncessaire de rgler les niveaux de couleur de l'image car elle me semble tout--fait
acceptable en l'tat actuel. Vous pouvez nanmoins dupliquer le calque de premier-plan (celui dont le mode de fusion est
PRODUIT) pour insister sur ce mode de fusion et renforcer le contraste dj existant. Je ne vous interdis pas non plus d'utiliser
les niveaux de couleur si vous souhaitez retravailler davantage l'image, videmment .
C'est ainsi que s'achve ce chapitre portant sur la chromie. J'espre que vous ne qualifierez plus vos photos surexposes ou
sous-exposes de "rates" maintenant !

Au fait, que l'on s'entende, la chromie regroupe bien d'autres techniques et ne signifie pas ncessairement "correction de
l'exposition". Certaines des techniques que nous allons voir dans le prochain chapitre sont d'ailleurs elles aussi lies la
chromie.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 307/574

Rglage de la colorimtrie
Mme si le titre de ce chapitre est diffrent du prcdent, il n'est pas question de bifurquer dans un tout autre domaine. Nous
avons commenc avec les techniques de rglages, nous terminerons avec !

A vrai dire, j'ai opt pour un titre qui me semblait plus explicite, car davantage en rapport avec ce que nous allons voir. Il est
encore question de travailler la chromie d'une image, simplement, nous nous concentrerons sur ses couleurs.

Vous verrez que bon nombre d'images peuvent tre gches cause, par exemple, d'un excs de couleur ou bien mme de
couleurs trop fades, sans vie. Nous allons donc tenter de remdier aux problmes parmi les plus frquemment rencontrs, tandis
que nous en profiterons pour apprendre les techniques permettant de modifier les couleurs au sein d'une image.

Tenez-vous prt, l'aventure continue .


Modifier, raviver et claircir les couleurs d'une image
C'est certainement le rglage le moins complexe de tous les rglages permettant de changer la couleur d'une image. Il est la fois
trs simple d'utilisation et trs puissant, c'est fait d'ailleurs partie de ceux parmi lesquels j'ai le plus souvent recours quand je
travaille sur des projets de retouche.

La fentre que nous nous apprtons ouvrir se nomme "Teinte et Saturation". Nous allons donc avoir la possibilit de rgler ces
deux paramtres d'une photo, tout en ayant la possibilit d'y modifier sa luminosit. Un trois en un, quoi.

En premier lieu, veuillez ouvrir la fentre qui nous intresse. Encore une fois, vous avez la possibilit de crer un calque de
rglage en passant par le bouton Crer un calque de remplissage ou de rglage en bas de la fentre de calques, ou bien
vous pouvez effectuer ce rglage directement sur le calque slectionn en passant par le menu Image > Rglages >
Teinte/Saturation.

Ceci sans oublier les raccourcis clavier bien entendu.

Ctrl + U

Command (ou Pomme) + U

N'hsitez pas travailler en mme temps que moi !


Tlcharger l'image
www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 308/574

Teinte.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous...".

Teinte et saturation

Notre premier travail dans ce troisime chapitre consistera ... changer la couleur des yeux d'un visage humain . J'avais le
choix parmi un tas d'autres exemples. Si j'ai choisi celui-ci, c'est parce que a me semblait tre l'une des retouches
photographiques les plus populaires au monde pour dbutant. A moins que la nature vous ait bien dot, je crois que l'on a tous
rv un jour de savoir quoi on ressemblerait avec des yeux bleus, verts ou mme gris . On va donc travailler ce que l'on
appelle leur teinte et ventuellement leur saturation.

Du coup, on devine facilement que l'on ne se proccupera que de la partie suprieure de la fentre :

Et voici l'image sur laquelle nous travaillerons :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 309/574

Notre premier travail consistera dtourer les yeux de la jeune femme. L'ide, encore une fois, c'est d'utiliser le Lasso Polygonal
. Il faut slectionner un il dans un premier temps, puis slectionner le deuxime en cochant l'option Ajouter la slection.

Nous dcouvrirons d'autres techniques de dtourage plus performantes dans la suite du cours. Pour le moment, nous
nous contenterons des outils Lasso et de slection, c'est suffisant notre stade.

Je vous dconseille par ailleurs d'inclure la pupille des yeux dans votre slection : une pupille est noire et doit le rester. Enfin,
n'hsitez pas ajouter 1 ou 2 pixels de contour progressif pour attnuer le contour trop net d'une slection, comme on l'a fait
pour corriger la sous-exposition de l'image du chapitre prcdent.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 310/574

Une fois vos slections termines, vous pouvez rouvrir la fentre Teinte et saturation.

Comme je l'ai dit prcdemment, nous nous concentrerons sur deux rglages uniquement : la teinte et la saturation.

Teinte : rgler la teinte consiste modifier la couleur de l'lment slectionn, en l'occurrence les yeux. On peut alors
passer du bleu au rouge, en passant par du jaune ou du vert.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 311/574

Saturation : rgler la saturation consiste modifier la vivacit de la couleur : soit plus vive, soit plus terne, jusqu' mme
lui retirer toute saturation visible et la transformer en noir et blanc.

Nous procderons de ce fait en deux tapes. D'abord, nous dfinirons une nouvelle couleur pour les yeux de la jeune femme,
ensuite nous travaillerons la saturation de la couleur choisie.

Pour modifier un paramtre, on se retrouve face une petite flche (encore !) que l'on peut faire varier de gauche droite. On
peut galement utiliser notre clavier d'ordinateur pour taper une valeur dans le champs prvu cet effet (l o sont inscrits les 0).

J'ai personnellement dcid de changer la couleur des yeux de la jeune femme en un jaune orang compltement irraliste. Peu
importe, c'est pour l'exemple .
J'ai alors cherch la valeur qui semblait correspondre mes attentes et me suis arrt -150. Si a ne vous plait pas ou ne vous
convient pas (chacun ses gots aprs tout), dfinissez votre propre couleur.

Voil pour la teinte. Faut dire que ce n'tait pas trs compliqu, avouez . Intressons-nous maintenant la saturation de cette
couleur. L'ide, c'est de rendre la couleur plus vive ou plus terne. Cela peut s'avrer utile pour donner, par exemple, un peu plus
de ralisme la modification (sauf pour les psychopathes comme moi qui utilisent des couleurs compltement loufoques )...
Regardez si je mets la saturation fond :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 312/574

A moins que notre objectif ait t de transformer la jeune femme en vampire (et encore, a s'discute), je crois que les yeux sont ici
un peu trop saturs . Si, au contraire, on leur avait enlev un peu de saturation, on aurait obtenu un rsultat srieusement
plus raliste, mme si des yeux jaunes, a n'existe pas (histoire d'en rajouter encore une petite couche).

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 313/574

Oui, c'est pas mal du tout ! Mais on ne peut vraiment rien faire d'autre avec la teinte et la saturation ?

Hum, vous savez, aprs, on peut imaginer un peu tout et n'importe quoi. C'est vous de dterminer en quoi cette fonctionnalit
peut vous tre utile. Je vous donne l'exemple des yeux, mais il en existe des milliers d'autres. On peut, par exemple, raviver les
couleurs d'un paysage et, par exemple, d'un espace vert.

Un espace vert, tu dis...

Oui, parfaitement, un espace vert ! Vous ne vous rendez d'ailleurs pas compte quel point cela peut changer du tout au tout !
C'est trs impressionnant.

Veuillez observer cette image :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 314/574

N'hsitez pas travailler en mme temps que moi !


Tlcharger l'image
Paysage.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous...".

Il s'agit d'un paysage tout droit venu de Bretagne . A premire vue, cette image va vous sembler tout fait normale, du moins
au niveau de couleurs (comment a, c'est pas normal qu'il ne soit pas en train de pleuvoir ?). A moins que, tout comme moi, vous
les jugiez trop ternes, sans vie ?

Regardez avec quelle simplicit on peut arranger cela. Il suffit simplement d'augmenter la saturation de l'image pour obtenir un
rsultat tout bonnement exceptionnel. C'est le mot !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 315/574

Alors, qu'est-ce que vous en dites ? Avouez que c'est quand mme exceptionnel de pouvoir redonner autant de couleurs aussi
facilement ! Enfin, j'ai tout de mme not un petit bmol dans cet exemple, je veux parler du banc. A l'origine, il est absolument
tout blanc. Or, depuis que j'ai modifi la saturation de l'image, je trouve qu'il est devenu lgrement bleu.

Comment on fait, alors ?

Et bien, vous le savez trs bien . On dtoure en premier lieu le banc avec le Lasso Polygonal (vous commencez comprendre
combien il est important de le maitriser maintenant ?) :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 316/574

Puis on modifie la valeur de la saturation du banc pour la mettre 0 ainsi que la luminosit ventuellement afin que le banc
redevienne tout blanc.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 317/574

Vous pouvez par la suite vous amuser modifier la teinte de la globalit de l'image. On arrive parfois obtenir des rsultats...
colors. Bon, c'est souvent dnu de sens et il faut travailler avec prcision pour obtenir de jolies images, mais rien ne nous
empche de nous amuser un peu .

En cochant l'option "Redfinir", vous installerez une sorte de couche colore sur toute l'image. Cela veut dire que tous
les lments de l'image viendront tre teints de la teinte choisie. Voici un exemple, j'ai russi crer un effet spia :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 318/574

Et voici maintenant l'effet ultime de la mort, le fameux noir et blanc tant convoit :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 319/574

Pour crer cet effet, il suffit simplement de dsaturer compltement l'image, autrement dit de dplacer la jauge de la "Saturation"
-100 . Vous pouvez accentuer cet effet noir et blanc l'aide des niveaux de couleur si vous le souhaitez. Voici un petit aperu de
ce que cela pourrait donner :

Vous ne voyez pas vraiment la diffrence ? Mais si, voyons, regardez cette petite animation, vous allez vous en compte plus
facilement :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 320/574

Pour dsaturer l'ensemble d'une image, vous pouvez galement passer par le rglage suivant : Image > Rglages > Dsaturation.

J'utilise les niveaux de couleur pour le noir et blanc, mais j'aurais d'ailleurs trs bien pu le faire pour toutes les autres images ci-
dessus. A vous de voir .

Et la luminosit ?

Dans tout a, j'ai quand mme russi oublier de vous parler de la luminosit ! Quoique je vous en ai touch un petit mot pour le
banc du paysage.

Ce paramtre permet d'augmenter ou de diminuer la luminosit d'une image (c'tait plutt facile deviner...). J'ai l'habitude de
beaucoup utiliser la luminosit pour faire ressortir un lment prcis d'une image qui est de couleur blanche. Cela ne sert pas qu'
cela, mais c'est du moins l'une des possibilits que nous offre cette fonctionnalit.

Le cas le plus courant que je recense se trouve tre les dents que l'on a tendance vouloir blanchir. Et c'est d'ailleurs l'exemple
que je souhaite vous prsenter pour illustrer l'une des multiples utilits de la luminosit. Voici l'image sur laquelle je vais travailler
:

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 321/574

N'hsitez pas travailler en mme temps que moi !


Tlcharger l'image
Sourire.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous...".

Plus de surprise, j'entreprends le dtourage des dents de la dame pour crer une slection.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 322/574

Enfin, j'ouvre la fentre Teinte/Saturation et modifie la valeur de la luminosit 20. Ainsi, les dents paraissent de suite beaucoup
plus blanches, peut-tre mme un peu trop ici...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 323/574

L'essentiel, c'est que vous compreniez que l'on peut trs aisment blanchir une zone dj blanche grce la luminosit. N'hsitez
pas retravailler la saturation des dents pour qu'elles paraissent encore plus ralistes .
Les excs de couleur
Le chapitre prcdent portait sur l'exposition : nous avions alors cherch attnuer un excs ou un manque de luminosit. Cette
fois-ci, j'ai prvu de vous faire retravailler une image compose en majorit d'une couleur qu'on qualifiera d'excessive.

Cela signifie par exemple que la photo en question apparait comme tant teinte par une seule couleur ou presque. Voici un
exemple, cela vous parlera peut-tre dj plus. C'est l'image sur laquelle nous travaillerons :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 324/574

N'hsitez pas travailler en mme temps que moi !


Tlcharger l'image
Montagne.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous...".

Incontestablement on remarque que la couleur bleu est trop importante ici, elle semble s'tre installe sur l'ensemble de la photo,
croire que l'on a pos un film bleu sur la pellicule au moment de prendre la photo. Pourtant, ce n'est pas le cas, croyez-moi, c'est
moi qui ai pris cette photo. Cette mauvaise colorimtrie de l'image est en fait due une temprature de couleur trop froide de la
lumire clairant la scne, il s'agit plus techniquement parlant d'un problme de balance des blancs comme on dit dans le jargon.
Notre objectif sera donc de retirer le trop plein de bleu et de donner plus de couleurs l'image finale.

Nous utiliserons pour cela la clbre balances des couleurs, que vous trouverez dans le menu Image > Rglages > Balances de
couleurs. Vous pouvez galement crer un nouveau calque de rglage via le menu prvu cet effet en bas de la fentre de calque
.

Ctrl + B

Command (ou Pomme) + B

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 325/574

Comme son nom l'indique, ces paramtres consistent faire la balance entre plusieurs couleurs pour travailler les couleurs
initiales d'une image en fonction des diffrents tons de cette mme image. Cela signifie que s'il y a trop de bleu, on va retravailler
toutes les autres couleurs sur tous les tons de sorte attnuer ce bleu et faire apparaitre de nouvelles couleurs l'image.

Notre dbuterons notre retouche en retravaillant les tons foncs de l'image. Je vous invite en consquence cocher les tons
foncs dans la balance des tons .

Comme notre but est de retirer un maximum de bleu dans l'image, nous allons dplacer les petites flches situ sur les jauges
l'oppos de ce qui s'apparente du bleu. De ce fait, nous ferons glisser la flche situe entre Cyan > Rouge vers le rouge et la
flche du Jaune > Bleu vers le Jaune. Pour le moment, on ne touche ni au magenta, ni au vert.

Premier rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 326/574

Le bleu est tout de suite moins intense, c'est plutt bon signe . Mais il est encore bien trop prsent mon got, on va donc
s'affairer rgler les tons moyens. On clique alors sur le bouton "Tons moyens" et on r-excute la mme opration que pour les
tons foncs.

Deuxime rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 327/574

Ahhh. Les couleurs commencent doucement apparaitre tandis que le bleu a presque disparu, on a apparemment plus de jaune
et de rouge maintenant. Et c'est normal, puisqu'on a fait la balance entre le bleu et ces deux couleurs-l. Enfin, peu importe, on
continue sur notre ligne, il faut faire disparaitre toute trace de bleu, mme sur les tons clairs de l'image. Vous savez ce qu'il vous
reste faire, vous cochez les tons clairs dans la balances des tons et vous dplacez les curseurs l'oppos du bleu et du cyan.

Troisime rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 328/574

Et l, c'est le drame. On constate que le rouge et le jaune ont maintenant envahi la majorit de l'image, on les qualifierait mme
d'excessifs . Et puis, on n'a mme plus de bleu, c'est dire ! Mais rassurez-vous, ce rsultat est en quelque sorte voulu, du
moins on va dire qu'il est normal. On avait un objectif, retirer toute trace de bleu. Le moins que l'on puisse dire, c'est que c'est
russi. Du coup, le plus gros du travail a t abattu, il nous reste en fait un dernier petit rglage faire et l'image sera finalise
bien comme il faut.

L'image l'origine est bleue. Il faut donc garder une certaine uniformit et ainsi laisser un peu de bleu pointer le bout de son nez
sans quoi l'image perdrait de son "ralisme". On va par consquent rutiliser la balance des couleurs en commenant par les tons
clairs pour voir ce que cela donne. Vous verrez, on n'a pas grand chose faire normalement...

Aprs avoir coch la case des "Tons clairs", je vous demanderais de bien vouloir cliquer sur le bouton "Conserver la luminosit"
que vous trouverez en bas de la fentre. Cela va nous permettre de retrouver la source de luminosit initialement capte par
l'appareil photo, on va avoir l'impression que la luminosit sera accentue.

A partir de maintenant, on n'a plus qu' rgler nouveau les couleurs pour obtenir un rsultat plus raliste. Alors attention, il ne
faut pas faire a tte baisse sans rflchir un minimum. La premire tape nous a permis d'liminer tout le bleu. Maintenant, on
veut retrouver du bleu, mais pas seulement ! Donc contrlez-vous et ne m'en remettez pas trop. Cette deuxime tape consiste
faire apparaitre de nouvelles couleurs. Voici les rglages que j'ai personnellement effectus, cela m'a sembl tre le rsultat le plus
intressant :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 329/574

Quatrime rsultat :

Je ne sais pas vous, mais, si on se rapproche d'un bon rsultat, j'estime que c'est encore trop jaune vers le bas de la photo. Par
dduction, j'en suis venu au fait que les lments du bas de la photo se trouvaient tre dans des tons plutt foncs (c'est du
moins l'impression que cela me donne...), je vais par consquent retravailler une dernire fois les tons foncs de sorte ajouter
un zeste de bleu, comme je le conseillais plus haut.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 330/574

Et voil le travail, la photo finale a carrment volu et elle est dsormais totalement diffrente de l'originale. On retrouve plus de
couleurs, plus de contrastes et surtout moins de bleu. Cinquime et dernier rsultat :

Rien ne vous empche de trifouiller un peu, je suis convaincu qu'on peut obtenir de meilleurs rsultats avec un peu de patience
.
Utiliser les couleurs d'une image de rfrence
J'espre sincrement que vous apprciez ce que nous sommes en train d'tudier et que vous vous plaisez lire ce chapitre. Vos
modestes connaissances vous ont permis d'acqurir un certain savoir-faire et vous tes dsormais capables de retoucher des
photos seuls.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 331/574

Rassurez-vous, on n'en a toutefois pas termin (comment a, c'est pas une bonne nouvelle ?) et j'ai encore beaucoup de choses
vous faire dcouvrir en matire de retouche et de rparation photographique.

Au cours de mes projets, il m'est arriv que l'on me demande quelque chose d'assez intriguant. Le client a formul sa demande de
cette manire :

Le client : "Au cours de mon dernier voyage, j'ai pris deux photos de mon salon. Malheureusement, les couleurs de la premire
sont bien trop sombres par rapport celle de la deuxime. Que pouvez-vous faire ?"

La premire solution qui m'est venue l'esprit (et je suppose que c'est galement votre cas) tait d'utiliser les niveaux de couleurs
car l'une des deux images tait sous-expose. Mais j'ai finalement prfr utilis un tout autre rglage spcialement prvu cet
usage, il s'agit de la correspondance de la couleur.

Le principe est plutt simple : on prend une image de base, on demande gentiment au logiciel de faire correspondre les couleurs
d'une autre image avec celles de l'image de base et on refait quelques petits rglages de finition si ncessaires. C'est pas plus
compliqu que a !

Voici les deux images sur lesquelles nous allons bosser. La premire est l'image de base, l'autre l'image de rfrence, c'est--dire
celle dont les couleurs nous intressent.

1. Image de base

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 332/574

2. Image de rfrence

N'hsitez pas travailler en mme temps que moi !


Tlcharger l'image de base
Correspondance.png
Tlcharger l'image de rfrence
Correspondance1.png
P our tlcharger les images, cliquez droit sur les liens puis sur "Enregistrer sous...".

Il faut ouvrir les deux images sur Photoshop, chacune ayant sa propre zone de travail. En ralit, nous travaillerons sur l'image de
base uniquement en utilisant l'image de rfrence pour neutraliser ses couleurs et les faire correspondre avec l'image de base. Du
coup, je vous demande de mettre en avant-plan la zone de travail contenant l'image de base, comme ceci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 333/574

L'image de base se nomme Correspondance.png sur cet exemple, tandis que l'image de rfrence est intitule
Correspondance1.png

Ensuite, veuillez cliquer sur le bouton du menu Image > Rglages > Correspondance de la couleur....

Il est impossible de crer un calque de rglage.

Une nouvelle fentre apparait.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 334/574

C'est ici que tout se passe, par le biais de cette fentre que nous dfinissons l'image de rfrence et que nous effectuons les
derniers rglages de finition.

Pour commencer, nous allons dire au logiciel quelle image nous utiliserons comme rfrence car lui ne le sait pas. Pour ce faire,
nous allons regarder en bas de la fentre, dans la catgorie "Statistiques de l'image" et nous utiliserons la liste droulante
suivante :

En l'ouvrant, on fait afficher deux titres d'image : le titre de la photo de base (Correspondance.jpg) et celui de la photo de
rfrence (Correspondance1.jpg). Nous cliquerons sur le titre de la photo de rfrence pour la dfinir comme telle.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 335/574

On a d'ores et dj une image relativement bien transforme, aux couleurs vives et chaudes, comme celles que l'on trouve dans
l'image de rfrence . Allez, je vous la remets sans le montage du dessus juste pour le plaisir des yeux :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 336/574

Mais ce n'est pas forcment termin... Cela dpend de votre jugement : si vous la sentez bien comme cela, alors il n'est pas
ncessaire d'effectuer des rglages supplmentaires et votre image est termine. Si toutefois vous n'tes pas satisfait, certains
rglages vous sont mis disposition. Vous le trouverez dans la partie suprieure de la fentre, catgorie "Options d'image".

Luminance : accentuer ou attnuer le taux de lumire visible sur l'image.


Intensit de couleurs : augmenter ou diminuer l'intensit des couleurs prsentes l'image.
Fondu : augmenter ou diminuer la transparence des couleurs de la premire image par rapport la deuxime.

Un petit mot sur le bouton "Neutraliser" : en cochant cette option, vous supprimerez automatiquement une ventuelle dominante
de couleur dans limage cible.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 337/574

Maintenant, je vous laisse effectuer les rglages que vous jugez ncessaires de paramtrer. Pour ma part, j'ai rduit un peu la
luminance et l'intensit des couleurs que je jugeais trop fortes. Je n'ai pas coch la case "Neutraliser".

Bon, c'est trs lger mais comparer, je vous assure que la diffrence est bien prsente.

On passe la suite .
Remplacer ou isoler une couleur
On peut avoir recours ce nouveau rglage pour deux grandes raisons selon moi. La premire consisterait remplacer l'une des
couleurs qui composent une image, la seconde isoler cette couleur de toutes les autres. Pour cette dernire, on sature en fait
toutes les couleurs de l'image (on les transforme en noir et blanc) hormis une seule, celle que l'on souhaite justement isoler. Ainsi,
on fait ressortir cette mme couleur pour faire d'elle la couleur prdominante de l'image. Cet effet est souvent utilis sur des
images dont le sujet est connu comme tant caractris par sa couleur, l'exemple des cabines tlphoniques anglaises que l'on
connait pour leur rouge ptant.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 338/574

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 339/574

Ce rglage est trs facile d'utilisation et cela fait de lui un rel atout. Aucune manipulation, aucun dtourage. Et le plus fort, c'est
que l'on n'a pas besoin d'outil, il suffira simplement de jouer avec des paramtres comme on a maintenant pris l'habitude de le
faire tandis que le logiciel s'occupera du reste .

Nous tenterons les deux techniques voques plus haut. Pour commencer, nous n'allons non pas reproduire l'exemple ci-dessus
(qui consistait isoler le rouge du reste) mais allons plutt tenter de remplacer ce rouge par une couleur diffrente.

Remplacer une couleur

Quelques explications...

En quoi consiste le travail que nous nous apprtons effectuer ? Pour vous expliquer, je n'ai pas trouv mieux que de vous
proposer un schma trs simple. Ainsi, nous admettrons qu'une image est majoritairement compose de ces 5 couleurs :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 340/574

On y retrouve deux gris (fonc et clair), du orange, du vert et enfin, du rouge. Bon, il s'agit bien d'un exemple, ne vous y trompez
pas : une image est videmment compose de plusieurs milliers de couleurs diffrentes. Ici, je vous prsente simplement les
couleurs dominantes de l'image.

Notre objectif ici consistera remplacer la couleur rouge ( droite du schma) par une autre couleur, disons du bleu.

Nous retrouvons absolument toutes nos couleurs du dessus dans ce schma, l'exception du rouge qui a t remplac par du
bleu comme je le souhaitais. Cela signifie qu'il n'y a absolument plus du tout de rouge visible sur l'image car le bleu a pris sa
place.

Fonctionnement

Aprs la thorie, la pratique. Il est temps de commencer, nous allons apprendre remplacer le rouge par une autre couleur.
Ouvrons tout d'abord la fentre du rglage. Pour ce faire, il suffit de cliquer sur le bouton du menu Image > Rglages >
Remplacement de couleur....

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 341/574

Notre premier travail consistera slectionner la couleur que nous souhaitons remplacer au sein de notre image, au sein de notre
zone de travail, c'est--dire le rouge de la cabine tlphonique. De ce fait, il nous faudra tout d'abord nous intresser aux trois
motifs successifs reprsentant la pipette que l'on a connu dans la premire partie de ce cours.

En thorie, la petite pipette n'a qu'une seule et mme fonctionnalit et c'est celle que nous connaissons dj : elle permet en effet
d'"absorber" une couleur et d'y transfrer son code hexadcimal dans la palette de couleurs. Mais alors, pourquoi trois vignettes
? On les diffrencie les unes des autres grce aux petits signes mathmatiques qui les accompagnent :

La vignette de gauche est la pipette traditionnelle, celle que nous connaissons et que nous venons de dfinir.
Celle du milieu (avec le signe +) permet d'absorber d'autres couleurs en plus de la premire. Par exemple, si vous
slectionnez du bleu dans un premier temps et que vous souhaitez slectionner du orange en mme temps, vous n'aurez
qu' utiliser la pipette "Ajouter" (c'est son nom) et slectionner ces deux couleurs.
A l'inverse, la pipette de droite (avec le signe -) consiste retirer une couleur dj absorbe. Si vous avez absorb du

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 342/574

bleu, vous pouvez le retirer en le ciblant nouveau dans la zone de travail mais avec cette fois-ci la pipette "Retirer".
Ainsi, le bleu absorb ne le sera plus.

Nous commencerons ici par utiliser la pipette "normale" afin de slectionner une couleur dans l'image en cours de modification.
Cette image, je vous rappelle, est la suivante :

Il s'agira de cliquer n'importe o dans la zone de travail tant que vous ciblez le rouge de la cabine tlphonique. De mon ct, j'ai
cliqu par ici :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 343/574

Quand c'est cliqu, on peut voir quelle couleur a t absorbe et si la slection est correcte ou non grce l'aperu offert par la
fentre du rglage :

Le carr de couleur rouge situ en haut de la fentre confirme que nous avons bel et bien slectionn du rouge. Mais le plus
intressant se trouve un peu plus au centre, l o l'on a droit un aperu en noir et blanc de la cabine tlphonique.

Pourquoi l'aperu est-il en noir et blanc ?

En dessous de cet aperu, on peut apercevoir deux liens cocher :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 344/574

Slection
Image

En cochant "Image", l'aperu est en couleur, copie parfaite de la zone de travail telle qu'on l'a laisse avant d'ouvrir la fentre du
rglage. Or, le lien coch par dfaut reste pourtant "Slection" et ce n'est pas plus mal car c'est celui que j'avais justement prvu
de vous faire utiliser.

Je prfre ce mode-ci car l'aperu est beaucoup plus parlant mon humble avis. En effet, nous allons profiter du blanc et du noir
pour distinguer les couleurs absorbes de celles qui ne le sont pas. En d'autres termes, les couleurs absorbes la pipette
deviendront blanches dans l'aperu tandis que toutes les autres gagneront devenir noires. Plus l'objet dont nous souhaitons
remplacer la couleur se distingue du dcor grce la diffrence blanc/noir, plus le remplacement de couleur sera optimal.

Incontestablement, la cabine tlphonique dans mon exemple se dtache bien du reste : elle est blanche comme neige dans
l'aperu tandis que le fond est tout noir. On y est : maintenant que la cabine a t isole du reste, on n'a plus qu' modifier sa
couleur.

Pour absorber le rouge de la cabine, je l'ai fait directement dans la zone de travail. Vous pouvez aussi le faire par le biais
de l'aperu, mme si je vous le dconseille vivement du fait du manque de prcision que a pourrait engendrer.

Si vous sentez que la sparation cabine/dcor n'est pas assez importante (c'est--dire que la cabine n'est pas assez
blanche ou que le dcor n'est pas assez sombre), n'hsitez pas utiliser la pipette "Ajouter" pour slection nouveau
du rouge dans la cabine. Je vous le disais, une image est compose de millions de couleur, la cabine est donc compose
de plusieurs milliers de rouges diffrents. Il est possible qu'il faille absorber plusieurs rouges pour qu'ils soient tous
correctement remplacs afin que le rsultat final soit la hauteur de nos esprances.

N'hsitez pas faire varier la barre de tolrance situe au-dessus de l'aperu. Plus la valeur est importante, plus le rglage
"tolre" les variantes de rouge par rapport celui que vous avez slectionn. Cela veut dire que moins la valeur de tolrance est
importante, moins le rglage prendra en compte les couleurs similaires au rouge que vous viendrez d'absorber (logique...).

Bon, le plus gros du travail a t abattu, la suite va s'avrer beaucoup plus facile je vous rassure . Nous avons pass en
revue tous les lments de la fentre du rglage, l'exception de ceux-ci...

"Remplacement" ! Voil qui devrait nous intresser . Voyons voir, qu'avons-nous ici ? Cette partie de la fentre prsente trois
paramtres : la teinte, la saturation et enfin, la luminosit. Cela ne vous rappelle rien... ?

Bien sr ! On retrouve ces mmes paramtres dans la fentre "Teinte/Saturation", cette mme fentre que nous venons tout juste
de dcouvrir en dbut de chapitre. Vous savez donc ce qu'il vous reste faire, c'est--dire faire varier de gauche droite la teinte
(pour modifier la couleur initiale qui est le rouge), ainsi que la saturation et la luminosit si cela vous semble ncessaire.

Ainsi, en indiquant les valeurs suivantes...

Teinte : -152
Saturation : -34
Luminosit : +18

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 345/574

... J'obtiens ce rsultat-ci !

Malheureusement, on peut encore apercevoir des traces de rouge autour de la cabine. Cela est d l'absorption du rouge avec la
pipette que je n'ai semble-t-il pas assez correctement effectue. Mais aucune raison de paniquer : il suffit simplement de rouvrir la
fentre du rglage "Remplacement de la couleur...", rutiliser la pipette normale et slectionner les lments encore rouges
(n'hsitez pas utiliser la tolrance si vous tes dans le mme cas que moi !) pour finalement obtenir un rsultat plus convenable
:

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 346/574

Tout infographiste est tenu de travailler de manire astucieuse et mettre en pratique tout son savoir, quel que soit le
travail qui lui est demand. Par exemple, en plus d'utiliser nouveau la fentre du rglage "remplacement de la couleur"
pour combler les couleurs que vous souhaitez remplacer, vous pouvez trs bien utiliser un outil de slection pour
dtourer les zones dont ces couleurs apparaissent puis utiliser le rglage Teinte/Saturation que nous avons abord en
dbut de cours pour modifier la couleur par une autre . D'ailleurs, on aurait trs bien pu s'embter dtourer toute la
cabine puis s'amuser avec les rglages de la teinte, mais avouez que c'est un peu compliqu et dnu de sens quand on
connait l'existence du rglage de remplacement.

Isoler une couleur dans une image

Essayons maintenant la deuxime technique dont je vous ai parl qui consiste isoler une couleur des autres. Vous allez voir que
la procdure n'est que lgrement diffrente de celle permettant de remplacer une couleur. Je vous rappelle que "isoler une
couleur", a revient "dsaturer" toutes les autres pour ne laisser apparaitre que celle-ci. Cela signifie que nous n'allons

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 347/574

conserver que le rouge de la cabine tlphonique et transformer en noir et blanc le reste de l'image.

Je vous invite fermer le travail que vous venez de produire et rouvrir une nouvelle zone de travail avec l'image de la cabine
tlphonique de couleur rouge. En gros, je veux que vous ayez cette image sous les yeux :

Je vais galement vous demander de bien vouloir rouvrir la fentre du rglage intitul "Remplacement de la couleur...". Je vous
pargne la capture d'cran de cette fentre, je crois qu'on l'a assez vue comme a . Non, je prfre en fait vous faire part de la
procdure maintenant que vous maitrisez la pipette, l'aperu et tout le tralala que l'on retrouve dans cette fentre.

En fait, c'est bien simple, il va falloir refaire exactement la mme chose que ce que l'on vient de faire, mais dans le sens inverse.
Ainsi, il va falloir slectionner absolument toutes les couleurs part celle que nous souhaitons isoler, en l'occurrence la couleur
rouge. Et prenez garde ! Comme nous allons chercher absorber plusieurs couleurs en mme temps, nous profiterons de la
pipette "Ajouter" qui sert justement cela.

Allez-y, je vous en prie, dmarrez sans moi : veuillez slectionner toutes les couleurs prsentes dans cette image hormis celles qui
s'apparentent du rouge, c'est--dire la cabine tlphonique. J'aimerais au mieux que vous arriviez ce rsultat dans l'aperu en

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 348/574

noir et blanc :

N'hsitez pas faire usage de la tolrance pour un rsultat plus optimal. Comme vous pouvez le constater, ce n'est plus la cabine
qui est blanche mais tout le reste, et c'est justement ce que nous cherchions faire ! Du coup, c'est dsormais la cabine qui est
de couleur noire, nous avons donc fait du bon boulot .

L'ultime tape consiste travailler la saturation de la zone blanche (du dcor donc) : on va pour ce faire transformer la valeur
actuellement de 0 pour la modifier -100 (dsaturation totale). Eventuellement, vous tes libre de travailler la luminosit si cela
vous semble ncessaire. Pour ma part, je l'ai rduite -15 afin de faire ressortir davantage le rouge de la cabine. Et voici le rsultat
:

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 349/574

Mon premier exemple (au tout dbut de cette partie) prsentait un gris beaucoup plus fonc, la luminosit tait en effet beaucoup
moins importante.
Nous en avons provisoirement termin avec les rglages sur Photoshop. Cela ne nous empchera nanmoins pas de travailler les
couleurs de nos images dans le prochain chapitre.

Il est temps de sortir la grande artillerie, on va (enfin) utiliser ce qui se trouve dans la boite outils de Photoshop savoir... des
outils !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 350/574

Et les outils, on en fait quoi ?


Depuis que nous avons commenc traiter la retouche photographique, j'ai involontairement trouv le moyen de ne pas vous
faire utiliser un seul nouvel outil et pourtant, ce n'est pas ce qui manque sur Photoshop.

Ce que je vous propose maintenant, c'est de profiter de cette norme panoplie d'outils offerte par le logiciel et de retravailler une
photo un peu plus minutieusement. Fini les rglages automatiques : cette fois-ci, on va faire fumer notre souris d'ordinateur et
travailler avec dtail notre image. Nous allons alors corriger certaines parties de l'image en cours de modification, l'inverse des
rglages qui engendraient une modification de l'ensemble de l'image.
La densit des couleurs
La densit des couleurs d'une photo. En voil des termes plutt tranges que l'on assimile difficilement avec la photo, du moins
au premier abord, surtout quand on n'y connait pas grand chose dans ce domaine.

En ralit, corriger la densit d'une image consiste tout simplement retravailler les tons de couleur de cette image. On peut alors
par exemple avoir pour objectif de fortifier ses contrastes, on va donc renforcer ou attnuer les trois tons de couleur que l'on
connait sur le bout des doigts maintenant : tons clairs, tons moyens et tons foncs.

Mais attends une seconde... on a les rglages de niveaux de couleurs pour a, non ?

Le principe est le mme. Avec les niveaux de couleurs, on modifiait les tons de toute l'image, dans son intgralit. On ouvrait
alors la fentre "Niveau de couleurs", on rglait la jauge de gauche droite et le tour tait jou.

L'outil de densit est un pinceau avec lequel nous allons engendrer des modifications prcises et cibles. En fait, grce cet
outil, on va choisir quelle partie de l'image traiter prcisment grce au curseur de notre souris et en dfinissant entre autres la
taille de notre pinceau. On va donc tre en mesure de travailler sur une partie restreinte de l'image. C'est un travail, ma foi, plus
long mais aussi beaucoup plus minutieux, ce qui se prsente comme tant un rel avantage.

Il existe deux outils permettant de retravailler la densit : l'un la renforce (Densit +), l'autre l'attnue (Densit -). Nous tudierons
les deux bien entendu.

Attnuer la densit

Pour dire les choses grossirement, attnuer la densit des couleurs d'une image permet "d'claircir" ses couleurs. Nous
utiliserons donc l'outil Densit -.

Je vous invite prendre en main ce nouvel outil afin que l'on puisse commencer travailler avec. Votre curseur, quand cet outil
est slectionn, est reprsent par un cercle transparent au contour noir. Ce cercle reprsente la pointe de votre pinceau, ou plus
gnralement son diamtre. Attention, ne vous y trompez pas, nous n'allons pas peindre ici. En fait, nous allons faire semblant de
peindre. Pourquoi "faire semblant" ? Parce qu'il n'est pas question d'utiliser de la couleur ou de la peinture. Non, nous allons
utiliser l'outil de densit et le passer sur les lments travailler, comme nous le ferions si nous avions besoin de les recouvrir de
peinture avec un pinceau. J'utilise le terme de "peindre" pour dsigner le geste.

Veuillez faire un clic-droit n'importe o sur votre zone. Une nouvelle fentre s'ouvre...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 351/574

Grce aux lments que l'on trouve dans cette fentre, il va nous tre possible de paramtrer le bout de notre pinceau. On va
donc pouvoir modifier la taille, la forme et la duret du bout.

paisseur : dfinissez le diamtre du bout de votre pinceau.


Duret : pinceau sec/mouill.
Liste de pinceaux : pointes de pinceau (appel des "poils") aux paramtres prdfinis.

Avant de s'exercer avec un exemple concret comme on a maintenant l'habitude de le faire, laissez-moi vous montrer rapidement
comment fonctionne le pinceau et plus prcisment l'outil de densit. tant donn que nous allons d'abord travailler avec l'outil
Densit - qui sert attnuer la densit de couleur d'une image, j'en ai volontairement choisi une la texture globalement sombre :

Outil en main, je commence par cliquer une fois (en maintenant le clic) et faire des va-et-vient de gauche droite sur la partie
suprieure de mon image.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 352/574

On note un premier changement, une bande blanche est en effet apparue. Grce l'outil de Densit -, je suis parvenu claircir la
partie sur laquelle j'ai maintenu le clique de gauche droite.

Continuons. Je reproduis les mmes gestes, mais cette fois-ci une ligne en-dessous en essayant de mordre un peu et repasser
lgrement sur la premire bande blanche que j'ai dj trace. Une fois la deuxime bande blanche trace, je lche le clic et
recommence une fois, en prenant soin de repasser sur cette mme ligne blanche, ce qui donne dans l'ordre :

1. Je clique et fais un aller-retour de gauche droite.

2. Je recommence exactement la mme chose : je reclique et refais un aller-retour de gauche droite sur la mme bande blanche.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 353/574

Vous le constatez en mme temps que moi, la bande blanche est devenue encore plus blanche une fois que je suis repass
dessus. Cela fait partie des choses savoir avec l'outil Densit : plus vous le passez quelque part, plus il prend effet. Mais
condition que vous lchiez le clic chaque fois, sans quoi cela ne fonctionnera pas.

Du coup, je rdite ce que je viens de faire jusqu' arriver en bas de mon image, en prenant soin chaque fois que je recommence
une ligne de repasser une fois supplmentaire avec un nouveau clic.

Ce que l'on vient de faire porte un nom : il s'agit d'un dgrad. Nous avons effectivement russi en crer un en jouant avec la
densit des couleurs : de la plus fonce la plus claire.

Alors oui, l'outil Densit n'est pas forcment l'outil le plus appropri pour crer des dgrads, mais ce n'tait pas vraiment la
finalit recherche de cet exercice. Je voulais simplement que vous compreniez comment fonctionne l'outil et j'imagine que cet
exemple tait suffisamment parlant.

D'accord, mais si ce n'est pas pour faire des dgrads, c'est pour quoi faire ?

Tout d'abord, je n'ai pas dit que "ce n'tait pas pour faire des dgrads", d'ailleurs je suis convaincu qu'il y a des infographistes
qui utilisent cet outil pour en faire (et cela n'appartient qu' eux, chacun ses mthodes aprs tout). Toutefois, je dois prsumer
qu'il n'est pas forcment destin la cration de dgrads. Si l'on en dduit de par son nom, il sert simplement renforcer ou
attnuer la densit des couleurs d'une image, on peut donc imaginer un tas de techniques de travail aprs, que ce soit la cration
de dgrads ou bien la correction de la densit de couleurs d'une photo (ce qui me semble dj plus logique en soi).

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 354/574

Densit +

L'outil Densit + fonctionne exactement de la mme manire que l'outil densit - . La seule diffrence, vous vous en doutez,
c'est que celui-ci accentue la densit et donc, fonce les couleurs d'un calque. Pour le slectionner, cliquez-droit sur l'outil densit
- puis cliquez sur l'icne de la densit + reprsente par une main.

Comme j'ai l'impression que l'exemple que j'ai utilis juste avant tait quand mme super parlant (arrtez-moi si je me trompe), j'ai
dcid de le reprendre en changeant un peu mon sujet de travail. Cette fois-ci, nous utiliserons une petit rond que voici :

N'hsitez pas travailler avec moi !


Tlcharger l'image
Rond_densit.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Vous pouvez comparer cette image celle de notre exemple ci-dessus, vous remarquerez alors que la couleur utilise (encore le
gris) est ma foi beaucoup plus claire. Et c'est assez logique puisque, vous le savez, nous allons tenter de foncer la couleur grce
l'outil de densit prvu cet effet. Nous allons nanmoins faire cela de manire ce que notre travail soit la fois plus
complexe (mais pas forcment plus compliqu), la fois plus passionnant que ce que nous avons fait avec l'autre outil de densit
dans l'exemple prcdent.

Cette fois-ci, notre objectif consistera transformer ce petit rond en une boule. En d'autres termes, nous allons donner du relief
au rond pour en faire une sphre parfaitement ronde. Enfin, "parfaitement", c'est un grand mot hein.

Commencez par slectionner l'outil Densit + si cela n'est pas dj fait. Veillez ce que le diamtre de votre pinceau soit de
93px.

Quand nous travaillions le carr dans l'exemple prcdent avec l'outil de densit -, nous effectuions des aller-retour
l'horizontale, c'est--dire sur la largeur du carr. Maintenant que nous avons un rond, nous allons procder exactement de la
mme manire, l'exception du fait que nous allons tenter suivre la courbe des bords du rond en commenant par le bas.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 355/574

En suivant mes indications la lettre, vous ne devriez pas voir de grande volution. C'est normal, c'est parce que vous n'avez
travaill qu'avec un seul clic. Or, comme je le disais, vous n'accentuerez pas l'effet de l'outil en faisant plusieurs aller-retour en un
seul clic mais en recliquant rgulirement. Ainsi, si on reproduit plusieurs fois les tapes indiques dans mon schma ci-dessus
(je clique, je maintiens le clic, je lche le clic... on recommence : je clique, je maintiens le clic, je lche le clic, etc.), mettons 10 fois,
on est cens obtenir un rsultat semblable celui-ci :

On remarque d'ores et dj que le rond n'en est plus vraiment un : il prend l'apparence d'une boule. Bien entendu, on ne va pas
s'arrter en si bon chemin. Je vais toutefois vous demander d'annuler les modifications que vous venez d'apporter votre rond
car tel qu'il est maintenant, il va nous tre difficile d'en faire une boule correcte, le contraste tant trop fort. A vrai dire, c'tait
juste pour l'exemple. Je vous rappelle que pour annuler vos actions, vous pouvez passer par le menu dition > Annuler ou bien

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 356/574

vrifier votre historique dans la palette flottante droite de votre logiciel, au-dessus de la fentre des calques.

Ctrl + Z

Command (ou Pomme) + Z

Nous revoici donc avec notre rond d'origine :

Vous avez donc compris qu'il allait falloir, de nos gestes avec la souris, suivre le bord du rond. Dans l'exemple ci-dessus, nous
avions commenc en bas du rond car c'tait plus facile pour vous, il fallait simplement passer votre souris par-dessus le bord, a
me semblait plus judicieux de commencer comme cela. En fait, l'idal serait de commencer en son centre, votre curseur suivra
donc les contours du rond comme convenu, mais quelques centimtres au-dessus. Schmatiquement, il faudrait que votre
curseur suive la trace rouge de cette image :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 357/574

L'objectif tant de simuler la courbe que prendrait une aurole de plante. Je vous invite rditer ce que nous venons de faire,
mais en effectuant cette fois des alles et venues 7 fois, en lchant chaque fois le clic quand un trait est trac (en imaginant la
fameuse aurole au centre de la plante). Ainsi, on reprendrait cette tape l 7 fois :

Ce qui revient plus ou moins dire :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 358/574

Vous devriez donc obtenir le rsultat suivant :

Il s'agira de notre base, celle partir de laquelle nous allons tracer les autres arcs de sorte crer le fameux dgrad que l'on
retrouvait dans l'exemple prcdent. Ainsi, nous allons commencer par tracer de nouveaux arcs en-dessous de celui que nous
avons dj trac. Pour former un dgrad, nous sommes dans l'obligation d'effectuer des alles et venues en moins de 7 clics
(pour que l'effet de l'outil soit moins important), mettons par exemple 4 clics. Donc, on reprend exactement les mmes gestes mais
en ne lchant que 4 fois le clic :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 359/574

Ce qui donne donc...

Notre boule prend forme on dirait. Rditons, mais en faisant cela au-dessus de notre premier arc de cercle maintenant. J'ai
dcid de lcher le clic 5 fois.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 360/574

En l'tat actuelle, on peut dire que notre boule est dj relativement bien forme. On pourrait toutefois l'amliorer (on peut
toujours tout amliorer vous me direz) en accentuant davantage les reliefs grce des contrastes plus importants... On peut par
exemple modifier le diamtre du pinceau ou encore utiliser l'outil Densit - pour contrecarrer l'effet de l'outil Densit +.

Je vous laisse vous dbrouiller tout seul pour arriver ce rsultat, je crois que vous en tes largement capable maintenant.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 361/574

Hey, il n'y aurait pas moyen d'obtenir un meilleur rsultat avec les options de l'outil ? Tu sais, les options qu'on trouve
en haut du logiciel...

Vous faites bien de m'en parler, ces options sont on ne peut plus importantes pour la suite des vnements. Car on ne va pas
s'arrter l, jusqu'ici les exemples que je vous proposais taient plutt basiques et n'avaient pas vraiment d'intrt en soi. Je dirais
mme plus, on commenait presque rentrer dans le domaine de la cration plus que dans celui de la retouche photographique.
Pourtant, force est de constater que cet outil est davantage utilis pour cette dernire et c'est pourquoi nous allons vritablement
avoir besoin de ses diffrentes options. Il est temps de passer aux choses srieuses.

Les options de l'outil

Tout d'abord, notez que les options sont les mmes pour les deux outils de densit. Veuillez donc slectionner l'un ou l'autre puis
observer les options qui lui sont lies :

Procdons de gauche droite. Nous avons tout d'abord l'icne de l'outil actuellement tenu en main. En fait, quel que soit l'outil,
vous trouverez toujours son icne sur la gauche de la barre des options. Vous savez donc que j'ai slectionn l'outil Densit -, il
se peut que vous trouviez quant vous l'icne de l'outil Densit + si c'est celui-ci que vous avez pris.

Vous trouverez ensuite les paramtrages du bout de votre pinceau, il suffit de cliquer sur le bouton o il est crit 100 :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 362/574

Mais en fait, c'est quoi cette liste juste en-dessous des paramtres du pinceau ?

Je vous en ai touch un mot tout l'heure, il s'agit des pinceaux la pointe (ce que l'on appelle plus communment le poil) pr-
paramtre. Je ne vous ai toutefois pas tout dit car j'ai prvu d'en parler plus longuement dans un chapitre de la troisime partie
de ce tutoriel, c'est pourquoi il va falloir patienter un peu. Mais rassurez-vous, vous n'avez pas besoin de savoir en quoi cela
consiste ce stade du tutoriel, du moins pas tant qu'on utilisera l'outil de densit. Puis, si a vous intrigue vraiment, essayez par
vous-mme, je suis convaincu que vous allez vite comprendre, cela n'a rien de sorcier.

On continue et nous allons directement passer l'option "Gamme". Je ne dsire pas parler de l'option lie cette icne car ce
n'est pas une option proprement dit, du moins mon sens puisqu'en ralit, il s'agit de la miniature d'une palette flottante telle
qu'on les trouve droite du logiciel. Cette miniature ouvre la palette flottante appele "Forme", elle est directement lie au
pinceau. Encore une fois, nous en parlerons le moment venu, c'est--dire dans le chapitre traitant du pinceau.

L'option suivante, la gamme, permet de choisir les tons de couleur sur lesquels nous allons appliquer l'outil afin de lui faire
gagner en efficacit et que le rendu soit des plus optimaux.

Les tons de couleur, on les connait bien maintenant, mais au risque de me rpter, il existe les tons clairs, les tons moyens et les
tons foncs.

En utilisant par exemple l'outil Densit - (cens "claircir") en dfinissant une gamme de tons foncs, l'outil sera plus efficace si
vous travaillez sur les parties fonces de votre photo. Voyons un exemple.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 363/574

Sur ce schma, on vous prsente trois carrs initialement de couleur noir. On a appliqu l'outil densit sur chacun de ces carrs
noirs en prenant soin d'utiliser chaque gamme et de cliquer 5 fois chaque fois. Incontestablement, la gamme des tons foncs a
t plus efficace et effective que les deux autres et ceci s'explique par le fait que le carr est de couleur fonce.

Cela fonctionne aussi dans le sens inverse. Si l'on reprend le mme exemple, mais avec des carrs de couleur claire, mettons un
gris clair, on obtient un rsultat parfaitement logique et en adquation avec celui ci-dessus :

Le carr sur lequel on a travaill avec l'outil Densit - paramtr pour la gamme "tons clairs" a quasiment disparu. Et si vous
suivez bien, cela est parfaitement normal puisque l'outil tait ce moment-l programm pour tre plus efficace sur les tons clairs.
La preuve, le carr de droite n'a pas boug d'un poil, sa couleur est reste la mme. C'est encore normal, l'outil tait en effet
paramtr sur la gamme des tons foncs.

Allez, dernier petit essai avec des carrs de couleur gris fonc maintenant, comme a on les aura tous faits. Je vous laisse juger et
analyser les rsultats, vous devriez les comprendre sans que j'aie besoin de vous les expliquer dsormais.

Terminons avec les options de densit. Dterminer un pourcentage d'exposition permet de modifier la puissance de l'effet de
l'outil de densit. Ainsi, moins le pourcentage d'exposition est important, moins l'effet de l'outil le sera. Et vice-versa, bien
entendu.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 364/574

Le bouton Arographe ne nous intressera pas dans ce cours, j'imagine que ce n'est pas forcment ce qu'il y a de plus
important tudier. Je peux simplement vous dire qu'avec l'arographe d'activ, si vous restez appuy sur une zone de votre
image, l'effet de l'outil gagnera progressivement en puissance et prendra peu peu de l'ampleur sur votre image.

Nous passerons directement l'option cocher "Protger les tons". Cette option est relativement rcente, on peut mme la
qualifier de nouveaut car elle n'existe que depuis la version CS4 de Photoshop. Avant, il fallait s'en passer. Aujourd'hui, lorsque
je retouche mes photos, il m'est devenu systmatique de la cocher tant elle est importante selon moi. J'ose mme dire que sans
elle, l'outil peut devenir obsolte par moment.

O veux-tu en venir ? Un outil de Photoshop, obsolte ?

Le mot est peut-tre un peu fort, mais je peux vous assurer que je n'en pense pas moins. A l'aide de cette option, nous allons tre
en mesure de conserver les tons de couleurs de l'image en cours de modification, chose qui n'tait pas permise avant. On ne va
donc pas se contenter de travailler la densit des couleurs de manire "brute", l'option va en fait se charger de garder une
certaine uniformit pour que l'harmonie des couleurs soit correcte et que cela paraisse plus vrai que nature.

Et pour vous prouver que je ne dis pas que des btises, je vais tcher de vous donner un exemple pour que vous puissiez vous
aussi vous en rendre compte. Vous verrez quels rsultats prsente le "nouvel" outil densit et ceux que prsente l'outil sans
l'option. L'image, la voici, j'allais presque oubli de vous la faire tlcharger.

N'hsitez pas travailler avec moi !


Tlcharger l'image
Ex_ski.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 365/574

Mon objectif : passer l'outil Densit - sur l'ensemble du visage de ce jeune homme, mais seulement sur la peau (exit le
masque et le bonnet) une premire fois avec l'option de protection des tons active, une autre fois avec l'option dcoche.

Je commence avant tout par dtourer le contour du visage avec le lasso polygonal afin de protger le reste des modifications que
je compte apporter. Seul le visage sera mme de recevoir une quelconque modification.

Je reprends ensuite mon outil Densit - et prends soin de cocher l'option "Protger les tons". De cette manire, je conserverai les
tons de couleurs de l'image. Au niveau des options et paramtres, j'ai personnellement pens que ceux-ci taient les plus justes :

Diamtre : 13px
Duret : 0px
Gamme : tons moyens
Exposition : 50%

Je clique une fois, maintiens ce clic et passe plusieurs fois sur la partie slectionne. N'hsitez pas dpasser, tout le reste est
protg donc vous ne risquez pas de dborder. Retirez ensuite la slection et vous devriez obtenir ce mme rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 366/574

Et mieux, si on avait utilis une gamme de tons foncs, on aurait obtenu un rsultat encore plus prononc :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 367/574

Si l'on compare avant/aprs, on peut se rendre plus facilement compte de l'volution :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 368/574

Faisons maintenant l'essai avec le mme outil, les mmes paramtres mais l'option "Protger les tons" dcoche. Cela signifie
logiquement que les tons de couleurs ne sont pas conservs, comme a a toujours t le cas jusqu' la version CS4 du logiciel,
quoi.

Donc, premirement, on dtoure le visage. Puis, on prend l'outil, on dcoche l'option de protection de tons et on passe l'outil
dans la slection en maintenant le clic et en ne faisant qu'un seul clic. Une fois que l'outil est bien pass, on retire la slection et
on obtient le visage de la maladie !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 369/574

Le rsultat parle franchement de lui-mme, on obtient un visage drlement ple, trop ple mme pour qualifier la transformation
de correcte. C'est d'ailleurs pourquoi je juge l'outil obsolte quand la protection des tons n'est pas coche, du moins dans un tel
contexte de travail.

Hey, mine de rien, tous ces exemples n'ont pas servi rien car, finalement, nous aurons travaill la densit de couleur d'une
photo, et cela faisait partie de mes objectifs.
Modifier la saturation
Quand on dbute sur Photoshop, on ne se rend pas bien compte d'une chose : le plus souvent, quand on sait utiliser un outil, on
sait en utiliser beaucoup d'autres du moment qu'ils font partie de la mme famille (et encore). Et justement, c'est le cas de l'outil
ponge qui est le cousin des outils de densit, je vous invite d'ailleurs le slectionner, c'est avec lui que nous travaillerons.

Le principe d'utilisation de l'outil ponge est clairement le mme que celui des outils que nous venons d'tudier. Hormis ses
options qui sont diffrentes, la seule vraie nouveaut, c'est l'effet que produit l'outil sur nos images. Si les outils de densit
permettaient de rgler la densit de nos images, l'ponge nous servira quant elle rgler la saturation des couleurs de nos
images.

C'est quoi dj, la saturation ?

Nous avons eu affaire elle dans le chapitre prcdent, lorsque nous tudiions la fentre de rglages "Teinte/Saturation".
Travailler la saturation des couleurs d'une image revient les ternir ou les raviver. Par exemple, un vert pomme peut tre
transform en vert pale ou vert fluo. Voyez plutt :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 370/574

Cette pomme est intacte, elle n'a subi aucune modification. Avant cela, il va falloir jeter un il sur les options de l'outil ponge et
choisir un mode.

Le mode prsente deux paramtres : Dsaturation et Saturation. Le premier permet de ternir la couleur, l'autre de la rendre plus
vive. Voyons voir ce que cela donne sur notre fameuse petite pomme verte.

Un coup d'ponge un peu partout avec le mode Dsaturation activ et hop :

Une pomme malade . J'ai pass mon ponge partout sur la pomme, et d'ailleurs, j'ai n'ai mme pas eu besoin de crer une
slection autour car le fond est blanc, l'outil n'a donc aucun effet sur lui.

Avec le mode Saturation, c'est tout l'inverse qui se produit. Voil ce que a donne :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 371/574

Les couleurs sont plus vives, plus clatantes. C'est encore plus flagrant quand on compare les ombres des deux pommes
(l'originale et la modifie) ou leurs reflets.

Bon, je dois admettre que prsent sous cette forme, la saturation semble n'avoir aucun intrt et je vous l'accorde, ce n'est pas
particulirement intressant de saturer/dsaturer une pomme. Mais pour que cela soit utile, il suffit simplement d'en avoir l'intrt.
Et j'ai justement quelque chose pour vous !

N'hsitez pas travailler avec moi !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 372/574

Tlcharger l'image
Plateau_fromage.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Je dois vous faire une confidence, je dteste le fromage ! Mais pour le bien du tutoriel, je vais faire comme si j'tais un
adepte, je ne voudrais pas me mettre dos la majorit des lecteurs.

Notre objectif consistera raviver le jaune du fromage pour qu'il paraisse moins terne. Qui dit couleurs vives dit... ? Saturation,
parfaitement ! On va donc faire usage de l'ponge sur les carrs de raclette au mode saturation. Mais on ne va pas juste se
contenter du mode, on va en effet activer la vibrance de l'ponge.

C'est pour donner un effet et faire croire que l'image est en train de vibrer ?

Pas vraiment, non. Comme vous le savez, saturer les couleurs d'une image signifie les raviver. Or, on peut facilement abuser
de la saturation et crer ce que l'on appelle un crtage de couleurs.

On parle d'crtage pour dsigner les valeurs de couleur dun pixel qui sont suprieures la plus haute ou infrieures la plus
faible valeur "conforme" ou "tolre". Ainsi, un pixel trop lumineux ou pas assez lumineux sera un pixel crt. Cela se traduit par
une perte de dtails de l'ensemble de limage.

Et c'est ce pourquoi on utilise la vibrance, on le fait pour viter lcrtage des couleurs avant que cela soit possible.

Revenons-en notre fromage (notre excellent fromage de raclette !) et testons d'abord l'outil sans la vibrance active. Laissez-
moi juste avant vous toucher un petit mot concernant le flux que vous trouverez dans les options de l'outil. Il s'agit ni plus ni
moins de la puissance de l'outil, l'image de l'option exposition que l'on trouvait avec les outils de densit. Plus le flux est
important, plus l'outil est puissant et effectif sur votre image.

Comme avec les outils de densits, je commence par slectionner les fromages et je passe mon outil ponge avec les options
suivantes :

Mode : saturation
Flux : 15 px
Vibrance : dsactive

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 373/574

Suite au passage de l'ponge, les couleurs du fromage ont jauni, du coup on pourrait croire que le fromage a eu un petit coup de
chaud. Personnellement, je ne suis pas fan de l'effet, je ne dis pas qu'il est "horrible" mais je ne trouve pas a forcment trs
raliste... A l'inverse de l'effet que produit la vibrance !

Quand on refait la mme exprience mais avec la vibrance active, c'est clairement plus raliste, regardez !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 374/574

Et notre traditionnel avant/aprs, pour vous rendre compte de l'intrt de l'outil.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 375/574

Une image floue, une image nette


On reste dans la modification d'image grce aux outils de retouche et de rparation, et nous allons prsentement nous intresser,
dans l'ordre, aux outils Goutte d'eau, Nettet et Doigt.

La goutte d'eau

Tout d'abord, veuillez slectionner l'outil goutte d'eau pour que vous puissiez l'avoir entre les mains. En mme temps, vous
ne risqueriez pas de faire grand chose sans ...

L'outil goutte d'eau permet de crer un effet de flou sur une image. D'un point de vue technique, cela revient dire que les pixels
vont se "brouiller", se mlanger entre eux de sorte ce qu'ils ne soient pas plus nets mais... flous :

Flouter un objet sur Photoshop fait partie des techniques que je juge courantes et il existe d'ailleurs diverses manires de crer
du flou. La manire la plus rpandue et sans doute la plus simple est l'utilisation des filtres prvus cet effet. Les filtres sont une

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 376/574

fonction du logiciel qui permet de crer un tas d'effets grs par Photoshop. Les filtres prsentent un nombre incalculable
d'avantages, il est par exemple possible de crer diffrents effets de flous ce qui nous laisse plus de possibilits en terme de
cration. J'ai d'ailleurs prvu un chapitre traitant de quelques filtres dont les filtres de flou, il arrivera sous peu.

Mais alors, pourquoi utiliser la goutte d'eau si on a les filtres ?

Pour les mmes raisons qui nous ont pouss utiliser les outils de densit ou l'ponge. L'avantage avec la goutte d'eau, c'est
que tout se fait avec la souris. On clique, on maintient ce clic et on dplace la souris. A la diffrence des filtres qui sont
paramtrables grce des chiffres et des valeurs parfois approximatives et complexes dfinir, l'image des fentres de rglages
telles que les niveaux de couleurs par exemple.

Comme pour tous les outils de retouche, il existe une fentre de paramtres pour faire des rglages sur l'embout de l'outil. Pour la
goutte d'eau, nous avons les paramtres suivants (en cliquant droit dans la zone de travail, comme toujours) :

Cette fentre, vous la connaissez. Vous la connaissez parce qu'il s'agit de la mme pour tous les outils de retouche (et pas qu'eux
!), notamment ceux que nous avons tudis auparavant. Nous nous contenterons pour le moment de n'utiliser que l'paisseur,
d'ailleurs on va en profiter pour faire cela tout de suite. Veuillez dfinir un diamtre de 170px votre outil et tlcharger par la
suite le document sur lequel nous allons travailler.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 377/574

Encore le Big Ben !

N'hsitez pas travailler avec moi !


Tlcharger l'image
Lampadaire_BB.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Comment pourrions-nous, votre avis, utiliser le flou dans cette image pour qu'il ait un intrt et ne la gche pas ? C'est simple,
nous allons essayer d'isoler un lment qui compose l'image en floutant tout le reste. Cette image est ici constitue de trois
lments : le lampadaire en premier plan puis le parlement et enfin le Big Ben. Notre premier travail sera d'isoler le lampadaire qui
se trouve en premier plan en floutant tout le reste de sorte le faire ressortir de l'image.

Est-ce qu'il va falloir que j'utilise le Lasso polygonal encore une fois ?

Exceptionnellement, je vais devoir vous dconseiller d'utiliser le lasso avec un outil engendrant l'apparition de flou. Vous le
savez, le lasso permet de crer une slection autour d'un lment dans un calque, cela cre donc une dlimitation protgeant tout
ce qui se trouve l'extrieur de la slection. Mais voil, cette dlimitation est nette partir du moment o le contour progressif
est de 0px, or, quand on floute quelque chose, on brouille justement l'ensemble de l'image, contours compris. Il est donc
dconseill de laisser des contours nets, chose qu'engendrerait justement la slection du Lasso.

On n'a qu' utiliser le contour progressif dans ce cas ?

On pourrait, mais c'est juste inutile puisque l'outil de flou s'en charge votre place. Regardez ce que cela aurait donn si

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 378/574

nous avions utilis la goutte d'eau dans la slection qui encadre la cathdrale et le Big Ben :

Le rsultat n'est pas la hauteur de nos esprances. Pourtant, le flou a t cr en soi, il est donc bien prsent et c'est ce que
nous recherchions. Le vrai problme, c'est l'apparence des bords (regardez les contours des btiments), la dmarcation est trop
nette. Il vaut mieux se contenter de l'outil brut, sans slection aucune, tant que l'on fait a avec soin et dlicatesse. Ainsi, si vous
respectez bien les bords et que vous travaillez correctement, vous devriez sans mal obtenir ce rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 379/574

Incontestablement, le rsultat est meilleur, le rendu est de qualit et bien entendu, le lampadaire est maintenant isol du reste, il
est devenu l'objet principal de la photo.

Et si je veux isoler le Big Ben ?

La question ne se pose mme pas, on refait exactement la mme chose mais en veillant ce que la grande cloche ne soit pas
touche par la goutte d'eau afin de lui viter toute trace de flou. Encore une fois, si vous vous appliquez et que vous travaillez
correctement, vous devriez obtenir une image semblable celle-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 380/574

Veuillez prendre note que l'on a tendance flouter les lments d'une photo selon leurs plans. Admettons que j'aie deux lments
sur une image, l'un au premier plan, l'autre au deuxime. Je pourrais alors flouter celui au premier plan pour focaliser mon objectif
sur ce sujet-ci, ou faire l'inverse. D'une manire gnrale, je sais qu'il est prfrable, dans un souci d'esthtisme, d'utiliser le flou
de manire intelligente, notamment grce aux plans d'une image. :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 381/574

Dans notre exemple, on avait deux lments au second plan : le Big Ben ET le parlement. Or, nous n'avons isol que le Big Ben,
ce qui a pour consquence de laisser un got de "mal fait", trop de flou. La preuve, si je recommence mon floutage mais en
veillant ne pas toucher au parlement avec ma goutte d'eau (donc conserver tout le contenu du second plan de mon image),
j'obtiens un rsultat qui est mon sens beaucoup plus propre.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 382/574

La nettet

Maintenant que nous en avons termin avec la goutte d'eau, veuillez slectionner l'outil nettet . Il vous faut faire un clic-
droit sur l'icne de l'outil goutte d'eau pour le voir apparaitre dans la liste qui va s'afficher. Lui et la goutte d'eau font tous deux
partie de la mme famille, tout comme l'outil qui va suivre d'ailleurs.

La diffrence entre les outils goutte d'eau et nettet est que ce dernier ne floute pas une image mais la rend plus nette, comme le
laisse prsager son nom.

Je vous disais d'ailleurs la goutte d'eau rendait les pixels moins diffrents les uns des autres puisque les pixels et les couleurs se
mlangeaient. Et bien, on peut dire que c'est l'effet inverse avec l'outil Nettet : le fait d'ajouter de la nettet une image a pour
effet de prciser ses pixels, on peut ainsi plus facilement les distinguer l'il nu par exemple. Vous me suivez ?

Toutefois, aussi puissant soit-il, l'outil Nettet ne peut pas crer des dtails. On pourrait penser que cet outil est le parfait
contraire du flou, alors que ce n'est pas exactement a. Par exemple, on ne peut pas prendre une image floue, y appliquer l'outil
Nettet et se retrouver avec une image compltement claire et dtaille. On aura tendance utiliser la Nettet pour combattre un
lger flou.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 383/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
goutte_nettet.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Paradoxalement au principe de base de l'outil goutte d'eau qui permettait de flouter, j'ai choisi l'exemple d'une goutte d'eau pour
illustrer l'effet que produit l'outil Nettet.

Dans cet exemple, je vais vous proposer de passer l'outil Nettet dans les zones les moins floues que l'on peut trouver, c'est--
dire au niveau de la goutte d'eau et du milieu de la tige. Encore une fois, vous n'tes vraiment pas obligs d'utiliser le lasso pour
crer une slection, du moins ce n'est pas ncessaire. Mais si vous le dsirez vraiment, faites-en une autour de la goutte d'eau
seulement car en qui concerne la tige, il existe dj un flou progressif sur lequel il ne faudrait pas chevaucher avec l'outil Nettet
pour crer une dlimitation.

Bref, quand vous vous sentez prt, vous pouvez y aller. Vous devriez obtenir un rsultat proche de celui-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 384/574

Nous avons russi accentuer les reflets de la goutte pour la rendre d'une manire gnrale moins floue, tout comme nous avons
russi faire ressortir un peu plus les petites imperfections de la tige. A comparer, cela donne :

Mlanger les couleurs entre elles !


Le doigt

L'outil doigt permet de mlanger les pixels entre eux. Pour comprendre, on peut imaginer une peinture (une uvre) encore
toute fraiche et dans laquelle on va s'amuser mlanger chaque lment peint l'aide de notre doigt.

Pour tre parfaitement honnte, ce n'est pas un outil que j'ai l'habitude d'utiliser, sans doute parce que je n'en ai que trs rarement
besoin. Mais je prfre en parler dans ce tutoriel car il fait partie de la mme famille que les deux outils prcdemment tudis,
ceci sans parler du fait que vous en aurez peut-tre plus besoin que moi pour vos projets futurs.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 385/574

Essayons avec Mike, le monstre vert du film d'animation "Monstre & co." ( Disney PIXAX).

N'hsitez pas travailler avec moi !


Tlcharger l'image
Mike.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

On va tenter de supprimer son il, du moins sa pupille pour finalement arriver ce rsultat :

C'est un peu gore, je sais .

Avant tout, essayons de comprendre comment fonctionne l'outil. A l'image de ses deux acolytes ci-dessus, il faut utiliser notre
souris d'ordinateur et son clic. Je ne vais pas me rpter, vous savez comment faire maintenant. Avec l'outil doigt, vous allez tre
en mesure de "tirer" les pixels en direction du curseur de votre souris de cette manire :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 386/574

Commenons par crer une slection autour de la pupille pour protger le reste. Vous utiliserez donc le lasso, je vous
recommande vivement de faire a correctement, bien autour de l'il comme je l'ai fait ici :

Afin de ne pas tre en contact direct avec le vert de la peau du monstre et ne s'en tenir qu'au blanc de son il, nous allons
rtrcir lgrement la slection. Pour ce faire, veuillez cliquer-droit l'intrieur de la slection puis slectionner "Transformer la
slection".

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 387/574

Une fois que vous avez cliqu, vous devriez faire apparaitre nos fameuses poignes (les carrs transparents) synonymes de
"transformation active" :

Comprenez bien qu'ici, ce sont les pointills de la slection que nous allons transformer en homothtie et non le
contenu de la slection. Si nous avions voulu transformer le contenu de la slection, il aurait fallu cliquer sur
"Transformation manuelle" plutt que sur "Transformer la slection".

Utilisez l'une des poignes des coins et rtrcissez la slection de manire proportionnelle. Si vous ne savez pas comment faire,
rendez-vous dans les chapitres sur la transformation dans la premire partie de ce cours. Laissez 4 5 bons pixels d'cart pour
arriver un rsultat similaire celui-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 388/574

Je slectionne ensuite l'outil doigt , le paramtre 20 pixels d'paisseur puis j'effectue des alles et venues de l'extrieur de la
pupille (et pas de la slection !) l'intrieur de la pupille, en prenant soin de m'arrter au centre du cercle chaque fois. N'hsitez
pas utiliser le zoom, il est fait pour a.

Je procde de la mme manire en reprenant lgrement ct de ma premire modification. Le but tant de faire a sur la totalit
de l'il.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 389/574

Je continue...

N'oubliez pas de vous arrtez au centre de la slection et, par extension, de la pupille.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 390/574

Bref, on fait a jusqu' ne plus apercevoir la pupille ou presque. Si j'obtiens un rsultat comme celui-ci, c'est dj bien :

Pour liminer toute trace de pupille, il faut tout simplement recommencer ce que l'on vient de faire. Mais comme on a maintenant
un peu plus de place (la pupille est effectivement bien moins grosse prsent), il serait judicieux d'augmenter le diamtre de notre
outil. Ainsi, on peut le mettre entre 25px et 30px, a je vous laisse dcider. On reprend ensuite les mmes gestes et, si c'est bien

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 391/574

fait, on a quelque chose comme :

On n'a plus retirer la slection et dzoomer et, en effet, on a limin d'une traite la pupille de notre pauvre monstre Mike.

Le titre de ce chapitre disait "Et les outils, on en fait quoi ?". Le moins que l'on puisse dire, c'est que l'on aura bien boss avec, et
pas qu'un peu !

Pourtant, c'est loin d'tre fini. Nous avons droit un arsenal on ne peut plus complet et c'est ce pourquoi d'autres chapitres vous
attendent, il y a encore matire retoucher. Alors on y va, on a encore du pain sur la planche !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 392/574

Outils de rparation
Le voil enfin, le chapitre qu'on attendait tous !

Jusqu'ici, cette deuxime partie sur la retouche photographique tournait principalement autour des couleurs. On pouvait parler de
"retouche chromatique", autrement dit de "retouche de la couleur" car c'est en effet ce que nous faisons de puis le dbut : nous
trifouillons et modifions tout ce qui se rapporte la couleur dans une image.

Dsormais, nous allons nous en carter un peu et nous concentrer sur ce que l'on appelle la rparation photographique.

Bah, c'est pareil, non ? En modifiant leurs couleurs, on rparait plus ou moins les images sur lesquelles on travaillait.

Hmmm, si on joue sur les mots, j'aurais tendance appeler cela de la retouche photographique. Cette fois-ci, nous allons encore
faire de la retouche, mais avec des outils qui servent gnralement rparer des images (qui peuvent tre abimes, esquintes,
dgrades, ou tout simplement dans le but de tricher un peu et camoufler certains lments non-dsirables). D'o le terme de
rparation qui me semble assez appropri finalement !
Le clonage
Il est d'usage dans la profession que les clients demandent de supprimer quelques imperfections au sein de photos souvent
abmes par le temps et la vieillesse.

Pour cela, on a recours bon nombre d'outils sur Photoshop et c'est ce que nous allons tudier dans ce chapitre. Et le premier va
nous permettre de cloner une partie de notre zone de travail.

Cloner les lments d'une image

Oui, oui, vous avez bien entendu lu : nous allons voir comment cloner les lments d'une image. Le principe est simple, nous
dfinirons une zone dans une image l'aide de la slection puis nous la dplacerons autre part dans cette mme image. Sur
Photoshop, on dira pour dfinir toutes ces actions que l'on "rapice", du verbe "rapicer".

Commenons par slectionner l'outil, il s'agit de l'outil Pice que vous trouverez dans la boite outil, il fait partie de la mme
famille que l'outil Correcteur localis (que nous tudierons aussi dans ce mme chapitre), c'est pourquoi il vous faudra
cliquer-droit dessus pour laisser apparaitre la liste dans lequel la pice figure.

Et une fois n'est pas coutume, voici l'image sur laquelle nous allons travailler :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 393/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
Dalmatien.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Nous allons procder quelques expriences scientifiques sur ce pauvre petit Dalmatien. Nous aurons prcisment deux
objectifs :

Cloner les taches du chien pour les faire paraitre sur d'autres parties de son corps.
Supprimer les taches du chien.

Avant de commencer, il est recommand de jeter un il sur les options de l'outil pour dfinir quel type de clonage nous dsirons
effectuer, autrement dit de quelle manire nous allons rapicer les taches.

On retrouve tout d'abord nos quatre petites vignettes auxquelles on a droit quand on utilise les outils de slection. Vous allez
voir que la pice est elle aussi une sorte d'outil de slection, du moins son principe d'utilisation est similaire au Lasso "normal",
c'est pourquoi ces vignettes existent pour cet outil.

Mais le plus intressant, le "cur" des options, c'est le paramtre "Rapicer" qui prsente deux choix : source ou destination.
Pour les comprendre vritablement, il vaut mieux savoir de quoi on parle et en l'occurrence savoir comment utiliser l'outil. Je vais

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 394/574

toutefois essayer de vous en toucher un mot pour que vous ayez une ide de ce en quoi il consiste :

Source : nous allons dfinir une zone qui constituera la source du clonage, autrement dit l'emplacement dans lequel le
clonage va tre fait.
Destination : l'inverse, nous dfinirons une zone que nous dplacerons pour cloner le contenu de cette zone autre part
dans notre zone de travail.

Cela peut s'avrer important de dfinir la manire dont vous allez rapicer selon comment vous dsirerez travailler et ce que vous
dsirerez raliser. En l'tat actuel, c'est un peu compliqu pour vous de vous l'imaginer mais vous vous en rendrez compte en
travaillant sur une image, on y vient aprs.

En ce qui concerne la transparence, c'est un peu complexe expliquer et surtout comprendre. En cochant cette option, vous
pourrez extraire une texture avec un arrire-plan transparent de la zone slectionne avec la pice. A l'inverse, quand l'option
n'est pas coche, on va remplacer compltement la zone cible par la zone slectionne avec la pice.

L'essai

Maintenant que l'on a fait le tour des options, on va pouvoir se concentrer sur l'outil et son utilisation.

Outil en main, voici grosso modo comment on va procder : on slectionne d'abord une zone dans notre calque, n'importe
laquelle. Avec le paramtre "Source" de coch pour l'option "Rapicer", on pourra dire que cette zone constitue l'emplacement
dans lequel le clonage va tre effectu. On en dduit donc qu'il faudra alors dfinir une zone cloner.
Pour ce faire, on va dplacer cette premire slection que l'on a faite avec l'outil pice n'importe o dans l'image afin que le
contenu de cette slection soit transpos dans la premire zone que nous avions justement cr avec cette mme slection. Vous
me suivez ?

Bon, passons. Ou plutt, commenons notre essai.

Tout le monde le sait, les Dalmatiens ont la particularit d'avoir des petites taches noires partout sur le corps. Pour cet exemple,
j'ai dcid d'tre cruella avec ce petit chien car nous nous apprtons lui retirer l'une de ses nombreuses petites taches noires.
Ainsi, il faut effectuer une slection autour d'une des taches, mettons celle-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 395/574

Pour faire cette slection, vous pouvez utiliser un outil de slection comme on a eu l'habitude de faire jusqu'ici, mais vous pouvez
aussi utiliser l'outil Pice directement qui permet la slection et qui fonctionne pareillement au lasso.

Allez, pour commencer, veuillez slectionner soit un outil de slection lambda, soit l'outil pice si ce n'est pas dj fait.

Dfinissons prsent la fameuse zone dont je parlais ci-dessus. Cette zone sera l'emplacement dans lequel le clonage va tre
effectu. Nous souhaitons supprimer la tache noire, il faudra donc effectuer une slection autour d'elle, comme ceci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 396/574

Tout en restant suffisamment prcis, n'hsitez pas faire une slection plus grossire autour de la tache, quitte prendre un bon
centimtre de blanc comme je l'ai fait. Je veux dire, avec l'outil pice, on est obligs de faire a main leve, il ne faut donc pas se
leurrer, nous n'aurons jamais une slection parfaitement ronde.
De mme pour ceux qui utilisent d'autres outils de slection, il est inutile de dtourer la tache au pixel prs. Une slection
approximative suffira amplement.

Quand votre slection est termine, il vous faudra imprativement utiliser l'outil Pice pour l'tape suivante. Si vous avez fait
votre slection avec un autre outil, il est temps de changer. L'outil Pice en main, maintenez le clic l'intrieur de la slection et
dplacez votre curseur pour dplacer la slection. Essayez par exemple de la dplacer vers une partie blanche du chien. Vous
vous apercevrez alors que chaque fois que vous dplacerez la slection, son contenu sera transpos dans la premire slection
cre (dans notre exemple, il s'agit de celle de gauche, donc).

Pour confirmer le clonage, vous n'avez qu' lcher le clique de la souris...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 397/574

Magie, il n'y a plus aucune tache . Ce qui est gnial avec l'outil pice, c'est que en plus de cloner le contenu d'une slection,
il prend en compte la luminosit et le contraste de ce qui se trouve autour de la slection pour conserver un effet naturel.

D'ailleurs, si on pousse un peu, on peut arriver un rsultat... incroyablement excellent !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 398/574

Et si on change le mode pour rapicer, a donne quoi ?

Le mode d'action est diffrent, mais le principe reste le mme. Avec le paramtre "Source", on devait faire une premire slection
qui, quand on la dplaait, faisait alors office de rcepteur du nouveau contenu de la slection dplace. Cette fois-ci, c'est
l'inverse : on fait une slection autour d'un lment et, quand on dplace cette slection on dplace cet lment pour le "copier"
(le cloner) autre part. Par exemple, je commence par slectionner une tache (je reprends la mme) :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 399/574

N'oubliez pas que pour l'option "Rapicer", il faudra slectionner le paramtre "Destination". Dplaons ensuite la slection
(avec la pice de slectionne) :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 400/574

On peut dj remarquer que la tache est copie l'intrieur de la slection. On n'a plus qu' lcher et voil le travail !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 401/574

Et encore une fois, on peut s'amuser un peu avec toutes les taches du chien !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 402/574

L'outil tampon de duplication


Je ne sais pas ce que vous avez pens de l'outil Pice , mais mon avis, Photoshop n'a pas fini de vous surprendre, surtout
quand on connait l'incroyable pouvoir des outils que nous nous apprtons tudier.

Et pour l'instant, on va s'affairer avec un outil au nom assez spcial, je veux parler du Tampon de duplication . Vous ne le
trouverez pas dans la mme famille que l'outil Pice mais juste en-dessous si vous disposez de la version CS5 (c'est peut-tre le
cas pour les autres versions aussi d'ailleurs).

Le Tampon de duplication, qu'on a gnralement pour habitude de raccourcir par "tampon" tout court, permet de remplacer une
partie de l'image par une autre partie de cette mme image.

C'est exactement ce qu'on vient de faire avec la Pice !

Avec la pice, nous slectionnions une partie de l'image pour la cloner autre part. Cette fois-ci, aucune slection n'est ncessaire,
on va simplement dfinir une zone dont notre curseur va se servir comme base pour dupliquer ce qu'elle contient. Pourquoi
comme "base" ? Parce que cette zone va suivre les mouvements du curseur, tandis que le curseur va copier le contenu de cette
zone. Et comme j'ai le sentiment que c'est un peu flou pour vous, je vous propose un petit exemple illustr avant de passer un
essai concret :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 403/574

La premire chose faire, c'est choisir une base de duplication. Il s'agira du cercle rouge gauche de l'image. Ensuite, en le
dplaant, je me rends compte que la base de duplication a remplac mon curseur, c'est le cas sur l'image ci-dessous o je l'ai
plac au-dessus de ma tte (oui, c'est moi sur la photo).

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 404/574

Toujours avec la mme base, j'ai dcid de dplacer mon curseur en direction de ma jambe gauche. Et sans surprise, la base de
duplication est toujours "en copie" au niveau de mon curseur :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 405/574

Cela fonctionne aussi avec une autre base de duplication, videmment. J'aurais pu choisir ma tte comme base et la duplication
(la "tamponner") sur la neige :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 406/574

Et les options de l'outil, alors ?

Chaque chose en son temps. A vrai dire, vous n'avez pas vraiment besoin de moi pour les options puisque vous les
connaissez toutes, ou presque mais celles dont vous n'avez jamais entendu parler sont faciles deviner puisqu'elles sont
troitement lies d'autres outils dj tudis.

Je prfre que vous vous concentriez sur le diamtre et la duret de l'outil. En effet, plus le diamtre de votre outil sera gros,
moins vous aurez de place pour faire vos mouvements. Et si la base de duplication, en suivant les mouvements de votre curseur,
est amene sortir de la zone de travail, alors l'effet prendra fin brutalement car, techniquement parlant, elle ne peut pas sortir de
la zone de travail, elle sera donc bloque son bord :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 407/574

En ce qui concerne la duret, elle va permettre de camoufler un travail trop net du tampon. C'est un peu le mme principe que le
contour progressif : si les contours sont flous, ils vont se confondre avec ce qui se trouve autour d'eux et le travail sera
correctement effectu car difficilement visible l'il nu. A l'inverse, si on met une duret 100%, ce qui revient retirer toute
forme de flou, on va avoir une pointe qui va dupliquer un lment avec des contours trs nets, et clairement cela peut engendrer
une perte de ralisme au niveau de l'effet comme le montrent les images ci-dessous.

1. Image d'origine.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 408/574

2. Jambe gauche supprime avec une duret de 40%

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 409/574

3. Jambe droite supprime avec une duret de 100%

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 410/574

Les rsultats parlent d'eux-mme, l'image 2. est bien mieux retouche que la 3. et cela grce la duret que j'ai volontairement
baisse sans la mettre 0% pour ne pas que les bords de mon curseur ne soient trop flous.

L'essai

Allez, il est maintenant temps d'essayer ensemble pour ne pas changer. Nous ferons cela avec la mme image sur laquelle on
a travaill avec l'outil Pice, on est donc repartis pour torturer notre pauvre petit Dalmatien !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 411/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
Dalmatien.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

En fait, on va faire mieux que a, on va carrment le supprimer !

Tu serais pas un peu sadique sur les bords, toi ?

Meuh non, c'est pour le bien du tutoriel, aucun problme ! Bon, trve de bavardage, on a du boulot maintenant. Il va d'abord
nous falloir dfinir une base de duplication. Pour ce faire, il faut imprativement prendre en main l'outil Tampon de duplication
puis dplacer son curseur sur la zone que vous dsirez cibler et qui sera notre fameuse base. Pour ma part (et je vous invite
faire de mme), j'ai plac mon curseur dans ses environs-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 412/574

En ce qui concerne les paramtres de votre outil, voici ceux que je vous conseille d'appliquer pour notre exercice :

paisseur : 70 px
Duret : 58 px

Votre curseur est enfin plac au bon endroit ? Il faudra donc utiliser le clavier de votre ordinateur et taper la combinaison
suivante selon le systme d'exploitation de votre ordinateur :

Alt + clic

Option + clic

Ds lors que vous aurez appuy sur la touche Alt (ou Option), votre curseur changera d'apparence et se transformera en une
sorte de cible. Quand vous aurez cliqu ensuite, vous aurez enfin dfini la base de duplication.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 413/574

On peut maintenant commencer tamponner notre chien pour le remplacer par notre fameuse base de duplication. Commenons
par maintenir le clic au niveau des pattes du chien. Si vous faites a correctement, vous devriez obtenir un rsultat semblable
celui-ci.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 414/574

Continuez et montez un peu plus haut.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 415/574

Et continuez encore et toujours, allez-y progressivement de sorte supprimer entirement le chien. N'hsitez pas dfinir une
nouvelle base de duplication mme au cours de votre travail si cela vous semble ncessaire par moment.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 416/574

Finalement, vous devriez obtenir ceci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 417/574

Le chien a totalement disparu de l'image, croire qu'il n'a jamais t question d'un chien sur cette photo. Nous avons russi
inventer un fond en utilisant le dcor de l'image, en l'occurrence de l'herbe et des cailloux, ce que je qualifie comme une vritable
prouesse tant le travail s'est avr... simple ? Oui, oui, c'est le terme, c'tait trs simple ! Vous ne trouvez pas ?

A propos, on n'a pas termin. Pourquoi pas enlever aussi la barrire en haut droite de l'image ? On reprend les mmes gestes et
c'est parti !

1. On prend l'outil Tampon de duplication et on le paramtre.


2. On dfinit une base de duplication avec la combinaison Alt (Option) + clic.
3. Puis, on passe notre curseur sur la barrire, c'est tout.

Et voil le travail.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 418/574

J'avoue, j'en ai profit pour corriger quelques imperfections. A vous de jouer.


L'outil correcteur
Je ne pouvais pas crire ce tutoriel et consacrer une partie la retouche photographique sans vous parler des outils correcteurs
suivants. Ils ont fait le succs des dernires versions de Photoshop tant ils sont puissants et demandent peu d'effort et de
connaissance en matire d'infographie.

Hormis les options qu'il va nous falloir connaitre sur le bout des doigts, les outils sont tout bonnement trs faciles d'utilisation et
nous offrent un moyen de corriger une photo de manire trs optimale, vous allez voir.

Outil correcteur localis

L'outil Correcteur localis , qui portait auparavant le nom de "correcteur de tons directs", est un outil aux capacits on ne
peut plus incroyables. On s'en sert gnralement pour supprimer un lment de la zone de travail sans laisser de traces de cette
suppression, l'image de ce que l'on a fait avec le tampon.

Hmm, quel intrt dans ce cas d'avoir fait un autre outil ?

La fonction principale du tampon est de copier un lment d'une image pour en camoufler une autre. C'est le principe du tampon,
aprs peu importe la manire dont vous l'utilisez, moi j'ai trouv un exemple suffisamment parlant pour vous le proposer.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 419/574

Cette fois, avec le correcteur, on n'a quasiment plus rien faire autrement que cliquer avec notre souris. L o je veux en venir,
c'est qu'on n'a pas forcment besoin de "base de duplication" (propre au tampon) ou quoi que ce soit d'autre : on place notre
curseur sur l'lment que nous dsirons liminer, on clique, et Photoshop s'occupe du reste. C'est aussi pour a qu'on utilise
gnralement cet outil pour des lments non-imposants, l'inverse du chien par exemple sur la photo de l'essai prcdent qui
tait, lui, trs imposant.

Le rsultat risque d'tre drlement bof si c'est Photoshop qui s'en occupe, non ? Cela reste un logiciel, tout de mme !

videmment, notre capacit, nous humains, travailler minutieusement et proprement grce aux sens dont nous sommes dots
nous permettent sans doute de travailler aussi bien voire mieux qu'une automatisation gnre par un logiciel. Mais il ne faut pas
les sous-estimer ! Quand je vous disais que l'outil Correcteur tait juste incroyablement puissant, vous allez voir que retoucher
une image peut s'avrer finalement trs simple et accessible.

Nous travaillerons sur cette image :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 420/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
Roue.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Et notre objectif consistera supprimer les maillons de la roue. Prenez votre outil et jetez un il sur ses options.

Pour plus de clart, je vais lister chaque option pour vous expliquer en quoi elles consistent. Nous les tudierons dans l'ordre, de
gauche droite.

Mode : il s'agit des quelques modes de fusion que l'on peut appliquer notre modification. Personnellement, je ne les
utilise pas beaucoup, mais libre vous de les essayer quand on aura appris utiliser l'outil.

Type : Le type par dfaut est "contenu pris en compte". Cela signifie que le correcteur va rflchir votre place et dfinira
seul quels lments prendre en compte pour camoufler, remplacer l'lment corriger. Si vous choisissez "Similarit des
couleurs", Photoshop analysera les couleurs autour de l'lment corriger et se chargera de travailler en fonction d'elles.
Enfin, si vous cochez "Crer une texture", le logiciel se chargera de remplacer l'objet corriger par une texture qui est
dfinir. Nous nous contenterons du type "Contenu pris en compte" pour cet exercice.

C'est tout ce qui nous importera dans ce chapitre. On peut dsormais faire usage de notre outil Correcteur localis , c'est
pourquoi je vous demande de le slectionner si ce n'est pas encore fait.

L'utilisation de cet outil, je vous le rabche depuis le dbut, est on ne peut plus simple mais aussi trs efficace. Tout ce qu'on va
vous demander de faire, c'est cliquer ! Mais pas n'importe o, videmment. On va cliquer et "surligner" grce notre outil
l'lment que nous souhaitons voir disparaitre.

C'est ce que nous allons tenter de faire sur la petite tache rouge de l'image ci-dessus. Commencez par dfinir un nouveau
diamtre votre outil en lui donnant 18 px d'paisseur. Le tout est de choisir un diamtre plus grand que l'lment que nous
dsirons liminer.

Nous avons dj eu affaire cette petite fentre, mais on peut toutefois noter une diffrence qui se trouve en bas de la fentre, je

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 421/574

veux parler de cette espce de cible noire sur blanc. Deux nouveaux champs blancs figurent sa droite :

Angle : dfinit l'angle que prend le cercle reprsentant le bout de votre outil. Si le cercle est parfaitement circulaire,
modifier son angle n'aura aucun impact sur la forme du cercle. Cela peut toutefois tre intressant si on modifie le
paramtre 'Arrondi'.
Arrondi : permet de choisir la forme circulaire ou ovale de votre rond.

Quand c'est fait, placez votre curseur (et donc le cercle) ce niveau-ci de la tache :

Maintenez le clic et dplacez votre curseur de sorte surligner la tache, comme ceci :

Enfin, lchez le clic, et laissez oprer la magie du correcteur :

Plutt efficace, n'est-ce pas ?

Hmm, il existe pas une gomme ou un truc du mme type pour ce genre de chose ?

Si, oui, il existe bien une gomme en effet et a aurait t plus appropri ici. Mais je trouvais simplement trs intressant de vous
montrer comment l'outil pouvait ragir via un exemple simplifi et vocateur. Pourtant, on peut faire beaucoup mieux que a,
croyez-moi. Et d'ailleurs, je vais de suite essayer de vous le dmontrer avec un petit exercice que vous devriez avoir du mal finir
si vous n'avez pas la patience pour.

L'image, vous l'avez dj tlcharge, il s'agit de la jeune fille tourne vers la grande roue. Notre objectif consistera supprimer
les maillons de la roue et de laisser le ciel apparaitre totalement. Il va donc falloir passer notre correcteur partout sur les maillons,
en prenant soin de choisir la bonne paisseur de notre outil chaque fois.

Commenons par surligner ce maillon-ci :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 422/574

Si vous faites cela correctement (faut dire que "correctement" est un grand mot, en mme temps...), vous devriez obtenir ce
rsultat :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 423/574

Rditez l'opration sur les autres maillons. Lorsqu'ils se croisent, n'hsitez pas modifier le diamtre de votre outil sur les parties
les plus difficiles. Au sujet du maillon qui est en contact, sur l'image, avec les cheveux de la jeune fille, faites un zoom et rduisez
le diamtre de votre outil. Ensuite, passez entre les cheveux de manire minutieuse pour qu'eux ne soit pas supprims de la
photo, l'inverse du maillon.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 424/574

Soyez patient et travaillez de manire rigoureuse de sorte supprimer absolument toute trace de maillon. J'espre que vous
arriverez ce rsultat, c'est du moins ce qui est cens arriver.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 425/574

Outil correcteur

Sans rentrer dans les dtails, laissez-moi vous toucher un mot sur l'outil Correcteur que vous trouverez en cliquant droit sur
l'icne de l'outil Correcteur localis .

A vrai dire, si je ne veux pas m'taler, c'est parce que le Correcteur est un condens des deux derniers outils que l'on vient
d'tudier. En effet, son mode d'action est prcisment le mme que le correcteur localis. La seule diffrence, c'est qu'il fonctionne
de la mme manire que l'outil Tampon de duplication . Il s'agit donc d'un correcteur comme on le connait, qui va utiliser une
"base de duplication" comme le tampon, ce qui peut se prsenter comme un rel avantage selon les modifications que l'on doit
apporter.
Mesdames, mesdemoiselles, messieurs, j'ai le plaisir de vous annoncer que le prochain chapitre ne sera pas comme les autres.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 426/574

Pour l'heure, ce chapitre est termin et vous avez appris bon nombre de techniques essentielles et ultra-utilises dans le monde
de la retouche photographique.

Tiens, a tombe bien, j'ai comme quelque chose pour vous... Passez donc la page suivante !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 427/574

TP : retoucher le visage d'un vieil homme


Je vous souhaite la bienvenue dans votre premier vrai TP !

Ce chapitre n'est pas un chapitre ordinaire : hors de question que je vous bassine avec de quelconques explications, cette fois-ci,
c'est vous et seulement vous qui tes maitres de la situation.

J'essaie tant bien que mal de vous donner des exercices rgulirement et aussi souvent que possible en mettant votre
disposition plusieurs fichiers PSD tlcharger afin que vous puissiez travailler tout au long du cours.

Pourquoi faire un TP dans ce cas ?

L'objectif d'un chapitre comme celui-ci est que vous puissiez mettre en pratique tout ce que vous avez assimil dans les chapitres
prcdents pour rpondre un seul et mme sujet que j'ai spcialement confectionn pour vous. Vous devrez donc faire
fonctionner tous vos neurones car il n'est plus question de compter sur moi : c'est vous et vous seul qui allez rflchir quels
outils et fonctionnalits de Photoshop vous utiliserez pour rpondre au sujet donn.

Le moment de vrit est enfin arriv !


Avant de commencer...
Nous y voici, notre premier grand TP est sur le point de dmarrer. Pour son bon droulement, nous allons prparer le terrain,
comme on dit.

Depuis le dbut du cours, nous avons appris maitriser diffrents outils de la panoplie propose par Photoshop. Mais je me
pose tout de mme une question, et vous devriez vous aussi vous la poser : saurez-vous mettre en commun toutes vos
connaissances dans une seule et mme image ?

En effet, jusqu'ici, nous avons utilis dans la plupart des cas un seul exemple par outil ou fonctionnalit. Dsormais, il va falloir
mettre toutes vos connaissances en relation afin de travailler diffrentes parties d'une mme image et ainsi, raliser un travail
complet et de longue haleine. Il est temps que vous puissiez enfin vous vanter auprs de vos amis d'avoir russi un projet de A
Z, sans l'aide de personne !

Moi, je suis convaincu que vous avez l'toffe d'un grand graphiste et que votre savoir est suffisant pour la ralisation d'un tel
projet. Mais avant-tout, un petit rappel des lments cls pour russir ne vous ferait pas de mal.

Rappels essentiels

L'espace de travail

Je n'ai plus besoin de vous expliquer ce qu'est l'espace de travail, je pense que c'est acquis maintenant. Si ce n'est pas le cas,
c'est qu'il y a un problme ou que vous avez lu ce cours "un peu trop" vite.

Au risque de me rpter, j'insiste sur le fait que l'espace de travail est un composant part entire de Photoshop et que tout
infographiste qui se respecte se doit de le tenir rang pour un travail des plus optimal. Ngligez cette tape, et croyez-moi, il y
aura des rpercussions au fur et mesure que vous travaillerez.

Zone de travail

Je ne sais pas si vous aviez l'habitude d'crire sur la table quand vous tiez l'cole, mais sur Photoshop c'est pas possible !
Alors n'oubliez pas de crer une nouvelle zone de travail avant de commencer. Heureusement pour vous, dans ce TP je vous
fournirai les images qu'il vous faudra pour travailler.

Autre chose. Prenez soin de crer des dossiers et de nommer vos calques. Vos calques, au mme titre que l'espace de travail, sont
bien plus agrables grer et utiliser quand ils sont proprement rangs. Vous vous y retrouverez plus facilement et vous serez
plus productif. C'est comme en programmation, mieux vaut crire des commentaires pour ne pas se perdre dans son propre code.
D'ailleurs, si vous ressentez le besoin d'utiliser des annotations, servez-vous, elles sont faites pour cela !

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 428/574

Enfin, n'hsitez surtout pas consulter certaines parties tutoriel si vous tes perdus et que vous avez un problme. Si a peut
vous aider, faite-le. Je vous demande simplement de ne pas en abuser, essayez de vous dbrouiller comme vous le pouvez tout
seul et mme si a vous semble pas forcment bon, ne courrez pas vers la facilit, laissez-vous vous tromper. C'est aussi comme
a qu'on apprend ne plus reproduire les mmes erreurs, d'autant plus qu'une correction vous sera propose.

Enregistrez, enregistrez et enregistrez !

Prenez l'habitude d'enregistrer aussi souvent que possible votre progression. A peine votre zone de travail cre et une premire
manipulation effectue que vous pouvez d'ores et dj enregistrer votre "travail" dans un dossier. Une fois enregistr, vous
pourrez reprendre ou sauvegarder la progression de votre projet sans aucun souci.

Ctrl + S

"Je vais perdre tous mes moyens !"

Concentrez-vous et repensez tout ce que l'on vient d'tudier. Si c'est encore un peu flou, une relecture rglera sans doute le
problme. Au pire, refaites-vous le tutoriel en diagonal pour avoir un aperu rapide de ce en quoi chaque outil et fonctionnalit
consiste et que vous soyez en mesure de les utiliser correctement le moment opportun.
Quelques conseils et surtout, la consigne.
On peut passer aux choses srieuses ! Les prparatifs sont faits, les conseils ont t donns, je crois que vous tes prts,
c'est bon !

J'imagine que vous avez une petite ide de ce que je vais vous demander de faire... Sans surprise, vous allez tre amen
effectuer une retouche photographique de A Z !

Intressons nous tout d'abord l'image de base qu'il vous sera demand de modifier. Le sujet est particulirement connu dans le
monde de la retouche photographique, cela fait partie des "trucs connus" et soit disant "compliqus faire" avec Photoshop.

Cliquez sur l'image pour l'agrandir

Cette image est tire du site Photos Libres.

J'ai volontairement choisi de vous faire travailler sur une image de grande taille afin que vous puissiez travailler le plus
mticuleusement possible. En effet, plus l'image est grande, plus le zoom est important et du coup, c'est plus facile d'effectuer des
retouches dtailles.

Consigne

La consigne est claire : il n'y a pas de consigne ! Vous n'avez qu'un seul objectif , il vous faudra effectuer des modifications sur
cette photo de sorte l'amliorer avec les outils que vous connaissez.

Je sens que je vais carrment bloquer !

Le travail de graphiste passe normment par la rflexion. Posez-vous les bonnes questions et allez de l'avant chaque fois,
tentez ce qui est tentable et annulez ce qui vous semble bcl :

Que suis-je capable de faire ? Sous-entendu, quels outils puis-je utiliser pour faire des transformations ?

Qu'est-ce qui est modifiable et qu'est-ce que je peux amliorer dans cette photo ?

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 429/574

Les couleurs sont-elles bonnes ? Dois-je changer certaines teintes, certaines intensits de couleur ?

Puis-je y prendre des lments d'une autre image pour l'insrer dans celle-ci ?

Autant de questions vous poser pour tre certain de mener bien votre projet. Vous devez galement rflchir sur comment
vous allez travailler : devrez-vous, par exemple, crer plusieurs calques pour chaque modification ou travailler plusieurs fois sur
le mme ?

N'oubliez pas quelque chose d'essentiel : n'en faite pas trop. Gardez en tte que vous ne connaissez que les bases d'Adobe
Photoshop et que vous avez tout le temps de vous perfectionner. Il vaut mieux retoucher une image lgrement mais
correctement que de lui ajouter un tas d'effets compltement loufoques et me rendre une image dgotante.

Quelques ides de modifications apporter l'image...

Suppression des rides.


attnuation du creux des poches sous les yeux.
Changement de couleur des yeux, des poils, ...
Donner un nouvel aspect visuel l'image en gnral.

Libre vous de modifier davantage d'lments au sein de cette image. Aprs tout, c'est vous le graphiste.

Ah oui, au fait, vous remarquerez que l'image est lgrement dgrade tout en haut. A vous de faire le ncessaire pour remdier
au problme.

Tout est prt ? Alors allez-y, clatez-vous ! La correction vient juste


aprs...

...

...

...

...

...
On pose les crayons, heu... les outils !
...

...

...

...

...

Dj la correction ?

J'espre que vous n'avez pas rencontr trop de problme pour ce premier TP. Dans tous les cas, je tiens rassurer une majeure
partie des lecteurs : si vous avez galr, c'est NORMAL !

Ce TP est le bilan de notre deuxime partie (mais aussi de la premire). En effet, en recherchant bien comme il faut, vous auriez pu
utilis la quasi-totalit des outils que nous avons vu pour effectuer cette retouche.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 430/574

Bon, alors comme a il faut que je vous montre comment on fait. Sincrement, a va tre assez compliqu pour moi de vous
fournir une vraie correction tant le travail de graphiste est propre chacun. Du coup, je vais vous proposer une retouche, une
retouche que j'ai effectue, et je vais vous donner les diffrentes techniques que j'ai utilises pour que vous puissiez vous rendre
compte de comment j'ai procd et que vous essayiez de vous en servir comme modle.

Sans plus attendre, laissez-moi vous prsenter le rsultat que j'ai personnellement obtenu :

Outch, je suis loin de ce rsultat moi...

Et pourtant, je n'ai fait qu'utiliser les outils qu'on a dj tudis et sans forcer en plus, a parait compliqu comme a mais a vous
est totalement accessible, croyez-moi. Allez, on va voir a tout de suite.

Recadrage de l'image

Avez-vous remarqu que l'image tait lgrement bancale ? Souvenez-vous, pour recadrer une image il existe un outil justement
prvu cet effet, il s'agit de l'outil Recadrage . Ainsi, on passe d'une image bancale une image parfaitement droite :

Rparation des lments dgrads

Je vous faisais part tout l'heure des parties suprieures de l'image qui taient lgrement abimes. La consigne disait qu'il fallait
les supprimer.

Pour ce faire, on aurait pu avoir recours bon nombre d'outils, mais celui qui correspond le plus ici est sans aucun doute le
Tampon de duplication . L'ide, c'est de partir de la gauche de l'image (toujours en restant en haut) et de maintenir le clic
jusqu' l'extrmit droite en prenant soin de passer sur toutes les parties saccages.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 431/574

Augmentation de la saturation

Les couleurs de l'image sont un peu ternes mon got, je pense qu'il y a matire ajouter de la saturation pour les raviver un
peu. J'ouvre donc ma fentre Teinte/Saturation et vais jeter un il du ct du paramtre "Saturation".

Si j'ai personnellement dcid de saturer un peu plus les couleurs, vous auriez trs bien pu opter pour une autre solution.
Pourquoi pas tenter le noir et blanc ? Ou bien l'effet spia aussi, en cochant l'option "Redfinir" dans la fentre
Teinte/Saturation ?

Amlioration du contraste

On peut aussi avoir besoin d'utiliser les niveaux de couleurs, et notamment pourquoi pas pour ajouter du contraste l'image. On
n'est pas obligs, mais personnellement je suis particulirement friand des niveaux de couleurs et je sais que a donne un effet
sur la photo qu'on retrouve d'ailleurs assez rgulirement sur certaines photos de qualit.

Vous en aurez galement besoin si vous travaillez en noir et blanc. N'hsitez pas utiliser les niveaux de couleurs.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 432/574

Suppression des rides

C'est sans doute l'tape la plus dlicate de toutes et je suis certain que vous avez but l-dessus. C'est normal, vous dbutez,
vous avez encore besoin de vous exprimenter un peu pour tre vraiment l'aise avec la bte. La bte ? Oui, je veux parler du
correcteur localis bien entendu que je ne peux que conseiller pour ce type d'exercice.

Pour russir, il ne faut pas oublier trois choses essentielles :

Dfinir les bonnes options au bon moment.


Paramtrer correctement son outil en choisissant la bonne paisseur et la bonne duret.
Travailler en prenant sans cesse le temps de la rflexion : comment travailler cette ride, mon outil est-il vraiment appropri,
est-il bien paramtr, ... ?

C'est ainsi que nous allons enfin tre prt travailler sur les rides. N'oubliez pas que le diamtre de votre outil doit tre suprieur
la taille des lments supprimer, donc plus pais que les rides. Passez l'outil sur l'une des rides frontales de la personne sur la
photo et voyez le rsultat. Si d'autres rides rapparaissent, elles seront forcment moins importantes que la premire. Ainsi, vous
n'avez qu' rditer l'opration en modifiant l'paisseur de votre outil sur les nouvelles rides. Ne ngligez aucun ride, les plus
visibles autant que les moins visibles, sans quoi votre travail ne sera pas complet.

Je vous laisse observer le rsultat que j'ai personnellement obtenu en travaillant chaque ride, un travail de longue haleine
m'attendait et vous a attendu. D'abord, le rsultat en travaillant les rides frontales ...

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 433/574

Puis le rsultat que j'ai obtenu en passant un coup de correcteur sous les yeux pour enlever les rides et rendre les poches un peu
moins creuses par la mme occasion.

N'oubliez pas : il faut essayer d'utiliser les options de l'outil chaque fois que vous en voyez l'utilit. Si par exemple votre outil ne
travaille pas efficacement sur certaines parties de l'image, il faut essayer d'autres options pour voir si cela correspond mieux.
Vous pouvez mme changer d'outil et en essayer d'autres si cela peut arranger le problme.

Enfin, je me suis permis d'enlever les impurets du nez du monsieur, ce que l'on appelle plus communment les "points noirs". J'ai
utilis le correcteur, avec un diamtre trs bas et en attaquant chaque point noir un par un. De la patience, je vous disais qu'il
allait en falloir.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 434/574

Allez, un nime avant/aprs et on pourra clturer ce chapitre avec quelques conseils de fin.

volution et perspectives

J'imagine que pour un dbut, c'est dj un travail trs laborieux et je peux vous dire que vous avez du mrite d'en tre arriv
jusque l, croyez-moi c'est dj trs bien, quel que soit le rsultat de vos travaux.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 435/574

En infographie, il y a toujours moyen "de faire mieux". On peut toujours trouver des lments modifier, amliorer, etc. Le tout
tant de faire a bien et de ne pas tomber dans l'excs. Ainsi, je peux vous proposer quelques ides pour amliorer votre rendu, il
sera surtout question d'esthtisme plus qu'autre chose, mais c'est toujours bon prendre.

Ce qui suit n'est en aucun cas conventionnel : vous faites ce que vous voulez de votre image. Je me propose juste pour
donner des ides d'amlioration, mais c'est trs subjectif et vous ne serez pas forcment du mme avis que moi sur
certaines d'entre elles.

Utilisez les styles de calque

Les options de fusion sont mon sens un excellent moyen de donner de la valeur ajoute vos photos sans pour autant les
truffer d'effets spciaux sans intrts.

Voici quelques ides que je vous invite garder prcieusement dans un coin, vous pourriez en avoir besoin terme quand vous
vous lancerez dans vos propres projets.

1. Ajoutez un cadre votre photo

Il est facile d'ajouter un cadre votre photo partir du moment o vous maitrisez les styles de calque. Pour cela, on va avoir
recours au contour. Je ne vais pas vous guider pas pas car je sais que vous en tes capable tout seul. Voici cependant
quelques indications qui pourraient vous aider :

Si votre calque est un calque de type Arrire-plan, dverrouillez-le en double-cliquant dessus ou en cliquant sur le
cadenas dans la fentre de calques.
Dfinissez une position intrieure votre contour sans quoi il ne sera pas visible.
N'hsitez pas choisir un nouveau type de remplissage, comme le dgrad par exemple. Restez nanmoins sobre.

Moi, j'en suis arriv a, c'est trs sobre mais a me plait.

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 436/574

2. Ajoutez une ombre interne

Encore une fois, dans le but de styliser un peu plus la photo, j'aime ajouter de temps en temps de l'ombre interne. Je vous laisse
juger de la pertinence de l'effet, en tout cas moi j'adhre :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 437/574

Bon, c'est toujours aussi lger mais qu'importe, a reste suffisamment important selon moi pour tre ajout.

3. Transformez l'image et ajoutez-y une ombre externe

Et enfin, on pourrait aussi transformer l'image et lui ajouter une petite ombre externe pour donner un effet de profondeur
l'image.

On va commencer par rduire un peu l'image avec la transformation en homothtie, puis on utilise la rotation pour incliner
lgrement l'image et on ajoute l'ombre (je vous conseille de mettre 0 de distance pour que l'ombre soit quitablement rpartie
autour de l'image) :

www.siteduzero.com
Partie 2 : La retouche photographique (nouvelles notions en perspective) 438/574

Aprs, on peut mme s'amuser empiler les photos en dupliquant les calques.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 439/574

J'espre que ce premier TP vous a plu et j'espre surtout qu'il vous a permis de faire de vraies prouesses techniques en matire
de retouche photographique ! D'ailleurs, je dois dire que vos connaissances vont maintenant au-del du "novisme", vous tes
maintenant plus habile avec les outils de Photoshop et vous pouvez vraiment vous en fliciter.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 440/574

Partie 3 : La cration sous toutes ses formes ! (web)

Je vous rserve beaucoup de surprises pour cette troisime partie du cours. Nous aborderons des notions totalement nouvelles
de par l'utilisation d'outils encore jamais vus jusqu'ici.

Cette troisime partie est consacre la cration d'images numriques, et plus particulirement l'laboration et la ralisation
d'une identit graphique pour vous ou votre projet. Cela passe donc, par exemple, par la conception d'un logo votre image ou
encore par la cration d'une charte graphique qui dterminera, entre autres, les lments graphiques de votre site.

Par ailleurs, je vais profiter de cette nouvelle partie pour vous toucher un mot de ce que l'on appelle le pixel art... Mais je ne vous
dis pas tout, c'est vous de le dcouvrir en parcourant le tutoriel ds maintenant !

Le dessin : premiers pas vers la cration


Tout d'abord, je vous souhaite la bienvenue dans cette troisime partie du tutoriel !

Dans ce premier chapitre, on peut dire que vous allez enfin pouvoir faire usage du mot "crer", notamment quand vous parlerez
vos amis de ce tutoriel. Bon, je ne vous promets pas monts et merveilles, mais au moins de quoi avoir une base que vous
serez libres, par la suite, de travailler pour devenir de vrais infographistes.

Je ne dis pas que vous n'en avez pas l'toffe, je suis mme sr du contraire. Mais avant de vous donner un titre qui, soit dit en
passant, ne veut pas dire grand chose, il vous faudra des acquis que vous consoliderez en pratiquant de manire rgulire et
rigoureuse, ce que l'on appelle plus communment... l'exprience (oui, oui !).

Hey, d'ailleurs, je ne sais pas si vous vous en souvenez, mais je vous en avais dj touch un mot au dbut du cours (a
commence remonter maintenant !). Flashback :

Je suis absolument incapable de dvelopper votre esprit cratif et encore moins capable de faire de vous des Picasso
modernes. Ce n'est pas l l'objectif de ce cours, et je pense d'ailleurs qu'il est techniquement impossible qu'un tel cours
fonctionne. En fait, la lecture de ce tutoriel vous permettra d'avoir les bons outils en main pour dvelopper tout seul votre
esprit cratif et ainsi, raliser ce que vous aimeriez raliser. Comme n'importe quel apprentissage, c'est en exprimentant que
l'on s'amliore. Je vous rappelle que j'ai commenc comme vous .

Allez, on commence doucement avec une petite minute thorique afin de mettre en marche le cerveau puis on attaque ensuite
avec les outils de cration semblables nos outils d'artiste : le crayon, le pinceau et le pot de peinture !
La minute thorique : matriciel ou vectoriel ?
Si vous avez bien suivi le cours depuis son commencement, je ne devrais pas avoir me rpter au sujet du pixel. Qu'est-ce qu'un
pixel ? Comment cela fonctionne ? Qu'est-ce qu'une image numrique ? Autant de questions auxquelles vous tes censs savoir
rpondre. Reprenons juste l-dessus :

Qu'est-ce qu'une image numrique ?

Je n'ai cess de vous expliquer qu'on parlait d'image numrique pour rfrence aux images composes de pixels. On parlera alors
d'image de type BITMAP, moins connue sous le nom d'image matricielle.

Ce que je ne vous ai toutefois pas dit, c'est qu'une image numrique n'est pas exclusivement une image compose de pixels.

Gn ? Je crois que tu nous en avais lgrement parl, ouais, mais j'ai un peu de mal te suivre...

En fait, il existe un tout autre type d'image numrique que l'on appellera image vectorielle (par opposition aux images
matricielles). Comme l'explique Wikipdia, ces images ne sont pas composes de pixels mais d'objets gomtriques individuels
(segments de droite, polygones, arcs de cercle, etc.) chacun caractris par leur forme, leur position, leur couleur, etc.

Matriciel/Vectoriel

Une image matricielle (BITMAP) est une image exclusivement constitue de pixels. S'il s'agit du format le plus commun et qu'il est
certainement celui que l'on utilise le plus couramment, il prsente nanmoins un inconvnient de taille : les dimensions d'une

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 441/574

image matricielle ne sont absolument pas modulables. Si l'on agrandit une image matricielle, elle va finir par se dtriorer, on dira
alors qu'elle est trop pixelise . Une telle image est alors floue et mme obsolte comme en tmoigne cette illustration (merci
Jiyong) :

A l'inverse, une image vectorielle a l'avantage de pouvoir tre agrandie l'infini. On cre une image vectorielle l'aide de formes
gomtriques qui sont automatiquement calcules par votre machine ce qui les rendent modulables souhait. Ainsi, il n'y a pas
d'effet de "pixellisation" d l'agrandissement des images (appel aussi l'effet escalier). Pour vous donner un exemple, on utilise
couramment des images vectorielles pour produire des logos, des icnes ainsi que certaines affiches qui doivent tre imprimes
en trs grand format.

Je ne comprends pas trop en fait. Pourquoi c'est le BITMAP qui est le plus utilis dans ce cas ?

Le matriciel ne nous donne aucune restriction en terme de cration. On peut peu prs tout faire, il suffit simplement d'utiliser les
pixels de la zone de travail et de laisser libre cours son imagination. Or, avec le vectoriel, on va crer plusieurs tracs de
diffrentes formes et couleurs que l'on va assembler pour former un dessin. C'est donc une toute autre technique de cration qui
va s'avrer moins efficace pour crer des images de qualit photo raliste, c'est--dire trs dtaille au point de confondre avec la
ralit, mais plus profitable pour la cration de logos, par exemple.

Matriciel (bitmap) Vectoriel


Dfinition : image numrique compose de pixels Dfinition : image numrique compose de formes gomtriques
Avantage : diversit sur le plan cration, aucune restriction Avantage : possibilit d'agrandir l'image l'infini
Inconvnient : non-modulable sinon effet escalier (flou) Inconvnient : beaucoup de restrictions en terme d'effets spciaux

Le crayon pour du Pixel-Art


Les notions vues dans cette premire partie du cours doivent tre acquises. Si vous n'arrivez pas encore faire la diffrence
entre vectoriel/matriciel, c'est qu'il y a un problme. Une petite relecture devrait vous aider.

Pour l'heure, nous tudierons dans ce chapitre les outils de type matriciel (avant de passer aux outils vectoriels), cela me
permettra de vous parler de Pixel-Art qui est une discipline part entire dans le domaine de l'infographie bien qu'elle soit un peu
mconnue du fait des restrictions qu'elle impose sur le plan diversit de cration.

Dfinition

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 442/574

Le Pixel-Art, expression anglophone qui se traduit par l'art du pixel , est une discipline qui consiste dessiner pixel par pixel,
c'est--dire qu'on va crer une image en s'occupant de remplir chaque pixel de notre zone de travail, un par un.

Haha ! Non, srieusement, c'est quoi le secret l... ?

Je suis trs srieux. On va zoomer sur notre zone de travail et on va remplir chaque pixel pour former un dessin complet.
D'ailleurs, voici un exemple, c'est un dessin entirement ralis pixel par pixel et je peux vous dire que son auteur n'a pas chm !

Eboy

De toute vidence, je n'aurai jamais assez d'un chapitre pour vous initier aux diffrentes techniques du Pixel-Art. Le dessin ci-
dessus est le fruit de longues heures de patience et de travail de la part son auteur qui est certainement trs expriment et
maitrise parfaitement son sujet. En ralit, je vais vous faire dcouvrir l'outil dont vous avez dj forcment entendu parler, le
Crayon, travers cette discipline qu'est le Pixel-Art. Il s'agit en effet de l'outil qu'on utilise le plus gnralement pour en faire, cela
vous permettra de comprendre rapidement son mode d'action.

Commencez par prendre en main votre crayon puis ouvrez une nouvelle zone de travail. Veuillez paramtrer cette zone de travail
selon les donnes suivantes :

Dimensions : 250*250 px
Arrire-plan : blanc

Pour le reste, c'est carte blanche. Nous voici donc avec une zone de travail vide, il ne reste plus qu' la remplir !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 443/574

Mais avant cela, on va voir ce que nous offre la panoplie d'options relatives au crayon.

Ces options ne sont pas bien diffrentes de celles que nous avons dj tudies dans les chapitres prcdents, d'ailleurs il n'y a
qu'une seule nouveaut, c'est l'inversion auto, qui permet d'inverser la couleur automatiquement quand on utilise l'outil (par
exemple, le blanc est automatiquement transform en noir quand on utilise le crayon). Si je veux " tout prix" vous parler de ces
options, c'est pas pour vous rabcher ce qui a dj t rabch maintes et maintes fois (les modes de fusion, l'opacit, ...) mais
surtout pour vous faire prendre conscience de l'importance ici de choisir un bon diamtre pour notre outil.

Je vais encore un peu radoter, mais faire du Pixel-Art, c'est travailler une image pixel par pixel. L o je veux en venir, c'est qu'il va
falloir paramtrer notre outil pour lui donner un diamtre qui corresponde notre technique de travail, donc un diamtre pas plus
lev que... un pixel ! Tout compte fait, on n'a mme pas besoin de changer le paramtre puisque, dfaut de l'avoir
pralablement modifi, le diamtre de votre crayon devrait dj tre d'un pixel (voir image ci-dessus, option de gauche).

Vous l'aurez donc compris : pour faire du Pixel-Art, on a besoin d'une zone de travail vide et du crayon. C'est pas plus compliqu
et a peut se rvler tre un art trs passionnant.

Oui, bon, on l'essaie cet outil, oui ou non ?

Oui, essayons. Vous tes cens avoir ouvert une zone de travail, il va donc simplement falloir prendre votre crayon.

Assurez-vous qu'il soit bien paramtr, et en l'occurrence je pense au fameux 1 pixel de diamtre.

Premirement, faites un zoom x10 sur la ZDT (3200% - le maximum quoi) puis placez votre curseur au-dessus de votre zone de
travail et enfin, cliquez une fois :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 444/574

En cliquant, vous avez rempli un pixel de la couleur de premier-plan de votre palette (en l'occurrence, pour moi, c'tait du noir !).
Et bien, c'est peu prs tout ce que vous avez savoir pour tre apte faire du Pixel-Art en fait.

Quoi ? C'est tout ?

Bah, en mme temps, le mode d'action du crayon n'est pas plus complexe ni compliqu que celui-ci. Mais je vois o vous voulez
en venir, vous ne savez pas exactement quoi faire avec l'outil, c'est a ? Cela peut se comprendre puisqu'en effet, on n'a
quasiment rien fait avec pour le moment. Alors, pour remdier au problme, je vais tenter de vous faire pratiquer histoire de vous
familiariser un peu avec l'outil.

Par contre, ce cours ne portant pas directement sur le Pixel-Art, je ne pourrai pas vous initier toutes les techniques de cration
auxquelles on peut avoir recours quand on travaille dans ce domaine. Je veux vous prvenir que vous n'aurez clairement pas les
acquis ncessaires pour raliser, par exemple, le dessin que je vous ai prsent au dbut de la partie. Comme je vous le disais, il
faudrait crire un tutoriel complet pour russir de telles prouesses (et une bonne exprience aussi).

Non, en fait, je vais simplement vous donner un exemple que je vous demanderai de reproduire (ou de raliser en mme temps
que moi) pour que vous ayez une ide concrte de comment on dessine avec un crayon sur Photoshop. Ce n'est pas sorcier en
soi, mais a demande quand mme des bases sur lesquelles s'appuyer, comme par exemple l'utilisation de la perspective
isomtrique ou encore la cration des dgrads que l'on utilise gnralement pour raliser des dessins bien plus complexes que
celui que je vais vous proposer de faire tout de suite.

L'essai

Allons donc, c'est parti pour l'essai traditionnel. Sans surprise, nous allons faire du Pixel-Art, enfin du Pixel-Art "lger".
Commenons par crer une nouvelle zone de travail de 150*150px sur fond blanc.

N'oubliez pas qu'il va rgulirement falloir zoomer (pour ne pas dire constamment) sur votre zone de travail sans quoi vous ne
pourrez pas travailler minutieusement (ou alors, je demande voir !).

Commencez par choisir du noir en couleur de premier-plan dans votre palette de couleur...

... crez ensuite un nouveau calque standard vide et enfin, remplissez 50 pixels de manire successive et de sorte former un
trait vertical. Le nouveau calque correspondra videmment ce trait vertical. Vous devriez obtenir une ligne semblable celle-ci :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 445/574

Reprenons le mme exemple, mais en traant cette fois-ci un trait horizontal de 45 pixels. N'oubliez pas de crer un nouveau
calque.

On recommence maintenant la mme chose de sorte former un rectangle, comme ceci :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 446/574

Assurez-vous d'avoir bien cr un calque vide pour chaque nouveau trait.

On a presque termin les "fondations" de notre dessin. La prochaine tape consiste crer un effet de perspective pour former
un cube partir de notre rectangle. Enfin, nous allons plutt faire un prisme, le cube tant par dfinition compos de 6 faces
parfaitement identiques (ce que nous ne ferons pas). Ne m'en voulez pas si je dis "cube", c'est plus simple.

A partir du sommet gauche, vous allez devoir remplir 20 pixels en diagonale, en direction de la droite. Vous comprendrez plus
facilement avec un dessin :

Dupliquez ensuite le calque correspondant ce nouveau trait et dplacez-le sur le sommet droit du rectangle, comme ceci :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 447/574

Allez, on recommence : duplication du calque et dplacement vers le sommet en bas droite du rectangle, comme ceci :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 448/574

Et pour finir, on referme le tout, j'attends donc de vous que vous obteniez ce rsultat-ci !

L'architecture globale de notre cube est termine. On va pouvoir commencer coloriser tout a et donner un peu de valeur
ajoute ce petit cube tristounet. Choisissez une couleur de base que vous devrez dfinir dans la palette de couleurs, en couleur
de premier-plan. Pour ma part, ce sera #dbd29e. Si vous voulez un conseil, prenez la mme !

Votre crayon en main, remplissez (d'un nouveau calque) les pixels se trouvant l'intrieur de la premire face du cube. J'aimerais
que vous arriviez un rsultat proche de celui-ci :

Pour aller plus vite, je vous conseille d'agrandir un peu le diamtre de votre outil. Vous pouvez aussi utiliser la touche
Shift de votre clavier (qu'il faut maintenir) pour ordonner au logiciel de vous laisser tracer des lignes parfaitement
droites. Cela vous empchera de dpasser.

Pour assurer un clairage raliste, il va maintenant falloir changer la couleur de notre palette. En fait, quand je dis changer, c'est
juste reprendre la mme base (donc ici, du beige), mais pour une couleur lgrement plus sombre. Pour cela, il suffit simplement
de descendre un petit peu le rond du slecteur de couleur. Pour ma part, le nouveau code hexadcimal est #cbc292.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 449/574

Quand la couleur est change, remplissez la face suprieure de l'image, comme ceci :

Et comme si on en avait jamais assez, on refait exactement la mme chose : on change la couleur pour quelque chose d'un peu
plus sombre encore (mais sur la mme base au niveau de la couleur) puis on remplit la dernire face du cube.

Crez un nouveau calque, placez-le en haut de la liste dans la fentre calques puis modifiez la couleur de premier-plan dans la
palette de couleurs en reprenant la mme base que la premire face de votre cube (la premire que nous avons remplie - servez-
vous de la pipette). Je vous mets quand mme le code hexadcimal pour aller plus vite : #dbd29e . Cette fois-ci, toujours avec
cette base, modifiez la position du slecteur de couleur pour une couleur plus claire encore :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 450/574

Afin de donner encore plus de relief notre cube et d'accentuer le jeu de lumire, nous allons remplacer les traits noirs se situant
l'intrieur du cube avec la nouvelle couleur, comme ceci :

Pourquoi nous avoir fait tracer des traits noirs, dans ce cas ?

Je vous ai fait tracer les traits noirs pour que vous puissiez avoir une base sur laquelle colorier. Maintenant que cette dernire
tape est passe, vous pouvez tous les supprimer, mme si le mieux serait quand mme de les masquer en cliquant sur les petits
yeux qui leur correspondent dans la fentre de calque. Ou alors, vous pouvez tout simplement les remplacer eux aussi, mais par
une couleur plus fonce que toutes celles dj existantes dans votre cration. En ce qui me concerne, je vais opter pour cette
solution. Pour la couleur choisie, voici le code hexadcimal rentrer dans votre palette de couleurs : #a79f72. Le rsultat :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 451/574

Notre cube est quand mme dj bien mieux que notre premire bauche.

C'est dj termin ?

Hmm... Disons que cet exemple aura t fructifiant dans la mesure o vous avez pratiqu : c'est tout ce qui m'importait pour tre
honnte. Maintenant, rien ne vous empche d'amliorer ce cube en y apportant la fameuse "valeur ajoute" dont je vous parlais.
Quoi par exemple ? J'en sais rien... quoi ce cube vous fait-il penser ? Un jouet ? Un immeuble ? Un d ? Une boite ? ...

En reprenant l'exemple de l'immeuble, pourquoi ne pas tenter de crer une porte ? Avec un peu de jugeote, je suis sr que vous
russirez !

Puis... pourquoi pas ajouter quelques petites fentres ? Voil un exemple :

En variant un peu pour les fentres, voici le rsultat que l'on pourrait obtenir :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 452/574

Une petite sortie sur le toit ?

On ajoute une antenne...

Des petites barrires de scurit au cas o ?

Et pour finir, j'ai ajout des conteneurs poubelles sur le ct de l'immeuble.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 453/574

Et voil le travail ! Tout a avec le crayon, c'est plutt pas mal, n'est-ce pas ?
Le coloriage
Et si je vous disais qu'on aurait pu terminer ce dessin en Pixel-Art un chouilla plus rapidement... ? Si je vous disais qu'on aurait
pu se faciliter la tche pour colorier les faces de notre immeuble et qu'en un clic, 'aurait pu tre fait ?

Le pot de peinture

Pour colorier les faces de l'immeuble, je vous avais demand d'utiliser le crayon et de le passer un peu partout, sans dpasser. Eh
bien, oui, en ralit, il y a avait beaucoup plus simple, je suis au regret de vous l'annoncer.

Je ne comprends pas trop ta dmarche en fait... Me faire travailler pour rien, j'aime pas a.

Vous n'avez pas travaill "pour rien". Au contraire, voyez le rsultat, il n'est pas si mal votre immeuble ? Je ne pouvais pas vous
parler de l'outil Pot de peinture ce moment-l car ce n'tait pas forcment le moment le plus adquat tant donn que la partie de
ce cours portait bien sur le crayon et non autre chose.

A propos, l'instar du crayon, vous trouverez le Pot de peinture dans la panoplie d'outils Paint.

Cet outil sert remplir une zone de votre travail. Au mme titre que la baguette magique, il suffit de cliquer au centre de cette
zone pour que celle-ci se remplisse de la couleur d'avant-plan choisie dans la palette de couleurs. Je ne vais pas m'attarder trop
longtemps dessus, vous avez compris que son utilisation tait simple comme bonjour. Reprenons notre cration Pixel-Art:

Qu'auriez-vous fait si je vous avais demand de modifier la couleur de la face principale de l'immeuble ? La solution est toute
trouve : on prend l'outil Pot de peinture, on dfinit la couleur souhaite dans la palette de couleurs et enfin, on clic dans la zone
en prenant soin de slectionner le calque dans la fentre de calques, condition bien entendu d'avoir prvu un calque
spcialement pour cette face comme je vous avais demand de le faire tout l'heure.

Le changement est immdiat, rapide et trs russi :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 454/574

Bon, bien sr, avec cette nouvelle couleur, la cration perd tout son intrt. Un petit coup de peinture par-ci par-l et...

Pour arranger cette dernire image, je n'ai pas fait qu'utiliser le pot de peinture. Il n'empche qu'il m'a servi pour modifier
la couleur des faces de l'immeuble et de quelques autres lments.

Les dgrads

Le dgrad faisant partie de la mme famille que le pot de peinture, il faut cliquer droit sur ce dernier pour faire drouler la liste
dans laquelle notre nouvel outil apparaitra.

Vous savez ce qu'est un dgrad, nous en avons longuement parl dans la partie sur les styles de calques. Et justement, l'instar
du style "dgrads", l'outil dgrad permet la cration d'un... dgrad de couleurs sur un calque.

Pourquoi j'utiliserais l'outil dgrad quand je peux le faire via les styles de calque ?

C'est une bonne question. En fait, c'est vous de voir. Les styles de calque, c'est une sorte de paramtre ajout au calque. Ce
n'est pas un effet brut, je dirais que c'est un complment. Avec l'outil, on va appliquer le dgrad directement sur le calque. Cela
peut s'avrer plus prcis et plus pratique aussi, mais c'est surtout selon les gots.

Personnellement j'utilise le style de calque par habitude, mais rien ne vous empche d'utiliser l'outil. D'ailleurs, le gros atout, tout
de mme, de l'outil dgrad, c'est qu'on peut l'utiliser avec la slection, ce qui se rvle tre vraiment trs pratique dans la sens o
vous pouvez "remplir" d'un dgrad de couleurs tous les lments que vous dsirez. Il suffit de les slectionner et d'appliquer le
dgrad.

La question qu'il faut se poser maintenant, c'est : "comment a fonctionne ?". Tout d'abord, notez que le dgrad de couleurs par
dfaut utilisera la couleur de premier plan et la couleur d'arrire-plan de la palette de couleurs.

Du noir (premier-plan) au blanc (arrire-plan)...

Veuillez crer une nouvelle zone de travail aux dimensions 250*250px et sur fond blanc.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 455/574

Pour crer un dgrad avec l'outil, il suffit d'indiquer deux points entre lesquels les deux couleurs vont se rejoindre (et former le
dgrad bien entendu). Crons ce premier point : on clique et on maintient le clic de sorte ce qu'un trait apparaisse entre le
point et le curseur de votre souris. On dcidera de la trajectoire du dgrad en dplaant le curseur. On a dj connu ce systme
avec les outils de dtourage tels que les diffrents lassos, donc rien de bien compliqu ici.

Une fois la distance et la trajectoire dtermines, il ne reste plus qu' lcher le clic et le dgrad se formera automatiquement
l'intrieur de votre zone de travail :

C'est tonnant, la distance de mon trait ne dpassait pas les dimensions de ma ZDT. Pourtant, le dgrad occupe toute
la place !

C'est normal, vous ne lui avez indiqu aucune zone de dlimitation. Tout ce que vous avez fait, c'est dterminer la trajectoire et la
longueur de votre dgrad. Vous auriez pu faire sortir le trait de la zone de travail que a aurait aussi march. Simplement, le
dgrad aurait t plus large, plus "tir". Et l'inverse, si vous aviez "trac" un tout petit trait, la transition du noir et blanc

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 456/574

aurait t plus directe.

Essayez de faire la mme chose, mais juste aprs avoir cr un rectangle de slection lgrement plus petit que les dimensions de
votre zone de travail :

On redfinit la trajectoire et la distance de transition du dgrad de couleurs...

Et on lche le clic pour laisser apparaitre le dgrad l'intrieur de la slection.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 457/574

Voyons ce qui se serait pass si nous avions dfinit une distance beaucoup plus rduite, comme ceci :

Le rsultat :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 458/574

La transition entre le noir et le blanc est plus directe, c'est parce que la transition a commenc partir du premier point que nous
avons cr, puis s'est termine partir du deuxime point.

L'essai

On va garder notre immeuble en guise d'exemple et allons une nouvelle fois essayer de modifier l'apparence de ses murs. Vous
allez constater que cela n'a rien de sorcier, encore une fois.

Commenons par la face principale de l'immeuble, celle avec les fentres et la porte d'entre. Veuillez slectionner le calque
correspondant cette face dans la fentre de calque puis slectionner le mur avec un outil de slection tel que le rectangle de
slection.

Pour slectionner le contenu d'un calque plus rapidement, il vous faut maintenir la touche Ctrl (Option) et cliquer
simultanment sur la vignette du calque ici entoure en rouge :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 459/574

On prend ensuite notre outil dgrad et on fait comme on a appris : choix de la distance et de la trajectoire. N'oubliez pas de
modifier les couleurs de votre palette de couleurs avant. Voici ce que j'ai personnellement obtenu, j'ai repris la mme base de
couleur et ai effectu mon dgrad d'en haut droite en bas gauche.

On rdite l'opration sur les deux autres faces de l'immeuble...

Voil pour le dgrad, vous tes maintenant forms et saurez l'utiliser tout moment !

Attends ! T'as oubli de nous parler des options !

Hormis les diffrents types de dgrads, on connait dj la majorit des options du dgrad. En ce qui concerne les dgrads
justement, vous disposez d'une multitude de types de dgrad que je vais simplement vous numrer parce que, finalement, on
en a dj parl lors du passage sur le style de calque "dgrad".

Le dgrad linaire
Le dgrad radial
Le dgrad inclin
Le dgrad rflchi
Le dgrad en losange

Le pinceau : digital painting & masques de fusion


Il est enfin temps de s'intresser au fameux pinceau ! Et le vrai, cette fois-ci. Si je dis a, c'est parce que j'utilisais souvent ce
mme terme pour dsigner d'autres outils comme l'ponge par exemple dans le sens o ils fonctionnaient tous les deux de la
mme manire, leur utilisation tait semblable. Seuls leurs modes d'action diffraient.

Et justement, on va maintenant pouvoir s'intresser au mode d'action du vrai pinceau, celui qui va nous permettre, entre autres,
de dessiner des formes diverses et varies comme on pouvait dj le faire avec le crayon.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 460/574

Bah, justement, si on peut faire la mme chose avec le pinceau et le crayon, quelle est la diffrence ?

C'est une bonne question laquelle il vous faut connaitre la rponse. Je vous ai prsent le mode d'action du crayon travers le
Pixel-Art. Cela consistait donc dessiner pixel par pixel. Pourquoi pixel par pixel ? Parce que c'est ce que permet le crayon. Utiliser
le crayon, c'est remplir un pixel ou des pixels d'une couleur 100%. Cela se constate au premier abord : quand on zoome sur notre
ZDT et qu'on clique avec notre crayon paramtr 1px de diamtre, le pixel est compltement rempli de la couleur de premier plan
(ici le noir) :

Bah, a, c'est logique non ?

Avec le crayon, a l'est. Avec le pinceau, c'est autre chose. Et pour preuve : en zoomant sur la ZDT et en reprenant le mme
exemple (on clique avec 1px d'paisseur, toujours avec du noir), vous ne remplirez non pas 1 seul pixel mais plusieurs, tous
d'intensits de couleur diffrentes en fonction de l o vous aurez cliqu :

Ici, on a 4 pixels de remplis, et en plus ils sont gris. Pourtant, j'ai bien utilis du noir, et j'ai bel et bien cliqu une seule fois, et sur
un seul pixel. Si vous voulez, le pinceau est moins net, il a tendance s'taler un peu pour donner un effet moins pixelis. Par
exemple, avec le pinceau, il est techniquement impossible de faire du Pixel-Art, ou alors trs, trs, trs difficilement (et ce ne serait
plus du Pixel-Art d'ailleurs).

Cela se remarque sur une image en gros plan (comme celles ci-dessus) mais aussi sur plan large, regardez.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 461/574

Sur deux dessins de forme identique et dessins avec un mme diamtre (mais le premier au pinceau, l'autre au crayon), on
obtient deux rsultats parfaitement diffrents. Le dessin au pinceau est moins net, comme je vous l'avais annonc, que celui au
crayon. Ce que je ne vous ai toutefois pas dit, c'est qu'il est possible d'utiliser le pinceau sans pour autant que le rendu soit aussi
flou que le dessin prcdent. En fait, le principe est simple, tout se passe avec la duret, que vous trouverez en cliquant droit
l'intrieur de la zone de travail (la fameuse petite fentre des options de l'outil).

Par dfaut, la duret du pinceau est 0% . On peut traduire a par "le pinceau est mouill". Et quand un pinceau est mouill
(enfin son poil), la peinture a tendance tre lgrement floue, l'image du dessin ci-dessus. En modifiant le % de duret du
pinceau, et en l'occurrence en la mettant 100% , le pinceau apparaitra comme sec et donc, la peinture y sera moins floue, le
rsultat sera d'ailleurs proche de celui du crayon :

Mme si ces deux rsultats sont trs proches, on remarque quand mme une petite diffrence. Et c'est normal : le dessin du
pinceau ne prsente pas cet effet crnel que l'on retrouve sur celui du crayon...

Les brosses

En ralit, sur Photoshop, on appelle le bout du pinceau (le poil) une brosse, bien que le terme le plus couramment utilis soit
celui de nos amis anglophones, on parlera alors de brush. On dispose d'un nombre incommensurable de brosses, ce sont celles
que nous fournit Photoshop l'achat ou au tlchargement. La brosse par dfaut est celle que nous utilisons depuis le dbut.
Mais vous en trouverez une partie ici-mme :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 462/574

Pour toutes les autres, il vous faudra cliquer sur la petite flche en haut droite et slectionner la catgorie qui vous intresse.

Pour l'exemple, j'ai ouvert la catgorie "Effets spciaux" et ai choisi l'une des brosses pour en arriver ici :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 463/574

Un autre petit essai avec l'une des formes "DP"... ?

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 464/574

Ce n'est pas forcment trs beau, mais a reste quand mme trs efficace pour le peu de boulot que cela nous demande. Et c'est
justement un "problme", les brosses sont souvent critiques pour cela. J'aimerais donc en profiter pour vous sensibiliser et
vous faire comprendre que l'utilisation de brosses, c'est bien, mais petite dose.

Ce qui est vraiment super, c'est qu'il existe un trs grand nombre de brosses disponibles sur la toile. Une petite recherche sur
Google vous permettra de trouver votre bonheur. Croyez-moi, ce n'est pas ce qu'il manque. Voici un petit chantillon de ce que j'ai
pu tlcharger personnellement. Vous allez voir qu'on peut "faire" des trucs sympa sans trop se fouler :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 465/574

Le pinceau, pour quoi faire ?

Vous le savez, on utilise le crayon pour faire du Pixel-Art. Mais avez-vous une ide des domaines pour lesquels on utilise le
pinceau ?

Digital painting

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 466/574

On a recours au pinceau pour diffrents types d'utilisation, et je peux par exemple vous parler du trs connu "digital painting",
peinture numrique en franais, qui consiste tout simplement ... peindre. Un peu comme le Pixel-Art, je ne pourrai pas vous
initier au digital painting car ce serait trop long et ce n'est pas l'objet de ce cours. En fait, vous savez comment fonctionne le
pinceau et c'est l l'essentiel. Du coup, je vous laisse vous documenter si cette technique de cration vous intresse, en
attendant je vous laisse baver devant ces uvres. Avant d'en arriver l, il va falloir travailler !

- -

Vitaly Samarin Alexius

A titre d'information, toutes ces images ont t ralises avec des tablettes graphiques, ce qui s'avre quand mme bien plus
pratique. Une tablette graphique, c'est une planche lectronique sur laquelle on fait mine de dessiner pour que nos faits et gestes
soient retranscrits sur notre ordinateur, cela nous permet donc de dessiner sans utiliser notre souris d'ordinateur.
Toujours est-il que c'est du travail exceptionnel et qu'il faut vraiment travailler dur pour russir de telles images. Mais ne vous
dcouragez pas.

Retouche photographique

On peut utiliser le pinceau pour dessiner sur une photo et la modifier voire la retoucher. Le plus souvent, le pinceau va servir
coloriser certaines parties d'une image, comme par exemple les yeux. Il existe un tas de techniques pour colorier des yeux, mais le
pinceau peut se rvler plus pratique dans la mesure o l'on a une totale maitrise sur lui. On clique, et on colorie les parties qui
nous intressent.

D'ailleurs, un outil a t invent dans les dernires versions de Photoshop, il s'agit de l'outil Remplacement de couleur, un
cousin de notre bon vieux pinceau. Celui-ci a t tudi spcifiquement pour remplacer la couleur dj prsente au sein d'une
image. Ses options nous permettent de l'adapter aux diffrents types d'images auxquelles on peut tre confrontes. Je vous laisse
le soin de l'essayer.

Masques de fusion

Le pinceau est rellement polyvalent. S'il sert dessiner et retoucher une image, on profite souvent de cet outil en complment
de ce que l'on appelle les "masques de fusion".

Ah bah oui, a on connait, les modes de fusion. Mais quel rapport avec le pinceau... ?

Attention, j'ai bien dit les masques de fusion et non les modes de fusion. Ce sont deux notions parfaitement diffrentes et il
vaudrait mieux ne pas faire de confusion, c'est pour vous que je dis a.

Inutile de vous rappeler ce qu'est un mode de fusion, vous le savez aussi bien que moi maintenant. Ce que vous ne connaissez
pas en revanche, ce sont les masques. Et bien figurez-vous qu'avec eux, on va non pas crer, non pas retoucher, mais nous
allons slectionner ! Eh oui, encore un outil de slection qui vient s'ajouter notre longue liste d'outils de slection dj
tudis. Mais, videmment, les masques de fusion proposent de slectionner une image diffremment, sans quoi ils n'existeraient
pas.

Pour utiliser un masque de fusion, il faut dj en crer un. Prenons un exemple, nous travaillerons sur cette image :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 467/574

N'hsitez pas travailler avec moi !


Tlcharger l'image
Deux_filles.png
P our tlcharger l'image, cliquez droit puis "Enregistrer sous"

Pour crer un masque de fusion, ce n'est pas bien compliqu, il faut se rendre en bas de la fentre de calques et cliquer sur cette
image : . Elle reprsente les masques sur Photoshop. Si l'icne n'est pas oprationnelle (vous ne pouvez donc pas cliquer
dessus), deux raisons sont plausibles :

Votre calque n'est pas slectionn dans la fentre de calque. Du coup, le masque de fusion ne sait pas o se ranger.
Votre calque est un calque de type "Arrire-plan". Du coup, il faut lui retirer ce statut pour pouvoir lui ajouer un masque
de fusion. Pour cela, on double-clique sur l'image du calque (puis sur OK quand la nouvelle petite fentre apparait) ou on
clique droit sur le calque puis, dans la liste, on choisit Calque d'aprs l'arrire-plan....

Une fois que votre calque est ouvert la modification et que vous avez cliqu sur le bouton reprsentatif des masques de
fusion, un nouvel lment devrait apparaitre dans votre fentre de calques :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 468/574

Ce nouveau carr de couleur blanche, c'est ce qui caractrise la prsence d'un masque de fusion.

Mais c'est quoi, en fait, un masque de fusion ? a sert slectionner, d'accord, mais c'est quoi ?

Un masque de fusion, c'est une sorte de film transparent que l'on va poser au-dessus du calque pour le protger provisoirement
des futures modifications que l'on apportera au calque. Pourquoi provisoirement ? Tout simplement parce que l'on va pouvoir
supprimer ce masque et retrouver notre calque d'origine. Cela signifie donc que l'on va modifier l'apparence du calque, mais que
c'est le masque qui va se charger de conserver en mmoire ces modifications, le calque n'aura donc subi aucune modification
directe.

Prenons un exemple. J'ai dessin sur ma zone de travail deux ronds blancs ports par le mme calque de fond bleu, puis j'ai cr
un masque de fusion et ai cr un rond gris fonc, ce qui donne :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 469/574

Ceci est un schma dtaill pour que vous puissiez bien comprendre comme cela fonctionne. Voil maintenant le mme schma,
mais avec un aperu de la zone de travail :

Le masque de fusion est bien invisible, seul son contenu est venu se confondre avec celui du calque et c'est logique, puisqu'on
n'est pas cens savoir qu'un masque de fusion existe. C'est un outil dont seul l'infographiste est cens en connaitre l'existence.

Je vous disais donc que les masques taient provisoires. Cela se vrifie rapidement, il suffit simplement de supprimer le masque
de fusion (nous verrons comment faire, juste une minute) et le tour est jou...

... le rond de couleur grise n'apparait plus dans la zone de travail.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 470/574

Ok, je vois maintenant... Par contre, dsol, mais j'imagine mal les masques permettre de faire une slection.

N'oubliez pas : les masques de fusions seuls ne le permettent pas, il va nous falloir utiliser le pinceau. On va donc crer un
masque de fusion et peindre dessus. Ainsi, toutes les zones peintes feront office de slection, tandis que les autres seront
protges de toute modification.

Reprenons l'image que je vous ai faite tlcharger prcdemment et essayons de crer une slection avec les masques.
Commencez par ouvrir l'image sur Photoshop puis slectionnez le pinceau.

Ensuite, veuillez remettre par dfaut les couleurs de votre palette en cliquant sur cette petite icne :

De cette manire, votre palette sera compose de la couleur noir en premier plan, et du blanc en second blanc. Ce sont les deux
couleurs dont on aura besoin pour travailler, c'est avec elles que les masques de fusion fonctionnent.

Une fois votre palette rinitialise, veuillez crer un nouveau masque de fusion en cliquant sur la petite icne reprsentative :

Je vous rappelle que si le bouton des masques de fusion n'est pas oprationnel (il est gris et non-cliquable), c'est sans doute
parce que l'image que vous avez ouverte sur Photoshop est de type Arrire-plan dans la fentre de calques. Pour remdier au
"problme", il vous faudra double-cliquer sur la vignette du calque dans la fentre de calque puis cliquer sur "Ok", ou bien
cliquer-droit sur cette vignette puis cliquer sur Calque d'aprs l'arrire-plan... et enfin sur Ok. L'icne devrait alors revenir ton
tat normal, vous pourrez maintenant crer le masque.

Comme vous le savez, le masque de fusion est caractris par l'apparition d'une nouvelle petite vignette venu se loger droite de
la vignette du calque :

On peut ainsi choisir quel lment modifier en cliquant sur la vignette de notre choix : si je clique sur la vignette du masque, c'est
lui qui sera prt subir des modifications. Si je clique sur la vignette de gauche, autrement dit celle du calque, ce sera sur ce
dernier que je vais pouvoir travailler.

Si je vous ai demand de rinitialiser votre palette de calques afin de lui appliquer ses couleurs par dfauts en premier-plan (noir)
et en arrire-plan (blanc), c'est parce que nous aurons besoin de ces deux couleurs pour former notre slection.

Une fois le masque cr, il suffit de peindre dessus avec le noir pour supprimer la partie sur laquelle nous aurons peint. Par

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 471/574

exemple, si je travaille sur un visage humain et que, aprs avoir cr un masque de fusion, je peins sur lil, ce dernier va
disparaitre au fur et mesure que je peindrai dessus. Essayez, vous verrez !

Ouvrez une image, peu importe laquelle. Ensuite, crez un masque de fusion puis prenez votre pinceau. Enfin, mettez du noir en
couleur de premier-plan et peignez sur votre zone de travail. Si vous avez bien suivi, alors la zone que vous peignez est cense
disparaitre, elle devient donc transparente. Et quand une zone est transparente sur Photoshop, souvenez-vous, ce sont des
petits carrs blanc et gris qui font leur apparition.

Voyez plutt. Cette image est tire de mon appareil photo, elle est donc tout ce qu'il y a de plus normal.

Un petit coup de pinceau en gardant bien entendu les diffrents paramtres permettant d'utiliser les masques de fusions, et hop,
je supprime la demoiselle de gauche :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 472/574

Bon, j'avoue que c'est un travail un peu grotesque, mais avec un peu d'application, a peut se rvler trs efficace.

Le tout maintenant, c'est de slectionner ce que l'on a peint. Pour cela, il suffit de maintenir la touche Ctrl (Command) et de
cliquer simultanment sur la vignette du masque. C'est alors que la slection se forme autour du masque.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 473/574

Or, ici, la slection n'est pas forme autour de la zone peinte mais de tout le reste. La zone peinte est "protge" de toute
modification, pourtant c'est l'inverse que nous voudrions, nous. Pour qu'elle ne contienne que la zone peinte, il faut cliquer droit
l'intrieur de la slection (donc en dehors de la zone peinte et avec un outil de slection en main) puis cliquer sur "Intervertir",
comme nous l'avions dj fait dans le chapitre sur les niveaux de couleurs, dans la partie 2 de ce cours.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 474/574

Il suffit ensuite de cliquer sur la vignette du calque pour que la slection fonctionne sur l'image de base et non plus sur le
masque. Vous pouvez aussi supprimer le masque une fois votre slection faite, en cliquant droit sur sa vignette puis en
slectionnant soit "Dsactiver le masque", pour le supprimer provisoirement, soit "Supprimer le masque", pour le supprimer
dfinitivement.

Mais pourquoi j'utiliserais les masques plutt qu'un outil de slection lambda ?

Tout d'abord parce que vous effectuez cette slection de manire provisoire. C'est un avantage ne pas ngliger.
Aussi, on peut prfrer le pinceau pour sa flexibilit : on peint, a efface, puis on slectionne la zone peinte et efface.
De plus, on peut moduler notre slection selon trois caractristiques on ne peut plus pratiques :

En dfinissant le blanc comme couleur de premier-plan (on remplace donc le noir), c'est l'effet inverse qui se produit ! Le
pinceau n'efface plus, il rinitialise l'effacement caus par le noir. Donc, si vous passez d'abord le noir sur votre dessin, a
efface. Si vous passez ensuite le blanc, a remet la photo en tat.

L'un n'empche pas l'autre : si vous mettez du gris, le pinceau va gnrer un effet se balanant entre le blanc et le gris. En
d'autres termes, si votre gris est trs proche du noir (disons donc gris fonc), alors le pinceau effacera la partie peinte,
mais pas 100% de son efficacit car la couleur n'est pas totalement noire. Cela fonctionne donc comme l'opacit, la
diffrence prs que c'est la couleur qu'il faut moduler, allant du noir au blanc ou du blanc au noir.

Enfin, et c'est l la vraie puissance des masques et du pinceau, c'est qu'on module le type de slection que l'on veut faire
selon la brosse de notre pinceau, autrement dit sa pointe. Si je change la duret du pinceau, alors je change en quelque
sorte la duret de ma slection. Rappelez-vous, plus le pinceau est dur, plus il est net. C'est pareil ici : plus le pinceau est
dur, plus les contours de la slection seront nets. Et vice-versa ! Cela se rvle particulirement efficace sur les photos
dont des cheveux ou des poils sont dtourer. Le fait de pouvoir choisir le diamtre du pinceau et sa duret nous permet
de slectionner les cheveux jusque dans leurs moindres dtails.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 475/574

Mais ce n'est pas tout ! Les masques ne servent pas seulement slectionner, il peuvent tre utiles autre chose. Et cet autre
chose arrive dans le prochain chapitre, alors tenez-vous prts !
Voil pour les outils de type matriciel. N'hsitez pas vous entrainer pour progresser en pixel-art et prendre le temps de
dcouvrir le digital-painting.

Le prochain chapitre traite des outils vectoriels et vous verrez, on a du pain sur la planche !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 476/574

Les outils de forme : place au vectoriel !


Je prsume que vous aussi, vous avez dj utilis le logiciel Paint au moins une fois dans votre vie ? Sachez qu'il n'y a pas de
honte avoir ! Je vais mme vous faire une petite confidence, figurez-vous qu'on retrouve certains des outils du logiciel de
Microsoft sur Photoshop. Oui, oui, improbable mais vrai.

Parmi eux, il y a les outils de forme. Ces outils vont nous permettre de crer des formes gomtriques diverses et varies, bien
que prdfinies. Nous apprendrons donc dessiner des rectangles, des ronds ou encore des triangles.

Mais rassurez-vous, si l'utilisation des outils de forme peut se rvler simple voire enfantine, j'ai quand mme prvu de vous en
faire baver un peu avec l'emblmatique plume.
Elle fait partie des outils "phares" de Photoshop, mais je ne vous en dis pas plus, vous allez vite vous en rendre compte une fois
que nous aurons travaill avec.

A noter une chose avant de commencer : la particularit de tous ces outils est qu'ils sont tous de type vectoriel. On peut donc
dire Adios aux images Bitmap (matricielles) pendant au moins tout ce chapitre.
Crer et utiliser des formes gomtriques
Voici venu le temps des formes gomtriques ! Elles sont un outil grce auquel nous allons pouvoir crer des dessins de
type vectoriel de diffrentes formes. On utilise les formes gomtriques pour bien des choses et notamment, pour ceux que a
intresse, pour crer le "design" d'un site internet.

Oui, mais alors non, je n'ai pas encore prvu de vous initier la dure tche qu'est l'criture et la ralisation d'une charte graphique
(le fameux "design" comme beaucoup aiment l'appeler). Ce n'est pas ce qui est au programme dans ce chapitre. A la place, nous
allons nous concentrer sur les formes pour crer un vrai dessin de toute pice, et avec un peu de rflexion, vous devriez deviner
sur quoi portera ce dessin.

Dfinition

Comme je vous le disais, les outils de forme sont tout simplement des formes prdfinies, ce sont autrement dit des formes
gomtriques. Ainsi, nous apprendrons, par exemple, dessiner un rectangle ou un polygone.

Voici la liste complte de ce qui nous est propos. Pour avoir un aperu de cette liste, il faut cliquer-droit sur cette petite icne
.

Le Rectangle : forme rectangulaire, elle est donc dote de 4 angles droits.


Le Rectangle arrondi : semblable au rectangle, la diffrence que les angles sont arrondis, donc pas d'angle droit.
L'Ellipse : forme circulaire. Mme principe que celui de l'ellipse de slection.
Le Polygone : cette forme dispose de plusieurs cts.
Le trait : traits rectilignes. comme on les connait.
Forme personnalise : il s'agit d'une galerie de formes offerte avec le logiciel. Il y a par exemple une panoplie de
flches diffrentes, des symboles, des objets, etc.

Bon, ce serait sans doute un peu redondant et sans intrt de vous montrer quoi ressemble chaque forme, mais parce qu'on est
cens partir de zro (et mme si vous n'tes plus vraiment un zro maintenant, d'ailleurs) et que l'on n'est jamais trop sr... Voici
un rectangle !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 477/574

Pour dessiner ce rectangle, je n'ai pas eu besoin d'utiliser une rgle ni une querre ou quoi que ce soit d'autre d'ailleurs. Une
souris suffit : on slectionne l'outil dans la boite outils, on place son curseur sur la zone de travail, on clique et enfin, en
maintenant ce clic, on dplace son curseur pour former le rectangle. Plutt simple et intuitif, n'est-ce pas ? Cela fonctionne de la
mme manire pour chaque outil.

Allons donc plutt jeter un il sur les options de ces outils. Pour la plupart, les mmes options reviennent, quelques
exceptions prs.

En cochant l'option "tendre la zone de la forme (+)" qui correspond plus ou moins l'option "Ajouter la slection" des outils
de slection, je vais pouvoir additionner un rectangle au premier, puis encore un au deuxime, etc. Je me suis amus faire un
truc compltement dnu de sens et graphiquement trs laid, juste pour l'exemple.

J'insiste bien sur le fait que ces formes sont vectorielles : nous allons pouvoir modifier leurs dimensions comme bon nous
semblera. Souvenez-vous, une image vectorielle est transformable souhait sans perte de qualit.

Vous vous souvenez quoi ressemblaient les calques que nous utilisions jusqu'ici ? C'tait les fameux calques standards,
appels calques Image. On dit que ce sont des calques dont le contenu est "pixelis" car il ne peut tre modulable, ce sont des
images matricielles (BITMAP).
Cette fois-ci, quand vous crerez quelque chose avec les outils qui suivent, vous crerez galement automatiquement un calque
Forme qui se caractrisera de cette manire dans la fentre de calques :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 478/574

Comme vous pouvez le constater, la vignette du calque vectoriel n'est pas la mme que celle du calque standard (le calque Image)
que l'on peut crer manuellement.

Ici, nous avons gauche la couleur de la forme vectorielle (en l'occurrence, du noir) puis la vignette qui reprsente la forme cre
(ici, une fleur). Sur cette vignette, on reconnait la forme grce aux couleurs qui les diffrencient du fond : la forme est blanche, le
fond de la zone de travail est reprsent en gris.
Attention, je ne dis pas que la forme est blanche dans la zone de travail ! Non, l, elle est noire, puisque le carr de gauche est de
couleur noire. Par contre, elle apparait en blanc dans la vignette de droite pour la diffrencier du fond qui apparait, quant lui, en
gris (mais en ralit, il peut trs bien tre blanc, orange ou autre : c'est juste pour la vignette).

Revenons sur nos options si vous le voulez bien.

A comparer avec les options que l'on a pu rencontrer depuis le dbut de ce cours, faut dire qu'ici, il semble y en avoir un paquet.
Les cinq premires (en partant de la gauche) ne nous intresseront pas pour le moment. Nous les utiliserons dans ce mme
chapitre, mais un peu plus tard, le temps pour moi de vous parler des autres options et des possibilits que nous donnent les
outils de forme.

Les outils de forme justement, ce sont les six options suivantes. Eh bien oui, des raccourcis. Vous pouvez ainsi choisir la forme
qui vous intresse directement via les options, a vous viter le clic-droit dans la boite outil. (Qui a ? Moi, fainant !?)

Les cinq options suivantes servent dfinir le mode d'action de l'outil slectionn. Encore une fois, elles fonctionnent
absolument de la mme manire que les options lies au rectangle de slection ou encore l'ellipse de slection. Vous pourrez par
exemple additionner deux rectangles ou plus, ou bien alors crer une interaction entre deux rectangles... bref, vous pourrez faire
ce que vous pouviez dj faire avec les outils de slection.

Nous avons ensuite l'option "Style". Vous vous souvenez ce que sont les styles de calque ? Et bien, figurez-vous qu'il s'agit l
d'une srie de diffrents styles de calques prdfinis que vous pourrez appliquer vos formes. A propos, vous pourrez retrouver
ces styles dans une palette flottante prvue cet effet (Fentre > Style).

Attention toutefois de ne pas abuser des bonnes choses. On peut tre fainant sans chercher la facilit. Soyez cratif et ne vous
reposez pas que sur des fonctionnalits prtes l'emploi comme les styles que je vous prsente ici. D'autant plus qu'il ne sont
pas particulirement jolis, ceux-l. Je les trouve presque grossiers (bon, en fait, je les dteste, mais faisons preuve de diplomatie,
je ne suis pas tout seul).

Enfin, la dernire option, c'est le choix de la couleur, et a, vous connaissez !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 479/574

Pour l'outil de forme Polygone, vous trouverez une nouvelle option appele "cts". C'est simple, cela permet de choisir le
nombre de cts (de faces) dont disposera la forme. Si je choisis par exemple 15, le polygone aura bel et bien 15 cts :

Un polygone est une forme qui comprend forcment 3 cts, ce que l'on apppelle plus communment un triangle. Si vous
indiquez la valeur 3 au champs de l'option "Cts", vous obtiendrez bel et bien un triangle :

Les transformations

Rien ne vous empche de retravailler vos formes en crant, par exemple, un effet de perspective ou encore en lui faisant effectuer
une rotation 90. Personnellement, j'ai tendance utiliser la transformation manuelle chaque fois que je retravaille mes formes,
mais vous pouvez trs bien passer par le menu dition > Transformation.

Le fait est que votre forme est vectorielle et qu'il ne faut pas l'oublier. Cela vous laissera donc plus de libert et vous pourrez la
redimensionner votre guise sans qu'elle perde sa qualit.

Ce qui vous reste faire dsormais, c'est essayer, essayer, et encore essayer. Les transformations n'ont plus de secret pour vous,
donc je vous laisse vous amuser un peu et vous familiariser avec les formes et les transformations avant de passer la suite.
TP : c'est vous de jouer !
Afin que vous puissiez vritablement vous familiariser avec les formes, car croyez-moi, vous ne passerez plus une minute sur
Photoshop sans les utiliser, je vous ai concoct un petit TP.

S'habituer aux formes, c'est savoir les utiliser bon escient, mais c'est aussi savoir les agencer et les assembler pour former un
dessin cohrent et esthtique : choix des couleurs, des transformations, des dimensions, etc.

South Park is back !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 480/574

... Pardon ? Comment a, vous aviez dj oubli notre fameux petit personnage de la srie South Park du dbut de cours ?
Rappelez-vous, c'est celui qui nous a servi illustrer l'utilisation des calques et notamment l'ordre dans lequel nous les
disposions dans une fentre de calque. Une notion de purs dbutants qui ne vous concerne absolument plus maintenant !

A la fin de cette partie du cours, je vous annonais firement :

Citation : sp0z
Au fait, je dois vous annoncer une bonne nouvelle : d'ici la fin de ce cours, vous serez en parfaite mesure de raliser un tel
dessin ! Je dirais mme plus, vous allez vous rendre compte que cet exemple est vraiment bidon et que vous tes capables de
faire bien mieux que a !

Comme je suis un homme de parole, vous allez aujourd'hui tre amen(e) raliser votre propre dessin vectoriel sur Photoshop et
surtout votre propre petit personnage South Park !

Dans ce mini TP, nous n'utiliserons que les outils de forme. Si j'appelle cela un TP, c'est parce que vous serez maitre de la
situation, c'est vous le crateur. Disons que ce n'est pas vraiment un petit exercice comme j'ai l'habitude de vous faire faire, quoi...
On va pousser un peu et essayer de dpasser nos limites.

Consignes

Des consignes, je n'en ai pas beaucoup vous donner puisque vous les connaissez dj. Je vais vous demander de crer votre
propre personnage de South Park.

videmment, je ne vous demande pas de copier btement les personnages de la srie ou encore mon personnage ci-dessus

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 481/574

(celui-ci n'a aucun intrt !), il s'agit de faire diffrent et mieux ! Vous en tes absolument capable, j'en suis convaincu.

N'oubliez pas qu'il vous faudra utiliser les outils de forme seulement, ils suffisent largement la ralisation de notre dessin. Par
contre, vous pouvez trs bien faire usage des notions tudies prcdemment, tout au long du cours. Par contre, les outils et
fonctionnalits tudies dans la partie "retouche photographique" ne vous seront d'aucune utilit ici.

Bon, comment je peux commencer, moi ?

Je vous conseille de commencer par crer une nouvelle zone de travail. Sans elle, a va tre dur de dessiner ! Choisissez les
dimensions de votre zone en veillant ce qu'elle ne soit ni trop grande, ni trop petite. En ce qui me concerne, j'ai choisi
600*600px.

1. Le dcor

A mon sens, il serait plus judicieux de commencer votre dessin par le dcor, c'est--dire le fond. De cette manire, on donne tout
de suite le ton et on sait sur quoi se baser. Vous pouvez trs bien reprendre le mme type de fond de mon premier dessin (en
changeant les couleurs, quand mme !), mme si je vous recommande vivement d'essayer autre chose. Soyez cratif, vous
pouvez trs bien reprendre comme base le fond de mon dessin mais l'amliorer en ajoutant des carrs par-ci par-l pour lui donner
un peu plus de style. N'oubliez pas que la duplication existe si ncessaire.

2. La tte

Une fois le dcor pos, on peut commencer notre personnage. J'ai tendance prfrer dessiner la tte avant le corps car c'est ce
qui me semble tre la suite logique des choses. Pour la tte, on va utiliser l'outil de forme Ellipse bien entendu. Pareil pour les
yeux. N'oubliez pas d'ajouter des sourcils, une bouche (et pourquoi pas des dents ?), etc.

3. Le reste du corps

Et pour finir, on dessine le reste du corps : les bras, le corps, les jambes, les mains, les pieds, etc. Gardez une chose en tte : on ne
dessine pas des bras (pour reprendre cet exemple) mais des manches. On ne dessine pas vraiment des jambes, mais un pantalon.
Du coup, faites attention au choix des couleurs que vous utiliserez, elles caractriseront votre personnage.

Rsultat

Si vous jugez votre dessin termin, n'hsitez pas le soumettre sur le forum Graphisme pour avoir l'avis des Zros. Ce forum est
un forum respectable et il vous est gnralement demand de prsenter des dessins avec un minimum de travail personnel. On ne
vous demande pas d'tre particulirement dou, on est tous l pour progresser. Veillez simplement ne pas prsenter une uvre
parfaitement identique la mienne ou bien une uvre non soigne ou non approfondie.

En ce qui me concerne, pour cet exemple, j'ai essay de faire un dessin un peu plus pouss que le premier. J'en suis arriv l :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 482/574

Les dessins de South Park ont l'avantage d'tre relativement simples. Il y a peu de dtails et les formes sont gnralement
grotesques. Et pourtant, je les trouve particulirement sympas personnellement.

Voyons dans les grandes lignes comment j'ai procd.

Le dcor

Tout comme je vous le conseillais, j'ai commenc mon dessin par le dcor. Je me suis dit "tiens, on va mettre une porte et une
tagre, a va me permettre de crer plusieurs petits dessins pour montrer la diversit de cration offerte par les outils de forme".
Pour ce dcor comme pour l'ensemble du dessin, je n'ai fait qu'utiliser les outils de forme.

Pour le mur, j'ai d'abord rempli l'arrire-plan de marron fonc, puis j'ai cr une ellipse d'un marron plus clair que j'ai fait dpasser
de la zone de travail pour n'en garder qu'un infime partie. J'ai ensuite utilis le rectangle de slection pour faire la porte, l'tagre
et le panneau de sortie de secours. Pour ces deux derniers, j'ai utilis la transformation "perspective" car cela me semblait plus
judicieux.

J'ai cr le petit homme qui court (sur le panneau) l'aide d'une forme personnalise. Vrifiez, elle existe ! Idem pour la flche.

Concernant les enceintes, c'est on ne peut plus simple : on utilise l'ellipse pour faire les baffles en modifiant la dimension de
chacun chaque fois, puis on prend le rectangle et on fait le caisson grce la perspective.

Pour les papillons, a s'est pass du ct des formes prdfinies, vous les trouverez l-bas. J'ai ensuite choisi la couleur de

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 483/574

chacun et ai modifi la direction dans laquelle il semblait aller grce aux outils de transformation.

Je vous laisse deviner le reste, vous n'avez plus besoin de moi.

La tte

Pour former le visage du garon, j'ai utilis l'Ellipse . J'espre que cela ne vous tonne pas et que vous avez vous aussi utilis
cet outil. Je vous rappelle que pour que votre rond soit parfait, il suffit d'appuyer simultanment sur la touche Shift de votre
clavier.

Pour les yeux, j'ai d'abord utilis l'ellipse pour ensuite profiter de la transformation "Torsion" pour les incliner lgrement vers
l'intrieur. J'ai ensuite cr les pupilles noires avec ce mme outil.

Les sourcils ont t crs l'aide de l'outil Trait. J'ai modifi l'paisseur du trait dans les options de l'outil.

Pour la bouche, deux traits croiss et le tour tait jou.

Enfin, pour les cheveux, j'ai fait preuve de ruse en en me servant d'une Forme personnalise, il s'agit d'une bulle de dialogue
que j'ai ensuite retourne verticalement l'aide de la transformation "Symtrie axe vertical" et que j'ai dupliqu deux fois pour les
intgrer la premire sur chaque ct.

Le reste du corps

J'ai termin mon dessin en ralisant le reste du personnage, savoir ses bras, son corps, ses mains, etc. Pour l'ensemble du
corps, j'ai utilis le rectangle arrondi avec 20px de rayon. J'ai rutilis l'outil pour faire les deux manches, ceci en sachant que la
transformation "rotation" m'a t ncessaire pour incliner les bras.

Pour les mains, c'est facile, l'ellipse faisait l'affaire. Afin de donner un style particulier au bonhomme, je me suis dit qu'un petit col
en V ferait bonne apparence. Pour cela, j'ai utilis une forme personnalise qui reprsentait un triangle aux sommets lgrement
arrondis. J'aurais galement pu utiliser un polygone trois cts.

En ce qui concerne les boutons, j'ai utilis l'ellipse mais aussi le trait pour marquer la sparation.

Pour finir, le pantalon a t cr l'aide du rectangle, et la sparation grise l'aide du trait.

Le mot de la fin

Comme vous pouvez le constater, tout a t fait grce aux formes et rien qu'elles. On aurait pu pousser un peu et chercher les
dtails pour donner un ct un peu plus vrai que nature au dessin. C'est d'ailleurs ce que je vous invite faire : je veux que vous
russissiez faire un dessin plus complet que le mien, vous avez de la matire !

Ah, et tant que j'y pense : quand je vous disais que le vectoriel pouvait tre trs intressant, a se confirme ici mme. En
admettant que mon dessin ait t fait en matriciel, donc base de calques pixeliss, les calques standards, et que j'augmente la
taille gnrale du dessin. J'aurais obtenu cette horreur :

Cliquez sur l'image pour l'agrandir

Observez bien l'image. Elle prsente un dfaut de qualit, vous savez, cet effet pixelis dont je vous parlais au dbut de cette
troisime partie. Cette image a t agrandie par 3 fois.

Refaisons l'exprience, mais sur notre travail de base qui est donc entirement vectoriel puisque tout a t ralis l'aide des
outils de forme. On agrandit par 3 fois...

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 484/574

Cliquez sur l'image pour l'agrandir

Le rsultat est net. Il n'y a pas d'effet escalier d la pixelisation engendre par l'agrandissement de l'image quand celle-ci n'est
pas vectorielle.

Voil pour ce petit point, je voulais revenir dessus rapidement et c'est chose faite. On peut passer autre chose.
Un mot sur les masques de fusion
Supprimer une partie d'un calque Forme

Dans le chapitre prcdent, je vous annonais que les masques de fusion pouvaient servir autre chose qu' slectionner. Cette
autre fonctionnalit est directement lie aux calques Forme.

Quand vous crez un nouveau calque Forme, autrement dit quand vous utilisez la plume ou une forme comme le rectangle ou
l'ellipse par exemple, il n'est a priori pas possible de supprimer une partie de cette forme. Faites un essai et vous pourrez constater
comme moi que cette opration n'est pas possible :

On cre une forme avec la plume. Un nouveau calque Forme apparait dans la fentre de calques.
La forme cre est automatiquement en slection dans la fentre de calques. Il faut d'abord cliquer une fois sur la vignette
pour retirer cette slection.
On cre ensuite une slection avec un outil de slection quelconque. Par exemple, le rectangle de slection.
Enfin, on essaie de supprimer la partie slectionne en tapant sur la touche "Backspace" (retour) de son clavier.

Impossible d'effectuer cette opration car le contenu du calque n'est pas directement modifiable.

En ralit, pour pouvoir supprimer une partie d'un calque Forme, il faut pralablement avoir cr un masque de fusion. Essayez !
Crez une forme (ou reprenez la mme), mettez-lui un masque de fusion, slectionnez la vignette de ce masque et enfin, faites une
slection pour supprimer une partie de la forme. Si vous avez fait a correctement, a devrait fonctionner.

BONUS !

Je vais vraiment conclure ce chapitre avec une petite astuce qui pourrait vous tes utile. Figurez-vous qu'il est possible
d'effectuer la mme opration ci-dessus, mais dans le sens inverse. Cela signifie donc que, une fois la forme cre, on peut
d'abord effectuer une slection et ensuite crer le masque.

La diffrence toutefois, c'est que le contenu de la slection sera automatiquement protg tandis que le reste sera supprim. En
d'autres termes, tout ce qui se trouvera dans la slection restera visible au sein de votre ZDT, tout le reste disparaitra.
Ce chapitre sur les outils vectoriels touche vritablement sa fin.

Que l'on s'entende : vous avez maintenant les capacits techniques pour dessiner vos propres dessins et laisser libre cours
votre imagination. Alors vous de jouer, et n'hsitez pas nous montrer ce que vous savez faire sur le forum Graphisme du SdZ.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 485/574

Le texte
Que serait un logiciel de graphisme sans l'emblmatique outil Texte ?

Sur Photoshop, savoir crire du texte ne suffit pas. C'est bien plus complexe que cela, il s'agit d'une vraie discipline qui demande
rflexion et crativit. En fait, c'est mon sens aussi important que de savoir utiliser les calques ou encore les outils de slection.
Dj, on en a constamment besoin mais en plus, cet outil nous offre tellement de possibilits diverses et varies que l'on cherche
sans cesse pousser un peu plus et dcouvrir de nouvelles techniques de cration.

Par exemple, on va voir que les styles de calque sont particulirement efficaces sur du texte, on arrive faire de belles choses,
vous verrez ! Ceci sans vous parler des transformations mais aussi et surtout des dformations envisageables grce aux options
lies au texte ainsi que la construction d'une identit graphique via la cration d'un logo textuel ou bien d'un bandeau
publicitaire.

Ce cours portera aussi plus ou moins sur la cration d'un logo. Je resterai cependant focalis sur l'utilisation de l'outil
Texte et de sa palette ddie qui font l'objet principal de ce chapitre.
Le chapitre suivant est un TP et il vous sera demand de crer un logo de toute pice, j'aurais alors l'occasion de vous
en apprendre un peu plus sur les rgles fondamentales de la cration d'un logo et vous serez ensuite capables de
raliser le vtre.

Ajouter du texte
Rjouissez-vous, c'est un chapitre "relax" qui vous attend ! On va d'abord apprendre crer du texte, nous allons ensuite le
paramtrer puis la partie la plus intressante fera office de conclusion : nous verrons comment donner du style au texte, en
d'autres mots comment l'embellir quoi...

Au fait, j'ai une question. Bon, on est bien censs commencer partir de zro ? Alors, je me lance... Savez-vous quoi ressemble
du texte ? Du texte, c'est a :

Salut, je suis du texte !

Heu... tu s'rais pas en train de me prendre pour un crtin, l ?

Absolument pas, o est-ce que vous allez chercher a ?

Si vous tes utilisateur des traitements de texte (Microsoft Word, OOwriter, Wordpad, ...), vous savez qu' l'ouverture de ces
logiciels, on peut directement et facilement crire du texte, ce qui semble logique finalement puisqu'aprs tout, c'est a qu'ils
servent. C'est aussi le cas pour le bloc-note d'ailleurs, dans lequel vous pouvez crire du texte.

Sur Photoshop, c'est "un peu plus" compliqu. Dj, on va videmment utiliser un outil pour crire du texte. Mais la nouveaut,
c'est qu'on va dfinir une zone dans notre document pour dire au logiciel "hey, je veux crire du texte d'ici ici, pas plus !".

Allez, slectionnons l'outil Texte et commenons.

Je vous invite par ailleurs ouvrir une nouvelle zone de travail de dimensions 500*500px au moins.

Crer une zone de texte

Bon, vous allez voir que ce n'est pas bien compliqu. Le principe est simple : il va falloir faire comme si vous utilisiez votre outil
rectangle de slection. Alors, il faut cliquer, maintenir le clic et dplacer le curseur de la souris.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 486/574

Aprs cela, il ne reste plus qu' taper du texte, comme je viens de le faire l.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 487/574

<

Ce que vous ne savez toutefois pas, c'est que j'ai cris un peu plus que ce que vous voyez sur cette image...

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 488/574

Cette partie de texte n'est pas visible car elle n'est pas comprise dans la zone que j'ai cre. Pour le rendre visible, il va nous falloir
agrandir la zone de texte en utilisant les poignes (les carrs blancs/transparents). Ainsi, en agrandissant le bas de la zone...

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 489/574

C'est pas plus compliqu que a. Vous pouvez aussi crire du texte sans vous imposer de limites avec cette fameuse zone
que l'on vient de crer. Pour a, il suffit simplement de cliquer une fois avec votre souris (et l'outil texte en main, videmment)
puis d'crire !

Un outil de type vectoriel

Le calque Texte est un calque de type vectoriel. Cela signifie que, sur Photoshop, on peut agrandir le texte autant qu'on le
souhaite sans qu'il perde en qualit.

D'ailleurs, si vous crez un calque standard vide (un calque pixelis, comme on a l'habitude de faire, vous savez...) et que vous
utilisez le texte, ce calque standard va automatiquement se transformer en calque texte. Il ne s'agira donc plus de matriciel mais
d'un calque vectoriel.

Voil, c'est peu prs tout. Vous voyez, quand je vous disais que a allait tre un chapitre "relax"...
Paramtrer le texte
Savoir crire du texte ne suffit pas quand on travaille sur un projet, aussi complexe soit-il. D'autant que ce n'est pas ce qu'il y a de
plus compliqu, hein.

En fait, il faut surtout savoir comment le paramtrer pour pouvoir l'adapter au projet sur lequel nous sommes en train de travailler.
On va donc apprendre formater le texte (comme on le ferait avec le CSS), autrement dit nous verrons comment modifier son
apparence travers les diffrentes options qui nous sont proposes.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 490/574

Vous allez voir, il y a pas mal de trucs que vous allez dcouvrir et qui, je l'espre, vous plairont.

Les options de texte

Nous retrouverons les options lies l'outil texte dans la barre d'options habituelle. Simplement, cette barre d'options n'est en fait
qu'un rsum de toutes les options vritablement existantes pour le texte. En fait, je dirais ce sont les options "principales" et
lmentaires pour paramtrer du texte. Jetons donc un il sur cette barre.

Orientation du texte

La premire option, que vous trouverez la plus gauche sur l'image ci-dessus, permet de modifier l'orientation de votre texte. Soit
le texte est crit l'horizontale, soit il est crit la verticale.

Cette option est suivie par l'une des plus importantes : le choix de la police d'criture.

Les polices d'criture

Soit je suis fou, soit j'ai bien lu qu'il y avait une "police" pour les critures...

C'est presque a, oui ! Pour faire simple, une police d'criture, que l'on peut aussi appeler "police de caractre", est la forme
mme que prendront les lettres de l'alphabet que vous taperez avec votre clavier d'ordinateur. Chaque police a des proprits
diffrentes, en voici quelques exemples :

Ce texte est crit avec la police d'criture arial.

Ce texte est crit avec la police d'criture times.

Ce texte est crit avec la police d'criture courrier.

Ce texte est crit avec la police d'criture impact.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 491/574

Ce texte est crit avec la police d'criture geneva.

On remarque bien que l'aspect global de chacun de ces textes est diffrent d'une police une autre. C'est l la force des polices.
Parce que bon, pour ces exemples, j'ai utilis des polices connues et reconnues, des polices que l'on retrouve trs souvent sur
les sites web que l'on visite. D'ailleurs, je les ai prises directement sur le Site du Zro, ce sont celles proposes dans le "zCode".

Rien ne nous empche d'en essayer d'autres. Vous savez, des polices, ce n'est pas ce qui manque ! Il en existe des milliers et des
milliers, je vous propose un petit chantillon de quelques polices toutes diffrentes les unes des autres. Vous allez voir qu'elles
sont loin d'avoir les mmes proprits :

Vous voyez, je trouve a fascinant personnellement, on a vraiment le choix et je trouve a vraiment gnial, a laisse beaucoup de
possibilits sur le plan cration et imagination.

Wow ! Moi aussi, je veux tlcharger plein de polices d'criture !

Normalement, vous devriez dj avoir quelques polices d'criture qui sont installes sur votre ordinateur. Vous avez nanmoins la
possibilit d'en tlcharger d'autres sur des sites connus comme par exemple DAFONT.

Vous verrez que la majorit de ces polices sont libres et gratuites. Un chapitre additionnel sera consacr aux polices, en
attendant, je vous invite vous documenter pour apprendre installer une police d'criture. Cela n'a rien de sorcier, rassurez-
vous.

Attributs de caractre

Encore un terme trange, je vous l'accorde. Pourtant, je suis sr que vous savez pour la plupart de quoi il s'agit. Que seraient
en effet du texte sans les fameux attributs que l'on connait tous :

Regular (normal) : c'est l'attribut par dfaut, la police ne subit aucune modification.

Bold (gras) : permet de renforcer l'paisseur des lettres.

Citation
Cette phrase a t crite normalement. Celle-ci est crite en gras.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 492/574

Italic (italique) : permet d'incliner les lettres sur la droite.

Citation
Cette phrase a t crite normalement. Celle-ci est crite en italique.

Bold Italic : permet de renforcer l'paisseur des lettres et de les incliner.

Citation
Cette phrase a t crite normalement. Celle-ci est crite en italique .

Il se peut que certaines polices ne possdent pas d'attributs ou, l'inverse, que certaines polices soient dotes de
plusieurs attributs diffrents encore de ceux que nous venons d'tudier.

Si vous faites partie de ceux qui ont pris comme modle mon espace de travail, vous devriez avoir de disponible la palette
flottante "Caractre/Paragraphe". Si ce n'est pas le cas, cliquez sur Fentre > Caractre.

On retrouve toutes les options de la barre d'options dans cette palette ddie aux (polices de) caractres. Pour l'heure, restons-en
cette petite ligne qui prsente tous les diffrents attributs de caractre et donc, ceux qui ne figurent pas dans la barre d'options
:

Bon, les deux premiers, on les connait : ils permettent respectivement de transformer le texte en gras et en italique.

L'icne permet de transformer les lettres en lettres capitales.

Citation : Tout en capitales


Ces lettres sont crites normalement. CELLES-CI SONT CRITES EN LETTRES CAPITALES.

Cette icne permet, quant elle, de transformer vos lettres en petites lettres capitales. Je vous laisse essayer par vous-mme
partir de maintenant, on continue notre petit tour d'horizon.

En cliquant sur cette icne , vous transformerez vos lettres en lettres exposantes, l'image du petit 2 ici prsent : a.

L'icne suivante permet l'inverse de mettre vos lettres en indice.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 493/574

Les deux dernires icnes permettent, dans l'ordre d'apparition sur l'image ci-dessous, de souligner le texte et de le barrer.

Citation : Souligner
Cette phrase a t crite normalement. Celle-ci est maintenant souligne.

Citation : Barrer
Cette phrase a t crite normalement. Celle-ci est maintenant barre.

Voil pour les attributs.

Corps de police

On dit "corps de police" pour dsigner la taille de la police d'criture et donc, par extension, les dimensions de nos lettres. L'unit
de mesure est le point (et non le pixel) que l'on abrge pt.

videmment, plus la valeur de point est importante, plus la police d'criture gagnera en hauteur et largeur. Voici un exemple, cette
phrase a t crite en 12pt :

Lissage de caractre

Prochaine tape : dterminer le lissage de la police de caractre. Une police non lisse ressemble ceci :

La police d'criture prend cette apparence crnele quand le paramtre de lissage est dfini sur "sans". Pour supprimer cet effet
crnel, il faut modifier ce paramtre et en choisir un parmi les quatre autres proposs. Par exemple, en choisissant le paramtre
"nette", votre police apparaitra comme plus nette (oui, c'est logique) :

Une fois n'est pas coutume, essayons une nouvelle mthode de lissage, mettons "Forte" par exemple :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 494/574

Alignement du texte

On entre dans une catgorie lgrement diffrente puisqu'il ne s'agit plus de modifier l'apparence du texte mais plutt son
positionnement dans votre zone de travail ou dans la zone que vous aurez cre avec l'outil Texte.

L'icne de gauche (celle qui est slectionne) permet de dcaler l'ensemble de votre texte sur la gauche de votre zone, comme le
montre l'image ci-dessous.

En ce qui concerne l'image du milieu, bah... elle permet de centrer l'ensemble du texte.

Et enfin, je vous laisse deviner le mode d'action de l'icne de droite.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 495/574

Couleur du texte

Cette option permet, comme son nom le laisse prsager, de dfinir une couleur au texte. Vous savez faire, on ne va pas s'attarder
l-dessus. Notez simplement que si vous ajoutez un style de calque li la couleur (dgrad, motif ou couleur), celui-ci
remplacera obligatoirement la couleur d'origine du calque.

Dformer du texte

Cette option est particulirement intressante (et amusante) puisqu'elle sert modifier la forme des nos textes.

On avait dj la police, pour a...

Non, la police modifie l'apparence des lettres. Avec cette option, on va modifier l'apparence gnrale du texte en le dformant
dans tous les sens. En cliquant sur la vignette de l'option , vous ouvrirez une nouvelle fentre :

En faisant drouler la liste, vous ferez apparaitre toutes les dformations possibles sur vos textes :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 496/574

Autant dire que ce n'est pas ce qui manque ! Je vous invite essayer la dformation appele "Renflement" pour commencer. Il
vous faudra d'abord taper du texte (videmment) puis paramtrer la dformation.

Il y a trois paramtres chaque fois, leurs modes d'action est facile deviner. En ce qui concerne l'inflexion, plus la valeur est
grande, plus la dformation (et donc le renflement ici) est important, et vice-versa.

Pour le reste...

Je ne vais pas passer en revue tous les paramtres disponibles dans les palettes flottantes "Caractre" et "Paragraphe". Ce serait
trop long et pas forcment trs intressant, d'autant qu'on devine assez facilement quoi ils servent. Petite astuce : placez votre
curseur au-dessus de l'icne du paramtre et ne bougez plus pour laisser apparaitre une courte description du paramtre en
question.
Styliser le texte
Nous avons appris crer du texte, le formater et mme le dformer. Que diriez-vous maintenant de lui donner un petit coup
de "peps" ? Faut dire que jusqu'ici, nos textes ont toujours t trs pauvres en couleurs, ils n'ont absolument aucun style, en
tout cas graphiquement parlant.

Cela fera donc l'objet de ce cours, nous allons tudier les quelques moyens mis notre disposition pour "styliser" vos textes. Le
vrai problme, c'est qu'il existe tellement de techniques qu'on ne pourra pas toutes les passer en revue. On va toutefois pouvoir
profiter de quelques fonctionnalits que l'on a tudies dans ce cours, et principalement celles dont on a parl le temps d'un

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 497/574

chapitre qui leur tait entirement consacr : les styles de calque !

Ils sont la technique idale pour donner de la couleur et une texture particulire aux textes. Ce n'est pas forcment le moyen le
plus efficace, mais il n'empche qu'on peut obtenir des rsultats vraiment intressants, de quoi rendre nos textes sophistiqus
plus attractifs.

Premire tape : le formatage

Avant d'utiliser les styles de calque, je vous conseille d'utiliser les options pour donner la forme dsire vos textes.
Gnralement, je procde dans cet ordre :

1. Rdaction du texte : on crit le texte que l'on sera amen formater puis styliser. Pour le moment, on ne touche pas aux
options : on ne fait qu'crire le texte avec la dernire police d'criture utilise.

2. Choix de la police de caractre : on choisit ensuite la police de caractre dsire. Pour cet exemple, je suis pass de
"Verdana" "Century Gothic". Ce n'est pas une police tlcharge, vous devriez l'avoir sur votre ordinateur.

3. Modification de la taille de la police : je passe de 72pt 140pt.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 498/574

4. Et pour finir, on ouvre la palette "caractre" pour paramtrer encore un peu plus le texte si cela nous semble ncessaire :
gras, italique, capitales, ... En ce qui me concerne, j'ai d'abord choisi l'attribut de caractre appel "bold" pour rendre mon
texte plus gras, puis j'ai accentu encore un peu plus l'paisseur de mes lettres en cliquant, toujours dans la fentre de
caractres, sur le bouton "Faux gras". Enfin, j'carte un peu chaque lettre de mon texte (l'option s'appelle "Dfinir
l'approche des caractres slectionns") pour le mettre 25.

Les styles de calque

Une fois votre texte format, on peut passer l'tape de stylisation. On va donc ajouter de la couleur au texte, lui donner une
certaine texture, etc. Et pour cela, je vous le disais, on va utiliser les options de fusion (styles de calque). Nous allons procder
en trois parties : d'abord les couleurs, ensuite la texture et enfin, les petits dtails qui donnent ce petit "plus" aux textes.

Les couleurs

Nous avons plusieurs possibilits pour coloriser notre texte de manire on ne peut plus simple. On utilisera alors le style
"Incrustation couleur" pour appliquer une couleur unique sur le texte, rien de plus basique. Dans ces cas l, le mieux est quand
mme d'utiliser l'option "couleur" que l'on retrouve dans la barre d'options. Allez, juste un petit aperu pour le plaisir des yeux.
J'ai seulement slectionn les lettres "Life" pour que la couleur ne soit applique que sur cette partie du texte, le "My" reste donc
noir :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 499/574

D'ailleurs, j'aurais trs bien pu m'amuser ne coloriser qu'une lettre sur deux. Regardez :

On peut aussi s'amuser mettre deux couleurs diffrentes, sans noir :

Enfin bref, niveau couleurs, on peut imaginer peu prs tout et n'importe quoi. Il suffit d'tre cratif. D'ailleurs, je ne l'ai pas dit
tout l'heure, mais rien ne nous empche ensuite de modifier les options du texte. Si on veut changer les attributs de certaines
lettres, leur police ou encore leur taille, n'hsitez pas. Par exemple, je vais rduire la taille du mot "My" pour donner un style
globalement diffrent au texte et mettre en avant le mot "Life" :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 500/574

Pour mettre encore un peu plus en avant le mot life, il m'est aussi envisageable de mettre en majuscule ses lettres...

... voire carrment de modifier leur police d'criture !

Vous tes libre de faire absolument tout ce que vous voulez, tout rside dans l'imagination et la crativit dont vous ferez preuve.

On reste dans les couleurs et allons dsormais profiter de ce que j'ai tendance prfrer utiliser pour mes projets : les dgrads
de couleurs. Ils sont disponibles quand vous activez le style appel logiquement "Incrustation dgrad". Cela n'a plus de secret
pour vous, je vous laisse le plaisir de paramtrer votre dgrad votre guise. Pensez simplement dcocher le style "Couleur"

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 501/574

avant si ce n'est pas dj fait.

Voici plusieurs essais avec des dgrads dj existants :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 502/574

Avec un peu d'imagination et en utilisant les diffrents paramtres mis disposition (type de dgrad, angle, chelle, ...), on peut
russir obtenir de bons rsultats hein.

J'aimerais mettre un dgrad de couleurs uniquement sur le mot "My". Mais problme : quand j'active le style dgrad,
ce dernier s'applique sur tout mon texte...

En activant les styles de calque, vous demandez ce que le style soit appliqu sur l'ensemble du calque et non sur une seule de
ses parties. Du coup, pour choisir prcisment sur quelle partie notre dgrad va s'appliquer, on a deux techniques :

La premire n'est pas la plus pratique. Il suffirait en fait de crer deux calques Texte diffrents : le premier pour "My", le
deuxime pour "Life", l'ide tant de les mettre ct ct ensuite dans la zone de travail pour faire croire qu'il n'existe
qu'un seul et mme texte.
La deuxime, la plus logique, est d'utiliser un calque de remplissage, celui appel logiquement "dgrad".

On va donc opter pour la deuxime solution. Il faudra tout d'abord crire le texte "MyLife" sur un seul et mme calque Texte,
comme on fait depuis le dbut. On va ensuite utiliser un outil de slection pour crer une slection autour du texte "My".

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 503/574

Pour faire cette slection, j'ai utilis la baguette magique et ai profit de l'option Ajouter la slection pour slectionner
simultanment la lettre M et la lettre Y, comme on l'a dj appris ensemble.

Pour crer le dgrad couleur, on va crer un calque de remplissage. On clique donc sur la petite icne Crer un calque de
remplissage ou de rglage situe en bas de la fentre de calques pour faire drouler la liste puis on clique sur "Dgrad...".
Une nouvelle petite fentre fait son apparition, c'est celle qui vous permettra de paramtrer votre dgrad, elle est sensiblement la
mme que celle du style de calque "dgrad", vous n'avez donc pas besoin de moi.

Attention : veillez bien slectionner le texte "My" comme c'est le cas sur l'image ci-dessus. Il ne faut surtout pas faire
une slection approximative comme on pourrait le faire avec le rectangle de slection par exemple, sans quoi le dgrad
va remplir non seulement le texte "My", mais aussi l'ensemble de la slection et donc le fond blanc.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 504/574

Oui, je sais. a pique, et c'est fait exprs !

La texture

Une fois votre texte coloris, vous pouvez ajouter un motif votre texte afin de lui appliquer une nouvelle texture. Pour cela, il
faut bien entendu cocher le style de calque "motif". Simplement, en laissant le dgrad d'activ, le motif ne sera pas visible (il
prend le dessus sur le motif). Il faudra alors rduire l'opacit du dgrad ou utiliser un mode de fusion (toujours pour le dgrad)
afin qu'un jeu de transparence s'effectue. Personnellement, j'ai obtenu ces diffrents rsultats :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 505/574

Je n'ai jamais t trs fanatique des motifs, non pas que je ne les trouve pas intressants, mais je n'en ai que rarement l'utilit. Une
chose est certaine, on peut obtenir des rsultats bien meilleurs que ceux-ci, mais c'est pas grave, c'est pour l'exemple. Si cela vous
intresse, vous pouvez tlcharger des motifs prts l'emploi sur internet, exactement comme vous le feriez pour tlcharger des
brosses pour le pinceau.

Pour donner une nouvelle texture vos textes, vous pouvez d'autre part utiliser le biseautage ce qui aura pour effet de leur
donner du relief. Un peu comme le logo de Google par exemple :

Voici un exemple de biseautages paramtrs diffremment. Je suis parti de ce texte color d'un dgrad bleu :

Pour finalement obtenir les rsultats suivants, sachant que je n'ai fait qu'ajouter deux biseautages diffrents, j'en ai aussi profit
pour augmenter un peu la taille de la police :

Vous pouvez mme ajouter une texture sur le biseautage, ne laissez pas passer cette occasion et amusez-vous faire des essais.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 506/574

C'est tout ?

Vous connaissez maintenant quelques techniques permettant de personnaliser vos textes et, mme si on pourrait s'arrter l et
estimer les rsultats obtenus satisfaisants, je pense que vous serez d'accord avec moi sur le fait que l'on peut mieux faire, l'ide
tant d'optimiser encore un peu plus nos textes pour leur donner un style encore un peu plus particulier et personnalis.

Des techniques, il en existe des centaines, des milliers mme, et clairement je ne pourrai pas toutes vous les donner l non plus.
Pas que je ne veuille pas, mais surtout parce que je ne les connais pas toutes (loin de l !) et parce que je n'aurais pas assez d'un
tutoriel (combien de fois je vous l'aurai sortie, celle-l ?).

Je vais donc vous proposer une ou deux techniques que j'ai moi-mme dveloppes. videmment, ce sont des techniques que je
n'ai pas invent : je les ai simplement dcouvertes tout seul en bidouillant un peu. C'est l-dessus que j'aimerais vous sensibiliser
! Cela n'a rien d'exceptionnel en soi, mais c'est tellement plus gratifiant et plus amusant de dcouvrir soi-mme des petites
combinaisons qui permettent d'obtenir de jolis rsultats, que je vous invite faire des essais pour faire de vos textes de jolis
textes.

Technique n1 : des textes en 3D

Oui, vous avez bien entendu, nous allons faire un peu de 3D !

Tu veux dire qu'on va faire de la modlisation ?

Pour ceux qui ne sauraient pas ce qu'est la modlisation, il s'agit d'une discipline propre au domaine de la 3D, je ne vais pas
revenir dessus mais voil, au moins vous savez que l'on "modlise" pour faire de la 3D.

Nous, nous n'allons absolument pas "modliser". Nous allons donner une apparence 3D notre texte, il ne s'agira donc pas
vraiment de 3D, et pour cela, nous allons utiliser la duplication de texte. Commencez par crire quelque chose et donnez lui un
petit dgrad. Quand je vous disais que les dgrads, c'tait mon dada (si, si, souvenez-vous, je vous l'ai dit dans les dbuts du
cours ), je ne vous mentais pas !

Dupliquez ensuite le texte et retirez-lui le style de calque en cliquant-droit sur son calque (dans la fentre de calques) et en
cliquant sur "Effacer le style de calque". Faites en sorte de changer la couleur de ce texte, choisissez une couleur identique la
couleur du premier texte, essayez simplement de lui mettre une couleur un peu plus fonce, vous comprendrez pourquoi plus
tard. Enfin, placez-le en-dessous du calque stylis (c'est donc ce dernier qui doit tre visible sur la ZDT) et gardez-le slectionn
dans votre fentre de calques.

Quand c'est fait, il ne nous reste plus qu' faire la fameuse duplication massive et le tour sera jou. Le principe est simple : on va
appuyer sur la touche Ctrl (Option) et la maintenir, et ensuite appuyer successivement sur les touches directionnelles gauche et
bas. Il se passera que chaque fois que vous appuierez sur l'une des touches directionnelles, un nouveau calque apparaitra et ce
sera la duplication parfaite du calque slectionn.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 507/574

La nouveaut, c'est que le calque sera dupliqu en fonction de la direction que vous lui donnerez avec les flches. Si vous
dupliquez avec la flche de gauche, alors le calque sera dupliqu 1 pixel gauche du calque dupliqu.

Ctrl (maintenir) + flche de gauche puis flche du bas puis flche de gauche puis flche du bas...

Option (maintenir) + Command (maintenir) + flche de gauche puis flche du bas puis flche de gauche puis flche du bas...

Faites cette opration une fois : deux nouveaux calques apparaitront dans votre fentre de calques (pour un total de 4 calques en
tout, sans compter l'arrire-plan) et surtout, deux nouveaux lments apparaitront dans la zone de travail :

Continuez jusqu' obtenir un texte en 3D.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 508/574

Vous auriez galement pu n'utiliser qu'une seule flche directionnelle, par exemple la flche du bas uniquement !

Ou encore la flche de droite.

Au fait, n'hsitez pas modifier le premier calque pour personnaliser encore un peu plus votre texte. On aurait pu, par exemple,
donner un contour intrieur ce calque :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 509/574

Vous voyez, il suffit d'un peu d'imagination et on peut amliorer distinctement nos textes.

Technique n2 : styles de calque

Retrouvons nos bons vieux styles de calque. Avec eux, croyez-moi, on peut styliser nos textes de mille et une faons et on ne va
pas s'en priver. Que puis-je vous proposer en guise d'exemple... ?

Bah, on les a dj utiliss, les styles de calque !

Ah oui, a c'est bien vrai. Mais en mme temps, on n'a pas vraiment tout fait avec. Je veux dire... moi, je vous ai montr l'essentiel
(et encore), vous maintenant d'essayer de faire des combinaisons qui peuvent amliorer un peu les textes et leur donner un
sens. C'est de cette manire, d'ailleurs, que vous russirez crer un logo textuel, vous verrez cela dans le prochain chapitre.

Moi, par exemple, j'ai pens qu'on pouvait donner un peu plus d'importance au contour d'un texte grce l'ombre.

Qu'est-ce que tu racontes ?

Crons du texte sur un fond blanc. C'est--dire que le calque d'arrire-plan doit tre de couleur blanche et que, videmment, notre
texte doit tre de couleur relativement fonce pour qu'on puisse bien le distinguer du fond. Mettons... du vert ! On change la
police (Century Gothic) et la taille et voil sur quoi nous travaillerons.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 510/574

Allons faire un tour du ct des styles de calque maintenant. Ajoutons, par exemple, un petit dgrad lger pour donner un peu
de style au calque. videmment, ce dgrad sera bas sur la couleur initialement choisie, le vert. Ajoutons ensuite un contour
extrieur blanc de 3 pixels. Logiquement, vous ne devriez mme pas l'apercevoir puisque que le fond est blanc lui aussi, ils sont
censs se confondre.

Pour justement voir ce contour, on va ajouter une petite ombre porte afin de le faire ressortir. Voyez plutt.

Voil ! Ce n'est pas prodigieux, a n'a rien de bien exceptionnel comme je vous le disais, et pourtant, a fait son petit effet je
trouve. Aprs, on peut s'amuser ajouter une ombre interne par exemple pour faire ressortir le contour blanc du fond ET du
texte :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 511/574

Allez, vous de jouer maintenant.

Ne vous limitez pas qu'aux styles de calque ! Utilisez la plume pour crer de nouvelles choses qui peuvent s'accorder
avec vos textes par exemple.
Flicitations, vous tes maintenant pars pour raliser votre premier logo sur Photoshop !

Le prochain chapitre ne sera donc pas un chapitre comme les autres. Vous l'aurez compris, un TP (tay d'une petite partie
reprenant les diffrents points de cration d'un logo) vous attend dans le prochain chapitre.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 512/574

TP : cration d'un logo


Vous voici arriv votre deuxime TP. Je vous rappelle rapidement en quoi consiste ces chapitres si particuliers, mais surtout si
attendus par les lecteurs.

Vous n'apprendrez pas de nouvelles techniques de cration car ce n'en est pas l'objet. Tout ce qui vous sera demand ici, c'est de
mettre en pratique toutes les connaissances acquises depuis le dbut du cours pour rpondre un sujet qui vous sera donn.

En l'occurrence, ce TP a t tudi pour que vous puissiez surtout utiliser les outils de cration que nous avons vu dans cette
troisime partie, mais rien ne vous empchera d'utiliser accessoirement les autres fonctionnalits de Photoshop. Aprs tout, vous
le savez maintenant, quand vous tes en TP, vous tes maitres de la situation !

Le sujet de ce TP portera sur la ralisation d'un logo. Ainsi, je prendrai le temps de vous donner les quelques ficelles que je
connais pour la russite de votre logo, le but tant qu'il vous corresponde au mieux ou qu'il corresponde au mieux l'esprit que
doit dgager votre socit, votre site ou votre projet. Ceci sans oublier, videmment, que votre logo se doit d'tre graphiquement
joli, moderne et attractif, sans quoi ce serait un logo plus ou moins rat.

Vous devez comprendre qu'il y a tellement de (bonnes) manires de raliser un logo que cela m'amne vous dire qu'il
s'agit d'un sujet relativement dlicat et qui est difficile aborder objectivement. Ainsi, je prfre vous avertir que mes
propos n'auront rien d'un discours officiel, mme si, videmment, la majorit (pour ne pas dire la totalit) de mes dires
seront bass sur des faits avrs et communs.
La minute thorique : qu'est-ce qu'un logo ?
Vouloir crer un logo est une chose. Savoir pourquoi on cre un logo en est une autre et c'est ce que je vais tenter de vous
expliquer.

Abordez cette premire sous-partie comme une introduction au TP. C'est une sorte d'article que j'ai rdig pour que
vous puissiez comprendre ce qu'est un logo, comment on le conoit, quelles en sont ses principales caractristiques,
etc. Vous ne manipulerez donc rien avant la prochaine sous-partie.

Dfinition

Le logo est le reflet de votre projet, votre boite ou peu importe de quoi il s'agit : c'est l'image de votre produit, l'lment graphique
cens le reprsenter de faon visuelle. D'ailleurs, Wikipdia le confirme :

Citation : Wikipdia
Un logotype, plus couramment appel logo, est une reprsentation graphique qui sert identifier de manire unique et
immdiate les socits, associations, institutions, produits, services, vnements, ou toute autre sorte d'organisations dans
le but de diffrencier le propritaire du logotype des autres entits.

Si l'on se rfre cette dfinition, on doit pouvoir retenir quelques mots-cls avec lesquels nous pourrons donner un sens la
ralisation d'un logo, quel que soit son propritaire :

Reprsentation graphique : a, a nous parle. Nous sommes sur Photoshop, et on sait faire des images, tout va bien. Un
logo, c'est donc une image, avec des formes, du texte, des couleurs, ... Bref, c'est une image.

Identifier de manire unique et immdiate : il s'agit donc d'un lment graphique qui est cens rappeler le produit grce
ses couleurs, ses formes, son style... En ralit, c'est une partie de votre produit, l'un de ses nombreux aspects qui est
cens lui tre fidle. Il ne faut donc pas ngliger le logo, car il doit tre remarquable et identifiable au premier coup dil,
tout en ajoutant un critre complmentaire primordial sans quoi tout cela ne serait plus possible : le logo doit tre unique.

Diffrencier : l'un ne va pas sans l'autre. Crer un logo unique, c'est se diffrencier des autres (et de l'ventuelle
concurrence). Se diffrencier des autres permet, par extension, de se faire remarquer plus facilement. C'est ainsi que vont
les choses et il faut garder en tte ce cheminement. D'autant plus que, si faire son propre logo est plus gratifiant et plus
amusant, sachez que vous tes, de toute manire, dans l'obligation de crer un logo unique, sans quoi vous enfreindriez
la loi protgeant les droits d'auteur et vous serez punissables. Alors, attention.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 513/574

En thorie

Rentrons dans le vif du sujet et intressons-nous de plus prs aux caractristiques d'un logo. Quels sont les critres de cration
? Existe-t-il un logo type, un logo standard ? Y a-t-il des normes... ? Autant de questions auxquelles je vais tenter de rpondre.

Vectoriel ou matriciel ?

C'est LA question qu'il faut se poser avant de se lancer. Enfin, non, pas vraiment. Disons que c'est li, mais la vraie question qu'il
faut se poser, c'est : "Que vais-je faire de mon logo ?".

Et vous, alors, qu'allez-vous faire de votre logo ?

Je ne comprends pas trs bien ta question... Mon logo, je vais l'utiliser pour mon site, et alors ?

Trs bien ! Vous l'utilisez pour votre site, c'est dj une bonne chose savoir. Maintenant, allons plus loin : envisagez-vous de
l'utiliser autre part que sur votre site ? Soyons mme encore plus gnralistes et dites-moi si vous ne prvoyez pas,
ventuellement, de ne l'utiliser que pour le web ?

Hum... bah, a dpend. Si mon site marche bien, peut-tre que je vais avoir besoin du logo pour des papiers ou des
affiches. Et si je cre un produit que je compte vendre, je vais peut-tre avoir besoin d'utiliser mon logo sur ces
produits, oui...

Nous y sommes ! Un logo peut tre utilis sur le web, mais pas seulement. On peut avoir besoin de placer son logo sur un
produit vendre, sur des vtements par exemple, et mme pourquoi pas sur une ou les camionnettes de votre socit ou celle de
votre pre ! Simplement, il y a des conditions pour que votre logo soit techniquement dclinable sur ces diffrents supports, et la
condition principale, c'est qu'il soit suffisamment grand !

C'est ici qu'intervient justement la notion d'image matricielle ou vectorielle. Vous le savez, l'image vectorielle peut-tre agrandie
l'infini, elle sera intacte, au contraire de l'image matricielle pour les raisons que vous connaissez. Du coup, si vous tes certains
que votre logo n'ira nulle part ailleurs que sur votre site, vous pouvez opter pour du matriciel, mme si rien ne vous empche de
travailler en vectoriel. Cela dit, si vous prvoyez d'imprimer le logo pour du textile par exemple ou tout autre type de support,
alors il vous faudra forcment travailler en vectoriel.

Et si je cre une nooorme zone de travail et que je travaille comme a, pour faire, de mme, une nooorme image. On
pourra pas l'imprimer sans problme, sachant qu'elle sera grande d'origine ?

C'est une solution que je ne vous recommande pas. Quand on travaille sur de grandes images, j'aime appeler cela "travailler en
HD", c'est--dire en Haute Dfinition. Votre image sera gante et on pourra donc l'adapter sur un support de plus petite taille,
sachant qu'on peut rduire significativement une image de type matricielle, la perte de qualit sera minime voire nulle. Pourtant,
pour plus d'efficacit, je prfre vous prvenir qu'il faudrait mieux bosser sur du vectoriel, vous ne rencontrez aucun problme
lors d'une ventuelle impression.
Quelles que soit les dimensions requises, le vectoriel le permettra. Si vous faites une image HD en matriciel, vous serez limit
une seule et mme taille maximale, ce qui peut s'avrer problmatique car, en admettant que vous ayez un jour besoin de crer une
affiche gigantesque, et bien il se peut que votre logo ne soit pas suffisamment grand. Ceci dit, il faut aussi noter que cette
pratique est peu conventionnelle. Cela signifie qu'un dessin matriciel est destin ne pas tre modifi, tandis que le dessin
vectoriel est prvu pour.

D'ailleurs, mme si j'aurais tendance vous conseiller de travailler en matriciel pour vos logos de sites web, je tiens tout de mme
vanter les mrites du vectoriel mme dans un tel contexte. En effet, cela peut s'avrer trs utile si vous dcidez, un jour, de
modifier le look de votre site car il se peut que vous ayez du mme coup besoin de changer la grandeur de votre logo.

Pour finir, en esprant que le message sera pass : si votre logo est destin subir des modifications de grandeur par la suite,
optez pour du vectoriel. Si vous ne le savez pas encore, optez toujours pour du vectoriel. Enfin, si vous tes convaincu(e) que
votre logo ne connaitra aucune modification l'avenir, foncez sur du matriciel.

Quelques rgles bonnes prendre.


www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 514/574

Un logo, c'est quoi ?

Reformulons : on sait quoi peut servir un logo, mais sait-on ce que c'est exactement ? Quand on dit qu'il s'agit d'une
reprsentation graphique, le sujet est tout de mme un peu vaste.

Soyons ralistes : un logo, c'est peu prs tout ce que vous voulez, mais pas trop non plus. On cre un logo pour reprsenter
quelque chose, il faut donc que ce soit clair, que ce soit vocateur. Si vous pondez une image avec 10 couleurs diffrentes, tout
plein de textes, des symboles, des dessins et j'en passe, alors ce sera forcment un logo rat. Si cela peut s'apparenter un avis
purement personnel, je peux vous assurer qu'il s'agit d'un consensus quasi-gnral. Faites une liste de ce qui pourrait
ventuellement paraitre sur votre logo puis ne retenez que l'essentiel.

Je vous signale rapidement qu'une photo n'est pas un logo.

On peut de ce fait tablir quelques rgles qu'il vaut mieux respecter pour russir son logo. Je ne les connais pas toutes et, encore
une fois, c'est surtout une question de got, bien que l'aspect technique doit aussi tre envisag, vous comprendrez pourquoi.

Les modes colorimtriques

Dans le chapitre sur les couleurs, je vous parlais du CMJN comme le mode colorimtrique utilis pour imprimer. Selon vos
besoins et vos attentes, on pourrait aussi travailler sous d'autres modes, mais l en l'occurrence, c'est le CMJN pour l'impression.
En ce qui nous concerne, nous travaillerons notre logo pour le web, donc le mode RVB conviendra. Simplement, n'oubliez pas
que vous serez peut-tre amen dcliner votre logo sur d'autres supports un jour.

Il se peut aussi que vous ayez besoin, terme, d'imprimer votre logo sur des feuilles de papier. Pour cela, on dcline
gnralement
le logo en niveaux de gris . Il s'agit bel et bien d'un mode que vous trouverez dans le menu Image > Mode > Niveaux de gris .

Le choix des couleurs

Comme je le disais prcdemment, si vous dfinissez une charte graphique avec plus de 10 couleurs diffrentes, alors vous avez
tout faux. Il vaut mieux la jouer simple, encore une fois, vous serez plus efficace, c'est avr. On a tendance conseiller un quota
maximal de 3 couleurs par logo, c'est ce qui semble tre le meilleur compromis. Si la gamme de couleur est prcisment la mme,
par exemple deux oranges trs proches, on peut les considrer comme une seule et mme couleur. Pensez aussi que de bons
contrastes jouent beaucoup sur la lisibilit du logo quand il est question de le dcliner en niveaux de gris (ou mme en noir et
blanc seulement).

Dans tous les cas, vous tes parfaitement libre de choisir le nombre de couleurs qui composeront votre logo, c'est vous d'tre
vigilant et de ne pas en abuser.

Regardez par exemple le logo de Windows Vista qui est compos de quatre couleurs diffrentes en dgrad. Cela ne l'empche
pas d'tre graphiquement correct, qu'en pensez-vous ?

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 515/574

Pareil pour Ebay et pour Google Chrome par exemple.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 516/574

On aura d'ailleurs remarqu que ces trois logos tait faits des mmes couleurs.

Typographie

Les trois logos ci-dessus se prsentent chacun sous une forme particulire. Si le logo de Ebay est textuel et seulement textuel
(c'est--dire qu'il est fait que de texte), celui de Google Chrome ne contient aucun texte, seulement un dessin, une forme
graphique. Quant au logo de Windows Vista, celui-ci runit les deux formes : il y prsente la fois un dessin, la fois du texte.

On peut aussi rencontrer certains logo qui utilise des dessins pour former du texte. Souvent, ce sont tout simplement des polices
d'criture qui sont modifies pour leur donner une texture et qu'elles soient reprsentes comme dessin, mais il se peut aussi que
l'on utilise un dessin pour former une lettre. C'est le cas de McDonald's !

La rumeur dit que le M (initiale de Mcdonald's) reprsente deux frites tordues. C'est une rumeur, on ne me l'a jamais confirm,
mais cette histoire tient la route.

A propos, il arrive galement trs souvent que l'on cre un logo l'aide des initiales du produit, de la marque, ... Cela arrive le
plus souvent quand le nom est trop long et ne peut tre intgr dans un logo. Deux petits exemples :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 517/574

Cliquez sur les images pour les agrandir

Le premier logo est compos de deux lettres : le N et le Y, en rfrence la marque New-York Yankees. Le second logo, quant
lui, fait rfrence aux lettre C et A pour Crdit Agricole.

En ce qui vous concerne, vous tes encore une fois libre de choisir la forme qui vous convient le mieux. Cela dit, si vous prfrez
un logo textuel, que ce soit pour crire un nom en entier ou pour n'utiliser que ses initiales, il va falloir faire attention ce que la
typographie utilise soit suffisamment lisible : quiconque verra votre logo doit en comprendre le sens.

Cela passe donc par une recherche intense et scrupuleuse de la police d'criture que vous adopterez pour votre logo. Elle doit
la fois tre adapte au logo, la fois tre visible et lisible par autrui. Ne ngligez surtout pas cette tape et, mieux encore, soyez
stricte dans votre recherche. Si la police semble convenir mais que quelque chose cloche, allez voir ailleurs, vous trouverez votre
bonheur.

Ne mlangez pas les polices d'criture entre-elles, c'est mal vu et pas forcment pratique manipuler sur Photoshop. Pareil, si
vous avez besoin de modifier la taille de votre police, faites-le en homothtie. C'est aussi mal vu de modifier les dimensions d'une
police uniquement sur la hauteur ou uniquement sur la largeur. Il vaut mieux le faire en homothtie, c'est--dire de manire
proportionnelle grce la transformation. Rien ne vous empche cela dit d'utiliser les paramtres de la palette "Paragraphe".

Je vous rappelle le site de rfrence pour tlcharger une police d'criture, c'est www.dafont.net. Il en existe d'autres, je vous
invite faire des recherches sur google pour cela.

Autrement, n'hsitez pas crer votre propre typographie avec la plume. Vous ne crerez pas vraiment une police d'criture
proprement dite, mais plutt un trac qui prendra la forme d'une typographie. Je mettrais d'ailleurs ma main couper que le logo
du Crdit Agricole a t fait la plume, tout comme le M de McDonald's, les fentres du logo Windows, et j'en passe. De toute
manire, vous vous en doutez bien, cer soi-mme les crits du logo est le meilleur moyen d'avoir un truc unique (cela revient
d'ailleurs faire le lien avec ce que je disais plus haut: un logo doit tre unique et c'est l'occasion de le prouver.

Pour ne rien vous cacher, ces logos ont sans aucun doute t ralis avec Illustrator, un logiciel faisant partie de la
suite crative d'Adobe et qui sert raliser des images exclusivement vectorielles. Mais l'un n'empche pas l'autre : ce
que vous faites avec la plume sur Photoshop est tout aussi vectoriel que ce que vous feriez avec la plume sur
Illustrator. Ce dernier est simplement plus complet dans son domaine.

Les effets spciaux

Les logos d'aujourd'hui, ceux que l'on appelle d'ailleurs les logos 2.0 (rfrence au web 2.0), ont tendance tre dots d'effets
spciaux leur donnant un aspect moderne et dans l're du temps.

Prenons l'exemple de TF1. Au dpart, leur logo ressemblait a :

Aujourd'hui, les dgrads et compagnie ont pris une place importante dans les logos des diffrentes firmes, comme en tmoigne
le logo de TF1 :

Cliquer sur l'image pour l'agrandir


www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 518/574

C'est lger mais super efficace, vous ne trouvez pas ? Voyons un autre exemple, logo d'Apple ressemblait a en 1976 :

Graphiquement, ce n'est pas particulirement laid. Du moins, c'est mon avis. Pourtant, on sent quand mme que c'est un peu
vieillot le comparer avec les logos actuels. Et pour preuve, le logo a volu en plus de 30 ans et ressemble dsormais cela :

Il s'agit du logo que l'on peut voir sur le web. Sur vos ordinateurs Mac par exemple, il sera techniquement trs difficile de l'y
intgrer d'une quelconque manire. La principale raison est ses effets spciaux : il y en a beaucoup, des dgrads, des effets de
reflet, des ombres, ...

Alors oui, c'est joli, mais pas forcment pratique. C'est pourquoi il faut penser tout et ne pas abuser de ses effets. Les dgrads,
vous pouvez y aller (dans la limite du raisonnable tout de mme). Mais vitez les ombres, les lueurs et compagnie. Ce n'est pas
forcment ce qu'il y a de mieux pour votre logo.

Cela dit, au sujet du logo d'Apple, une chose n'a jamais change, c'est sa forme. C'est clairement son lment le plus fort et

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 519/574

distinctif. Quand on voit ne serait-ce que la silhouette de ce logo, on sait que c'est du Apple.

Nous avons fait le tour, le TP va pouvoir vritablement commencer !


Prparatifs
De quoi allez-vous avoir besoin pour raliser votre logo ? Voici les quelques points sur lesquels il va falloir rflchir avant de
commencer.

Matriciel ou vectoriel ?

Matriciel

Si votre choix se porte pour le matriciel, vous n'avez donc aucune restriction en terme de cration. Toutefois, n'oubliez pas
l'aspect technique que peut reprsenter votre logo. vitez les ombres et compagnie, travaillez sur un document de grande taille,
modifiez la rsolution de votre document, etc.

Vectoriel

Si vous optez pour le vectoriel, alors prparez-vous n'utiliser que la plume ou presque. Je vous rappelle que le texte est
vectoriel, donc aucune crainte ce niveau. Faites preuve de crativit et d'imagination : vous tes plus restreints, mais cela ne
doit pas vous empcher de faire ce que vous voulez.

Si vous avez encore un peu de mal comprendre pourquoi nous sommes restreints quand on bosse en vectoriel, dites-vous
simplement que vous ne devez absolument pas trouver de calque Image (les calques standards (pixeliss), ceux que l'on utilise
pour le matriciel le plus souvent) dans votre fentre de calques : seulement des calques forme, des tracs et ventuellement des
calques de remplissage, etc. Mais pas de calque Image !

On prend une feuille, un crayon, et on s'y met.

Sortons notre bon vieux crayon papier et placez une feuille en face de vous. (Pas la zone de travail, pardi ! Une vraie feuille)

Je crains le pire...

Aucune raison, vous avez ma parole. Nous allons tablir sur papier ce que nous allons raliser sur notre ordinateur. Cela
commence donc par les lments qui paraitront dans notre zone de travail et qui constituerons le logo. On va donc dterminer, au
choix :

Un nom : le nom de la marque, du produit, de la socit, ...


Des initiales : si le nom est long, on peut d'ores et dj noter ses initiales.
Une abrviation : si les initiales ne vont pas, on peut ventuellement opter pour une abrviation simple et concise. Mais
ce n'est pas forcment trs recommand, a reste faire seulement si on peut reconnaitre votre marque via cette
abrviation.
Des dessins, des formes particulires : des frites ? Un piano ? Un hexagone ? Une toile ? Un $ ? ... Notez tout ce qui
peut reprsenter votre produit, marque...
Retenez l'essentiel : un piano, c'est trop grand ? Retenez donc seulement les touches noires et blanches. Reproduire la
silhouette de la France, c'est trop compliqu ? Ce serait trop dtaill ? Faites un hexagone simple qui rappelle la France, a
suffira sans doute comprendre, surtout si les couleurs sont le bleu, le blanc et le rouge. En d'autres termes, faites simple
et allez l'essentiel, a vous russira.

C'est bien tout a, mais je ne vois pas l'intrt de faire a sur papier ?

Avant de nous lancer dans la ralisation d'un logo, il vaut mieux crer une esquisse sur papier. Vous ferez ainsi des essais sur

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 520/574

papier pour obtenir au final un rsultat proche de celui que vous voudrez voir sur votre cran. Vous n'avez pas forcment besoin
d'tre un pro en dessin pour cela, il s'agit en effet d'une esquisse sur laquelle vous vous baserez pour la reproduire sur
ordinateur, avec tous les outils que Photoshop vous mettra disposition.

Une fois votre esquisse termine, l'idal sera de la numriser (la scanner) et de l'ouvrir sur Photoshop pour la reproduire
directement par dessus votre dessin. Si vous n'avez pas de scanner, ce n'est pas bien grave, vous pouvez toujours vous servir
de votre esquisse pour la recrer sur ordinateur, en la prenant comme modle.

A propos, si c'est ncessaire, n'hsitez pas modifier votre dessin sur Photoshop si cela peut l'amliorer par rapport l'esquisse
de dpart.
Consignes
Passons aux choses srieuses et lanons nous enfin dans la ralisation de votre logo.

Ce serait injuste de ma part que de vous donner de vritables consignes respecter la lettre car, aprs tout, vous tes l pour
apprendre raliser votre propre logo. Qu' cela ne tienne, vous raliserez votre propre logo.

Ce que nous allons d'abord devoir faire, c'est laborer une charte graphique pour votre logo. Pour tout vous dire, j'ai prvu de
dvelopper mes explications au sujet de cette fameuse "charte graphique" dans le prochain chapitre, donc contentons-nous
pour le moment de suivre les explications qui suivent, elles sont simplifies et accessibles, nous en dirons plus un peu plus tard.

Voil comment on va donc procder : je vais vous lister, dans l'ordre, les tapes ncessaires la ralisation de votre logo et vous
allez suivre ces tapes la lettre. Si vous le faites bien, vous devriez russir obtenir quelque chose de potentiellement cohrent
et donc intressant.

Je ne vous assure pas que cela sera graphiquement joli. Comme je le disais en dbut de cours, je ne peux pas faire de vous des
Picasso modernes. Par contre, vous aurez les outils ncessaires pour dvelopper votre art et progresser. Il faudra essayer,
essayer et essayer. Vos uvres volueront forcment dans le bon sens, je vous en fais le serment.

1. Commencez par vous poser les questions de base au sujet de votre logo.

Il reprsente qui/quoi ? Produit, marque, projet internet, socit, ...


A quel public est-il destin ? : Enfants, musiciens, cologistes, danseurs, ...
A quel support est-il destin ? : Autrement dit, vectoriel ou matriciel ?

2. Quel est le thme en vigueur ? Que doit reprsenter votre logo ? Entreprise de maonnerie, blog sur les tortues, site
internet de tutoriels, brasserie Parisienne, casino...

3. Une fois le thme choisi, faites une liste des lments (objets, symboles...) qui peuvent apparaitre sur votre logo. Mme
les plus absurdes, faites-le. C'est assez embtant, je vous l'accorde, mais cela peut vous servir. Voici quelques exemples
de thmes :

Musique : notes, vinyles, enceintes, instrument(s), micro...


Tlphonie : tlphone, cabine, chiffres, ondes, oreille, antenne...
Maonnerie : toiture, outils, maison, boite outils...
Automobile : voiture, circuit, volant, roues, vitesse, panneaux...

Creusez-vous la tte, trouvez un maximum d'ides !

4. Faites un tri, et essayez maintenant de crayonner les ides qui vous semblent les plus intressantes pour votre logo.
Dessinez galement celles qui vous semblent les plus ralisables. Rappelez-vous que vous n'tes pas obligs de dessiner
parfaitement et recrer un objet dans ses moindres dtails.
Un dessin apparemment mal fait peut aussi tre un dessin particulier et remarquable. Un dessin sans dtails peut aussi
avoir un sens et tre joli. N'hsitez pas caricaturer ledit objet, c'est encore un autre moyen de le personnaliser et de lui
donner un peu de votre emprunte vous. Croyez-moi, cela peut donner du charme votre logo alors ne vous dcouragez
pas pour si peu.

Bon, videmment, restez raliste et ne pondez pas un truc immonde non plus.

5. Vous comptez mettre du texte dans votre logo ? Choisissez d'abord quel texte apparaitra. Des initiales ? Une abrviation ?
Un nom complet ?

Ensuite, choisissez une police d'criture et effectuez le formatage qui vous convient (taille, attributs, ...). Faites-vous
plaisir ! Direction le chapitre prcdent si vous avez besoin d'ides. Voici quelques exemples avec la police Arial, c'est pas

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 521/574

grand chose mais ce sont des ides.

6. Mettez de la couleur (rappelez-vous, pas plus de 3 couleurs !) et une ventuelle texture aux textes. Encore quelques
exemples rapidement raliss :

7. Si vous dcidez d'insrer un slogan sur votre site, faites-le intelligemment. Ce n'est pas ce qui doit tre vu en premier, mais
vous pouvez toujours essayer de faire quelque chose qui soit en accord avec l'ensemble du logo. Tant que c'est discret,
vous avez tout gagn.

8. Aprs avoir numris (ou pas) vos dessins et avoir essay de les reproduire sur Photoshop l'aide des outils mis votre
disposition, essayez d'intgrer celui ou ceux qui vous paraissent intressants et potentiellement cohrents avec vos
textes. Si vous n'avez pas de textes, contentez-vous de styliser votre dessin avec les outils de Photoshop.

Ces 8 tapes sont celles sur lesquelles je me base pour raliser des logos, cela me semble tre une suite logique donc n'hsitez
pas procder de la mme manire.

Si vous vous sentez suffisamment la hauteur pour sauter certaines tapes, alors lancez-vous, il se peut que vous vous en
sortiez, mme si c'est un peu dconseill pour le moment, je vous prviens.

Allez, on y va, c'est maintenant l'heure de se mettre au travail ! Faites-moi un beau logo !

...

...

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 522/574

...

...

...
Correction
On passe dsormais la perptuelle correction.

Ce ne sera pas bien long puisque je vous ai dj donn ci-dessus la majorit des informations ncessaires la ralisation d'un
logo.

Voil comment on va donc faire, je vais suivre et rpondre chacune de ces fameuses tapes pour concevoir un logo de toute
pice avec vous. Je vais donc partir de rien et je vais progressivement construire une image selon le thme que j'aurai
pralablement choisi, ainsi que selon le public vis et compagnie.

Premire et deuxime tape : les questions de base et le thme

On partira sur une ide simple que j'ai totalement invente, j'entends donc par l qu'il va falloir laisser parler votre imagination.

Le logo que je vais raliser sera cens reprsenter le logiciel d'une socit dont l'activit est centralise autour de tous les
domaines dont le nom commence par la lettre V. C'est assez tordu, j'en conviens, mais a me laisse une certaine libert dans la
cration du logo, je vais ainsi tre en mesure de raliser un logo significatif et parfaitement en rapport avec ce thme (plus c'est
large, plus on a de chance de rpondre au sujet donn), en sachant que la flexibilit offerte par le sujet me donne l'occasion de ne
pas rendre mon logo trop complexe, il sera donc idalement adapt au tutoriel.

Troisime tape : liste des lments reprsentatifs

On liste ensuite les lments qui peuvent laisser supposer que mon site traitera de tous les domaines dont le nom commence par
V. Je me pose donc une question : qu'est-ce qui peut reprsenter au mieux ce thme ?

C'est trs vaste. Trop vaste mme. Des domaines qui commencent par V, il y en a des centaines et des centaines : vitesse, vente,
voirie, vannes, victoire, vecteur, virus, ...

Nous pourrions donc trouver un nombre incommensurable d'lments pour reprsenter tous ces thmes. Dans ces moments-l, il
vaut mieux trouver un bon compromis. Et l, en l'occurrence, tant donn que la lettre V est clairement de mise, nous l'utiliserons
pour faire notre logo final.

Finalement, tant donn que je n'ai pas vraiment de thme, je n'ai pas eu besoin de crer de liste (j'ai prfr opter pour la lettre
V). Cela dit, videmment, si votre logo traite d'un domaine plus prcis (comme la musique par exemple), il vous faudra absolument
faire une liste plus prcise et plus grande aussi des lments qui pourraient apparaitre dans votre logo. Pour garder ce mme
exemple, vous pouvez y mettre des notes (de musique), des instruments, des enceintes, des couteurs, des "ondes", etc. Votre
liste doit tre la plus complte possible.

Quatrime tape : triage et crayonnage !

Une fois que votre liste est plus ou moins faite, il vous faudra faire un petit tri en fonction de ce qui vous semble tre le plus
adapt pour un logo, mais aussi en fonction de ce qui vous semble tre ralisable sur Photoshop. En ce qui me concerne, j'ai
crayonn diffrents "V". Je leur ai chacun donn une forme diffrente pour les styliser et les rendre uniques et tels que j'aimerais
les voir sur un logo.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 523/574

Tant que l'on est sur l'exemple de la musique, j'en ai aussi profit pour crayonner des dessins lis ce domaine. Et pourtant, le
dessin n'est pas forcment mon fort, et j'ai quand mme essay de crayonner deux/trois trucs pour vous donner un exemple, de
quoi vous laisser l'occasion de vous moquer un peu. Profitez-en, c'est la premire et la dernire fois que vous pourrez le faire.

En ce qui concerne mes lettres V, je ne serai pas oblig de reproduire exactement ce que j'ai crayonn ici sur Photoshop, que l'on
se comprenne bien. J'ai fait a pour avoir un modle. Il est plus simple de dessiner un modle avec un crayon que de le faire
www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 524/574

directement sur Photoshop car vous contrlerez mieux votre dessin.

Ne ngligez pas cette tape. Quel que soit le domaine pour lequel vous allez crer votre logo, dessinez les lments
lists. Si vous n'avez pas prvu d'insrer d'lment quelconque dans ce logo (mais uniquement du texte), essayez
quand mme d'inventer votre propre typographie, comme si vous choisissiez une police d'criture. Il vous sera possible
de "repasser" ce texte crayonn avec la plume et donc, crer votre propre typographie comme je viens de vous le dire.

Sinon, vous pouvez toujours utiliser une tablette graphique, mais a cote de l'argent et il faut savoir s'en servir aussi. Mais si
vous avez le temps et l'argent pour, alors foncez.

Cinquime tape : texte et formatage

Rien ne vous oblige taper du texte et l'insrer dans votre logo final. Bon, moi par exemple, j'admets que je n'ai jamais
rellement eu le besoin ni l'envie de raliser un logo sans texte depuis que j'ai commenc dans ce domaine. On ne change pas nos
bonnes vielles habitudes, je vais maintenant essayer de trouver un texte insrer en accompagnement de l'un de mes jolis "V".

Comment veux-tu inventer du texte avec un thme aussi vaste que le tiens ?

C'est vrai qu'il m'a t assez difficile de trouver le bon texte insrer dans mon logo... Mais figurez-vous que j'ai de la bouteille !
Il m'aura fallu mes quelques annes d'exprience pour trouver cette ide rvolutionnaire grce laquelle mon exemple va
prendre tout son sens... Attention, coutez bien : ct de mon V, je vais tout simplement taper le mot...

Lettre

Et je ne sais pas pour vous, mais moi, je ne trouve pas a si stupide. Enfin bref, on sait donc que mon logo final va donc se
construire de cette manire : d'abord le texte "Lettre", suivi de l'un des V que j'ai dessin et que je vais "vectoriser" avec la plume.

Mais pour l'heure, on s'occupe du mot "Lettre". Je peux donc d'ores et dj commenc mon formatage. Je choisis donc police
d'criture, taille, attributs et compagnie :

Police d'criture : Century Gothic


Attribut de caractre : je ne touche pas aux trois premires lettres (regular) et modifie l'attribut pour les trois dernires
(TRE - Bold)
Corps (taille) : 180pt
Lissage : nette
Couleur : #000000 (noir)

Pour le reste, j'ai laiss les paramtres donns par dfaut, j'ai donc obtenu ceci :

On peut ensuite s'amuser placer ct de ce texte les diffrents dessins crayonns pour choisir celui qui semble tre le plus
cohrent mais aussi pour avoir un aperu du logo final que nous obtiendrons aprs la huitime tape.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 525/574

Sixime tape : stylisation du texte

Vous le savez, il existe mille et une manires de styliser du texte. Nous, on connait surtout les styles de calque, c'est la raison
pour laquelle c'est eux que vous aurez affaire tout de suite.

En ce qui me concerne, je vais "simplement" modifier la couleur du texte en y appliquant un dgrad. Rien de bien croustillant,
mais c'est suffisant pour sortir de la banalit du noir unique. Je suis donc parti d'un noir pur un gris trs fonc :

Pour ceux que cela intresserait, j'ai cr ce dgrad :

Afin de personnaliser encore un peu plus ce texte, je l'ai dupliqu et ai plac la copie en-dessous de l'original dans la fentre de
calques. Ensuite, j'ai supprim le dgrad en cliquant-droit sur le calque puis en cliquant sur "Effacer le style de calque" (ceci afin
que mon calque reprenne sa couleur noire d'origine). Enfin, j'ai dplac le calque de quatre pixels vers le haut dans la zone de
travail et cela m'a particulirement sduit :

Comprenez bien que j'ai ici utilis une police d'criture simple pour ne pas rentrer dans l'extravagance et sortir du sujet principal.
J'aurais pu utiliser une police d'criture beaucoup moins "droite", avec des arrondis et des formes grossires. Si je ne l'ai pas fait,
c'est parce que cela ne me semblait pas suffisamment cohrent avec le style de logo que je voulais crer.

Pour reprendre l'exemple de la musique, clairement cette police n'aurait sans doute pas t des plus adquates. On aurait pu
opter, par exemple, pour la police suivante. J'ai crit le texte "Vivre la musique" en guise d'exemple :

Vous le voyez vous-mme, la diffrence est flagrante. Et pourtant, je n'ai modifi que la police et le texte. Afin de complter mon
exemple, je peux vous proposer un petit aperu de comment rendre le texte plus vivant grce aux styles de calque, toujours eux.
On ajoute donc un dgrad, une petite ombre lgre et enfin, un contour blanc, et le tour est jou !

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 526/574

Comme quoi, les styles de calque peuvent tre trs utiles ! Il ne faut nanmoins pas en abuser, ou du moins s'en contenter. On
peut styliser des textes de "mille et une" faons pour reprendre les propres termes que j'ai employs plus haut, vous de faire le
ncessaire pour faire des dcouvertes.

Septime tape : ajout du slogan

Cette tape est facultative. Certains logo sont accompagns d'un slogan, d'autres non. C'est vous d'en dcider. Comme cela
peut faire partie de vos projets, j'ai ajout un petit slogan aux deux logos que je suis en train de crer. Bon, par contre, comme ce
sont des exemples, j'ai crit absolument n'importe quoi, mais a, on s'en fiche.

Pour marquer la diffrence entre le slogan et le logo en soi (le nom), il faut prendre en compte que le slogan est secondaire et doit
tre lu aprs le nom. Je lui ai donc dfini une petite taille, des lettres majuscules, une nouvelle couleur et une nouvelle police
d'criture.

Petite astuce : lorsque votre logo est cens reprsenter un site internet, vous pouvez placer quelque part l'adresse du site en
question en guise de slogan. Par exemple :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 527/574

Ou alors, tant donn que le nom du site est aussi le nom affich sur le logo, vous avez la possibilit d'ajouter simplement
l'extension de votre site (en quelque sorte, le nom de domaine) :

Huitime tape : vectorisation (1/2)

L'ultime tape. Aprs avoir numris nos dessins crayonns, il nous faudra donc les trier et reproduire ceux qui vous sembleront
les plus techniquement ralisables sur Photoshop, si cela n'est pas dj fait bien entendu. Et comme nous allons utiliser la plume,
nous allons crer un dessin vectoriel. Autrement dit, nous allons "vectoriser" notre dessin numris.

En ce qui me concerne, j'ai toujours ma petite liste de V qui ne demandent qu' tre retracs sur Photoshop. J'aurais pu tous les
reproduire, mais pour un gain de temps, j'en ai choisi un seul :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 528/574

C'est celui qui me semblait le plus sympa parmis tous les autres car, en plus d'tre simple, il fait partie de ceux qui sont les plus
proches et les plus reprsentatifs de la lettre V. Ce n'est pas forcment un critre (on peut vouloir crer quelque chose de trs
abstrait, chacun sa mthode aprs tout), mais pour ce tutoriel, j'en ai dcid ainsi. Voil donc le rsultat sur Photoshop :

Bon, sincrement, a ne casse pas trois pattes un canard. Il va maintenant falloir la jouer infographiste et faire des essais pour
obtenir quelque chose d'un peu plus esthtique.

Commenons par choisir une autre couleur que le noir, car je vous rappelle que c'est aussi la couleur de mon texte "Lettre".
Essayons du rouge :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 529/574

Hum... Un peu trop ptant, peut-tre ? Rduisons un peu la luminosit du rouge pour obtenir un bordeaux moins "flashy" :

Ouf, a pique dj un peu moins les yeux. Par contre, a manque peut-tre un peu de dgrad, qu'en pensez-vous ? Et tiens,
plutt qu'appliquer un seul et mme dgrad l'ensemble de ma figure, pourquoi ne pas la diviser en deux et mettre un dgrad
diffrent chaque partie ? C'est simple, il me faut deux calques sur Photoshop, chaque calque reprsente une branche de mon V :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 530/574

Ensuite, on stylise chaque branche d'un dgrad de couleur sur la gamme des rouges, mais l'orientation diffrente :

Pour accentuer un peu plus la diffrence de dgrad entre les deux branches, on peut ajouter un trait au milieu des deux, un trait
d'un rouge plus clair, comme ceci :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 531/574

C'est lger, mais a vaut son pesant de cacahutes.

C'est fini ? C'est vrai qu'il est cool, ton V. Par contre, je le trouve un peu trop simple...

C'est vrai que c'est un peu lger. C'est joli, mais peut-tre pas suffisamment sophistiqu. Comment pourrait-on faire pour
amliorer tout a ?

Dj, on pourrait essayer de reprendre notre premier "V", c'est--dire de le dupliquer, et l'insrer quelque part dans notre logo.
Allons donc, je duplique mon premier "V" et je le rtrcie l'aide de l'homothtie. Ensuite, je viens le placer la pointe de mon
premier "V", ce qui donne :

Plutt pas mal, n'est-ce pas ?

Je propose maintenant d'insrer encore un autre "V" l'intrieur de mon premier "V", mais en prenant soin cette fois-ci de choisir
une couleur diffrente du rouge initial afin de crer un norme contraste et de le rendre parfaitement visible. J'ai opt pour du

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 532/574

blanc, et voil ce que j'ai obtenu :

Mouais, bof. Je ne sais pas vous, mais je trouve qu'il manque un petit quelque chose. Peut-tre que le "V" est trop parfait ? Je
veux dire, tant donn que j'ai repris la mme base, peut-tre faudrait-il casser cette symtrie pour finalement obtenir un V
diffrent ? J'ai donc imagin reprendre un V, mais en lui donnant une forme particulire laissant penser une petite encoche
comme on en utilise pour faire une validation :

Si vous voulez tout savoir, je trouve qu'il manque encore quelque chose. Et j'avais pens, ventuellement, faire "sortir" une partie
du "V" blanc et justement remplir de rouge cette partie :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 533/574

L'avantage, c'est qu'ici, on a cr un truc qui donne une apparence unique mon logo. Et en plus, ce logo a une signification
puisqu'il s'agit de trois V empils, rappelant justement le thme de la socit fictive (tout ce qui commence par la lettre "V").

En ce qui concerne le logo sur la musique, j'ai repris l'ide du vinyle pour la reprsenter car a me semblait simple faire, mais
aussi trs vocateur pour celui qui le verra. L'objet que je vais intgrer aux cts du texte "Vivre la musique" est donc le suivant :

Je ne sais pas ce que vous pensez de ce dessin, mais sincrement, vous tes rellement capables d'en faire autant voire mme de
faire mieux. Je n'ai fait qu'utiliser les outils de forme et je n'ai mme pas eu besoin de la plume, c'est dire !

Huitime tape : assemblage (2/2)

Et pour finir, on assemble ! C'est vous de dcider de l'emplacement de votre objet par rapport votre texte. Pour ma part, j'ai
prfr mettre le vinyle tout gauche du texte "Vivre la musique", en veillant ce qu'il soit lgrement en-dessous des textes
blancs pour les opposer au noir du vinyle.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 534/574

En revanche, pour l'autre logo, j'ai plac mon V droite du texte, et laissant un espace de quelques pixels entre chacun pour ne
pas les superposer comme je viens tout juste de le faire avec le logo sur la musique.

Si la disposition finale ne vous convient pas, n'hsitez absolument pas faire des essais. C'est comme a que a fonctionne, il
faut faire des essais jusqu' trouver chaussure son pied. Je vais finir ce TP en vous prsentant diffrents essais de logo, mais
en partant de la mme base (je ne vais pas m'amuser tout recommencer, et puis quoi encore !). Vous allez voir, un rien peut
changer pas mal de choses.

Logo sur la musique

- -

Cliquez sur les images pour les agrandir

Logo sur la lettre V

Cliquez sur les images pour les agrandir


Le TP est maintenant termin. Nous avons vu l'essentiel en ce qui concerne la cration d'un logo et le moins que l'on puisse dire,
c'est que vous avez enregistr un nombre trs important d'informations.

Je veux simplement revenir sur quelque chose avant de passer la suite. Raliser un logo ne se rsume pas qu' de simples
tapes telles que je vous les ai prsentes. C'est un travail long et qui doit tre fait de manire rigoureuse mais aussi de manire
objective. Faites des essais, plein d'essais, amliorez ce qui est amliorable, montrez vos uvres vos proches, demandez-leurs
et demandez-vous si a semble convenir avec l'esprit recherch, renseignez-vous autour de vous, sur le net, etc.

Tout ce que j'ai pu vous dire ici sont les connaissances que j'ai pu acqurir de manire autodidacte. Il ne faut donc pas que vous
soyez format par ce que je dis mais plutt que vous preniez cela comme une bonne base pour dvelopper vos propres thories
et que vous puissiez travailler comme bon vous semble. Toujours dans la limite du raisonnable, videmment.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 535/574

Habiller votre site internet (1/2)


Si crer un site web peut se rvler passionnant et attrayant, il faut toutefois disposer des comptences ncessaires pour se
lancer dans une telle aventure. Ainsi, concevoir un site internet un tant soit peu interactif, fonctionnel et sophistiqu, relve
dans l'ordre des domaines informatiques suivants :

Charte graphique (design) : on peut choisir de faire cela en premier, en tout cas c'est une tape importante dans la
conception de votre site, je veux parler de son design. On va alors raliser ce que l'on appelle la charte graphique du site,
c'est--dire la maquette qui va dterminer son aspect global (couleurs, formes, ...). A la fin de cette tape, on obtient une
image au format JPEG ou PNG par exemple. Cette image, c'est la charte graphique, elle est la reprsentation finale de
votre site.

Mise en forme (HTML et CSS) : une fois la charte graphique termine, on va dcouper l'image et la dcomposer en
plusieurs petits morceaux puis, l'aide des langages dits de balisage (souvent confondus avec les langages de
programmation), on les assemblera afin de "mettre en boite" tous les morceaux pour reformer l'image et la rendre
fonctionnelle pour le web. Ainsi, on sera ensuite mme de remplir le site de textes, formulaires, liens hypertextes, etc.

Dveloppement : la dernire tape pour la conception d'un site internet consiste procder son dveloppement. Pour
cela, on utilise des langages de programmation comme par exemple les deux insparables PHP/MySQL avec lesquels
nous allons rendre nos pages dynamiques pour, par exemple, permettre nos visiteurs de publier des commentaires, de
rdiger des actualits, de participer sur des forums de discussion, etc. D'ailleurs, le Site du Zro lui-mme est dvelopp
avec PHP.

Vous l'aurez compris, en ce qui nous concerne, nous nous chargerons d'effectuer la toute premire tape de conception puisqu'il
s'agit d'utiliser Photoshop et de faire de l'infographie, tout simplement. Je vais tenter de vous initier la dure tche qu'est
l'laboration et la ralisation d'une charte graphique (ou "design", c'est comme vous voulez, selon votre prfrence).

Il n'existe presque aucune normalisation dans ce domaine, il n'y a pas de charte graphique standard (d'ailleurs, une "charte" est
par dfinition un ensemble de normes, et ce sera vous de les dterminer) et surtout, on peut crer des milliers et des milliers de
designs diffrents selon les thmes sur lesquels ils portent, selon l'identit de leur propritaire, selon les formes avec lesquelles
ces designs ont t raliss aussi... Bref, l o je veux en venir, c'est qu'il y a tellement d'lments qui font d'une charte graphique
qu'elle est diffrente d'une autre et unique que je ne pourrai sans doute pas traiter votre cas en particulier.

Ainsi, je ferai mon possible pour gnraliser mes explications de sorte ce que vous puissiez adopter diffrentes techniques de
travail et que vos aptitudes en terme de cration soient aussi diverses que varies.
Une charte graphique ?
Si l'on s'en tient la dfinition du mot, une charte graphique dfinit un ensemble de rgles respecter pour constituer une
identit graphique, qu'il s'agisse d'une entreprise, d'un produit, d'une marque ou mme d'un site web... En bref : de tout et
n'importe quoi.

Elle impose donc, d'une certaine manire, des normes dans la ralisation des graphismes d'un mme projet, ce qui va permettre,
par extension, de conserver une certaine cohrence sur le plan graphique. Pour faire simple, on utilise une charte graphique pour
garder une homognit visuelle.

Un "design" de site web

Personnellement, j'ai toujours eu l'habitude d'utiliser le terme de charte graphique pour dsigner de manire gnrale l'identit
visuelle d'un site web. Je vous le disais il y a quelques secondes, on a plutt tendance parler de "design de site", terme anglais
que l'on a vite fait de franciser et qui est rentr dans les murs d'aujourd'hui. Dans ce tutoriel, j'utiliserai les deux expressions
pour ne pas faire de jaloux.

Aussi, l'intrt de mettre en place une charte graphique est de donner au site web une identit graphique propre et
personnalise. Cette identit se doit essentiellement d'tre l'image du contenu du site dans la mesure o elle est cense
permettre un visiteur lambda qui visionne les pages de ce site de reconnaitre au premier coup d'il qui il appartient ou du
moins, de quoi il traite. Comment pourrait-on reconnaitre un site ddi au football si l'on y affichait des images tirs des matches
de la NBA (basketball) ?

Supposons que vous soyez un jeune tudiant en architecture. En arrivant sur votre site personnel, il faut qu'on puisse constater
rapidement que :

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 536/574

1. Ce site traite de l'architecture.


2. C'est un site personnel.
3. Il appartient un jeune tudiant.

A partir de ces lments, on peut rapidement se douter que vous tes tudiant en architecture et que vous avez conu ce site
pour prsenter vos uvres ou plus simplement pour vous prsenter.

Je suis d'accord, mais a ne marche pas tout le temps. Prenons l'exemple du Site du Zro. Quand j'atterris dessus, je n'ai
aucune image me faisant vritablement penser que ce site propose des tutoriels sur l'informatique...

Hmm, je ne suis pas vraiment d'accord avec vous, et je vais vous le prouver. Sachez nanmoins qu'on ne peut pas tout faire avec
les images. Je dirais mme plus, il ne faut pas compter que sur les graphismes d'un site pour se faire une ide de ce dont il traite.
On va aussi utiliser les textes, les liens, leur emplacement, leur format, etc.

Ergonomie et accessibilit

Vous savez... Si votre nom et votre prnom sont mis en vidence sur votre site personnel et que vous glissez une petite auto-
description en guise de slogan par exemple, on saura dj plus ou moins quoi s'attendre. Et puis, de toute vidence, l'objectif
n'est pas uniquement que l'utilisateur sache qui appartient le site. Il faut avant tout qu'il sache qui ou quoi il a affaire, mme
vaguement, mais aussi de quoi le site traite, quoi il fait rfrence, etc. En reprenant l'exemple du Site du Zro, on sait de par son
logo que la notion d'apprentissage est prne grce notamment au chapeau d'tudiant, ceci sans oublier le "zro" du nom du site
qui laisse supposer le concept mme qui consiste "commencer son apprentissage depuis le dbut". Et tout a, rien qu'avec le
logo. Mais il n'est pas le seul indicateur, on sait aussi, par exemple, que le site propose des cours d'informatique et que, d'une
manire gnrale, il regroupe une communaut forte grce d'autres indices laisss un peu partout sur le site et notamment en
page d'accueil :

Le message d'accueil : "Bienvenue sur le Site du Zro. Le site pour dbutants o tout est expliqu... partir de Zro !

Que propose le Site du Zro ? : ce bloc prsente les diffrents ples sur lesquels s'articule le SdZ. On sait alors qu'avec
ce site, on peut "apprendre maitriser son ordinateur", "changer avec la communaut" et "s'informer de l'actualit".

Les cours : le menu de gauche prsente une liste dans laquelle on peut retrouver des termes vocateurs tels que "site
web", "programmation" ou encore "bureautique". On sait l-aussi qu'il est question d'informatique et qu'il s'agit de cours
relatifs aux diffrents domaines lists.

Mais quel rapport avec la charte graphique ?

On associe trs souvent l'ergonomie avec la charte graphique, c'est mme essentiel. Dans un souci de lisibilit et surtout
d'accessibilit, le site que vous allez concevoir se devra d'tre ergonomique au possible. Un site ergonomique, c'est avant tout
un site qui se veut intuitif et facile d'utilisation, un site sur lequel la navigation est fluide et prcise. D'ailleurs, si on peut tre soit
ergonome, soit graphiste, et bien le plus souvent, on est les deux.

Le Site du Zro est d'ailleurs rput pour son ct ergonomique et accessible. Il a t tudi et conu de sorte ce qu'un visiteur
lambda, quel que soit son ge et surtout son niveau en informatique, puisse naviguer avec tout le confort qu'il se doit.

Certains sites ont tendance privilgier l'esthtique la pratique. Du coup, ils sont graphiquement bien faits, mais pas forcment
agrables utiliser, et c'est un problme de taille vis--vis du visiteur. Il faut donc penser tout, et c'est justement l qu'intervient
le binme graphiste-ergonome.

En rsum

On suppose que je suis en train de monter ma petit entreprise. Je vais d'abord tablir une charte graphique qui va dterminer les
lments graphiques de ma boite. Attention, je ne suis pas en train de parler du site de ma boite mais bel et bien de l'ensemble

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 537/574

des lments graphiques relatifs ma boite :

Style graphique
Choix des couleurs
Ralisation du logo : couleurs, formes, positionnement, dclinaisons, ...
Choix des polices de caractre
Emplacement et positionnement des lments graphiques
Adaptation des lments graphiques aux supports utiliss (web, papier, textile, ...)

Nous dclinerons ces lments pour crer le "design" du site de l'entreprise : si les couleurs majeures de la charte graphique sont
le bleu et le orange par exemple, alors on saura que le design du site sera majoritairement compos des couleurs... orange et bleu
!

Il n'y a pas de rgle !

Imaginez, crez, innovez !

Il existe une rgle laquelle il faut se plier lors de l'laboration du design de votre site : ne vous fixez absolument aucune rgle,
aucune contrainte ! Hormis les principes fondamentaux stipuls par la charte graphique, vous tes absolument libre de faire ce
que vous voulez, quand vous voulez et de la manire que vous voulez.

Tenez, c'est un peu comme votre CV (curriculum vitae) : saviez-vous qu'il n'y avait absolument aucune rgle qui vous oblige
utiliser un format de prsentation standard ? Si vous tes suffisamment cratif, vous pouvez innover et faire globalement ce qui
vous plait.

C'est parfaitement la mme chose avec le design de votre site. Pour se dmarquer, on peut user de techniques diverses et varies
dans le but d'inventer ou de changer voire optimiser ce qui est dj existant. Il faut laisser libre cours son imagination et ne pas
se restreindre aux normes spculatives qui font de votre site web un site banal.

Quelques exemples...

Laissez-moi vous prsenter quelques sites internet diffrents en guise d'exemple suite aux explications que je viens de vous
donner. Je vous le disais, chaque site a sa propre identit et on dtermine cela l'aide d'une charte graphique. Par exemple, un
site internet peut traiter du mme thme mais se diffrencier grce leurs logos ou encore leurs couleurs. C'est notamment le cas
pour les plateformes de vido Youtube et Dailymotion.

Chacune s'est forg un caractre physique diffrent. On reconnait Youtube pour son logo noir et un fond rouge tandis que
Dailymotion se dmarque de par sa couleur majoritairement bleue. C'est un peu comme Coca-Cola et Pepsi : le premier est
reconnu pour son logo fantaisiste et sa couleur rouge dominante, Pepsi est quant lui davantage reconnu pour son texte blanc
sur fond bleu et surtout son logo en forme de cercle et de couleur rouge/blanc/bleu.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 538/574

Bon, allez, maintenant, quelques exemples de sites internet aux charte graphiques compltement diffrentes pour vous faire une
petit ide de ce qu'on peut trouver sur le web.

- - - - - -

Le squelette
C'est maintenant que les choses se prcisent, nous allons laborer le squelette de notre charte graphique.

Je serais bien tent de te dire qu'Halloween est pass, mais je suppose que la signification de ce terme est tout sauf
celle laquelle je pense ?

Oh la blague de mauvais got ! En fait, j'utilise le terme de "squelette" pour dsigner cette tape dans l'laboration d'une
charte graphique qui consiste dfinir une structuration des diffrents lments qui la composeront, en passant par le choix des
couleurs dominantes et secondaires et de l'extensibilit du design. Vous allez voir, c'est une tape de rflexion trs intressante,
passage essentiel (et souvent omis malheureusement) avant de commencer quoi que ce soit.

Choix du thme

De quoi mon site va-t-il parler ? Telle est la question que vous devez vous poser avant de commencer. Cette dmarche est
ncessaire car elle vous permettra d'viter le hors-sujet mais aussi de centraliser vos ides pour concevoir une charte graphique
l'image du contenu de votre site, comme je le conseillais il y a quelques minutes.

Alors oui, il va parler de quoi, mon site ? Je vais mettre quoi dedans ? Et tiens, d'ailleurs, quel type de visiteur mon site va-t-il
s'adresser ? Voyons quelques exemples avrs pour nous donner une petite ide.

Catgorie Thme Cible


Environnement Protection des animaux, rchauffement climatique... Grand public, cologistes, associations...
Musique Classique, titre la demande, tutoriels vidos... Musiciens (confirm, en herbe...), mlomanes...

Diffusion d'information Jeux vidos, faits divers, informatique, mode... Journalistes, les filles, les geeks ...

De toute vidence, je ne pourrai pas traiter tous les cas existants sans quoi je n'en aurais jamais fini. Puis, de toute manire, c'est
vous de travailler ici. Car, une fois le thme choisi, il va vous falloir penser au style graphique que vous devrez adopter pour
construire votre charte graphique.

Prenons un exemple. Supposons que nous sommes en passe de concrtiser un projet qui consiste crer un site dont le thme
serait la fort. Qu'est-ce qui caractrise ce thme votre avis ? Par quels moyens peut-on retranscrire graphiquement cet univers
? On peut penser au bois (on reprendrait donc une texture boise pour notre site), aux feuilles, l'eau mais aussi la terre,
pourquoi pas ?

Supposons maintenant que nous sommes amens raliser un site internet sur... les anges. On peut tout de suite deviner que le
site sera raliser sur des tons de couleur clairs. Quelles couleurs prcisment, on ne sait pas encore (c'est la prochaine tape),
mais sur des tons clairs, a semble logique.
Que peut-on ajouter d'autre ? Des nuages par exemple ? Et pourquoi pas des plumes ou encore des toiles ?

Enfin, vous l'aurez compris, la procdure est simple : on a notre thme, on trouve les lments cls en rapport avec ce thme, et
on note a de ct pour la suite.

Choix des couleurs

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 539/574

Et la suite, c'est le choix des couleurs pour votre charte graphique. Cette tape est tout aussi importante que la premire, elle va
dterminer beaucoup de choses pour votre site : son caractre, sa cohrence avec le thme choisi, la premire impression de
votre visiteur, le premier lien qu'il entretiendra avec votre site, et j'en passe... C'est comme en gastronomie, on a tendance juger
en premier l'apparence du met qu'on vous prpare : sa texture, son aspect, ses couleurs, son odeur... C'est prcisment le mme
principe. Avant de goter, on regarde.

Choisir les couleurs d'un site, c'est loooiin d'tre simple et vous allez vite vous en rendre compte. Il va falloir choisir les couleurs
qui correspondent le mieux avec le thme du site, mais aussi des couleurs harmonieuses et qui s'accordent bien entre elles.
Comme pour un logo, il vaut mieux ne pas utiliser trop de couleurs diffrentes, il faut pouvoir rester simple et efficace, mais aussi
garder une certaine uniformit entre design et logo.

Pour le choix des couleurs, vous avez deux solutions :

Vous faites marcher vos neurones et mettez en avant votre esprit cratif : les couleurs, c'est vous et vous seul qui les
choisirez.
Trouver des couleurs qui vont bien ensemble et qui me plaisent vraiment ? Trop dur, je ne sais pas faire.

Trs souvent, on a tendance vouloir opter pour la premire solution et, trs souvent, quand on n'a pas trop l'habitude, et bien
on fait n'importe quoi. Les couleurs ne sont pas particulirement jolies et ne s'accordent pas forcment trs bien. Bon, aprs, les
gots et les couleurs, a ne se discute pas. Mais en infographie... un peu quand mme.

Pour vous aider, vous pouvez utiliser des combinaisons de couleurs dj prpares, vous les trouverez sur des sites spcialiss
sur la toile comme Kuler par exemple :

Choisir les couleurs sur Kuler.com

Sur le site, les premires couleurs qui vous sont proposes sont celles-ci :

videmment, vous tes libre de choisir les couleurs qui vous correspondent ou qui correspondent votre site. C'est vous de
dcider de celles qui semblent tre les plus appropries. Il va par exemple falloir choisir les tons de couleurs qui vont le mieux
avec l'esprit de votre site. Pour reprendre l'exemple du site sur les anges, l'idal serait d'utiliser des couleurs claires et mme
lumineuses (dans la limite du raisonnable, videmment).

Si toutefois Kuler ne vous correspond pas, vous pouvez trouver d'autres sites du mme type sur Google, sinon je peux aussi
vous conseiller ColorJack.

Les couleurs principales et secondaires

Lors de l'laboration d'une charte graphique, il faut dfinir approximativement trois quatre couleurs. C'est un chiffre
approximatif qui dpend de vous et seulement vous, je vous donne juste une piste pour ne pas que vous abusiez des bonnes
choses.

On catgorisera ces couleurs en deux parties : les couleurs principales du site, et ses couleurs secondaires.

Les couleurs principales, comme elles le laissent prsager, sont les couleurs majoritaires de votre site, elles doivent tre celles
que l'on remarque en premier et qui apparaissent en vidence.

Les couleurs secondaires sont moins visibles, moins apparentes, mais tout aussi importantes que les couleurs principales car

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 540/574

elles sont complmentaires et sont censes "casser" le trop plein que peuvent reprsenter les couleurs majoritaires. Cela permet
de donner un aspect plus harmonieux l'ensemble du design.

Sur les couleurs prsentes ci-dessus, on note trois bleus diffrents, un blanc beige et du orange. On peut ventuellement
penser que les couleurs majoritaires sont le bleu et le blanc beige, tandis que la seule couleur secondaire sera le orange (et
pourquoi pas l'un des trois bleus si le mariage est convenable ?).

Je vous laisse choisir les couleurs qui vous conviennent et qui conviennent votre futur site.

Le logo

On peut dcider de raliser le logo de notre futur site avant mme d'avoir commenc la charte graphique de ce site. Il pourrait
mme s'agir d'une base, ce sera alors avec elle qu'on dciderait du style de notre site, des couleurs majoritaires et secondaires,
etc. Par exemple, si je cre un logo dont la couleur qui en ressort majoritairement est orange, je sais que mon site sera
principalement orange. Ce n'est pas une obligation, mais c'est une piste sur laquelle on peut prendre base.

On peut aussi dcider de raliser le logo du site aprs avoir dfinie une charte graphique. Ce serait donc la suite logique de ce
que l'on fait actuellement : on a choisi un thme, du coup on sait dans quel style notre charte graphique va tre ralise. On a
galement choisi les couleurs du site, on peut donc maintenant commencer crer son logo. En ce qui nous concerne, nous
avons dj ralis un logo dans le TP prcdent. Vous pouvez le prendre comme base ou bien en raliser un nouveau selon le
thme et les couleurs que vous venez de choisir.

Si vous avez encore des incertitudes quant la conception et la ralisation d'un logo, allez jeter un il au chapitre prcdent, cela
devrait vous aider.

tape de conception

La partie thorique est quasiment termine. Nous avons quasiment tous les lments ncessaires pour la ralisation du design de
notre site. Il manque toutefois deux morceaux trs importants qu'il faut imprativement traiter avant de dbuter.

Fixe ou extensible ?

On dit d'un design qu'il peut tre fixe ou extensible. Ces deux notions sont surtout connues des programmeurs xHTML/CSS,
d'ailleurs on peut le constater dans ce chapitre du cours xHTML/CSS du Site du Zro, mais elles doivent aussi faire partie du
vocabulaire de l'infographiste qui se charge de crer un design.

Quand on dit qu'un design est fixe ou extensible, on veut parler de sa largeur.

Un design fixe est un design qui dispose d'un certain nombre de pixels de largeur. Par exemple, le design fera 850px de
largeur : pas plus, ni moins.
Un design extensible est un design qui s'largit en fonction de l'cran de son utilisateur. Par exemple, si mon cran est
plus large que le vtre, alors le site s'adaptera et votre cran, et mon cran ! Il va "s'tirer" en fonction de la largeur
des crans sur lequel il apparaitra.

Par exemple, le Site du Zro est extensible. Il occupe toute la largeur de votre cran.
A l'inverse, le site Linternaute est fixe : il occupe un certain nombre de pixels et c'est pareil pour tous les crans. Pour combler le
vide aux extrmits gauche et droite, le crateur du site a mis un fond blanc, tout simplement.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 541/574

Sur le premier schma (Design fixe), on aurait pu largir la taille de l'cran que les dimensions du carr gris fonc n'auraient pas
boug. A l'inverse, sur le deuxime schma, si la taille de l'cran avait t plus importante (et notamment la largeur de l'cran), et
bien les dimensions du design (toujours le carr gris fonc) se seraient adaptes et le design aurait occup toute la largeur
comme c'est le cas sur le schma actuel.

Bah, c'est bizarre ton truc. Sur Photoshop, on peut donner une hauteur et une largeur, c'est tout. Du coup, on ne peut
que crer des designs fixes, n'est-ce pas ?

Le choix entre "design fixe" ou "design extensible" se fait en rgle gnrale par celui qui va se charger de "mettre en page" votre
site, la fameuse tape xHTML/CSS dont je vous faisais part au dbut du chapitre. C'est lui qui va se charger de rendre extensible
un design ou non, c'est lui qui fera en sorte que le site dtecte la largeur de votre cran et s'y adapte (ou pas).

Nous, infographistes, allons faire en sorte de faciliter la tche du codeur xHTML/CSS en crant un design qui puisse tre cod et
adapt tous les crans. Cette tape n'est pas complique en soi, et tout dpend galement des comptences du codeur. L'ide,
c'est juste de savoir si le design que l'on s'apprte crer sera ou non extensible. A partir de l, on va pouvoir passer la
prochaine tape.

Franchement, je n'en ai aucune ide personnellement... Comment savoir lequel est le mieux ?

Il n'y a pas de "mieux". Il faut faire comme bon vous semble. Si vous avez une prfrence pour les sites extensibles, alors lancez-
vous. Sachez toutefois qu'il est sans doute plus simple de coder un site qui aura un design fixe car a retire beaucoup de
contraintes d'un point de vue technique.

Par exemple, pour rendre un design extensible, trs souvent, on va dcouper les parties du design (souvenez-vous, cela fait
partie du travail du codeur xHTML/CSS) de sorte ce qu'on puisse "copier" certaines parties pour les ajouter au design afin de
l'agrandir en fonction de l'cran de l'utilisateur. Dans le cas du Site du Zro, en prenant l'exemple de la barre de navigation

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 542/574

(speedbarre), personnellement, avec mon cran, elle fait cette taille :

Cliquez ici pour agrandir l'image

Comme vous pouvez le constater, elle est quand mme trs large. Pourtant, chez certains utilisateurs (peut-tre mme vous), elle
n'a pas plus grande que cela :

C'est simple : la largeur de la speedbarre (barre de navigation) s'est adapte la largeur de nos crans. Et tout s'est jou ce
niveau l :

Grce au code xHTML/CSS, on a demand ce que cette partie se rpte autant de fois que ncessaire vers la droite jusque que
a soit ajust la largeur de l'cran de l'utilisateur, vous me suivez ?

Si ce n'est pas trs clair, vous pouvez toujours comparer la barre de navigation que j'ai sur mon cran (premire image parmi les
trois dernires ci-dessus) avec celle qui est beaucoup moins large (la deuxime ci-dessus). Vous verrez alors o je veux en venir
quand je dis que la partie remplie de rouge ci-dessus s'est "copie" autant de fois que ncessaire pour agrandir la barre de
navigation et l'adapter mon cran.

Au fait, pourquoi je vous dis tout a, moi ? Ah, oui. En fait, c'est ce genre de dtail auquel il va falloir prter attention si vous
dsirez faire un design extensible. Souvent, quand on dcide de raliser un design fixe, on peut difficilement le rendre extensible
par la suite. Rien n'est fig, mais presque. Je vous conseille donc vivement de bien dcider avant comment votre design sera sur
ce plan-ci.

Pour plus d'informations, lisez l'article de Raphal Goetter propos sur Alsacreations. Il reprend l'ensemble ce que je viens de dire
et plus encore, le tout tay par une phase de rflexion sur la pratique CSS.

Cration du squelette

Quand on cre une charte graphique, il faut penser tout :

Visibilit
Esthtique
Navigation
Fluidit
Accessibilit
Scurit
Praticit
Et j'en passe...

On a dj trait quelques uns de ces cas, mais pas tous (et nous ne pourrons d'ailleurs pas tous les faire). Je voudrais maintenant
vous parler de la visibilit et de la navigation au sein de votre site. Quand je parle de "visibilit", je veux parler de l'agencement
des diffrents composants de votre design. Si la visibilit est bonne, la navigation le sera. En d'autres termes, si tout est agenc
correctement, on va pouvoir naviguer sur votre site correctement.

Pour cela, on va chercher crer un squelette de notre design pour avoir une ide prcise de l'agencement gnral du site : qui
va o, pourquoi, comment, etc. On va faire une tude schmatique de notre projet. Et cela se passe bien entendu avec...
Photoshop !

On commence donc par choisir la taille de notre design. Que vous ayez dcid qu'il finira par tre fixe ou extensible, dans tous les
cas, il faut choisir une taille. Pour notre exemple, nous travaillerons sur un design fixe car cela me semble plus simple, moins
contraignant vis--vis des explications que j'aurai vous fournir. Nous partirons sur une base de 900*850px. Je vous invite
crer cette nouvelle zone de travail.

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 543/574

Quand c'est fait, slectionnez l'outil forme rectangle : c'est avec lui que nous allons travailler 90% de notre design, on va l'utiliser
pour "former" la bte.

Dans les cas les plus basiques, un design est compos de 4 lments :

Une bannire, appele aussi "header" : c'est le cur graphique de notre design. C'est elle qui donne le ton, c'est elle qui
joue le premier rle en terme d'esthtisme. Elle est l'emblme de la charte graphique.

Un menu : le menu va permettre de choisir le contenu afficher. Par exemple, on va pouvoir mettre, dans le menu,
diffrentes sections du site en leur donnant des noms vocateur comme "Page d'accueil", "Contact" ou encore "Qui
sommes-nous ?".

Le corps : c'est ici que tout se passe. Dans le corps, on affiche tout le contenu de la page. Si j'ai cliqu, par exemple, sur le
bouton "Contact" du menu, le corps va afficher des formulaires permettant d'envoyer un message vers un destinateur
afin de le contacter.

Le pied de page (aussi appel "footer") : on utilise le pied de page pour afficher des choses de manire moins apparentes.
Souvent, on peut lire dans les pieds de page les "copyright" des auteurs du site, leurs noms, les mentions lgales de
l'entreprise ditrice du site, etc.

Ce sont donc les quatre lments principaux partir desquels nous travaillerons. Le tout, maintenant, c'est de faire un
assemblage de ces quatre lments afin de les disposer de manire intelligente pour que la visibilit soit bonne car, vous le savez
maintenant, bonne visibilit = bonne navigation. Laissez-moi vous tester. Si je vous montre un design agenc de la manire
suivante, en sachant que j'ai repris les quatre lments ci-dessus, pensez-vous que la disposition est bonne sur le plan visibilit
?

Cliquez sur l'image pour l'agrandir

En thorie, une disposition n'est pas "moins bonne" qu'une autre, en tout cas pas si l'on regarde a objectivement : aprs tout,
chacun fait comme il veut, je ne cesse de vous le rpter. Mais en pratique, il faut dire que cette disposition manque cruellement
de sens.

On a d'abord le pied de page qui se trouve en haut du site. Pourtant, le pied de page est cens numrer les informations qui ne
sont pas forcment les plus importantes : on aura donc tendance prfrer les mettre en bas de la page, d'o le terme "pied de
page".

Par ailleurs, la bannire tant l'lment graphique le plus vocateur vis--vis de votre visiteur, c'est--dire que c'est la premire
chose que le visiteur verra et par le biais de laquelle il va pouvoir se crer un avis sur l'aspect graphique global du site, il faut
imprativement qu'elle soit visible et surtout pas masque par autre chose. Or, ici, le menu est gigantesque : il est mme plus
grand que la bannire elle-mme ! Cette disproportion est viter. Quand on fait un design et qu'une bannire existe, il faut mieux
qu'elle soit au moins aussi visible que le menu et que sa taille soit suffisamment proportionne. Encore une fois, on peut trouver
quelques stratges pour donner un aspect unique au design et donc, par exemple, faire une bannire quasiment invisible et
neutre et l'accompagner d'un menu trs "design" et facilement remarquable. Mais encore faut-il savoir le faire et pour le moment,
on s'en tiendra aux manipulations et explications les plus simples, c'est--dire celles que je viens de vous fournir.

Hum... ce moment l, est-ce qu'il ne vaut mieux pas utiliser une disposition "type" ?

Figurez-vous qu'il existe une disposition basique (et souvent dcline) utilise dans la majorit des sites internet. Cette
disposition consiste placer les lments de manire assez stratgique et logique. Ainsi, on aura la bannire tout en haut du site,
qui prendra toute la largeur. Ensuite, on viendra placer les menus sur la gauche et/ou la droite pour avoir un accs constant sur
les diffrentes rubriques du site. Enfin, on viendra placer le corps au milieu (entre les menus ou juste ct) et le pied de page de
la mme manire que la bannire, mais tout en bas du site. Schmatiquement, cela donnerait donc :
www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 544/574

Cliquez sur l'image pour l'agrandir

On peut dcliner ce squelette en diffrentes versions. Par exemple, on pourrait dcomposer le seul et unique menu en deux
menus plus petits, ce qui peut ainsi permettre de "catgoriser" vos rubriques :

Cliquez sur l'image pour l'agrandir

Rien ne nous empche d'ajouter deux autres menus droite du squelette par exemple, c'est selon vos besoins et vos envies :

Cliquez sur l'image pour l'agrandir

C'est vous de faire comme bon vous semble. Chaque design se doit d'tre unique, mais sachez toutefois que l'un se dmarque
de l'autre grce aux couleurs et au style adopt le plus souvent. Vous pouvez donc vous permettre de "copier" la disposition du
site voisin condition que vous utilisez d'autres techniques de cration qui vous permettront de vous dmarquer
significativement. Bien entendu, si la structure de votre squelette est nouvelle, il sera unique. Cela dit, disposer les menus, la
bannire et compagnie de manire innovante se fait de plus en plus complexe et donc, par extension, de plus en plus rare. Eh oui,
vous n'tes pas les premiers avoir essay.

D'autant qu'une bonne partie de ceux qui ont essay d'adopter une structure nouvelle et inconnue (autrement dit "leur"
squelette) se sont littralement ramasss car cela ne suffisait pas rpondre aux critres permettant une navigation fluide et
accessible pour tous leurs visiteurs.
C'est pourquoi nous ne nous y risquerons pas dans ce cours. Libre vous ensuite de crer votre squelette, c'est aussi comme a
qu'on innove et qu'on sort un peu du lot.
La bannire principale
Les choses srieuses peuvent maintenant commencer : nous allons apprendre concrtiser ce que l'on a commenc.
On passe donc une toute nouvelle tape : aprs l'laboration, la ralisation.

Bien entendu, nous allons reprendre tous les lments que nous venons de traiter pour crer le design de notre site, autrement
dit sa charte graphique.

Il ne s'agit pas d'un TP comme vous avez dj pu en faire dans la deuxime partie portant sur la retouche
photographique. Pour le moment, tout ce que vous lirez sera purement thorique, mme si je vous conseille toujours de
pratiquer en mme temps que moi, je vous recommande cette fois-ci de lire seulement car j'ai justement prvu un TP
pour que vous puissiez mettre en uvre les connaissances acquises dans ce chapitre et le suivant.

Une "bannire" ?

Au risque de me rpter, on parle de bannire (tire de l'anglais "Header") pour dsigner l'en-tte du site. C'est le cur graphique
du site dans la mesure o c'est elle qui va d'abord accueillir le logo, mais aussi jouer le rle de "premire image" vis--vis des

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 545/574

utilisateurs qui se connectent sur votre site.

Vous l'aurez donc compris, crer la bannire, c'est crer une base graphique sur laquelle va dcouler l'ensemble de la charte
graphique. Bien entendu, si le logo est dj ralis, on va crer une bannire qui puisse s'adapter au logo. On peut aussi faire
l'inverse si le logo n'est pas encore ralis.

L encore, on va devoir reprendre les bases dj cres. Qu'est-ce que cela signifie ? Eh bien, on va prendre en compte les
informations dj rflchies plus haut :

Thme du site : de quoi va parler mon site ?


-> Choix des lments graphiques qui peuvent ventuellement figurer sur ma bannire.
Style graphique : quoi va ressembler mon site ?
-> Choix des textures et des tons de couleur adopter.
Couleurs du site
-> Choix des couleurs en fonction des tons choisis.

En ce qui me concerne, Je vais devoir crer une charte graphique reprenant les bases de mon logo : couleurs, style graphique, ...
Quant vous, je vous rappelle que vous aurez tout le temps d'y rflchir quand vous travaillerez sur le TP qui arrive. Du coup,
pour le moment, contentez-vous de regarder "le pourquoi du comment", vous travaillerez aprs.

Ralisation

Avant de crer quoi que ce soit, on va devoir choisir les dimensions de notre zone de travail. Pour le moment, nous allons crer
une zone de travail par lment du design. Donc, nous crerons une zone de travail spcialement pour la bannire. Bien sr, la
largeur que vous lui dfinirez sera la largeur que vous donnerez l'ensemble de votre site.

Je vous conseille vivement d'opter pour un design fixe pour le moment. Si vous prfrez raliser un design extensible, il vous
faudra prvoir le coup en laissant un espace qui puisse s'tirer lorsque vous crerez votre image. On ne va pas se prendre le
chou, je crois qu'il est plus judicieux de se lancer sur un design fixe.

Nous partirons sur une base de 1024 pixels de largeur pour 140px de hauteur (longueur) :

La bannire est maintenant prte subir des modifications, ou plutt, elle est prte recevoir un peu de notre art.

Posons-nous quelques questions. De quoi parle mon site ? Mettons que le thme principal sera la nature, personnellement je
pense tout de suite :

Herbe
Feuilles
Arbres
Fleurs
Bois
Papillons
Soleil
Nuages
Oiseaux
...

Cette liste est interminable, c'est pourquoi il va falloir piocher dedans et tenter de mettre 3 4 couleurs en vidence pour donner
du caractre au site. Pour ce thme-ci, on pourrait par exemple retenir du vert, du bleu ou encore du blanc. Le vert pour l'herbe et
www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 546/574

les plantes, le bleu pour le ciel et l'eau et enfin, le blanc pour donner cette impression de "jour" et instaurer une ambiance gaie et
joyeuse. Rien ne nous empchera, au fur et mesure que nous crerons, d'ajouter quelques lments colors rappelant eux aussi
la nature et la vivacit qui s'en dgage, condition que ce soit ce thme que vous choisissiez lors du TP venir.

Il s'agit ici des couleurs majoritaires et secondaires du site. Mais encore une fois, on pourra par la suite ajouter des dtails
permettant de donner un peu de chaleur l'aspect gnral du site justement. Pour l'instant, c'est les couleurs principales du site.

Cela veut dire que ces couleurs-l figureront forcment dans la bannire ?

Ce n'est pas une obligation, c'est juste plus simple. Maintenant, on peut trs bien travailler notre bannire de sorte qu'elle soit
totalement diffrente du reste du design, et notamment au niveau de ses couleurs... puis la travailler de sorte qu'elle ne fasse pas
"tache". Mais nous, lors du prochain TP, on ne va pas se compliquer la vie car on aura dj bien faire, donc on restera sur des
couleurs plus ou moins similaires partout et on verra plus tard si on peut tenter autre chose.

Le logo

Si vous disposez dj d'un logo, alors vous pouvez d'ores et dj imaginer le placer quelque part sur votre bannire. De toute
manire, rien n'est fix, vous pourrez modifier son emplacement plus tard si cela vous semble plus pertinent.

Moi, je vais travailler avec le logo sur la musique pour cet exemple. Je vous rappelle rapidement quoi il ressemble.

Je ne sais pas encore o est-ce que je vais le mettre exactement sur ma bannire.

Le fond

La deuxime tape consiste crer le fond de notre bannire. On va donc d'abord choisir des couleurs. Pour cela, nous allons
retenir les couleurs principales du logo afin de les rutiliser pour l'ensemble de notre charte graphique et de garder une certaine
homognit. J'ai retenu ceci :

Pour choisir le fond, en ce qui me concerne, j'ai pioches les couleurs qui me semblaient tre intressantes marier avec

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 547/574

l'ensemble de mon logo. Je n'ai pas cherch bien loin, j'ai choisi le blanc. J'ai donc ralis un dgrad de gris trs proches du
blanc pour donner une apparence relativement claire la bannire.

C'est plutt simple et lger, mais c'est aussi accrocheur. Si j'avais choisi un fond orang, j'aurais eu une image avec plus de
caractre, mais pas forcment trs cohrente avec le orange du mot "musique" dans le logo.

A ce moment-l, on peut toujours essayer de modifier les couleurs du logo, mais ce n'est pas trs loyal. Quand vous on donne
un logo, il vaut mieux s'y adapter plutt que faire l'inverse.

Malgr tout, c'est un fond relativement simple que nous avons cr ici. Moi, j'aimerais faire quelque chose d'un peu plus pouss
pour que ma bannire ne soit pas un simple dgrad de couleurs comme on peut en voir un peu partout. Pour rpondre ce
problme, on peut utiliser bon nombre d'outils de cration comme par exemple la plume. Elle est faite pour a, on ne va donc pas
s'en priver.

Qu' cela ne tienne, je vais utiliser la plume et crer des sortes de "vagues" de diffrentes couleurs, mais toujours dans une
nuance de gris.

En orange, a donnerait :

L'avantage de la bannire par rapport au logo, c'est que l'on a aucune restriction. Le logo, il faut au possible ne pas trop le
surcharger pour des raisons que l'on a dj voques dans le chapitre prcdent, tandis que la bannire est l pour donner le ton
l'ensemble de votre design. On peut donc se faire plaisir sans trop rflchir aux ventuelles contraintes techniques, mme s'il
faut toujours tre raisonnable videmment.

Valeur ajoute

Vous vous souvenez de la liste d'ides que j'avais faite pour les objets que j'intgrerai mon logo ? Et bien figurez-vous que je
vais la rutiliser pour ma bannire.

Ah, tu veux dire que tu vas insrer des notes par exemple dans la bannire ?

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 548/574

Exactement ! D'ailleurs, je vais effectivement reprendre l'ide des notes de musique, de quoi personnaliser un peu plus ma
bannire :

Et en orange...

Si l'on devait rsumer, on pourrait en conclure qu'une bannire se construit en trois tapes :

D'abord, on place le logo.


Ensuite, on cre le fond en fonction du logo.
Enfin, on ajoute quelques lments par-ci par-l pour personnaliser la bannire et la diffrencier des autres.

C'est comme cela qu'on diffrencie une bannire d'une autre. Dj, il faut que le logo soit unique, mais a vous le savez. Ensuite,
on cre un fond pour instaurer une ambiance et donner un ton la bannire et donc, l'ensemble du design (je vous rappelle que
la bannire est la premire chose que l'on remarque). Enfin, on cre de nouveaux lments, qu'il s'agisse d'objets, de formes
abstraites ou quoi que ce soit d'autres, permettant ainsi de donner de la valeur ajoute et rendre la cration vraiment votre
image.

Pour l'heure, on peut dire que cette bannire est "termine". Nous pourrons ventuellement lamliorer par la suite, mais en l'tat
actuelle, elle conviendra trs bien pour notre exemple.
La liaison : menus et boutons
La premire tape est termine, nous avons notre bannire. On va maintenant pouvoir continuer notre design en prenant notre
maquette pour base. La maquette justement, vous en souvenez-vous ?

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 549/574

Si l'on s'y rfre, il nous reste trois objectifs : raliser les menus, le corps et le pied de page. Nous nous concentrerons sur les
menus.

Qu'est-ce qu'un menu ?

Le menu recentre les diffrentes sections de votre site, il s'agit de leur porte d'entre. Par exemple, tous les textes que vous
pouvez lire gauche de ces textes sont contenu dans le menu "Cours". Et en effet, il s'agit des diffrents cours du Site du Zro,
classs par catgorie :

Site Web
Programmation
Systmes d'exploitation
Graphisme
...

Chaque catgorie centralise les cours qui lui sont relatifs. Vous trouverez par exemple le cours Photoshop dans la catgorie

www.siteduzero.com
Partie 3 : La cration sous toutes ses formes ! (web) 550/574

"Graphisme". Je suis mme convaincu que c'est via ce lien que vous avez atterri ici.

En bref, un menu est une partie de votre site via laquelle le visiteur peut accder aux diffrentes sections de votre site. C'est pas
plus compliqu.

Un site n'est pas forcment constitu de plusieurs menus comme vous pourriez le croire par rapport notre maquette. Tout
dpend des besoins : si le site a besoin de plusieurs menus car il y a beaucoup de pages consulter, alors