Office de Tourisme de Royan

Atelier PIXLR Editeurenligne

RetouchezvosphotosavecPIXLR

Faire rêver, séduire, donner envie à travers l’image

« Une image vaut mieux que 1000 mots »Confucius

Programme •  Vocabulaire technique - rappel •  Présentation de l’éditeur •  Outils et Conseils •  Exercices pratiques

Retoucher ses images comme un pro avec Pixlr Editor

Quelques rappelssur l’image numérique

PixelUnité minimale permettant de mesurer la définition d’une image numérique À chaque pixel sont associées une couleur (en RVB) et une intensité lumineuse DéfinitionLa définition correspond au nombre de points d’une image (800 x 600 px) RésolutionEn imprimerie, on définit la taille d’une image composée de pixels en cm ou en pouce. Ces données s’expriment en nombre de pixels par unité de surface. Cette densité de pixels est appelée ‘résolution’ DPI ou PPP (Dots per inch / Points par pouce / 1 pouce = 2,54 cm) La trame de base constituant le mappage d’une image numérique, que ce soit en imprimerie, ou en photographie numérique, est définie en DPI ou PPP

Les images numériques sont des images matricielles communément appelées Bitmap ou Carte de points. On distingue : Les images compressées (pour le web)

• JPG Joint Photographic Expert Group • PNG Portable Network Graphic • GIF Graphics Interchange Format

Les images non compressées (pour l’impression)

• TIFF Tagged Image File Format • BMP Windows BitMap • EPS Encapsulated Poscript (vectoriel ou Bitmap)

Les formats

Vous pouvez…Réduire une image dans une résolution plus faible

Vous ne devez jamais…Agrandir une photo basse définition : effet escalier, flou, pixellisé…

Imprimerie : 300 DPI - Web : 72 DPI

Les résolutions

www.pixlr.com

PIXLR

Éditeur de photo en lignequi fonctionne dans votre navigateur

PIXLR

Il est gratuit !Rien à télécharger, rien à installer….

Éditeur de photo en lignequi fonctionne dans votre navigateur

www.pixlr.com

PIXLR EXPRESS est un éditeur de photos en ligne gratuit. Simple et ludique, il permet de corriger rapidement vos photos,

d’appliquer des superpositions, des filtres ou d’y coller des stickers.

PIXLR EXPRESSWEB APPS

www.pixlr.com

PIXLR EDITOR

PIXLR EDITOR est un éditeur de photos en ligne performant, pour tous vos besoins.

Cette solution vous donne plein contrôle sur vos images,

WEB APPS

www.pixlr.com

MOBILE PIXLR MOBILE

www.pixlr.com

L’application Pixlr est un éditeur de photo gratuit puissant et amusant qui vous permet

de recadrer rapidement, tourner, et affiner vos images.

PIXLR-O-MATIC

www.pixlr.com

PIXLR-O-MATIC est un outil d'édition pour mobile gratuit et amusant pour

ajouter des effets rétro et transformer vos photos en images vintages.

MOBILE

www.pixlr.com

PIXLR DESKTOP transforme vos images de tous les jours en œuvres d'art.

DESKTOP PIXLR DESKTOP

Cet éditeur en ligne propose une large gamme d’outils

et de fonctionnalités, très proches du logiciel star d’Adobe : Photoshop

Présentation

Les outils

Astuces

Pour connaître le nom de l’outil survolé, laissez le pointeur sur l’icône

pendant quelques secondes ; une bulle vous donnera

des informations supplémentaires

Les outils de sélection

L’outil permet de recadrer la zone de travail Options : - Pas de restriction (libre)

- Aspect ratio (rapport largeur/hauteur) - Taille de sortie (pixel)

Recadrage

Déplacement

Attention ! Si on déplace la sélection hors du cadre de travail, cette partie sera supprimée lors de l’enregistrement dans un format autre que PXD

Les outils de sélection

L’outil permet de ne sélectionner qu’une partie de l’image Options : - Choix entre 2 formes (rectangle et oval)

- Aspect ratio (rapport largeur/hauteur) - Taille fixe (400x300 pixels par exemple) - Plume (contour progressif) - lissage (en cas de sélection complexe)

Sélection

Lasso

L’outil permet de sélectionner à main levée, en entourant ou contourant la zone Options : - Main levée (cliqué-glissé)

- Polygone (de clic en clic) - Plume (contour progressif / 0=net) - lissage (assouplie le contour)

Les outils de sélection

L’outil permet une sélection par la couleur cliquée. On ajoute une autre couleur en maintenant la touche SHIFT (Maj.) du clavier enfoncée. Options : - Tolérance : plus le seuil croît, plus la sélection englobe de

couleurs avoisinantes - Lissage (adoucit les couleurs) - Contigu : Si décoché, la sélection se fait sur toutes les zones similaires de l’image

Baguette magique

Les menus

Comme sur Photoshop, il est possible d’ouvrir plusieurs images.

Les fenêtres se superposent, et on passe de l’une à l’autre en cliquant

sur l’image désirée (pratique pour le photo montage)

Menu Fichier

ExerciceJe crée une nouvelle image de 1000x650 pixels sur fond transparent

Menu Fichier

ExerciceJ’enregistre mon image sur le bureau au format PXD en la renommant ‘maquette’.

Les menusLes différents formats d’enregistrement

Les menus

Les calques fonctionnent comme les celluloïds de dessins animés. Ils se superposent et forment une seule et même image.

Les parties transparentes d’un calque laissent apparaître les calques

situés en dessous.

Pour reprendre l’idée du cartoon, le décor se place en bas de la pile

(arrière-plan), et les personnages ou textes par dessus, en haut de la fenêtre.

Menu Calque

Les menus

Menu Calque

Ce menu permet d’intervenir sur les calques • Nouveau calque ajoute un calque dans la fenêtre (idem bouton à côté de la corbeille) • Ouvrir une image en tant que calque

ajoute une image dans la fenêtre de calques • Fusionner plusieurs calques • Déplacer le calque change l’ordre des calques • Les styles de calque apportent du relief à la sélection (ombre portée, biseau, lueur diffuse,…)

Les menus

Menu Calque

Ce menu permet d’intervenir sur les calques • Pixelliser permet de convertir un contenu vectoriel en image bitmap (ex. Texte) • Ajouter un masque à un calque permet de cacher une partie de l’image. En sélectionnant l’outil ‘Pinceau’, ou dégradé, vous pouvez révéler l’image masquée en la coloriant. • Rotation du calque

tourne le contenu du calque • Symétrie permet d’appliquer un effet miroir au calque

Les menus

Menu Calque

Nouveau calque

Conseil Pensez à renommer vos calques, pour une meilleure organisation.

Les menus

Menu Calque

Supprimer le calque

Les menus

Un calque supérieur peut avoir un effet sur le ou les calques situés en dessous.

Déplacer un calque Sélectionnez-le et glissez-le au bon endroit dans la fenêtre de calques.

Pensez à toujours sélectionner le calque correspondant à votre manipulation

ou transformation

Les menus

Menu Calque

Styles de calques

Les menus

Menu Calque

Styles de calques

Les menus

Menu Calque

Ajouter un masque

Menu Edition

Les menus

Les raccourcis clavier sont quasiment identiques à ceux de Photoshop. Ainsi, la commande ‘Annuler’ (annuler la dernière opération) se fait en appuyant simultanément sur Ctrl et Z, ‘Copier’ Ctrl et C, et ‘Coller’ Ctrl et V.

Menu Edition

Permet de réduire ou agrandir la sélection. Pour redimensionner homothétiquement (en respectant les proportions), vous devez maintenir la touche SHIFT (Maj.) du clavier enfoncée, tout en étirant les poignets de l’image (coins bleus).

Transformation libre (Ctrl+T) Les menus

Menu Edition

Lorsque la taille vous convient, choisissez un autre outil. Apparaît alors un message de confirmation.

Transformation libre (Ctrl+T) Les menus

Les menusSélectionner / Désélectionner

Menu Edition

Si vous souhaitez par exemple copier une partie d’une image pour la coller dans une autre, choisissez l’outil ‘Sélection’. Encadrez d’une ‘marquise’ (rectangle) la zone souhaitée, copiez (Ctrl+C), sélectionnez la 2e image, collez (Ctrl+V) Pour sélectionner l’ensemble de la photo, Allez dans menu ‘Edition’ > Tout sélectionner

ExerciceJ’ouvre deux photos A et B. Je sélectionne une zone de l’image A avec un outil de sélection. Je copie et je colle cette sélection A dans l’image B. J’aplatis l’image et je la copie/colle (ou fais glisser) dans la ‘maquette’.

Les menusSélectionner / Désélectionner

Menu Edition

Inverser la sélection permet de sélectionner le reste de l’image

Les menus

Menu Image

Ce menu permet d’intervenir sur l’image entière

• Taille de l’image Redimensionner l’image au pixel près. • Taille de la zone de travail Recadrer sur une partie de l’image au pixel près. La grille appelée ‘Ancre’ propose de recadrer du centre, du haut, du bas, de gauche ou de droite. • Rotations (tous les calques) Faire pivoter l’image • Symétries (tous les calques) Inverser l’image sur un axe central par ‘effet miroir’ • Recadrer Avec l’outil ‘Sélection’

Les options du menu Image s’appliquent à tous les calques

du document

Les menus

Menu réglage

Modifiez les réglages afin d’optimiser l’image : lumières, couleurs, saturations, contrastes,… Jouez avec les effets proposés : sépia, négatif, solarisation,…

Les options du menu Réglage ne s’appliquent qu’au calque sélectionné

Les menus

Menu filtre

Flou et netteté, effets graphiques, Jeux de lumière, et contours.

Les options du menu Filtre ne s’appliquent qu’au calque

sélectionné

Les outils de dessin

Outil de base permettant de dessiner à main levée avec la souris, le trackpad, ou le doigt. Options : - Type : plusieurs effets sur la mine (simple, crayonnée, plume,…)

- Taille : épaisseur du trait - Opacité : transparence du trait - Total : degré de l’effet

Crayon

Pinceau

Similaire au crayon, cet outil offre la possibilité de changer de pointes pour appliquer la couleur. Options : - Correcteur : pointes

- Opacité : transparence du trait - Hard tip: partie pleine du tracé - Dispersé : effet granuleux tout autour du tracé (craie/pastel) - Lueur diffuse : ajout de bruit

Les outils de dessin

Efface les pixels de l’image Options : - Correcteur de pinceau : pointes

- Opacité : transparence

Gomme

Pot de peinture

Permet de coloriser une zone de l’image Options : - Opacité : densité

- Tolérance: permet d’englober des couleurs avoisinantes - Lissage : adoucit les contours - Contigu : si décoché, la couleur s’applique à toutes les zones identiques de l’image - Tous les calques

Les outils de dessin

Applique un dégradé de couleur à la section active de l’image Options : - Opacité : option globale pour l’application du dégradé

- Dégradé : sélection des couleurs - Type : linéaire ou radial - Mode de distribution : tampon – renvoyer - répéter - Mode : effet sur les calques du dessous

Dégradé

Tampon

Permet de dupliquer une partie de l’image sur une autre. Sélectionnez la zone de référence en maintenant Ctrl+Clic, relâchez, appliquez sur la partie à restaurer ou cacher (ex. photo ancienne) Options : - Correcteur de pinceau : taille de la pointe

- Opacité : transparence - Aligné : force l’alignement du tampon - Ajouter tous les calques : s’applique à tous les calques

Les outils de dessin

Permet de teinter les pixels du clic avec la couleur active Ex. : si je clique dans l’eau d’une photo de bord de mer, et que la couleur active est le rouge, elle se teinte de rouge.) Options : - Correcteur de pinceau

- Tolérance - Faire correspondre la luminosité

Peinture de remplacement

Dessin

Dessiner des formes géométriques Options : - Sélection de forme (carré, bords arrondis, cercle, ovale, trait)

- Opacité - Mode : effets sur les calques inférieurs - Taille de la bordure : contour (couleur active) - Remplir la forme : choix de la couleur

ExercicePour accueillir le futur texte de ma carte de votre visite : •  créez un nouveau calque •  sélectionnez une forme •  Appliquez-lui une couleur •  tracez-la sur le calque vierge •  appliquez-lui une opacité

Menu Edition

Les outils de dessin

Cette 3e section de la palette contient les outils de peaufinage :

• Goutte d’eau : atténue les contours • Netteté : accentue les contours • Doigt : étale et mélange les couleurs • Éponge : diminue ou augmente la brillance d’une teinte • Densité : augmente la luminosité • Densité + : diminue la luminosité • Atténuation yeux rouges : gomme cet effet disgracieux • Gommage défauts (sparadrap) : efface et distribue de nouveaux pixels • Fluidité : gonfle une zone de l’image (bombé) • Contraction : contracte une zone de l’image

Les outils de modification

Prélève la couleur du pixel cliqué

Pipette (outil de prélèvement)

Texte

Options : - Texte (multilignes) - Police (caractères) - Taille (corps) - Style (gras, italique,…) - Couleur

Sert à déplacer l’image

Main

Les outils divers

Agrandit l’image si on clique sur dessus. Le dézoom se fait en maintenant la touche SHIFT enfoncée

Zoom

ExerciceSur votre maquette : •  sélectionnez l’outil Texte •  saisissez vos coordonnées •  choisissez la police de caractères,

le corps, le style... •  positionnez le texte dans la

maquette •  insérez le logo.png

Les outils divers

Pour aller plus loin…

•  Couleurs et dégradés •  Masques •  Conseils

Sélectionnez vos couleurs (roue chromatique, RGB=RVB, nuanciers Web et IMG)

Les couleurs

Les couleursLes dégradés

1.  Créez un nouveau calque 2.  Créez une sélection dans l’image 3.  Sélectionnez l’outil Dégradé 4.  Cliquez sur Dégradé dans la barre d’options 5.  Cliquez sur le curseur de départ puis sur Couleur

Répétez l’opération sur le(s) curseur(s) suivant(s)

Les couleursLes dégradés

Appliquez le dégradé à votre sélection en cliquant et en étirant dans le sens souhaité.

Dans l’exemple : du bas vers le haut

Les masquesAjouter un masque

1.  Faites remonter la photo à masquer et vérifiez que les 2 calques sont visibles

2.  Ajoutez un masque au calque supérieur 3.  Le masque apparaît à côté de celui-ci Assurez-vous qu’il soit toujours sélectionné (liseré rouge)

Les masquesAjouter un masque

•  Sélectionnez l’outil dégradé •  Cliquez sur Dégradé dans la barre

d’options pour sélectionner vos couleurs •  L’opacité de la 2ème couleur du dégradé

doit être à zéro (fondu)

Les masquesAjouter un masque

Appliquez le dégradé en cliquant sur l’image et en étirant dans le sens souhaité afin de créer une transition entre les 2 images

ConseilsNe confondez pas le menu du navigateur avec celui de Pixlr au risque de perdre votre travail…

La gestion de l’affichage des fenêtres se fait par le menu Visualiser

Vos prochains rendez-vous numériques

7-8 DÉCEMBRE 2015Comprendre Google et augmenter la visibilité de son entreprise

8-9 FÉVRIER 2016Créer, animer sa page Facebook et aller plus loin avec Facebook 21-22 MARS 2016Améliorer sa Gestion Relation Client par l’email et créer des campagnes de communication

Merci à tous