Download - Atelier retouche Photo

PARCOURS MON IMAGE SUR LE WEB

ATELIER Retouche photo

LUNDI 17 MARS

LA RETOUCHE PHOTO

Les thèmes du jour

» 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 !

LA RETOUCHE PHOTOPrincipes de base de la photo numériqueDé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.

LA RETOUCHE PHOTOPrincipes de base de la photo numériquePour 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 dpiTaille maxi : 1 Mo

Pour l’impression:

Résolution : 300 dpiTaille mini : 5 Mo

LA RETOUCHE PHOTOPrincipes de base de la photo numériqueLes formats d’image

LES DPI


Pour le Web :




JPG / JPEG : Joint Photographic Experts GroupFormat d’image comprimé le plus utilisé sur le webAttention : lorsqu’il est comprimé à plusieurs reprises la qualité globale d’une image JPG se réduit.

GIF : Graphics Interchange FormatCe sont des fichiers basse résolution les plus couramment utilisés. Permet la transparence et les images animées

PNG : Portable Network GraphicsPerformant, 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

LA RETOUCHE PHOTOPrincipes de base de la photo numériqueLes formats d’image

LES DPI


Pour le Web :




TIF : Tagged Image File FormatIl 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: BipmapFormat standard d’image non compressé comme le TIFF. L’un des premiers formats utilisés par Windows. Assez rarement utilisé aujourd’hui.

PSD : Document PhotoshopC’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

LA RETOUCHE PHOTOPrincipes de base de la photo numériqueCalibrer son écran

LES DPI Pour l’impression:


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é !

http://www.photographe-de-mode.com/calibration-ecran.htm

LA RETOUCHE PHOTOL’éditeur photo

Le choix d’un éditeur de photo

LES DPI




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/

LA RETOUCHE PHOTOpixlr.com

L’interface : j’ouvre une image, je crée une image

LES DPI





L’interface : Menu, barre d’outils

LES DPI



Etape 2 : Le Menu

LES DPI

FichierImportance du nom pour l’archivageLe référencement

Taille en pixels (définition par défaut)

Fichier en fonds transparent

à vous !


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


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


Etape 2 : Le Menu

LES DPI

Réglage Je modifie la lumière, les couleurs et les contrastes

Exercice recadre ma photoJ’optimise la lumière et les contrastes j’applique un effet j’annule les modifications

Le logiciel choisit le meilleur compromis

Quelques effets


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


Etape 2 : Le Menu

LES DPI

Visualiser

Zoom CTRL ++ ou +-

Taille réelle de l’image

Affichage du logiciel plein écran


Etape 3 : La Barre d’outils

LES DPI

En détails

Outils de sélection et recadrage

Outils couleurs, texte…


Etape 3 : Outils de sélection

LES DPI

RecadrageL'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 ratioCeci 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 sortieOn 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 ovalePermet de choisir la forme rectangulaire ou circulaire pour la région à sélectionner.

ConserverPas de restriction Permet une sélection suivant le déplacement de la sourisAspect RatioForce la forme de la sélection en vertu des paramètres Hauteur et Largeur, en unité.Fixed sizeFait une sélection de taille fixe suivants des paramètres Hauteur et Largeur, en pixels.

Hauteur et LargeurChamps éditables pour inscrire les valeurs voulues

LassoLe 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.


Etape 3 : Outils de dessin

LES DPI

CrayonOutil 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 traceShaded - 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

PinceauSimilaire 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.


Etape 3 : Outils de dessin(2)

LES DPIDuplication

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).

RemplacementCet 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 peintureCet 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


Etape 3 : Outils de modification

LES DPI

Goutte d’eauAvec 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.

DoigtAvec 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.

EpongeAvec 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 rougesAvec 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éfautsAvec 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.

ContractionAvec 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.


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).

TexteMain

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).


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


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

=



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



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

!!



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


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 France3. Utiliser l’outil « Baguette magique »4. Clic droit : inverser la sélection5. choisir l’outil « sélectionner » + Ctrl c6. Ctrl v sur le fond transparent7. Enregistrer au format png8. Choisir l’outil « sélection » pour sélectionner l’image

+ Ctrl c9. Ctrl v sur l’image de support10. Enregistrer au format

- pxd pour garder les calques- jpeg pour la mise en ligne


Etape 6 : je me lance

Je crée une bannière à mon image


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 filtres3. 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ère5. J’enregistre sous les 2 formats :

PXD pour l’archivage Jpeg pour intégrer dans mon site

6. C’est beau !!!