Office de Tourisme
de Royan
Atelier PIXLREditeur	en	ligne	
Retouchez	vos	photos	avec	PIXLR
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
Retouche...
Quelques rappels
sur l’image numérique
Pixel
Unité minimale permettant de mesurer la définition d’une image numérique
À ch...
Les images numériques sont des images
matricielles communément appelées Bitmap ou
Carte de points. On distingue :
Les imag...
Vous pouvez…
Réduire une image dans une
résolution plus faible
Vous ne devez jamais…
Agrandir une photo basse
définition :...
www.pixlr.com
PIXLR
Éditeur de photo en ligne
qui fonctionne dans votre navigateur
PIXLR
Il est gratuit !
Rien à télécharger, rien à installer….
Éditeur de photo en ligne
qui fonctionne dans votre navigate...
PIXLR EXPRESS est un éditeur de photos en ligne gratuit.
Simple et ludique, il permet de corriger rapidement vos photos,
d...
PIXLR EDITOR
PIXLR EDITOR est un éditeur de photos en ligne performant,
pour tous vos besoins.
Cette solution vous donne p...
MOBILE PIXLR MOBILE
www.pixlr.com
L’application Pixlr est un éditeur de photo gratuit
puissant et amusant qui vous permet
...
PIXLR-O-MATIC
www.pixlr.com
PIXLR-O-MATIC est un outil d'édition
pour mobile gratuit et amusant pour
ajouter des effets ré...
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 : Photo...
Présentation
Les outils
Astuces
Pour connaître le nom de l’outil survolé,
laissez le pointeur sur l’icône
pendant quelques secondes ;
u...
Les outils de sélection
L’outil permet de recadrer la zone de travail
Options : - Pas de restriction (libre)
- Aspect rati...
Les outils de sélection
L’outil permet de ne sélectionner qu’une partie de l’image
Options : - Choix entre 2 formes (recta...
Les outils de sélection
L’outil permet une sélection par la couleur cliquée.
On ajoute une autre couleur en maintenant la ...
Les menus
Comme sur Photoshop,
il est possible d’ouvrir plusieurs images.
Les fenêtres se superposent,
et on passe de l’un...
Menu Fichier
Exercice
J’enregistre mon image
sur le bureau au format PXD
en la renommant ‘maquette’.
Les menusLes différen...
Les menus
Les calques fonctionnent comme les celluloïds
de dessins animés. Ils se superposent
et forment une seule et même...
Les menus
Menu Calque
Ce menu permet d’intervenir sur les calques
• Nouveau calque
ajoute un calque dans la fenêtre
(idem ...
Les menus
Menu Calque
Ce menu permet d’intervenir sur les calques
• Pixelliser
permet de convertir un contenu vectoriel
en...
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...
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’
...
Menu Edition
Permet de réduire ou agrandir la sélection.
Pour redimensionner homothétiquement
(en respectant les proportio...
Menu Edition
Lorsque la taille vous convient,
choisissez un autre outil.
Apparaît alors un message de confirmation.
Transf...
Les menusSélectionner / Désélectionner
Menu Edition
Si vous souhaitez par exemple copier
une partie d’une image pour la co...
Exercice
J’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...
Les menus
Menu Image
Ce menu permet d’intervenir sur l’image entière
• Taille de l’image
Redimensionner l’image au pixel p...
Les menus
Menu réglage
Modifiez les réglages
afin d’optimiser l’image :
lumières, couleurs, saturations,
contrastes,…
Jouez ...
Les menus
Menu filtre
Flou et netteté,
effets graphiques,
Jeux de lumière,
et contours.
Les options du menu Filtre
ne s’ap...
Les outils de dessin
Outil de base permettant de dessiner à main levée avec la souris, le trackpad, ou le doigt.
Options :...
Les outils de dessin
Efface les pixels de l’image
Options : - Correcteur de pinceau : pointes
- Opacité : transparence
Gom...
Les outils de dessin
Applique un dégradé de couleur à la section active de l’image
Options : - Opacité : option globale po...
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...
Exercice
Pour accueillir le futur texte de ma carte
de votre visite :
•  créez un nouveau calque
•  sélectionnez une forme...
Cette 3e section de la palette contient les outils de peaufinage :
• Goutte d’eau : atténue les contours
• Netteté : accent...
Prélève la couleur du pixel cliqué
Pipette (outil de prélèvement)
Texte
Options : - Texte (multilignes)
- Police (caractèr...
Exercice
Sur votre maquette :
•  sélectionnez l’outil Texte
•  saisissez vos coordonnées
•  choisissez la police de caract...
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é...
Les couleursLes dégradés
Appliquez le dégradé à
votre sélection en cliquant
et en étirant dans le sens
souhaité.
Dans l’ex...
Les masquesAjouter un masque
1.  Faites remonter la photo à masquer
et vérifiez que les 2 calques sont visibles
2.  Ajoute...
Les masquesAjouter un masque
•  Sélectionnez l’outil dégradé
•  Cliquez sur Dégradé dans la barre
d’options pour sélection...
Les masquesAjouter un masque
Appliquez le dégradé en cliquant sur l’image et en étirant dans
le sens souhaité afin de crée...
Conseils
Ne confondez pas le menu du
navigateur avec celui de Pixlr
au risque de perdre votre
travail…
La gestion de l’aff...
Vos prochains
rendez-vous numériques
7-8 DÉCEMBRE 2015
Comprendre Google et augmenter la visibilité de son entreprise
8-9 ...
Merci à tous
Prochain SlideShare
Chargement dans…5
×

Atelier 2 PIXLR Editor

1 147 vues

Publié le

Retoucher ses images comme un pro avec PIXLR Editor
Mardi 10 novembre 2015
Palais des Congrès de Royan

Publié dans : Médias sociaux
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 147
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier 2 PIXLR Editor

  1. 1. Office de Tourisme de Royan Atelier PIXLREditeur en ligne Retouchez vos photos avec PIXLR
  2. 2. Faire rêver, séduire, donner envie à travers l’image « Une image vaut mieux que 1000 mots » Confucius
  3. 3. Programme • Vocabulaire technique - rappel • Présentation de l’éditeur • Outils et Conseils • Exercices pratiques Retoucher ses images comme un pro avec Pixlr Editor
  4. 4. Quelques rappels sur l’image numérique Pixel Unité 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éfinition La définition correspond au nombre de points d’une image (800 x 600 px) Résolution En 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
  5. 5. 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
  6. 6. 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
  7. 7. www.pixlr.com PIXLR Éditeur de photo en ligne qui fonctionne dans votre navigateur
  8. 8. PIXLR Il est gratuit ! Rien à télécharger, rien à installer…. Éditeur de photo en ligne qui fonctionne dans votre navigateur www.pixlr.com
  9. 9. 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
  10. 10. 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
  11. 11. 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.
  12. 12. 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
  13. 13. www.pixlr.com PIXLR DESKTOP transforme vos images de tous les jours en œuvres d'art. DESKTOP PIXLR DESKTOP
  14. 14. Cet éditeur en ligne propose une large gamme d’outils et de fonctionnalités, très proches du logiciel star d’Adobe : Photoshop
  15. 15. Présentation
  16. 16. 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
  17. 17. 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
  18. 18. 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)
  19. 19. 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
  20. 20. 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 Exercice Je crée une nouvelle image de 1000x650 pixels sur fond transparent
  21. 21. Menu Fichier Exercice J’enregistre mon image sur le bureau au format PXD en la renommant ‘maquette’. Les menusLes différents formats d’enregistrement
  22. 22. 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
  23. 23. 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,…)
  24. 24. 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
  25. 25. Les menus Menu Calque Nouveau calque Conseil Pensez à renommer vos calques, pour une meilleure organisation.
  26. 26. Les menus Menu Calque Supprimer le calque
  27. 27. 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
  28. 28. Les menus Menu Calque Styles de calques
  29. 29. Les menus Menu Calque Styles de calques
  30. 30. Les menus Menu Calque Ajouter un masque
  31. 31. 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.
  32. 32. 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
  33. 33. Menu Edition Lorsque la taille vous convient, choisissez un autre outil. Apparaît alors un message de confirmation. Transformation libre (Ctrl+T) Les menus
  34. 34. 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
  35. 35. Exercice J’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
  36. 36. 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
  37. 37. 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é
  38. 38. 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é
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Exercice Pour 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
  44. 44. 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
  45. 45. 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
  46. 46. Exercice Sur 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
  47. 47. Pour aller plus loin… • Couleurs et dégradés • Masques • Conseils
  48. 48. Sélectionnez vos couleurs (roue chromatique, RGB=RVB, nuanciers Web et IMG) Les couleurs
  49. 49. 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)
  50. 50. 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
  51. 51. 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)
  52. 52. 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)
  53. 53. 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
  54. 54. Conseils Ne 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
  55. 55. Vos prochains rendez-vous numériques 7-8 DÉCEMBRE 2015 Comprendre Google et augmenter la visibilité de son entreprise 8-9 FÉVRIER 2016 Créer, animer sa page Facebook et aller plus loin avec Facebook 21-22 MARS 2016 Améliorer sa Gestion Relation Client par l’email et créer des campagnes de communication
  56. 56. Merci à tous

×