2021

Web Design
Table des matières
Partie 1 : Le Web Design ............................................................................................................ 2
1- Définitions .......................................................................................................................... 2
1-1 Définition du design ..................................................................................................... 2
1-2 Définition du Web design............................................................................................. 2
2- Objectifs ............................................................................................................................. 2
2-1 Mettre en place un esthétisme .................................................................................... 2
2-2 Améliorer l’expérience utilisateur ............................................................................... 3
2-3 Renforcer l’ergonomie ................................................................................................. 3
2-3 Donner de la valeur ajoutée......................................................................................... 3
2-4 Transmettre le message ............................................................................................... 3
PARTIE 2 : Les outils de conception Web Design : Adobe Photoshop ....................................... 5
I- Présentation ........................................................................................................................ 5
II- Initiation à Photoshop ........................................................................................................ 5
1- Installation...................................................................................................................... 5
2- Découverte de Photoshop ............................................................................................. 6
3- Redimensionnement d’une image ................................................................................. 9
4- Utilisation des calques ................................................................................................. 11
5- Réglages de la qualité d’une image ............................................................................. 13
6- Les sélections ............................................................................................................... 16
7- Les retouches d’image ................................................................................................. 19
8- Utilisation des couleurs ................................................................................................ 22
9- Ajout de textes et de formes ....................................................................................... 25
10- Association d’images .................................................................................................. 28
11- Application de filtres .................................................................................................. 30

Page | 1
Partie 1 : Le Web Design
Le webdesign est l'association de deux mots, web et design qui signifient littéralement "toile"
et "dessiner", il est donc l'action de dessiner pour le web. Il nous faut cependant nous pencher
plus en avant sur la définition du design, appelée aussi graphisme pour mieux définir le
webdesign.

1- Définitions

1-1 Définition du design

Le design est une technique unique de collecte d'idées, de pensées, d'expériences et de leur
mise en œuvre avec des compétences spéciales. Autrement dit C'est une discipline qui
consiste à créer, choisir et utiliser des éléments graphiques (dessins, caractères
typographiques, photos, couleurs, etc.) pour élaborer un objet de communication et/ou de
culture. Chacun des éléments est symbolique et signifiant dans la conception du projet, selon
les axes définis éventuellement avec d'autres intervenants du domaine de la communication,
dans le but de promouvoir, informer ou instruire.
Le design (ou graphisme) a pour but de mettre en avant de l'information sous la forme de
contenus visuels (couleurs, images, texte, sons et vidéos) afin d'attirer, de transmettre et de
faire comprendre cette information. Nous pouvons comprendre la signification détaillée du
Web Design en comprenant la signification mentionnée ci-dessus du design.

1-2 Définition du Web design

Le webdesign est le processus similaire de créations d’idées innovantes dans le but de
représenter le contenu sur les pages Web électroniques, auxquelles les utilisateurs finaux
peuvent accéder via Internet. Son processus de création comprend un certain nombre
d'éléments différents lors de la création des pages Web HTML, telles que la mise en page, la
couleur, les graphiques, les polices et le contenu des pages Web.
La création d'un site Web comprend de nombreux facteurs à considérer. La conception Web
est la sous-catégorie du terme développement Web.

2- Objectifs

2-1 Mettre en place un esthétisme

L'esthétique d'un site ne se résume pas à ses simples remarques suggestives, il consiste avant
tout à en mettre en place une harmonie :

• Equilibre des espaces et des textes

Page | 2
 • Cohérence des couleurs et de la typographie,

• Pertinence de l'iconographie,

• Hiérarchisation de l'information.
Tous ces éléments vont améliorer l'expérience utilisateur.

2-2 Améliorer l’expérience utilisateur

Toutes ces images, ces couleurs vont transmettre des informations non verbales et procurer
à l'utilisateur des sensations visuelles, parfois auditives (avec l'emploi de sons ou musiques)
et des émotions qui lui permettent de vivre une expérience. Ces émotions et sensations feront
qu’il adhèrera ou non à l’univers proposé. Ce genre d'expérience est très utilisée par les sites
de grandes marques afin de créer de l'affectif et de transmettre des valeurs entre la marque
et l'internaute.

2-3 Renforcer l’ergonomie

L'ergonomie d'un site sera renforcée par son graphisme afin d'en améliorer son utilisation.
L'emploi d'icônes ou de boutons graphiques (les fameux boutons d'actions) renvoient de
manières intuitives à des fonctions du site et en facilitent l'interaction avec l'utilisateur. De
même le choix des couleurs, de typographies, et de tailles de polices permettent la
hiérarchisation de l'information et garantissent un meilleur flux entre l'interface et
l'internaute.

2-3 Donner de la valeur ajoutée

La qualité et les finitions d'une interface bien structurée graphiquement transmet une
impression positive et un sentiment de fiabilité. Nous sommes très sensibles à l'apparence des
choses et nous formulons un premier jugement dès les premières secondes à l'affichage de la
page, non pas sur la base du contenu (le texte, les fonctionnalités) mais du contenant (le
design web).
Le langage non verbal du webdesign apporte une valeur ajoutée précieuse et une image
professionnelle à l'entreprise ou au produit.

2-4 Transmettre le message

Le marketing pour pérenniser les ventes d'un produit ou d'un service met en place une
stratégie afin de le différencier de la concurrence et qu'il réponde aux besoins du marché. A
partir de cette stratégie marketing, une marque où une entreprise définie donc un message
aussi appelé publicité que le design doit communiquer clairement. Pour attirer notre attention
les publicitaires emploieront le stimuli affectif (humour, décalage, érotisme, imaginaire, rêve,
questionnement, choque) afin de nous séduire et établir un ancrage dans la mémoire.
Le design va devoir unifier les éléments du message pour créer une tonalité graphique en
adéquation avec ce dernier pour :

• Attirer l’attention et éveiller notre intérêt,

Page | 3
 • Le mettre en exergue et le distinguer des autres,

• Le rendre percutant, efficace et mémorable.

Nous avons vu que le webdesign n'est pas qu'un simple habillage graphique. Il est un véritable
outil de communication qui facilite l'expérience utilisateur au travers une ergonomie
conviviale, transmet clairement et de la façon la plus pertinente le message marketing. Il donne
une véritable valeur ajoutée à l'information en professionnalisant l'image.

Page | 4
PARTIE 2 : Les outils de conception Web Design : Adobe
Photoshop
Saviez-vous que la majorité des visuels que vous apercevez sur Internet, sur les panneaux
publicitaires ou encore dans les magazines est issue du seul et même logiciel dont le nom ne
vous est sûrement pas inconnu, Adobe Photoshop ?

I- Présentation

Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur, lancé
en 1990 sur MacOs puis en 1992 sur Windows. Édité par Adobe, il est principalement utilisé
pour le traitement des photographies numériques, mais sert également à la création d’images.
Ces dernières années Photoshop est l'outil incontournable de tous les graphistes et web
designers. Son interface puissante permet de réaliser le web design complet d'un site internet,
d'une application mobile et tout autre type de visuels.

II- Initiation à Photoshop

Plusieurs raisons peuvent vous amener à vouloir utiliser Photoshop. Qu'il s'agisse de faire
quelques retouches sommaires sur votre album photos, de créer un flyer, une carte de visite,
un logo d'entreprise par exemple, ou encore de réaliser toute la partie graphique d'un site
internet, le logiciel à la plume est en mesure de répondre à vos besoins.
Bien entendu la conception Web nécessite un esprit créatif. Ce cours vous permettra donc
d'avoir les bons outils en main pour développer, tout seul, votre esprit créatif et ainsi réaliser
en toute autonomie vos projets.

1- Installation
Avant de commencer quoi que ce soit, il vous faudra d'abord installer le logiciel sur votre
ordinateur.

Page | 5
2- Découverte de Photoshop
Votre téléchargement est terminé ? vous pouvez à présent l’ouvrir. Pour lancer la nouvelle
application, recherchez l’icône Photoshop dans le panneau Applications et cliquez sur Ouvrir.
Vous pouvez également lancer Photoshop comme n’importe quel autre programme installé
sur votre ordinateur. Photoshop est installé au même endroit que les autres programmes (en
général, le dossier Program Files sous Windows ou Applications sous MacOs).

L’espace de travail de présente comme suit :

• La barre de menus (située dans la partie supérieure de l'interface) se compose, entre

autres, des menus Fichier, Édition et Image, qui donnent accès à divers réglages,
commandes et panneaux.

Page | 6
• La barre d'options (située sous la barre de menus) présente les options correspondant
à l'outil sélectionné.

• Le panneau Outils (situé à gauche) regroupe des outils permettant de retoucher des
images et de créer des illustrations. Les outils apparentés sont regroupés. Pour accéder
aux outils d'un groupe, il suffit de cliquer longuement sur l'icône correspondante dans
le panneau.

• Le volet de droite inclut notamment les panneaux Couleur, Calques et Propriétés, qui
donnent accès à diverses commandes de manipulation des images. La liste complète
des panneaux est disponible sous le menu Fenêtre.

• La fenêtre de document (située au milieu de l'interface) affiche le fichier sur lequel

vous travaillez. Chaque document ouvert apparaît sous son propre onglet dans cette
fenêtre.

2-1 Ouverture d’images

• Dans la barre de menus, choisissez Fichier > Ouvrir pour ouvrir des images.

• Dans la barre de menus, choisissez Fichier > Nouveau pour créer une image de A à Z.
Sélectionnez un paramètre prédéfini de document. Vous pouvez le personnaliser en
saisissant les valeurs de votre choix, notamment pour la largeur et la hauteur.

Page | 7
 2-2 Modifier l’affichage d’une image
Pour effectuer des zooms avant et arrière et des panoramiques :

• L'outil Zoom est accessible dans le panneau Outils. Dans la barre d'options, vous
pouvez passer de l'option Zoom avant à l'option Zoom arrière.

• L'outil Main, disponible dans le panneau Outils, vous permet de naviguer dans une
image agrandie.

2-4 Annulation d’une commande

Pour annuler une ou plusieurs opérations, et utilisez le panneau Historique.

• Pour annuler la dernière opération, choisissez Édition > Annule, ou appuyez sur Ctrl+Z
(Windows) ou Cmd+Z (Mac OS).

Page | 8
 • Pour rétablir la dernière action annulée, choisissez Édition > Rétablir, ou appuyez à
nouveau sur Ctrl+Z (Windows) ou Cmd+Z (MacOS).

• Pour annuler plusieurs opérations, cliquez sur Édition > Aller vers l'arrière autant de
fois que nécessaire, ou sélectionnez une étape dans le panneau Historique.

2-5 Enregistrer un travail

• Sélectionnez Fichier > Enregistrer ou Fichier > Enregistrer sous.

• Choisissez le format Photoshop (.psd) pour conserver les calques, le texte et autres
propriétés modifiables de Photoshop. Il est recommandé d'enregistrer votre image
dans ce format pendant que vous travaillez dessus.

• Les formats JPEG (.jpg) et PNG (.png) permettent d'enregistrer un fichier sous forme
d'image standard que vous pourrez partager, ouvrir dans d'autres programmes et
publier en ligne. Une fois vos retouches terminées, enregistrez également une copie
dans l'un de ces formats.

3- Redimensionnement d’une image

Découvrez comment redimensionner, recadrer et redresser une image, et agrandir la zone de
travail dans Adobe Photoshop.

3-1 Redimensionnement d’une image

• Choisissez Image > Taille de l’image.

• Choisissez les pixels pour la largeur et la hauteur des images que vous utiliserez en
ligne, et des pouces (ou centimètres) pour celles que vous imprimerez. Veillez à activer

Page | 9
 l'icône de lien pour conserver les proportions. La hauteur sera ainsi automatiquement
ajustée dès que vous modifierez la largeur, et inversement.

• Activez la case à cocher Rééchantillonnage pour modifier le nombre de pixels de

l'image et donc sa taille.

• Cliquez sur OK.

3-1 Définition de la résolution

• Choisissez Image > Taille de l’image. Le champ Résolution de cette boîte de dialogue
indique le nombre de pixels qui seront imprimés par pouce.

• Conservez les pouces pour la largeur et la hauteur d'une image à imprimer.

• Désactivez la case à cocher Rééchantillonnage pour conserver le nombre de pixels

d'origine.

• Dans le champ Résolution, indiquez 300 pixels par pouce pour une impression sur une
imprimante à jet d'encre classique. Le nombre de pouces défini dans les champs
Largeur et Hauteur est alors modifié.

• Cliquez sur OK.

3-2 Recadrage et redressement d'une image

• Dans le panneau Outils, sélectionnez l'outil Recadrage. Une zone de recadrage

apparaît alors sur l'image.

• Faites glisser un bord ou un angle de la zone de recadrage pour ajuster sa taille et sa

forme.

• Faites glisser l'image à l'intérieur de la zone de recadrage pour la repositionner.

Page | 10
 • Faites glisser un angle à l'extérieur de la zone de recadrage pour faire pivoter l'image
ou la redresser.

• Cliquez sur la coche dans la barre d'options, ou appuyez sur la touche Entrée
(Windows) ou Retour (Mac OS), pour valider le recadrage.

3-3 Agrandissement de la zone de travail

• Choisissez Image > Taille de la zone de travail.

• Pour agrandir la zone de travail, indiquez le nombre de pixels ou de pouces à ajouter

en largeur et en hauteur. Choisissez les pixels pour une utilisation en ligne et les pouces
pour une impression.

• Activez la case à cocher Relative, puis sélectionnez un point d'ancrage sur le

diagramme de position. Les flèches pointent vers les côtés où la zone de travail sera
agrandie.

• Cliquez sur OK.

4- Utilisation des calques

Apprenez à utiliser le panneau Calques, à redimensionner le contenu d'un calque, à ajouter
des images dans un fichier multi calque et à manipuler des calques d'arrière-plan dans Adobe
Photoshop.

Page | 11
 4-1 Rôle des calques
• Les calques contiennent les images, le texte ou les objets qui composent un fichier
multi calque. Ils vous permettent de déplacer, modifier et manipuler le contenu d’un
calque, sans toucher à celui des autres.

• Les calques sont empilés dans le panneau Calques, qui se trouve généralement dans
la partie inférieure droite de la zone de travail. Si ce panneau n'est pas visible,
choisissez Fenêtre > Calques.

• Dans le panneau Calques, cliquez sur l'icône d'œil à gauche d'un calque pour masquer
son contenu. Cliquez à nouveau sur cette icône pour réafficher le contenu. C’est un
moyen très pratique de se remémorer le contenu d'un calque.

• Pour modifier un calque, vous devez d'abord le sélectionner. Pour ce faire, cliquez une
fois à droite du nom du calque concerné dans le panneau Calques. Pour ajouter
d'autres calques à votre sélection, cliquez dessus en maintenant la touche Ctrl
(Windows) ou Cmd (Mac OS) enfoncée.

4-2 Redimensionnement d'un calque

• Dans le panneau Calques, sélectionnez un ou plusieurs calques contenant des images

ou objets à redimensionner.

• Choisissez Édition > Transformation manuelle. Une bordure de transformation

apparaît autour du contenu des calques sélectionnés. Maintenez la touche Maj.
enfoncée pour éviter de déformer le contenu, puis faites glisser un angle ou un bord
jusqu'à obtenir la taille souhaitée. Faites glisser le pointeur à l'intérieur du cadre de
transformation pour déplacer le contenu dans l'image. Faites-le glisser à l'extérieur du
cadre pour faire pivoter le contenu.

• Cliquez sur la coche dans la barre d'options, ou appuyez sur la touche Entrée
(Windows) ou Retour (Mac OS), pour valider les modifications.
Page | 12
 4-3 Ajout d'images dans une composition
Ajoutez d'autres images dans votre composition ; chacune d'elles sera placée sur son propre
calque.

• Choisissez Fichier > Importer et incorporer, sélectionnez une image dans l'Explorateur
de fichiers (Windows) ou le Finder (Mac OS), puis cliquez sur Importer.

• Pour redimensionner l'image ajoutée, faites glisser l'un de ses angles en maintenant la
touche Maj. enfoncée pour éviter de la déformer.

• Faites glisser le pointeur à l'intérieur du cadre pour positionner l'image ajoutée à

l'endroit souhaité.

• Cliquez sur la coche dans la barre d'options pour valider la position de l'image. Un
calque contenant l'image ajoutée est automatiquement créé.

4-4 Déverrouiller le calque d'arrière-plan

• Le calque Arrière-plan étant verrouillé, vous ne pouvez pas le déplacer dans la fenêtre
de document, ni dans le panneau Calques. Vous ne pouvez pas non plus effectuer
certaines modifications.

• Pour convertir le calque Arrière-plan en calque classique, cliquez sur le cadenas à

droite de son nom dans le panneau Calques.

5- Réglages de la qualité d’une image

Découvrez comment améliorer la luminosité, les couleurs et la qualité globale de vos images
dans Adobe Photoshop.

5-1 Réglage de la luminosité et du contraste

Page | 13
• Dans la barre de menus, sélectionnez Image > Réglages > Luminosité/Contraste.

• Réglez le curseur Luminosité pour modifier la luminosité globale, et le curseur

Contraste pour augmenter ou diminuer le contraste de l'image.

• Cliquez sur OK. Les réglages apparaissent uniquement sur le calque sélectionné.

5-2 Réglage de la vibrance des couleurs

• Dans la barre de menus, sélectionnez Image > Réglages > Vibrance.

• Effectuez quelques essais en réglant les curseurs. Le curseur Vibrance a un effet sur
l'intensité des couleurs. C'est sur les couleurs ternes qu’il est le plus marqué. Le curseur
Saturation sert à régler l'intensité de toutes les couleurs de l'image

• Une fois que vous avez terminé, cliquez sur OK.

Page | 14
 5-3 Réglage de la teinte et de la saturation

• Dans la barre de menus, sélectionnez Image > Réglages > Teinte/Saturation.

• Effectuez quelques essais en réglant les curseurs Teinte, Saturation et Luminosité. Vos
réglages s’appliquent à toutes les couleurs de l'image. Le curseur Teinte sert à modifier
les couleurs d'une image, tandis que le curseur Saturation détermine l'intensité des
couleurs, et le curseur Luminosité leur luminosité.

• Pour modifier une couleur à l'aide de ces curseurs, ouvrez le menu déroulant en haut
à droite de la boîte de dialogue Teinte/Saturation, et choisissez une plage de couleurs
comme les jaunes. Réglez ensuite les curseurs Teinte, Saturation ou Luminosité. Vos
réglages concernent uniquement la plage de couleurs sélectionnée et ce, dans toute
l'image.

• Une fois que vous avez terminé, cliquez sur OK.

5-4 Calques de réglages

Les calques de réglage vous offrent davantage de souplesse pour effectuer des retouches. Ils
vous permettent de modifier vos réglages à l'infini et de préserver l'image d'origine de tout
changement direct. Testez le calque de réglage Noir et blanc pour vous faire une idée du
fonctionnement de ce type de calque.

• Dans le panneau Calques, sélectionnez un calque d'image à modifier à l'aide de ce

réglage.

• Dans la partie inférieure du panneau Calques, cliquez sur l'icône Créer un calque de
remplissage ou de réglage, puis sélectionnez l'option Noir et blanc dans le menu

Page | 15
 contextuel. Un nouveau calque de réglage apparaît alors dans le panneau Calques,
juste au-dessus du calque d'image sélectionné. Ce calque de réglage a un effet sur les
calques inférieurs uniquement.

Le panneau Propriétés s'ouvre automatiquement et donne accès aux commandes

correspondant à ce calque de réglage. Ces commandes varient d'un calque de réglage à
l'autre.

• Vérifiez que le calque de réglage Noir et blanc est sélectionné dans le panneau
Calques, puis personnalisez la conversion de votre image en noir et blanc à l'aide des
commandes du panneau Propriétés.

• Effectuez quelques essais en réglant les curseurs. Une fois que vous avez terminé,
cliquez sur la flèche double en haut à droite du panneau Propriétés pour le fermer.

6- Les sélections
Apprenez à effectuer une sélection à l'aide des principaux outils dédiés et à améliorer les
contours d'une sélection dans Adobe Photoshop.

6-1 Principes de base d’une sélection

La création d’une sélection permet de modifier une partie d’une image. Une sélection permet
d'isoler et de retoucher une partie d'une image sans toucher au reste.

Page | 16
 • Dans le panneau Outils, sélectionnez l'outil Rectangle de sélection, puis tracez un
rectangle sur l'image. La zone délimitée par la bordure animée correspond à votre
sélection.

• Pour étendre la sélection, cliquez sur l'icône Ajouter à la sélection dans la barre
d'options, ou maintenez la touche Maj. enfoncée et sélectionnez la partie à ajouter.
Pour supprimer une partie de la sélection, cliquez sur l'icône Soustraire de la sélection
dans la barre d'options, ou maintenez la touche Alt (Windows) ou Option (Mac OS)
enfoncée et sélectionnez la partie concernée.

• Sélectionnez un calque à modifier. Essayez ensuite de procéder à quelques réglages

(Image > Réglages). Lorsqu'une sélection est active, les réglages concernent
uniquement la partie sélectionnée du calque. C'est également valable lorsque vous
appliquez un filtre, peignez ou remplissez une zone, copiez des éléments, etc.

• Une fois que vous avez terminé, désélectionnez la zone en choisissant Sélection >
Désélectionner, ou en appuyant sur Ctl+D (Windows) ou Cmd+D (Mac OS).

6-2 Utilisation des outils Sélection rapide et Lasso

Outil Selection rapide

Page | 17
 • Dans le panneau Outils, activez l'outil Sélection rapide.

• Appliquez l'outil sur la zone à sélectionner. Pendant que vous le faites glisser, il tente
de détecter les contours de l'image et arrête automatiquement la sélection en
conséquence.

• Dès que vous avez terminé votre première sélection, l'outil passe automatiquement
en mode Ajouter à la sélection. Pour étendre la sélection, faites glisser l'outil sur les
zones à ajouter.

• Pour supprimer certaines parties de la sélection, maintenez la touche Alt (Windows)

ou Option (Mac OS) enfoncée, et faites glisser l'outil sur les parties concernées.

• Essayez de modifier l'épaisseur et la dureté de l'outil Sélection rapide dans la barre

d'options.

Outil Lasso

• Dans le panneau Outils, sélectionnez l'outil Lasso, qui se révèle très pratique pour
nettoyer une sélection démarrée avec un autre outil.

• Pour étendre une sélection réalisée avec un autre outil, appuyez sur la touche Maj. et
faites glisser le lasso sur la zone à ajouter.

• Pour supprimer certaines parties d'une sélection, activez l'option Soustraire de la

sélection dans la barre d'options, ou appuyez sur la touche Alt (Windows) ou Option
(Mac OS), et faites glisser l'outil sur les parties concernées.

• Appuyez sur Ctrl+D (Windows) ou Cmd+D (Mac OS) pour désélectionner la zone.

6-3 Amélioration d'une sélection

Améliorez une sélection dans l'espace de travail Sélectionner et masquer.

Page | 18
 • Effectuez une sélection avec l'outil Sélection rapide, par exemple.

• Dans la barre d'options, cliquez sur le bouton Sélectionner et masquer pour accéder à
l'espace de travail Sélectionner et masquer.

• Dans le volet de droite de l'espace de travail,

ouvrez le menu Affichage et sélectionnez une vue
comme Incrustation pour vous faire une idée plus
précise de votre sélection. Dans la vue
Incrustation, la zone sélectionnée laisse
apparaître l'image, tandis que la zone masquée
est par défaut désignée en rouge.

• Dans le panneau Outils, sélectionnez l'outil

Pinceau. Peignez sur les parties de l'image à
inclure dans la sélection. Pour en supprimer,
appuyez sur la touche Alt (Windows) ou Option
(Mac OS), et peignez sur les zones à supprimer.

• Faites défiler le volet de droite et repérez le menu

Paramètres de sortie > Sortie vers, puis choisissez
le type de sortie Sélection.

• Cliquez sur OK pour fermer l'espace de travail Sélectionner et masquer.

7- Les retouches d’image

Apprenez à supprimer des éléments indésirables, à ajouter des objets par duplication et à
corriger d'autres imperfections dans vos images à l'aide des outils de retouche de Photoshop.

7-1 Suppression d'objets de petite taille

Page | 19
• Dans le panneau Calques, sélectionnez le calque contenant les taches ou les petits
objets à supprimer.

• Dans le panneau Outils, sélectionnez l'outil Correcteur localisé.

• Dans la barre d'options, réglez l'épaisseur et la dureté de l'outil Correcteur localisé en

fonction de l'élément à supprimer.

• Cliquez sur une tache ou faites glisser l'outil sur l'objet à supprimer.

7-2 Ajout d'objets par duplication

• Dans le panneau Calques, sélectionnez le calque contenant l'objet à dupliquer ailleurs
sur l'image.

Page | 20
• Dans le panneau Outils, sélectionnez l'outil Tampon de duplication.

• Dans la barre d'options, réglez l'épaisseur et la dureté de l'outil Tampon de duplication

en fonction de l'objet à dupliquer.

• Appuyez sur la touche Alt (Windows) ou Option (Mac OS) et cliquez sur la zone de
l'image dont vous souhaitez copier le contenu.

• Relâchez la touche Alt (Option) et faites glisser l'outil sur la zone destinée à recevoir le
contenu. Pendant cette opération, l'outil Tampon de duplication copie le contenu
source dans la nouvelle zone.

7-3 Suppression d'objets de grande taille

• Dans le panneau Calques, sélectionnez le calque contenant un objet de grande taille
ou un sujet à supprimer.

• Utilisez un outil de sélection pour sélectionner l'objet. Veillez à inclure une petite partie
de l'arrière-plan tout autour de l'objet dans la sélection.

• Dans la barre de menus, choisissez Édition > Remplir.

• Dans la boîte de dialogue Remplir, choisissez Contenu pris en compte dans le menu
Contenu, puis cliquez sur OK. Votre sélection est alors remplie avec le contenu de
l'arrière-plan, qui vient ainsi masquer les éléments indésirables.

Page | 21
 • Si le résultat ne vous convient pas, essayez de réappliquer la commande de
remplissage d'après le contenu. Il est possible que vous obteniez un résultat différent
à chaque fois.

8- Utilisation des couleurs

Découvrez comment utiliser des pinceaux et couleurs dans Adobe Photoshop.

8-1 Utilisation des pinceaux

Page | 22
 • Dans le panneau Outils, sélectionnez l'outil
Pinceau.

• Dans la barre d'options, modifiez

l'épaisseur et la dureté du pinceau. Vous
pouvez également sélectionner une autre
pointe pour changer l'aspect des contours.

• Pour augmenter l'épaisseur du pinceau,

vous pouvez aussi appuyer plusieurs fois
sur la touche du crochet droit.

• Pour réduire l'épaisseur du pinceau,

appuyez plusieurs fois sur le crochet
gauche.

8-2 Utilisation des couleurs de premier plan et d'arrière-plan

• Les outils Pinceau, Forme et Texte ainsi que les autres fonctions permettant
d'appliquer des couleurs utilisent la case Couleur de premier plan située au bas du
panneau Outils.

• Il est possible de définir la couleur de premier plan de plusieurs façons. Vous pouvez
sélectionner l'outil Pipette et prélever un échantillon de couleur sur l'image, utiliser le
Sélecteur de couleurs, ou passer par les panneaux Couleur ou Nuancier.

• Derrière la case Couleur de premier plan se trouve la case Couleur d'arrière-plan, dans
laquelle vous pouvez stocker la couleur de votre choix.

• Pour passer de la case Couleur de premier plan à la case Couleur d'arrière-plan,

cliquez sur la flèche à double sens située juste au-dessus, ou appuyez sur la touche X.

8-3 Choix d’une couleur

Choisissez une couleur dans le Sélecteur de couleurs, le panneau Couleur ou le panneau
Nuancier.
En utilisant le sélecteur de couleurs

Page | 23
 • Cliquez sur la case Couleur de premier plan au bas du panneau Outils pour ouvrir le
Sélecteur de couleurs.
Option 1 : dans le Sélecteur de couleurs, faites glisser le curseur vertical pour choisir une
nuance. Cliquez ensuite dans la large zone de couleurs pour choisir la luminosité et la
saturation de la nuance.
Option 2 : saisissez les valeurs colorimétriques exactes dans les champs TSL, RVB et CMJN, ou
dans le champ Hexadécimal (#).
Option 3 : ouvrez le Sélecteur de couleurs et déplacez la souris sur l'image ouverte. Le curseur
prend alors la forme d'une pipette. Cliquez n'importe où sur l'image pour prélever la couleur
sous le curseur.

• Cliquez sur OK pour fermer le Sélecteur de couleurs. La couleur choisie apparaît dans
la case Couleur de premier plan au bas du panneau Outils et est maintenant prête à
l’emploi.
En utilisant le panneau Couleur

Page | 24
 • Si vous ne voyez pas le panneau Couleur, choisissez Fenêtre > Couleur dans la barre
de menus.

• Le panneau Couleur est en quelque sorte une version condensée du Sélecteur de

couleurs, qui vous permet de choisir une teinte à l'aide d'un curseur, puis de régler la
luminosité et la saturation dans la zone de couleurs. La couleur choisie apparaît ensuite
dans la case Couleur de premier plan du panneau Outils.

• Le panneau Couleur n'offre pas autant d'options que le Sélecteur de couleurs, mais
vous pouvez le laisser ouvert pour pouvoir l'utiliser à tout moment.

A partir des nuances prédéfinies du panneau Nuancer

• Si vous ne voyez pas le panneau Nuancier, accédez

à la barre de menus et choisissez Fenêtre >
Nuancier.

• Sélectionnez un carré de couleur dans le panneau

Nuancier pour remplacer la couleur de premier
plan par la nuance choisie.

9- Ajout de textes et de formes

9-1 Ajout de textes
Pour ajouter du texte sur une image :

• Dans le panneau Outils, sélectionnez l'outil Texte horizontal.

Page | 25
 • Dans la barre d'options, choisissez une police, une taille de police, une couleur, ainsi
que d'autres options de mise en forme du texte. Vous pourrez modifier tous ces
paramètres ultérieurement.

• Cliquez sur la zone de travail et saisissez une ligne de texte. Vous pouvez également
créer un paragraphe en dessinant une zone de texte, puis en saisissant du contenu à
l'intérieur.

• Cliquez sur la coche dans la barre d'options pour valider le texte et quitter le mode
correspondant. Un calque de texte modifiable est alors automatiquement créé dans le
panneau Calques.

• Utilisez l'outil Déplacement pour repositionner le texte dans l'image.

• Enregistrez l'image au format Photoshop (PSD) pour conserver les calques de texte en
vue d’une modification ultérieure.

9-2 Modification de textes

• Pour modifier un calque de texte, sélectionnez-le dans le panneau Calques, puis activez
l'outil Texte horizontal ou Texte vertical dans le panneau Outils. Modifiez la police, la
couleur ou tout autre paramètre dans la barre d'options.

• Une fois que vous avez terminé, cliquez sur la coche dans la barre d'options.

9-3 Création de formes

Pour ajouter une forme dans une image :

Page | 26
• Dans le panneau Outils, cliquez longuement sur l'outil Rectangle (ou l'outil de forme
actuellement affiché) pour accéder à tous les outils du groupe. Sélectionnez l'outil
correspondant à la forme que vous souhaitez dessiner.

• Dans la barre d'options, choisissez une couleur de fond et définissez d'autres options
pour votre forme. Vous pourrez les modifier ultérieurement.

• Maintenez la touche Maj. enfoncée pour éviter toute distorsion de la forme lorsque
vous la dessinez dans l'image. Un calque de forme est alors automatiquement créé
dans le panneau Calques.

• Utilisez l'outil Déplacement pour repositionner la forme dans l'image.

• Redimensionnez, transformez ou faites pivoter une forme sans détériorer la qualité de

l'image en choisissant Édition > Transformation manuelle, ou en appuyant sur Ctrl+T
(Windows) ou Cmd+T (Mac OS).

• Pour modifier la couleur d'une forme, repérez le calque correspondant dans le

panneau Calques, puis double-cliquez sur sa vignette pour ouvrir le Sélecteur de
couleurs. Lorsque vous cliquez sur une couleur dans le Sélecteur de couleurs, un
aperçu dynamique de la nuance sélectionnée apparaît sur la forme. Quand vous avez
trouvé une couleur qui vous plaît, cliquez sur OK pour l'appliquer à la forme.

9-4 Ajout d’une forme personnalisée

• Dans le panneau Outils, cliquez longuement sur l'outil Rectangle (ou l'outil de forme
actuellement affiché), puis sélectionnez l'outil Forme personnalisée.

• Dans la barre d'options, cliquez sur la flèche pointant vers le bas à droite du Sélecteur
de formes. Pour afficher toutes les formes personnalisées disponibles dans Photoshop,
cliquez sur l'icône d'engrenage à droite du Sélecteur de formes, sélectionnez l'option
Afficher tous les outils prédéfinis dans le menu, puis cliquez sur OK dans la fenêtre de
message qui s'affiche. Cliquez ensuite dans l'angle inférieur droit du Sélecteur de
formes, puis étirez le panneau pour voir toutes les formes.

Page | 27
10- Association d’images
L'un des principaux atouts d'Adobe Photoshop est de pouvoir associer des images pour
produire des compositions originales.

10-1 Ajout d’une texture à une image

• Débutez avec deux calques. L'image à texturiser doit être placée sur le calque
supérieur, et l'image principale sur le calque inférieur.

• Dans le panneau Calques, vérifiez que le calque supérieur (texture) est bien
sélectionné.

• En haut à gauche du panneau Calques, passez du mode de fusion Normal à

Incrustation. Les couleurs du calque de texture interagiront ainsi avec celles du calque
situé en dessous. Testez d'autres modes de fusion pour trouver celui qui convient le
mieux à votre image.

• En haut du panneau Calques, diminuez l'opacité à l'aide du curseur correspondant

pour modifier l'aspect de la texture sur l'image.

10-2 Ajout d’une image à l’aide d’un masque de fusion

Page | 28
 • Débutez avec deux calques. L'image
contenant l'objet que vous souhaitez ajouter
doit être placée sur le calque supérieur, et
l'image principale sur le calque inférieur.

• Dans le panneau Calques, vérifiez que le

calque supérieur (celui qui contient l'objet à
ajouter) est bien sélectionné.

• En bas du panneau Calques, cliquez sur

l'icône Ajouter un masque de fusion. Un
rectangle blanc (ou vignette) est alors associé
au calque supérieur. Il s'agit du masque de
fusion. Ce masque détermine ce qui est
visible ou non dans le calque lié, le blanc
représentant les zones visibles, et le noir les
zones masquées.

• Dans le panneau Outils, sélectionnez l'outil

Pinceau. Vérifiez que le masque est sélectionné (cliquez sur sa vignette dans le
panneau Calques), puis peignez en noir ou blanc les zones masquées ou visibles du
calque lié.

10-3 Remplacement d’un arrière-plan à l’aide d’un masque de fusion

Il est possible d'utiliser un masque de fusion pour remplacer un arrière-plan.

• Débutez avec deux calques. L'image d'origine doit être placée sur le calque supérieur,
et l'image d'arrière-plan de remplacement sur le calque inférieur.

• Dans le panneau Calques, vérifiez que le calque supérieur (image d'origine) est bien
sélectionné.

• Dans le panneau Outils, activez l'outil Sélection rapide et utilisez-le pour sélectionner
toutes les zones de l'image d'origine à conserver dans la composition finale — excepté
l'arrière-plan.

• En bas du panneau Calques, cliquez sur l'icône Ajouter un masque de fusion. Une
vignette de masque de fusion est alors associée au calque supérieur. Ce masque de
fusion masque toutes les zones, excepté celles que vous avez sélectionnées. Les zones
masquées sur le calque supérieur vous permettent de visualiser le contenu jusqu'au
dernier calque, qui correspond à l'arrière-plan de remplacement.

Page | 29
11- Application de filtres
Vous pouvez rapidement appliquer des effets à une image grâce aux filtres de Photoshop.
Libre à vous également de combiner ces filtres pour obtenir des résultats originaux.

11-1 Exploration de la galerie de filtres

La galerie de filtres est utilisée pour appliquer des effets originaux.

• Sélectionnez le calque avec le contenu à modifier.

• Dans la barre de menus, choisissez Filtre > Galerie de filtres.

• Testez les différents filtres et modifiez leurs paramètres selon le résultat souhaité.

• Essayez d'ajouter plusieurs filtres à partir de la galerie de filtres et de modifier leur

ordre d'empilement.

• Cliquez sur OK pour fermer la galerie de filtres et appliquer ceux que vous avez choisis.
Vous pouvez également créer une sélection et appliquer les filtres à la zone
sélectionnée uniquement.

11-2 Application d’un flou à partir d’un filtre dynamique

Page | 30
• Sélectionnez le calque avec l'arrière-plan ou le contenu à flouter.

• Choisissez Filtre > Convertir pour les filtres dynamiques. Cliquez sur OK. Le calque
sélectionné est alors converti en calque prenant en charge les filtres modifiables.

• Vérifiez que le calque est toujours sélectionné, puis choisissez Filtre > Flou > Flou
gaussien.

• Dans la boîte de dialogue Flou gaussien, réglez le curseur de rayon en contrôlant

l'intensité du flou dans la fenêtre d'aperçu. Cliquez sur OK pour appliquer le filtre Flou
gaussien.

• Le filtre dynamique étant associé à votre calque d'image dans le panneau Calques,
vous avez toute latitude pour modifier ses paramètres. Pour ce faire, double-cliquez
sur le filtre dynamique Flou gaussien dans le panneau Calques, apportez les
modifications nécessaires dans la boîte de dialogue qui s'affiche, puis cliquez sur OK.

• Enregistrez l'image au format Photoshop (PSD) pour conserver le calque Filtre

dynamique.

Page | 31