atelier 2 pixlr editor
TRANSCRIPT
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