NOTE DE COURS SYNOX FORMATION Adobe Photoshop CS4

www.synox.ca/ressources.htm

User : aixelav

Pass word : 080417

Cours 1 Présentation

Bitmap et Vecteur

CMJN et RVB

Raccourcis

Outils

Calques et sélection

I. PRÉSENTATION • Logiciel de retouche photographique et conception web • Traitement d’image Bitmap et traitement par calques • Logiciel de création design Print et design Web. Logiciel professionnel • Deux choses essentiels a Photoshop : faire des sélections et détourer (découper) les

images pour isoler les élèments dans des calques distincts

II. BITMAP ET VECTEUR

Bitmap Image Pixélisée Photoshop et logiciel de retouche Photographique (ex. paint)

Image Vectorielle Illustrator Flash Indesign

III. CMJN et RVB

CMJN CYAN-MAGENTA-JAUNE-NOIR PRINT Résolution :300 dpi/ppp Fichier : PDF Portable Document Format (Le Portable Document Format (communément abrégé PDF) est un langage de description de pages d'impression créé par Adobe Systems. La spécificité du PDF est de préserver la mise en forme (polices d'écritures, images, objets graphiques…) telle qu'elle a été définie par son auteur, et ce quelles que soient l'application et la plate-forme utilisées pour imprimer ou visualiser ledit fichier.)

EPS Encapsulated Postscript (Le format Encapsulated PostScript (EPS) est un format créé par Adobe Systems en langage PostScript qui permet de décrire des images qui peuvent être constituées d'objets vectoriels et/ou bitmap. Dans le milieu professionnel, le format EPS est très utilisé car il conserve toutes les qualités vectorielles.)

TIFF Tagged Image File Format (Le Tag(ged) Image File Format généralement abrégé TIFF est un format de fichier pour image numérique. Adobe en est le dépositaire et le propriétaire initial (via Aldus). Plus exactement, il s'agit d'un format de conteneur (ou encapsulation), à la manière de avi ou zip, c'est-à-dire pouvant contenir des données de formats arbitraires. Cela fait également que tous les logiciels ne sont pas capables d'afficher tous les types d'images TIFF. Il est possible de créer des extensions propriétaires et secrètes à TIFF.)

RVB ROUGE-VERT-BLEU WEB 72 dpi/ppp Fichier : JPG/JPEG Joint Photographic Experts Group (JPEG est l’acronyme de Joint Photographic Experts Group. C’est un comité d’experts qui édite des normes de compression pour l’image fixe. La norme communément appelée JPEG, de son vrai nom ISO/IEC IS 10918-1 | ITU-T Recommendation T.81, est le résultat de l’évolution des travaux qui ont débuté dans les années 1978 à 1980 avec les premiers essais en laboratoire de compression d’images.)

PNG Portable Network Graphics (Portable Network Graphics, un format de données pour les images numériques Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé pour remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un brevet. Le PNG est un format non destructeur spécialement adapté pour publier des images simples comprenant des aplats de couleurs.)

GIF Graphic Interchange Format

Le Graphics Interchange Format (littéralement « format d'échange d'images »), plus connu sous l'acronyme GIF [ʒif], est un format d'image numérique couramment utilisé sur la Toile. GIF n'enregistre pas directement la couleur de chaque pixel, car pour chaque image, une

palette de 2 à 256 couleurs est construite. Ensuite chaque

pixel de l'image fait référence à l'une des entrées de la palette. Cette méthode limite donc à 256 le nombre maximal de couleurs différentes présentes dans chaque calque d'une même image (GIF89a supportant les calques multiples). On parle donc de format 8 bits car chaque pixel est codé sur 8 bits, représentant donc au maximum 256 valeurs. L'usage d'une palette permettait un affichage beaucoup plus rapide sur les ordinateurs de l'époque dont les cartes graphiques contenaient elles-mêmes une palette d'au plus 256 couleurs.

La limitation à 256 couleurs n'est pas gênante pour les logos, les graphiques et la plupart des images synthétiques, ainsi que les photographies en noir et blanc. En revanche une photographie couleur de qualité nécessite plus de nuances.

IV. RACCOURCIS • CTRL+N : nouveau document • CTRL+O : ouvrir document • CTRL+D : deselectionner (pointillé) • CTRL+T : transformer (boîte de sélection, clic droit= toutes les transformations) • CTRL+J : extraire une sélection dans un nouveau calque • CTRL+S : enregistrer un document • CTRL+C/CTRL+V : copier coller • CTRL+ALT+CLIC : dupliquer • CTRL+Z : undo • CTRL+ALT+Z : redo • SHIFT+F5 : remplir de couleur (=Pot de peinture) • SHIFT : conserver les proportions

V. INTERFACE

VI. OUTILS

Description des outils principaux :

- / Rectangle / Ellipse de sélection (raccourci M) : L'outil rectangle de sélection vous permettra de sélectionner une partie de votre image de façon carré ou rectangulaire. L'ellipse de sélection fera la même chose mais de façon arrondie. (utiliser la touche shift pour ajouter une autre partie de votre zone de travail à votre sélection ou alt pour en enlever)

- Flèche de déplacement (raccourci V) : La flèche de déplacement vous permettra de déplacer votre image. (En maintenant la touche shift pendant le déplacement peut vous aidez à déplacer de façon linaire votre image)

- / / Lasso / Lasso polygonal / Lasso magnétique (raccourci L) : Le lasso vous permettra de sélectionner votre image comme bon vous semble. Avec le lasso -> standard -> vous obtiendrez une sélection libre, à l'inverse du polygonal qui vous oblige à faire une sélection linéaire. Le lasso magnétique, lui, suivra les différentes teintes d'une image (assez pratique pour faire un détourage sommaire). (utiliser la touche shift pour ajouter une autre partie de votre zone de travail à votre sélection ou alt pour en enlever)

- Baguette magique (raccourci W) : La baguette magique vous permettra de sélectionner une plage de teintes de couleur de votre image. (utiliser la touche shift pour ajouter une autre partie de votre zone de travail à votre sélection ou alt pour en enlever)

- L'outil recadrage (raccourci C) : L'outil recadrage vous permettra de faire une présélection de la partie de l'image pour ensuite la recadrer.

- / L'outil tranche / Sélection tranche (raccourci K) : L'outil tranche vous permettra de créer différentes tranches, (découpage de votre image) pour ensuite générer une multitude de fichier au formats que vous souhaitez. Faites un découpage, allez dans le menu fichier et faites -> enregistrer pour le web -> nommer votre page html puis enregistrer. Une page HTMl à partir de votre image a été créée, vous obtiendrez vos différentes images dans le dossier -> images -> créé automatiquement. (Outil souvent utilisé lors du découpage d'un kit graphique pour les sites Internet et autres newsletters et pages HTML...)

- / Pinceau / Crayon (raccourci B) : Le pinceau vous permettra de peindre (dessiner) avec une forme sélectionnée au préalable.

- L'outil tampon (raccourci S) : Le tampon vous permettra de faire un -> copier coller -> avec une forme sélectionnée au préalable. Cliquez en restant appuyé sur la touche Alt sur la partie que vous souhaiter copier, puis relacher la touche Alt. Cliquez à l'endroit où vous souhaitez coller cette partie de l'image et dessiner comme avec le pinceau. (Outil souvent utilisé pour de la retouche de photo)

- / L'outil gomme / gomme magique (raccourci E) : La gomme vous permettra d'effacer une partie de votre image avec une forme sélectionnée au préalable. La gomme magique efface juste une zone possédant la même teinte. (Utiliser la barre des options pour obtenir le résultat que vous souhaitez en réglant la tolérance)

- / / L'outil densité - / densité + / éponge (raccourci O) : L'outil densité - / L'outil densité + vous permettra d'éclaircir votre image avec une forme sélectionnée au préalable ou de l'assombrir.

L'éponge vous permettra de saturer ou désaturer les couleurs de votre image. (Utiliser la barre des options pour obtenir le résultat que vous souhaitez en réglant l'opacité, les tons...) (Outil souvent utilisé pour les retouches d'image ou finition, pour gérer les ombres et reflets d'un objet ou autre)

- / L'outil dégradé / Pot de peinture (raccourci G) : L'outil dégradé vous permettra de créer un dégradé comme bon vous semble. (Utiliser la barre des options pour pouvoir sélectionner vos couleurs, votre type de dégradé...etc.) L'outil pot de peinture lui rempli tout une zone possédant la même teinte. (Utiliser la barre des options pour réglé la tolérance et obtenir le résultat souhaité)

- / / L'outil doigt / Netteté / Goutte d'eau (raccourci R) : L'outil doigts vous permettra d'étaler une partie de votre image à partir d'une forme. Netteté permettra de rendre plus net une partie de votre image à partir d'une forme. L'outil goutte d'eau -> floutera -> une partie de votre image à partir d'une forme.

- L'outil texte (raccourci T) : Vous permettra d'écrire vos différents textes

- L'outil plume (raccourci P) : Vous permettra de générer un tracer à base de vecteur (droite) et courbe.

- / / / ... / L'outil rectangle/Ellipse/Polygone/...Trait (raccourci U) : Vous permettra de créer une forme en tracé ou un simple trait.

- L'outil pipette (raccourci I) : Vous permettra de sélectionner une teinte présente sur une image.

- L'outil main (raccourci H) : Vous permettra de déplacer votre image en fonction de votre zone de travail. Un conseil utilisé la touche espace et faite des "cliqué-glissé" sur votre zone de travail pour pouvoir vous déplacer dans cette dernière.

- L'outil loupe (raccourci Z) : Vous permettra de zoomer ou dézoomer votre image pour acquérir plus ou moins de précision.

Couleur d'avant plan / arrière plan : Vous permettra de sélectionner les couleurs que vous souhaiter utiliser. La couleur d'avant plan correspondra à la couleur que vous utiliserez pour le pinceau par exemple ou le pot de peinture. La couleur d'arrière plan elle concernera plus la gomme. Les petits carrés situés en bas à gauche vous permettront de réinitialiser les couleurs : noir en couleur d'avant plan, blanc en arrière plan (raccourci D). Les flèches situées en haut à droite vous permettront d'inverser les couleurs d'avant et d'arrière plan. (raccourci X)

- Mode standard / Mode fusion : (je sens que ça va pas être simple à expliquer) Le mode standard (mis par défaut) vous permet d'agir directement sur votre image. Le mode fusion est un peu différent. La couleur va gérer une sélection par rapport à l'intensité des couleurs. Ce mode est souvent utilisé pour faire des reflets et effet miroir plus aisément. Je pense que vous comprendrez mieux avec un bon tutoriel ^^'

- Fenêtre standard / Plein écran avec menu / Plein écran sans menu (raccourci F) : Les différents mode d'affichage de l'environnement du logiciel vous permettra de mieux travail, suivant vos besoins ça peut être pratique.

Chaque outil possède des options que vous retrouverez en dessous de la barre de menu. Ainsi vous pourrez régler l'opacité de votre pinceau et outil à base de forme, la couleur de vos dégradés, la tolérance de votre baguette magique et autres outils de sélection... je vous laisse les découvrir plus amplement vu l'étendu des possibilités ^^.

VII. CALQUES ET SÉLECTIONS

Photoshop est un logiciel de traitement d’images par calques. Lorsqu’on ouvre une image tous les éléments sont naturellement sur le même calque. On choisit ensuite de sélectionner un certain élément dans le but de le mettre dans un calque à part et de lui appliquer un effet particulier.

VIII. EXERCICE SUR LES CALQUES ET LES SELECTIONS

Cours 2 Texte normal et masque de texte

Outils de détourage

Outil masque

l. OUTIL TEXTE NORMAL ET OUTIL MASQUE DE TEXTE Texte normal : permet d’écrire à l’horizontal et à la verticale Barre d’option de l’outil texte : Possibilité d’appliquer une déformation au texte de type arc…. Masque de texte : véritable outil de détourage (découpage) Attention cet outil écrit en forme de lettre, mais ce n’est pas réellement de la police, donc on ne peut pas revenir sur la police, la changer ou corriger une faute d’orthographe! Le plus intéressant dans cet outil c’est la possibilité qu’il offre d’écrire sur une photo en forme de lettre et de détourer cette sélection.

Exemple:

1. Choisir l’outil masque de texte dans la palette des outils. 2. Choisir la police et la taille de la police dans la barre des options. 3. Écrire le texte sur l’image.

Attention le masque est toujours rouge a 50 %.

4. Valider le texte en cochant V dans la barre d’option ou en tapant sur la touche ENTER

5. Extraire la sélection avec CTRL+J 6. Masquer l’arrière plan dans la palette des calques afin de pouvoir lire le texte.

7. Désélectionner pour enlever les pointillés. 8. Pour mettre un fond : créer un nouveau calque et avec l’outil pot de peinture

cliquer sur le document, vous pouvez ainsi réaliser différent type d’affiche.

N’oublier pas de passer le calque de fond au dessous de votre masque!

II. OUTIL DE DÉTOURAGE 1. Outils de détourage simple.

Outil de sélection Outil lasso :

• Normal (Utiliser les filtres) • Polygonal (Ligne droite) • Magnétique (s’accroche à une couleur, a besoin de fort contraste de

couleur) Outil Baguette :

• Magique (Tolérance par défaut 32, a besoin de fort contraste de couleur)

• Rapide 2. Outils de détourage précis

Outil Masque Le masque va nous permettre de détourer un élément difficile de façon net. C’est le détourage le plus précis et le plus complexe à réaliser car plusieurs outils sont nécessaire.

Exemple : • Ouvrir une image dans Synox/Image web/Endroits et

payasge/Antilles.jpg • Dupliquer le calque (clic droit dans le calque) et masquer l’original

(enlever l’œil)

• Sélectionner l’outil masque, les deux carrés de couleurs doivent

se mettre automatiquement en noir et blanc.

• Sélectionner l’outil pinceau et jouer sur le diamètre.

• Zoomer sur la partie à masquer CTRL+(+) et CTRL+(-)

• Changer le diamètre régulièrement si besoin

• Commencer à peindre le masque (rouge 50%) Si on dépasse de la

zone à peindre faire passer le carré blanc dans la palette d’outils au dessus du carré noir en cliquant sur la petite flèche, cela permet d’effacer les erreurs

• Une fois le masque fini, sélectionner à nouveau l’outil masque afin d’obtenir une sélection (c’est toujours le même but dans photoshop, obtenir une sélection pour l’extraire)

• Intervertir la sélection : Aller dans le menu Sélection et choisir

intervertir

• Extraire la sélection en cliquant sur CTRL+J

• Sélectionner l’outil déplacement, flèche noir et déplacer le rocher

de l’autre côté. Attention vérifier que vous êtes toujours sur le calque du rocher

• Avec le CTRL+T, transformer le rocher qui a besoin d’une symétrie

• Valider avec le V dans la barre d’option et voilà :

Cours 3

Outils retouche photo

Filtre fluidité

Exercice

Outil Tranche

I. OUTILS RETOUCHE PHOTO

• Outil correcteur 1. Sélectionner l’outil correcteur de ton direct

2. Choisir le bon diamètre et peindre sur la partie à supprimer.

• Outil Correcteur ne pas oublier de viser pour prendre la couleur

avec la touche alt+clic • Outil pièce : Entourer l’élément à supprimer avec l’outil pièce et

déplacer la sélection • Outil tampon de duplication, de même que l’outil correcteur il

faut viser avec la touche alt+clic. • Outil tampon de motif • Créer un nouveau document ex. 800px X 800px • Ouvrir une image qui sera votre motif (Attention vérifiez la taille

du motif) Il faut certainement réduire la taille de votre image afin qu’elle puisse se répéter dans le document vierge comme le fait un motif.

Réduire la taille du motif à 150 px

1. Enregistrer le motif :

Menu édition/Utiliser comme motif et fermer le document. 2. Retourner sur le document vierge et sélectionnez l’outil tampon

de motif.

3. Sélectionner son motif dans la barre d’option

4. Peindre le motif

II. Filtre fluidité • Ouvrir une image, un portrait. • Prendre le filtre fluidité

• Avec l’outil de reconstruction du filtre fluidité, réduire la taille des

joues et du menton • Avec l’outil contraction, réduire les joues, le menton et le nez, avec

l’outil déformation repousser le front pour l’agrandir, les yeux.

• Enfin voir le résultat :

Avant :

Après :

III. Exercice avec old image :

• Ouvrir l’image old image ou une de vos photos (vieille photographie abîmée) et vérifier le mode de l’image

• Nous sommes en niveau de gris choisir RVB • Image/réglage : voir balance couleur, contraste et luminosité, teinte

saturation…

• Outil tampon de duplication pour enlever les trous ou les tâches de

poussières. Avant :

Après retouche :

IV. Outil tranche • Ouvrir une image, si possible l’image d’un site web.

Nous allons découper le site en tranche de manière à pouvoir optimiser chaque élément distinct pour l’intégration dans dreamweaver. On découpe, les images (jpg ou png) les textes (gif ou png) les boutons (gif ou png) et les dégradés (jpg ou png)

• Vérifier que le magnétisme est bien coché

• Placer les repères visuels avec l’outil flèche noire

• Vérifier qu’ils sont correctement placés en faisant un zoom au

maximum.

• Au besoin repositionner correctement le repère.

• Prendre l’outil tranche et commencer le découpage

Nous ne devons pas avoir de numéro en trop, les numéros de tranches doivent se suivre, si nous avons des erreurs, on corrige en utilisant le zoom (outil loupe ou CTRL+) et l’outil sélection de tranche

• Enfin choisir le format d’enregistrement pour chaque tranche, donc

Fichier/enregistrer pour le web

• Choisir 2 vignettes et présélectionner les bons paramètres pour chaque tranche. Photo : jpg ou png Texte : gif ou png Dégradé :jpg ou png Boutons : gif ou png

Attention : vérifier le temps de téléchargement et ne pas dépasser les 3 secondes!

• Une fois que toutes les tranches sont paramétrer, sélectionner toutes les tranches avec l’outil tranche ( passer au dessus et entourer tout le site ca va activer les tranches)

• Vérifier le temps de téléchargement du site et faire enregistrer

• Enregistrer dans un dossier et nommer toutes vos tranches.

• Vous devez avoir dans votre dossier : mon_site_web un dossier image qui s’est fait automatiquement et une page html, qui nous permet de vérifier uniquement la qualité de notre enregistrement

Cours 4

Création design site web

• Ouvrir un nouveau document

• Placer des repères visuels afin de créer la structure du site web.

• Nommer son calque 1 : bannière et ouvrir un document qui composera notre

bannière. Attention à la taille du document qui doit faire au moins 1000px de large.

• Avec l’outil recadrage, découper l’image pour qu’elle entre dans l’emplacement réservé dans notre site pour la bannière : 1000px X 350px

• Réorganiser les documents afin de pourvoir glisser la bannière

Dans le site web.

• Fermer l’image et ne pas enregistrer les modifications • Créer un dégradé • Créer le fond pour les boutons • Créer les boutons avec l’outils texte normal et aligné les boutons

• Créer un groupe pour les boutons

• Dupliquer le groupe 1 nommer btn-up et nommer-le btn-over

• Création des roll over, sélectionner les calques de texte dans le

groupe btn-over et prendre l’outil texte pour changer la couleur des boutons over et ainsi créer un effet de roll-over

• Placer 3 images à droite

• Créer un bloc texte

• Découper le site à l’aide de l’outil tranche et enregistrer le tout

pour le web dans un dossier.

• Choisir le bon paramètre pour chaque tranches

Notes www.wisibility.com

www.video2brain.com

www.sxc.hu

www.istockphoto.com

www.webdesign-tutoriaux.com

www.tutsps.com