Atelier retouche Photo basée sur le site pixlr.com Animations numérique de territoire Office de Tourisme de Châtelaillon-Plage. Mars 2014

1. PARCOURS
MON IMAGE SUR LE WEB
ATELIER
Retouche photo
LUNDI 17 MARS

2. LA RETOUCHE PHOTO
» Les principes de base de la photo numérique
» Pixlr : présentation de l’interface
» Outils de retouche photo
» Comment créer une nouvelle image
» Les calques, kezako ?
» J’applique
…. Et maintenant au boulot !

3. LA RETOUCHE PHOTO
Principes de base de la photo numérique
Définition, résolution, DPI, pixels …
LES DPI
PIXELS
DPI
Un pixel est le plus petit élément
d'une surface d'affichage (écran,
téléviseur) auquel on peut associer
une couleur ou un niveau de gris et
une intensité.
Dans le cas d'un écran en noir et
blanc, chaque pixel correspond à
un point.
En revanche, dans le cas d'un écran
couleur, chaque pixel est constitué
de trois points de couleurs primaires
(rouge, vert, bleu). En variant
l'intensité de chacun de ces points,
on peut afficher des milliers de
couleurs différentes.
DPI DEFINITION
La quantité de pixels composant un
écran détermine sa résolution,
exprimée en points par pouce (un
pouce représentant 2,54 cm). Cette
unité de mesure est abrégée PPP en
français ou DPI en anglais pour Dots
Per Inch.
Par exemple, une résolution de 300
dpi correspond à 300 colonnes et
300 rangées de pixels (soit 90.000
pixels) sur un pouce carré de
surface.
La définition correspond au nombre
de points constituant une image.
Elle indique la "dimension" de cette
image.
Par exemple, une définition de
640x480 correspond à une image
présentant 640 pixels en largeur et
480 en hauteur.

4. LA RETOUCHE PHOTO
Principes de base de la photo numérique
Pour le web, pour l’impression
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).
Pour le Web :
Résolution : 72 dpi
Taille maxi : 1 Mo
Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo

5. LA RETOUCHE PHOTO
Principes de base de la photo numérique
Les formats d’image
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).
Pour le Web :
Résolution : 72 dpi
Taille maxi : 1 Mo
Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo
JPG / JPEG : Joint Photographic Experts Group
Format d’image comprimé le plus utilisé sur le web
Attention : lorsqu’il est comprimé à plusieurs reprises la qualité globale d’une image JPG se réduit.
GIF : Graphics Interchange Format
Ce sont des fichiers basse résolution les plus couramment utilisés. Permet la transparence et les
images animées
PNG : Portable Network Graphics
Performant, il réunit presque tous les avantages du JPEG et du GIF et permet les fonds
transparents. La compression proposée par ce format est d’une qualité 5 à 25 % meilleure que la
compression GIF.
Format compresse pour le Web

6. LA RETOUCHE PHOTO
Principes de base de la photo numérique
Les formats d’image
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).
Pour le Web :
Résolution : 72 dpi
Taille maxi : 1 Mo
Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo
TIF : Tagged Image File Format
Il est considéré comme étant le format le plus fiable pour des impressions de haute qualité comme pour le textile, les
tissus, etc.
Attention : fichiers de relativement grandes dimensions, il est aussi trop lourd pour internet, aucun navigateur Web ne le lit
directement.
BMP: Bipmap
Format standard d’image non compressé comme le TIFF. L’un des premiers formats utilisés par Windows. Assez rarement
utilisé aujourd’hui.
PSD : Document Photoshop
C’est le format favori des photographes et infographistes. Les images peuvent être créées en couches de calques. Il est lu
par tous les logiciels de retouche photo. Le format .PSD est le format d’enregistrement natif de Photoshop.
Attention : ce format d’image n’a aucune compression. Tous les calques et couches sont conservés. Les fichiers peuvent atteindre
rapidement une taille gigantesque.
Format non compressé pour l’archivage et l’impression

7. LA RETOUCHE PHOTO
Principes de base de la photo numérique
Calibrer son écran
LES DPI Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo
http://www.photographe-de-mode.com/calibration-ecran.htm
Tester son écran
Paramétrer son ordinateur
 Cliquer sur le panneau de configuration
 Taper « calibrer son écran » dans le moteur de recherche
 Appliquer les directives
 Modifier la luminosité et le contraste
Chaque œil a sa propre perception des couleurs et
de la luminosité !

8. LA RETOUCHE PHOTO
L’éditeur photo
Le choix d’un éditeur de photo
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).
Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo
PIXLR : un éditeur en ligne
-Pas de logiciel à
télécharger
-Pas d’obsolescence
- Un outil complet
-Usage des calques
Les logiciels disponibles
http://pixlr.com/

9. LA RETOUCHE PHOTO
pixlr.com
L’interface : j’ouvre une image, je crée une image
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).
Pour l’impression:
Résolution : 300 dpi
Taille mini : 5 Mo

10. LA RETOUCHE PHOTO
pixlr.com
L’interface : Menu, barre d’outils
LES DPI
Le DPI est une unité de mesure de la résolution. On parle de points par pouce
(PPP) ou de pixels par pouce.
Plus il y a de points par pouce, meilleure est la résolution d'une image. Les
détails seront plus fins. La résolution est donc à distinguer de la définition, qui
donne le nombre de pixels affichés sur un écran (par exemple 1.280 x 1.024).

11. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Fichier
Importance du nom
 pour l’archivage
Le référencement
Taille en pixels
(définition par défaut)
Fichier en
fonds
transparent
à vous !

12. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Editer
à vous !
Permet d’annuler toutes les
modifications Ctrl+Z
Permet de modifier librement la forme
de l’image Ctrl+T
Permet de recadrer Ctrl+K
Exercice
Je crée une nouvelle image de
350 px de Haut sur 350 de large
en 72 dpi en fonds transparent
 je la sauvegarde

13. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Image Je modifie la taille de mon image
Je modifie la taille de la zone autour
de mon image : ajout de couleur en
hauteur ou/et largeur
Exercice
 je modifie la zone de
travail de mon image
 je la recadre
 j’annule mes modifications
Je retourne mon image

14. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Réglage Je modifie la lumière, les couleurs et les
contrastes
Exercice
 recadre ma photo
J’optimise la lumière et les
contrastes
 j’applique un effet
 j’annule les modifications
Le logiciel choisit le meilleur compromis
Quelques effets

15. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Filtres Filtre pour créer des flous ou netteté
Exercice
 je recadre ma photo
 je teste les filtres
Filtre pour modifier les pixels
Filtres lumière
Filtres contours

16. LA RETOUCHE PHOTO
pixlr.com
Etape 2 : Le Menu
LES DPI
Visualiser Zoom CTRL ++ ou +-
Taille réelle de l’image
Affichage du logiciel plein écran

17. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : La Barre d’outils
LES DPI
En détails
Outils de sélection
et recadrage
Outils couleurs,
texte…

18. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : Outils de sélection
LES DPI
Recadrage
L'outil de recadrage permet de modifier la zone de
travail liée à l'image en déterminant quelle section
rectangulaire de l'image sera préservée
Aspect ratio
Ceci permet de faire un recadrage avec des proportions
précises: par exemple un recadrage carré sera le résultat
d'une ratio 1 pour 1, un recadrage rectangulaire pourrait être
deux fois plus large que haut avec un ratio de 2 pour 1.
Taille de sortie
On peut spécifier la taille du recadrage en pixels. La sélection
sera limitée à une sélection ayant le même rapport
proprotionnel de la largeur et la hauteur indiquée, et la
nouvelle image sera de la taille indiquée.
Déplacement
L'outil de déplacement sert à déplacer soit les sélections
actives, soit l'ensemble de l'image, sur la surface de la zone de
travail.
Sélection
L'outil de sélection de base permet de rendre
actives des régions rectangulaires de l'image afin
que les opérations ne portent que sur elles.
Rectangle et ovale
Permet de choisir la forme rectangulaire ou circulaire pour la
région à sélectionner.
Conserver
Pas de restriction
Permet une sélection suivant le déplacement de la souris
Aspect Ratio
Force la forme de la sélection en vertu des paramètres
Hauteur et Largeur, en unité.
Fixed size
Fait une sélection de taille fixe suivants des
paramètres Hauteur et Largeur, en pixels.
Hauteur et Largeur
Champs éditables pour inscrire les valeurs voulues
Lasso
Le lasso permet de faire des sélections de régions à main
levée, c'est à dire en suivant le parcours de la souris.
À main levée signifie en suivant le mouvement de la
souris dans un mouvement continue, alors qu'avec le
polygone on clique au différents points qui seront reliés
l'un à l'autre jusqu'au double-clique final qui terminera
cette action de sélection.
Baguette magique
Par un simple clic de la souris, a baguette magique fait
une sélection d'une région en vertu de la couleur sous la
souris au moment du clic. La sélection comprendra tous
les pixels de l'image qui répondent aux caractéristiques
choisies dans la barre des options.

19. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : Outils de dessin
LES DPI
Crayon
Outil de dessin de base qui trace le parcours de la souris,
comme le ferait à peu près un crayon sur une feuille de
papier. Le choix du type de pointe permet de faire des effets
sur la trace de la pointe.
Type - Concerne les types applicables de la pointe du
crayon
 Plain - Une pointe simple, qui trace le parcours du
curseur seulement.
Sketchy - Effet de remplissage hachuré
Trail - Effet de piste, suivi de la trace
Shaded - Effet de remplissage ombragé
Sticky - Effet d'aquarelle
Ink - Effet d'encre: si le curseur bouge rapidement, la
couleur est plus légère, et au contraire, si on bouge
moins rapidement la couleur est plus pleine.
Taille - Taille de la pointe
Opacité - Niveau de transparence de la couleur laissée
sur la trace
Total - Degré de l'effet, en étendu ou sensibilité au
mouvement du curseur
Pinceau
Similaire au crayon mais avec la possibilité de changer
de pointes pour appliquer la couleur.
Hard tip - Ne dessine que la partie pleine du
tracé sans effet de flou au bordure du tracé.
Disperser - Fait décaler la pointe de part et
d'autre du parcours du curseur.
Lueur diffuse - Laisse des pixels vides, c'est à
dire transparent, sans couleur, dans la trace.
Gomme
Avec cet outil on peut gommer, effacer les pixels de
l'image.

20. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : Outils de dessin(2)
LES DPI
Duplication
Cet outil sert à recopier les pixels de l'endroit initialement
identifié en cliquant avec le touche Ctrl enfoncée, vers
l'endroit où on peinture la surface (après avoir relâché le
bouton de la souris).
Remplacement
Cet outil permet de peinturer uniquement les pixels de
la couleur identifiée initialement, par celle de la couleur
active.
Dessin
L'outil de base de Pixlr Editor pour dessiner des formes
géométriques de base
Etape 3 : Outils
Pot de peinture
Cet outil sert à remplir une surface d'une certaine
couleur par une autre couleur.
Dégradé
Cet outil permet d'appliquer des dégradés de couleurs. Le
dégradé s'applique à la section active de l'image
Dégradé - Sélecteur des couleurs du dégradé
Type
Linéaire - Applique le dégradé entre le point de départ
et le point de destination, entre le clic initial et le déclic
(relachement du bouton de souris) final.
Radial - Appllique de dégradé circulairement à partir du
clic initial et jusqu'au rayon du déclic

21. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : Outils de modification
LES DPI
Goutte d’eau
Avec cet outil on peut augmenter le flou afin d'atténuer des
arêtes trop rigides.
Netteté
Avec cet outil on rend les contours moins flous, les arêtes
plus nettes en augmentant le contraste.
Doigt
Avec cet outil on peut étendre les couleurs comme si on
passait le doigt sur de la peinture fraîche, en les
mélangeant au passage avec les autres couleurs qu'elle
rencontre.
Eponge
Avec cet outil on éponge la teinte pour en diminuer la brillance
(desaturation) ou en augmenter la brillance (saturation).
Densité et Densité +
L’outil densite sert à augmenter la luminosité
L’outil densité + sert à diminuer la luminosité.
Atténuation yeux rouges
Avec cet outil on peut gommer l'effet des yeux rouges qu'on
retrouve fréquemment dans les photos de personnes prises
avec un flash aligné avec l'objectif
Gommage défauts
Avec cet outil on peut gommer, effacer les pixels en bloc. Le
logiciel distribue alors les couleurs et les atténue
Fluidité
Avec cet outil on peut gonfler une région. Cet outil s'utilise
en cliquant sur un point et de manière circulaire, le centre
est gonflé vers les bordures du cercle.
Contraction
Avec cet outil on peut effectuer la contraction d'une
région, c'est à dire concentrer les pixels du cercle de l'outil
vers le point central, entraînant les pixels se trouvant en
périphérie du cercle.

22. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : Outils divers
LES DPI
Prélèvement de couleur
Avec cet outil on peut prélever une couleur de l'image
pour en faire la couleur active.
On clique simplement sur le pixel ayant la couleur qu'on
désire activer et ce la sur l'ensemble du cadre de l'application
Pixlr Editor (pas seulement l'image, donc).
Texte
Main
Avec cet outil on peut déplacer l'image dans le cadre de
visualisation lorsque l'image est plus grande que ce cadre
Avec cet outil on peut ajouter du texte à notre image.
Chaque nouveau bloc de texte apparaît sur un nouveau
calque créé pour lui. Tant que le calque n'est pas pixellisé,
on peut revenir y éditer le texte avec sa boîte de dialogue.
Zoom
Lorsque cet outil est actif, les clics de la souris permettent
de zoomer sur l'image, c'est à dire en agrandir le point de
vue (sans modifier la taille réelle de l'image).

23. LA RETOUCHE PHOTO
pixlr.com
Etape 3 : La Barre à outils
Effacer un élément d’une image : les différentes étapes
1. j’utilise l’outil « selection » pour sélectionner la zone à
supprimer
2. Je choisis l’outil « tampon de duplication »
3. Ctrl+ sur la zone à copier
4. Je clique sur la zone à supprimer et la remplit de la couleur
ou motif environnant de couleur
AVANT
APRES

24. LA RETOUCHE PHOTO
pixlr.com
Etape 4 : les calques
A quoi ça sert ?
Unité de contenu permettant la séparation
des diverses parties d'une image complète,
superposé l'un sur l'autre. Chaque calque
représente une couche de l'image qui peut
être travaillée indépendamment des
autres. Généralement, l'image complète
est constitué des l'ensemble des calques
fusionnés.
Navigateur : informations
sur votre sélection
Les différents calques
Historique des
modifications
Onglet calque
Opacité du calque
Création d’un masque
Style de calques Créer un calque
Supprimer un calque
Coché = visible

25. =
LA RETOUCHE PHOTO
pixlr.com
Etape 4 : les calques
Calque et format d’images
Pour conserver les différents calques,
enregistrer l’image au format PXD
( = format PSD photoshop)
Jpeg, png, tiff… ces formats compressent les
calques lors de l’enregistrement
= plus accès aux différents calques, plus de
aucune modification possible

26. LA RETOUCHE PHOTO
pixlr.com
Etape 4 : les calques
Le menu calque
 attention à l’ordre de vos
calques
 renommer vos calques
 si vous les fusionnez ou aplatissez
l’image, vous ne pourrez plus les
modifier
 Styles de calque : modifier le
calque sélectionné au préalable
(cliquer dessus)
 supprimer un calque : le
sélectionner et cliquer sur la
poubelle
!!

27. LA RETOUCHE PHOTO
pixlr.com
Etape 4 : les calques
Le masque
Un masque est une surface qu'on peut ajouter sur un calque pour en masquer, lire
cacher, certaines parties afin d'opérer des modifications sur les parties du calque
qui ne seront pas masquées. Le masque doit être appliqué afin d'altérer le calque
en éliminant du calque tout ce qui est masqué.
Le masque créé cache le logo
++
Clic droit souris : gestion
des calques et masques

28. LA RETOUCHE PHOTO
pixlr.com
Etape 5 : Créer un image sur fonds transparent
En 10 étapes
1. Créer une nouvelle image - cocher « transparent »
2. Ouvrir l’image du logo Gîte de France
3. Utiliser l’outil « Baguette magique »
4. Clic droit : inverser la sélection
5. choisir l’outil « sélectionner » + Ctrl c
6. Ctrl v sur le fond transparent
7. Enregistrer au format png
8. Choisir l’outil « sélection » pour sélectionner l’image +
Ctrl c
9. Ctrl v sur l’image de support
10. Enregistrer au format
- pxd pour garder les calques
- jpeg pour la mise en ligne

29. LA RETOUCHE PHOTO
pixlr.com
Etape 6 : je me lance
Je crée une bannière à mon image

30. LA RETOUCHE PHOTO
pixlr.com
Etape 6 : je me lance
Je crée une bannière à mon image : les étapes
1. Je recadre mon image, je lui impose une taille prédéfinie « taille de
sortie »
2. Je modifie la lumière, le contraste, j’utilise des filtres
3. Je crée une image transparente
 avec un dégradé
 Un texte avec style de calque
 je l’intègre sur ma bannière
4. Je colle cette image transparente sur ma bannière
5. J’enregistre sous les 2 formats :
 PXD pour l’archivage
 Jpeg pour intégrer dans mon site
6. C’est beau !!!