À la découverte de Photoshop

Projet SI28

Aurélie KNOSP Master 1 DICIT Ye LU Master 1 DICIT Printemps 2005

Table des matières

1 Définition du projet ..............................................................................................4

Concept............................................................................................................4 Objectifs ..........................................................................................................4 Public cible......................................................................................................4 Médias utilisés.................................................................................................5 Structure et navigation ...................................................................................5 Formes et degré d’interactivité........................................................................6

2 Story-board...........................................................................................................7 Principe............................................................................................................7 1. Concept : Images numériques ....................................................................7 2. Concept : Espaces de couleurs ....................................................................8 3. Concepts : Formats d’image......................................................................11 4. Concepts : Paramètres fondamentaux de Photoshop.................................14 5. Manipulation: les outils de selection et de remplissage ............................14 6. Manipulation: les calques..........................................................................15 7. Quiz ...........................................................................................................15 8. Galerie .......................................................................................................17

3 Description de l’interface ...................................................................................18 Principes ........................................................................................................18 Page ...............................................................................................................18 Menu de navigation.......................................................................................19 Bandeau d’en-tête de page ...........................................................................19 Couleur de fond de la page............................................................................19

4 Charte graphique ................................................................................................19 Hyperliens .....................................................................................................19 Titre ...............................................................................................................19 Sous-titre .......................................................................................................19 Corps du texte................................................................................................20 Mot-clé ..........................................................................................................20 Tableau 1 .......................................................................................................20 Tableau 2 .......................................................................................................20 Tableau 3 .......................................................................................................20 Tableau 4 .......................................................................................................20 Tableau 5 .......................................................................................................20 Image Gif.......................................................................................................21 Image Jpeg.....................................................................................................21 Vidéo .............................................................................................................21

5 Choix techniques ................................................................................................21 Logiciels utilisés............................................................................................21

6 Gestion de la documentation ..............................................................................22 Présentation ...................................................................................................22 Nomination des images .................................................................................22 Nomination des pages ...................................................................................22 Nomination des fenêtres................................................................................22 Nomination des animations...........................................................................23 Nomination de s vidéos .................................................................................23 Gestion des fichiers .......................................................................................23

7 Difficultés rencontrées .......................................................................................23 8 Bilan ...................................................................................................................23

Annexe 1. Charte graphique des images JPEG.....................................................25 Image JPEG 1 :..............................................................................................25 Image JPEG 2 :..............................................................................................25 Image JPEG 3 :..............................................................................................25 Image JPEG 4 :..............................................................................................26 Image JPEG 5 :..............................................................................................26 Image JPEG 6 :..............................................................................................26 Image JPEG 7 :..............................................................................................26 Image JPEG 8 :..............................................................................................27 Image JPEG 9 :..............................................................................................27 Image JPEG 10 :............................................................................................27

Annexe 2. Charte graphique des images GIF........................................................28 Image GIF 1 : ................................................................................................28 Image GIF 2 : ................................................................................................28 Image GIF 3 : ................................................................................................28 Image GIF 4 : ................................................................................................29 Image GIF 5 : ................................................................................................29

Annexe 3. Charte graphique des pages .................................................................30 3.1 Page type basée sur le Tableau 2.............................................................30 3.2 Page type basée sur le tableau 1 ..............................................................31 3.3 Page type basée sur le tableau 3 ..............................................................32 3.4 Page type basée sur le tableau 4 ..............................................................33 3.5 Page type basée sur le tableau 5 ..............................................................34

Annexe 4. Structure hiérarchique du site ..............................................................35 Annexe 5. Structure hiérarchique des documents du site......................................36 Annexe 6. Structure de l’interface.........................................................................37

Structure de la page d’accueil (niveau hiérarchique 2) .................................37 Structure de la page d’index (niveau hiérarchique 1) ...................................38 Structure d’une page de la partie concept (niveau hiérarchique 3) ...............39 Structure d’une page de la partie manipulations (structure hiérarchique 3) .40 Structure d’une page de pop-up (structure hiérarchique 4)...........................41

1 Définition du projet

Concept Notre projet consiste à réaliser un projet pédagogique multimédia dont le but

est de permettre aux navigateurs de prendre en main Photoshop en leur proposant d’éditer des images sous forme d’exercices et de prendre connaissance des grands principes sur lesquels se base Photoshop.

Objectifs Apports

Pour mettre en avant le mode tutorial nous aimerions introduire : • des exercices interactifs • des quiz avec leur correction • des vidéos filmant et commentant les opérations à suivre sur Photoshop • des images animées pour illustrer les concepts de Photoshop Questionnements et émotions provoqués Nous souhaitons permettre au navigateur de maîtriser les principales manipulations de Photoshop pour le libérer du poids technique afin qu’il puisse, par la suite, laisser s’exprimer sa création artistique. Nous souhaiterions inciter le public à aller plus en profondeur dans la maîtrise des fonctions secondaires de Photoshop notamment en mettant à leur disposition d’autres images à travailler dans la partie consacrée à la galerie. Connaissances, compétences apportées Nous souhaiterions apporter des connaissances de base sur Photoshop aussi bien théoriques que pratiques.

Public cible Public

Ce projet s’adresse aux étudiants de deuxième année du master Dicit, aux étudiants de SI28 mais aussi à tous ceux qui ne connaissent pas Photoshop. Connaissances Ce public n’a aucune connaissance de Photoshop, ce sont des débutants sur ce sujet. Attentes Ce public s’attend tout d’abord à prendre en main Photoshop, à connaître ses grands principes, à tester ses connaissances (quiz), puis à être accompagné pas à pas dans l’édition d’images sous forme d’exercices. Modes de consultation Ce public semble avoir deux modes de consultation : • une entrée pour les concepts • une entrée directe sur les exercices traitant de différents sujets

Médias utilisés Voici les médias utilisés dans le projet « À la découverte de Photoshop »

Intitulé Nature Logiciel Pages web : intitulés des exercices Dreamweaver Images Photoshop Images survolées :

− image initiale et image finale Dreamweaver

Exercices

Vidéos : − Explications pour utiliser les outils

Flash Camtasia

Pages web Dreamweaver Images

− Formats d’image Photoshop Image Ready

Animations matricielles : • Transformations par souris

− Zoom sur un pixel • Animations

− Espaces de couleur − Format GIF

Image Ready

Définition des concepts

Animations vectorielles : − variation des 3 principaux paramètres

sur une photo

Flash

Quiz Page web Dreamweaver Page web Dreamweaver Plan du site Images Photoshop Page web Dreamweaver Galerie Images Photoshop

Structure et navigation

Nous pensons utiliser une structure de type arborescente, séquentielle avec une navigation par clic sur des liens hypertextes. (voir l’annexe 4 ) À partir de la page d’accueil nous souhaitons organiser notre projet en 5 menus ouvrant chacun sur des nouvelles pages : • Introduction aux concepts de Photoshop comprenant les sous-menus:

− Images numériques : Pop up « image numérique matricielle » Pop up « image numérique vectorielle »

− Formats d’une image : Pop up « format Jpeg » Pop up « format Gif » Pop up « format Tiff » Pop up « format Psd »

− Espaces de couleurs : Pop up « espace RVB » Pop up « espace CMJN » Pop up « espace TSL »

Pop up « espace LAB » − Paramètres fondamentaux de Photoshop : Pop up « dégradation de la teinte » Pop up « dégradation de la saturation » Pop up « dégradation de la luminance »

• Manipulations sur Photoshop comprenant plusieurs exercices. − Exercice 1 : outils de sélection, outils de remplissage − Exercice 2 : calques

• Quiz : composé de 10 questions et leur correction dans un fichier PDF testant les connaissances sur les concepts et les manipulations présentés dans le site. • Galerie d’images : proposant 6 images à travailler avec, pour chacune, l’image de départ et l’image finale données ainsi que les grandes étapes à suivre pour les réaliser. • Plan du site : permettant d’accéder rapidement aux pages souhaitées

Formes et degré d’interactivité

• Cliquer sur des hyperliens • Démarrer et arrêter une vidéo (boîte de dialogue avec demande de revoir la vidéo) • Passer la souris sur une image volante • Télécharger un fichier

2 Story-board

Principe Le projet est divisé en 4 grandes parties.

• Les concepts apportent les connaissances théoriques sur lesquelles se basent les principes de Photoshop. Ils proposent une définition : − de l’image numérique − des espaces de couleurs − des formats d’image − des paramètres fondamentaux de Photoshop Pour chacune de ces notions, les contenus contiennent des mots-

clé dont certains sont des liens hyper-textes renvoyant à une explication.

• Les manipulations proposent des exercices sous Photoshop dans le but de prendre ce logiciel. Ces exercices concernent : − Les outils de sélection et de remplissage − Les calques

• La galerie de photos propose plusieurs images à travailler dans le but d’approfondir encore les manipulations sous Photoshop.

• Le quiz permet à l’utilisateur de vérifier qu’il a bien intégré les notions présentées dans les concepts et dans les exercices.

1. Concept : Images numériques

Toute image est dite numérique si elle peut être créée, traitée, stockée dans un format numérique. Le format numérique est un support permettant de stocker des données sous forme d'unités discrètes composées de 0 ou de 1. Selon le type de stockage des données on distingue deux types d'images :

− l'image matricielle − l'image vectorielle (pour une définition de ces deux types d’images un pop-up s’ouvre)

Photoshop ne permet de travailler qu'avec des images matricielles composées de pixels. Chaque fonction de Photoshop a pour but de modifier la couleur des pixels ou la quantité des pixels. Dans ce dernier cas, on agit alors sur la résolution de l'image. (Pour donner une définition de la résolution a été défini un pop-up)

1-1 Image matricielle

Elle est stockée sous forme d'un ensemble de points nommés pixels. La place de chaque pixel dans l'image est définie par ses coordonnées matricielles. Le nombre de pixels d'une image influe sur sa résolution. Pour une image donnée, si on fait varier le nombre de pixels tout en gardant les dimensions constantes : plus il y aura de pixels plus ils seront petits et meilleure sera la résolution. Lorsqu'on agrandit une zone de l'image comme ci-contre on observe un effet de pixellisation. En effet, la fonction zoom de Photoshop agrandit la taille des pixels et les rend apparents ce qui détériore la qualité de l'image.

1-2 Image vectorielle

Une image vectorielle est stockée sous forme de formules mathématiques décrivant la succession des opérations conduisant au tracé. L'avantage de ce type d'image est la possibilité de l'agrandir indéfiniment sans perdre sa qualité initiale. Ainsi l'agrandissement de la zone ci-contre n'altère-t-il pas sa résolution.

1-3 Pixel et résolution de l’image

Les images numériques sont constituées de petits carrés appelés pixels. Les pixels interviennent dans trois paramètres fondamentaux de l'image.

− Les dimensions d'une image sont sa largeur et sa hauteur exprimées par une unité de mesure par exemple en centimètre, en pouce (1p => 2,54 cm) pour une résolution de () 1 pouce correspond à une longueur équivalant à 72 pixels. (à préciser selon quelle résolution)

− La taille physique d'une image correspond à la taille de son fichier qui indique combien de pixels elle contient. Par exemple une image de 800 pixels de large sur 600 de haut contient 480 000 pixels. (ci-contre cela correspond à la taille du document)

− La résolution d'une image correspond au nombre de pixels qui seront imprimés par pouce. Elle détermine le degré d'entassement des pixels une fois l'image imprimée. C'est la densité par pouce d'une image exprimée en pixels par pouce (ppp).

On peut donc augmenter le nombre de ppp de deux façons : soit en réduisant la taille de l'image, soit en augmentant sa résolution par ajout de nouveaux pixels qui augmenteront les détails de l'image. Inversement lorsqu'on augmente la taille d'une image, Photoshop crée par extrapolation des pixels qui n'existaient pas et cela a pour effet de détériorer la qualité de l'image. De même, lorsqu'on diminue la résolution d'une image on supprime des éléments de détails et donc on diminue la qualité de l'image. Enfin il faut savoir que plus le nombre de pixels de l'image est important, plus la taille de son fichier est important. La taille d'un fichier d'une image dépend aussi de son format de stockage.

2. Concept : Espaces de couleurs

Photoshop propose de travailler les images selon 4 modes de représentation des couleurs correspondant aux 4 types d'espaces de couleurs : • l'espace RVB (RGB en anglais) • l'espace CMJN (CMYK en anglais) • l'espace Lab • l'espace TSL (HST en anglais) Le mode le plus couramment utilisé sous Photoshop est le mode RBV. Cependant pour obtenir à l'écran des couleurs quasi-équivalentes à celles obtenues après impression de l'image il vaut mieux préférer le format CMJN. Pour chacun de ces espaces de couleur s’ouvre un pop up correspondant.

2-1 EspaceRVB: Le codage RVB (Rouge, Vert, Bleu), mis au point en 1931 par la Commission Internationale de l'Eclairage (CIE) est un modèle de représentation des couleurs qui consiste à définir un espace de couleurs à partir de trois rayonnements monochromatiques de longueur d'onde

spécifique correspondant à une couleur : − rouge ( 700 nm) − vert (546 nm) − bleu (436 nm)

La combinaison de ces faisceaux lumineux permet de générer toutes les autres couleurs suivant le principe de la synthèse additive. Ce principe consiste à additionner ensemble des faisceaux de lumière (voir l'animation ci-contre). Cet espace de couleurs est souvent utilisé pour coder les couleurs en informatique et c'est le mode de représentation des couleurs utilisé par les tubes cathodiques des écrans d'ordinateurs qui émettent de la lumière. Ainsi, le modèle RVB propose de coder une couleur en la caractérisant selon ses 3 composantes fondamentales (Rouge, Bleu et Vert) sur une mémoire d'un octet (1 Octet équivalant à 8 bits). Ce qui correspond à 28 possibilités pour chaque couleur soit :

− 256 intensités de rouge − 256 intensités de vert − 256 intensités de bleu

Cela permet donc de coder 16 777 216 couleurs différentes, or l'oeil humain ne peut en discerner qu'environ 2 millions. Cette valeur reste toutefois théorique car elle dépend fortement du matériel d'affichage utilisé.

2-2 Espace CMJN :

L'espace de couleurs CMJN (Cyan, Magenta, Jaune, Noir) se fonde sur 3 couleurs de base obtenues par synthèse soustractive (voir animation ci-contre) :

− le cyan − le magenta − le jaune

Ainsi la couleur cyan correspond au spectre de la lumière blanche auquel a été soustraite la longueur d'onde correspondant au rouge. En d'autres termes l'encre cyan a comme propriété d'absorber le rouge et de réfléchir entièrement le reste du spectre de la lumière blanche. De même l'encre magenta absorbe le vert, l'encre jaune absorbe le bleu et l'encre noire absorbe toutes les couleurs. En principe dans ce modèle, l'ajout de quantités égales de cyan, de magenta, et de jaune revient à soustraire des quantités égales de rouge, de vert et de bleu. Contrairement à un écran d'ordinateur en couleurs qui émet la lumière, l'encre sur le papier absorbe la lumière. La couleur de l'encre que nous percevons est donnée uniquement par les faisceaux lumineux qui ont été réfléchis. L'espace de couleurs CMJN est donc adapté pour travailler avec des images imprimées sur papier. On peut considérer que cet espace de couleurs est construit sur un principe opposé à celui sur lequel repose l'espace de couleurs RVB. Cela explique qu'il y existe des équivalences de couleurs entre ces deux systèmes. Ainsi, les valeurs des 3 composantes (R, V, B) d'une couleur exprimée dans l'espace RVB correspondent à leur inverse ajouté de la valeur 255 dans l'espace CMJN (soit 255-R, 255-V, 255-B)

2-3 Espace LAB :

Les couleurs peuvent être perçues différemment selon les individus et peuvent être affichées différemment selon les périphériques d'affichage. La Commission Internationale de l'Eclairage (CIE) a donc défini plusieurs standards permettant de définir une couleur indépendamment des périphériques utilisés. Ces standards se basent sur des critères relatifs à la perception des couleurs par l'oeil humain. Tout d'abord, en 1931 la CIE a élaboré le système colorimétrique xyY représentant les couleurs selon:

− leur chromaticité (axes x et y) − leur luminance (axe Y)

Le diagramme de chromaticité ci-contre (ou diagramme chromatique) est issu d'une transformation mathématique :

− Il représente en périphérie les couleurs pures, c'est-à-dire les rayonnements monochromatiques correspondant aux couleurs du spectre (couleurs de l'arc-en-ciel) classées suivant leur longueur d'onde.

− La ligne fermant le diagramme relie les deux extrémités du spectre visible et se nomme la droite des pourpres. Elle correspond en effet à la couleur pourpre, composée des deux rayonnements monochromatiques bleu (420 nm) et rouge (680 nm).

On représente généralement le gamut d'un dispositif d'affichage en traçant sur le diagramme chromatique un polygone renfermant toutes les couleurs qu'il est capable de produire. Toutefois ce mode de représentation purement mathématique ne tient pas compte des facteurs physiologiques de perception de la couleur par l'oeil humain, ce qui donne un diagramme de chromaticité laissant par exemple une place beaucoup trop importante aux couleurs vertes. En 1976, afin de remédier aux lacunes du modèle xyY, la CIE développe le modèle colorimétrique La*b* dans lequel une couleur est définir selon 3 paramètres :

− la luminance (L) exprimée en pourcentage (de 0 pour le noir à 100 pour le blanc)

− une gamme de couleur (a) allant du vert au rouge − une autre gamme de couleur (b) allant du bleu au jaune avec des valeurs

allant de -120 à +120. Le modèle LAB couvre ainsi l'intégralité du spectre visible et le représente de manière uniforme indépendamment de toute technologie graphique. De cette façon il comprend la totalité des couleurs définies dans les espaces RVB et CMJN, c'est la raison pour laquelle des logiciels tels que PhotoShop utilisent ce mode pour passer d'un modèle de représentation à un autre. Il s'agit d'un mode très utilisé dans l'industrie, mais peu retenu dans la plupart des logiciels étant donné qu'il est difficile à manipuler. Les modèles de la CIE ne sont pas intuitifs, toutefois le fait de les utiliser garantit qu'une couleur créée selon ces modèles sera vue de la même façon par tous.

2-4 Espace TSL L'espace de couleurs TSL (Teinte, Saturation, Luminance) s'appuie sur les

travaux du peintre Albert H.Munsell, auteur de l'Atlas de Munsell. Il s'agit d'un modèle de représentation des couleurs dit "naturel", c'est-à-dire proche de la perception physiologique des couleurs par l'oeil humain. Ce modèle consiste à décomposer la couleur selon 3 critères physiologiques :

− La teinte correspond à la perception de la couleur. − La saturation décrit la pureté de la couleur relativement à son caractère vif

ou terne. − La luminance se rapporte à la quantité de lumière que contient une

couleur relativement à son aspect clair ou sombre.

L'espace TSL a été mis au point en informatique dans le but de permettre de choisir une couleur de façon rapide et interactive afin de pallier aux difficultés pour augmenter facilement l'éclaircissement dans le modèle RVB. En effet dans l'espace RVB les 3 paramètres R, V et B sont modifiables de façon indépendante alors que agir sur l'éclaircissement d'une couleur demande d'augmenter proportionnellement les valeurs respectives de ces 3 paramètres. L'espace TSL n'est pour autant pas adapté à une description quantitative d'une couleur. Il existe d'autres modèles naturels de représentation proches du modèle TSL :

− HSB (Hue, Saturation, Brightness) soit en français Teinte, Saturation, Brillance. La brillance décrit la perception de la lumière émise par une surface.

− HSV ( Hue, Saturation, Value) − HSI (Hue, Saturation, Intensity) − HCI (Hue, Chrominance, Intensity)

3. Concepts : Formats d’image

Un format d'image est une représentation numérique de l'image, associée à des informations sur la façon dont l'image est codée et fournissant éventuellement des indications sur la manière de la décoder et de la manipuler. Contrairement aux autres logiciels de traitement de l'image numérique Photoshop propose d'enregistrer les fichiers d'image sous plusieurs formats différents dont le GIF, le JEPG, le TIFF et le PSD. Le format PSD est le format spécifique de Photoshop. Les formats GIF et JPEG sont les deux formats principaux et les plus couramment utilisés dans les navigateurs. Le TIFF est destiné à une utilisation professionnelle dans les domaines de l'industrie graphique et de l'impression. Pour chacun de ces formats s’ouvre un pop up.

3-1 Format JPEG

• La compression en format JPEG (Joint Photographic Experts Group) : La compression JPEG est une compression non conservatrice. Cette compression se base sur le fait que l'œil humain ne distingue pas de différence entre 2 pixels voisins de couleur proche. L'algorithme de compression JPEG regroupe ainsi plusieurs pixels ayant des caractéristiques très proches, il les identifie comme identiques et il attribue un code qui caractérise cette plage spatiale de pixels. Cette méthode de compression permet de compresser un maximum de paramètres en analysant toutes les formes de redondances existant dans une image numérique :

− les redondances spatiales − les redondances statiques − les redondances subjectives

• Les avantages du format JPEG : − Il permet de compresser tout type d'images numériques (photo,…) y

compris celles comprenant un grand nombre de couleurs. − Il est très courant sur le web : il est reconnu par tous les navigateurs

actuels − Il est le plus utilisé dans l'affichage d'images de couleurs unies à

l'exception de celles de très petite taille.

• Les limites du format JPEG : − La compression JPEG s'applique mal aux zones composées d'un large

dégradé d'une même teinte car elle supprime les faibles nuances ce entraînant alors une altération des contours. Au contraire dès que l'on s'éloigne suffisamment des contours, les zones de couleurs unies sont bien restituées.

L'exemple ci-contre illustre bien, de la figure 1 (compression minimale) à la figure 5 (compression maximale), la perte de nuances de couleur pour les petits carrés clairs lorsqu'on augmente le degré de compression.

3-2 Format GIF • La compression en format GIF (Graphics Interchange Format): Le format GIF utilise la méthode de compression LZW, qui consiste à analyser l'image ligne par ligne, à relever les motifs répétés pour construire une bibliothèque contenant un exemplaire de chaque réutilisable autant que possible. Ce mode de compression est d'autant plus efficace que la structure de l'image est simple. Le degré de simplicité est plus important pour des images dont le nombre de couleurs est limité à 256 et qui sont réalisées par un simple tracé. Tout cela rend le format GIF bien adapté à l'encodage de dessins tracés au trait et non à celui de photos. • Les limites du format GIF : La gamme de couleurs disponible en format GIF est restreinte à 256 par rapport à des formats capables de conserver les "vraies couleurs" qui possèdent une palette de 16 millions de couleurs. Cependant le point fort de ce format tient du fait que, chaque couleur étant codée sur 8 bits, la taille d'une image peut être diminuée par 3 par rapport à un format conservant les "vraies couleurs". • Les avantages du format GIF :

− Il est très courant dans les navigateurs actuels : les fichiers GIF sont toujours ouvrables et affichables sans aucun plug-in

− Il permet de créer et de stocker des images animées − Il permet de créer des images au fond transparent − Il est libre de droits dans le monde entier

3-3 Format PSD • La compression en format PSD (Photoshop Document) : Le format PSD a été créé spécifiquement par Adobe pour Photoshop mais du fait de la grande diffusion des produits Adobe il reconnu par plusieurs autres logiciels de traitement de l'image. Le mode de compression utilisé peut être le RLE (Run Length Encoding) mais ce format peut aussi être utilisé sans compression. Ce format permet de coder chaque couleur sur 8, 16, 24, 32 bits selon le type d'espace de couleurs utilisé :

− Noir et blanc − RVB − CMJN − TSL − LAB (très adapté pour la retouche de photos).

Le format PSD est un métafichier qui peut contenir également des informations Bitmap concernant les calques et les masques ainsi que des tracés vectoriels. • Les avantages du format PSD :

− Il permet une vraie gestion de la transparence (avec 256 niveaux de transparence)

− Il permet une gestion des calques et des différentes couches de l'image − Il permet une gestion des masques − Il permet une bonne compression − Il permet une gestion de la typographie grâce aux calques − Il permet des exportations de sélections

3-4 Format TIFF

• La compression du format TIFF (Tagged Image File Format) : Le format TIFF utilise la méthode de compression LZW reprise dans le format GIF mais il s'agit ici d'une compression sans perte. Ce format permet aussi d'appliquer d'autres modes de compression incluant RLE, CCITT FAX 3 et 4, JPEG, DCT, Packbits, etc. Il peut aussi être utilisé sans mode de compression. • Les avantages du format TIFF : Contrairement aux autres formats, le format TIFF n'est pas un format reconnu par le navigateur Web, il est donc inutile de le publier directement sur internet. Cependant ce format est depuis longtemps le plus utilisé dans l'industrie graphique. Il est donc destiné à une utilisation professionnelle, surtout dans le domaine de l'impression. Il supporte en effet un grand nombre de fonctionnalités nécessaires pour la gestion d'images destinées à une impression de haute qualité. Ainsi il permet :

− Une gestion des couleurs étendue (Noir et blanc, 256 couleurs, niveaux de gris, 16 millions de couleurs, etc).

− Un stockage sur 16 bits par canal de couleur conférant une très bonne qualité à l'image.

− Des procédés de compression variés − Un stockage d'informations photométriques concernant les espaces de

couleurs (RVB, CMJN etc.), la résolution, les courbes de réponse, etc. La conservation des informations de copyright et de description.

4. Concepts : Paramètres fondamentaux de Photoshop

On définit 3 paramètres fondamentaux : la teinte de l’image, la saturation de l’image, la luminance de l’image. Cette page propose au navigateur de comparer sous formes d’animation les différences d’effets sur une image de l’augmentation de la teinte, de celle de la saturation ainsi que de celle de la luminance. • La teinte (ou couleur) est donnée par les angles du diagramme chromatique

compris entre -180° et 180°, à chaque tranche de 60 degrés correspond une plage de couleur : − de -180 à -120, c'est le rouge − de -120 à -60, c'est le jaune − de -60 à 0 c'est le vert − de 0 à 60, c'est le cyan − de 60 à 120, c'est le bleu − de 120 à 180, c'est le magenta

• La saturation correspond au taux de pureté d’une couleur (de 0% correspondant au gris à 100% pour la couleur dite « pure »)

• La luminance (de 0% correspondant au noir à 100% pour la luminosité maximale donnée par le support).

5. Manipulation: les outils de selection et de remplissage

Pour modifier une image il faut sélectionner les zones à modifier avec les outils de sélection. Ainsi les modifications réalisées ne s'appliqueront qu'à ces zones sélectionnées, les autres étant protégées. • Outils de sélection

− La baguette magique Selon l'option choisie, elle permet de sélectionner des plages de même couleur de façon simultanée ou successive. Photoshop sélectionne les zones de couleurs identiques présentes au voisinage de l'endroit cliqué. Suivant la valeur du niveau de tolérance la sélection des zones voisines est plus ou moins étendue.

− Le lasso magnétique Il permet de délimiter des zones de sélection en suivant la frontière qui sépare deux zones de couleurs différentes. Pour l'utiliser il suffit de suivre les contours de la forme qu'on sélectionne avec la souris jusqu'à revenir au point de départ afin de fermer la zone sélectionnée.

− Le lasso polygonal Il permet de poser des points d'ancrage par un simple clic de souris. Chacun de ces points est relié par un segment de droite. Il faut toujours revenir au point de départ pour fermer la zone sélectionnée. Ainsi on obtient des zones de sélection de forme polygonale.

− Pour déselctionner Pour déselectionner une zone sélectionnée, cliquez dans la barre de menu Sélection puis choisir Déselectionner ou tapez Ctrl+D. • Outils de remplissage

− Le pot de peinture

Il permet, en cliquant dans une zone sélectionnée, de la remplir avec une nouvelle couleur choisie dans le nuancier.

− L' outil dégradé Il permet d'appliquer un dégradé à une zone de sélection. Pour l'utiliser, choisir une extrémité de la zone sélectionnée pour commencer l'application du dégradé, cliquer dessus, puis, glisser la souris en maintenant le bouton enfoncé jusqu'à l'endroit où vous voulez terminer l'application du dégradé, lachez ensuite le bouton de la souris. • En cas d'erreur... On peut cliquer dans la barre de menu, cliquer sur Edition puis choisir Annuler. On peut aussi utiliser l'historique. • L'historique Dans cette palette sont répertoriées dans l'ordre chronologique toutes les actions que vous avez effectuées sur l'image. Les nouvelles versions s'ajoutent les unes en dessous des autres. Ainsi pour revenir à un état antérieur il suffit de cliquer sur la version antérieure correspondant à cet état. Photoshop estompe alors tous les états postérieurs qui passent sous forme grisée. Pour en réactiver un, cliquez sur son nom.

6. Manipulation: les calques

• Les calques Les calques sont des couches séparées sur lesquelles vous pouvez stocker des éléments différents de votre image et que vous pouvez combiner ensuite pour constituer l'image entière. L'autonomie de chacune des calques permet d'agir dessus individuellement sans affecter les autres. • Les modes de fusion Les modes de fusion permettent de combiner les pixels du calque sur lequel vous travaillez avec les calques inférieurs. Ainsi par exemple le mode de fusion nommé produit permet "d'ajouter" ensemble les couleurs de calques superposés simulant ainsi ce qu'on obtient en mélangeant de la peinture de différentes couleurs suivant le principe de la synthèse soustractive. • Comment enregistrer une image en conservant tous les calques ? Les calques ne sont pas conservés dans tous les formats d'enregistrement. Seuls les formats de type TIFF, PDF et le format spécifique de Photoshop (PSD) permettent d'enregistrer tous les calques composant une image. Les autres formats fusionnent les calques d'une image, l'image est alors réduite à un calque d'arrière fond, on parle d'image "aplatie".

7. Quiz Dans cette partie, on soumet à l’utilisateur les questions suivantes et

on lui propose à la fin une correction par clic sur un bouton intitulé « voir la correction ». 1. Quel espace de couleurs est défini à partir des couleurs magenta,

jaune et cyan ? − espace RVB − espace CMJN − espace Lab − espace TSL

2. Quel mode de représentation définit des couleurs se rapprochant le plus de celles obtenues lors d'une impression ?

− espace RVB − espace CMJN − espace Lab − espace TSL

3. Quel format d'image permet de créer des images animées ?

− JPEG − GIF − TIFF − PSD

4. Lequel de ces formats d'image ne permet pas de compression sans perte ?

− JPEG − GIF − TIFF − PSD

5. quel type d'image est sujet à un effet de pixellisation ?

− les images vectorielles − les images matricielles

6. Dans Photoshop, à quoi correspond la taille physique d'une image ?

− à la taille de son fichier en kO − à sa hauteur et à sa largeur en pixels − à sa hauteur et à sa largeur en centimètres

7. Agir sur le degré de saturation d'une photo correspond à faire varier :

− le taux de pureté de ses couleurs − la quantité de lumière de la photo − la teinte de la photo

8. Le paramètre qui fait passer d'une image en couleurs pures à une image grise correspond à :

− la saturation − la teinte − la luminosité

9. Quel mode de fusion permet de simuler une synthèse soustractive entre des calques non transparents de couleurs magenta, jaune, cyan ?

− le mode produit − le mode incrustation − le mode différence

10. Lequel de ces formats ne permet pas d'enregistrer les différents calques ?

− PSD − TIFF − GIF

8. Galerie Dans cette partie nous proposons aux navigateurs la possibilité de

travailler 6 images en leur donnant les fichiers des images initiales et en leur présentant une photo de l’image finale.

Photo1 Passer l'image en mode noir et blanc Pour chaque forme: • Sélectionner avec l'outil baguette magique • Créer un nouveau calque • Cliquer sur l'icone "ajouter un masque" pour convertir la sélection en masque • Jouer sur l'opacité du calque • Jouer sur la couleur du calque • Jouer sur les modes de fusion (mode incrustation, mode densité de couleur - ou + ) Photo2 Pour chaque forme: • Sélectionner avec l'outil baguette magique • Créer un nouveau calque • Cliquer sur l'icone "ajouter un masque" pour convertir la sélection en masque • Jouer sur l'opacité du calque • Jouer sur la couleur du calque • Jouer sur les modes de fusion (mode incrustation) Photo 3 Utiliser : • L'outil tampon de duplication Photo 4 Utiliser : • L'outil tampon de motifs pour faire le fond à carreau • L'outil pinceau • L'outil aérographe • L'outil goutte d'eau • L'outil doigt Photo 5 • Utliser l'outil baguette magique pour sélectionner le ciel • Cliquer sur l'icône créer un nouveau calque de

remplissage ou de réglage en bas dans la palette des calques pour convertir la sélection en calque • Jouer sur la teinte du calque • Sélectionner la commancde "intervertir" dans le menu sélection pour intervertir la sélection afin de sélectionner la dune • Cliquer sur l'icône créer un nouveau calque de remplissage ou de réglage • Jouer sur le niveau de saturation du calque Photo 6 • Utiliser l'outil rectangle de sélection • Cliquer sur l'icône créer un nouveau calque de remplissage ou de réglage pour convertir la sélection en calque • Jouer sur les modes de fusion des calques • Jouer sur l'opacité du calque

3 Description de l’interface

Principes Afin de ne pas perdre le navigateur nous avons choisi de proposer un plan

général du site et de le lui rendre accessible à chaque page par un hyperlien. Pour un souci d’homogénéité, dès la page de présentation du site nous présentons 5 vignettes illustrant par des couleurs différentes les 4 grandes parties du site ainsi que le plan général du site : • La partie concept sera illustrée par une vignette jaune • La partie manipulation par une vignette verte • La partie quiz par une vignette beige • La partie galerie par une vignette noire • Le plan par une vignette bleue. Ces vignettes seront rappelées dans toutes les pages dans le menu de navigation et la couleur correspondant à la partie dans laquelle le navigateur se trouve sera rappelée par le bandeau en haut de chaque page.

Page Chaque page comprend :

• Un menu de navigation sur le long du côté gauche • Un bandeau d’en-tête donnant le titre de la partie • Des tableaux contenant

− les textes définis dans le story-board − les images − les animations

• Une couleur de fond commune à toutes les pages • Une feuille de style CSS définissant des polices communes à

toutes pour garder une bonne homogénéité : − Une pour les titres

− Une pour les sous-titres − Une pour le corps de texte − Une pour les mots-clés − Une pour les hyperliens

Menu de navigation

Mis à part la page d’index, les pages possèdent un calque sur leur côté gauche qui sert de menu de navigation. Il est composé de 6 boutons disposés toujours dans le même ordre dont ( voir Annexe 6) : • 4 correspondant aux vignettes déjà présentées dans la page d’index

permettant d’aller sur les 3 autres grandes parties ou de retourner sur la page d’accueil de la partie dans laquelle on se trouve.

• 1 pour aller sur le plan et • 1 pour aller sur les pages précédentes ou suivantes à l’intérieur de la partie dans laquelle on est.(Voir Annexe 6)

Bandeau d’en-tête de page

Les pages de chaque partie possèdent en en-tête un bandeau horizontal reprenant le thème de la vignette qui les identifie.(voir Annexe 6)

Couleur de fond de la page

• Couleur d’arrière-plan : bleu foncé de code « #000066 »

4 Charte graphique

Hyperliens Voici la charte des hyperliens :

• Police des liens : • Taille : liée avec les feuilles de styles CSS • Couleur des liens : orange de code « #FFCC66 » • Style souligné : souligné

Titre Voici la charte des titres du site web :

• Famille de la police: Verdana, Arial, Helvetica, sans-serif • Taille de la police: 24 pts • épaisseur de la police: gras • Couleur de la police : #FFCC66.

Sous-titre Voici la charte des sous-titres du site web :

• Famille de police: Verdana, Arial, Helvetica, sans-serif • Taille de la police: 18 pts • Style de la police : normal • épaisseur de la police : gras • Couleur de la police : #FFFFFF

Corps du texte Voici la charte des corps du texte :

• Famille de la police: Verdana, Arial, Helvetica, sans-serif • Taille de la police: 12 pts • Style de la police : normal • Couleur de la police : #FFFFFF.

Mot-clé Voici la charte des mots-clé :

• Famille de la police: Verdana, Arial, Helvetica, sans-serif • Taille de la police: 12 pts • épaisseur de la police : gras • Couleur de la police : #FFCC66.

Tableau 1 Voici la charte du tableau de la page d’index (premier niveau

hiérarchique) (voir l’annexe 3-2) : • Largeur : 1024 pixels • Hauteur : 570 pixels • Nombre de colonnes : 1 colonnes • Nombre de rangs : 3 rangs

Tableau 2 Voici la charte du tableau de la page d’accueil de la partie

« concept », (deuxième niveau hiérarchique) (voir l’annexe 3-1): • Largeur : 980 pixels • Hauteur : selon les contenus dans le tableau, définie en pixels • Nombre de colonnes : 3 colonnes • Nombre de rangs : variable selon les contenus dans le tableau

Tableau 3 Voici la charte du tableau d’une page de la partie « concept »

(troisième niveau hiérarchique) (voir l’annexe 3-3) : • Largeur : 980 pixels • Hauteur : selon les contenus dans le tableau, définie en pixels • Nombre de colonnes : 3 colonnes • Nombre de rangs : variable selon les contenus dans le tableau, défini en pixels

Tableau 4 Voici la charte du tableau d’une page de la partie «manipulation »

(troisième niveau hiérarchique) (voir l’annexe 3-4) : • Largeur : 980 pixels • Hauteur : selon les contenus dans le tableau, définie en pixels • Nombre de colonnes : 2 colonnes • Nombre de rangs : selon les contenus dans le tableau

Tableau 5 Voici la charte du tableau d’une page de la partie « concept »

correspondant à un Pop up (quatrième niveau hiérarchique) (voir

l’annexe 3-4) : • Largeur : 700 pixels • Hauteur : selon les contenus dans le tableau, définie en pixels • Nombre de colonnes : 3 colonnes • Nombre de rangs : variable selon les contenus dans le tableau,

défini en pixels

Image Gif Voici la charte des paramètres des images de format Gif (voir

l’annexe 2) : • Résolution de l’image : 72 pixels par pouce • Espace de couleur de l’image : espace index de 8 bits • Compression de l’image : compression de 80%, haute qualité

Image Jpeg Voici la charte des paramètres des images de format Jpg (voir

l’annexe 1) • Résolution de l’image : 72 pixels par pouce • Espace de couleur de l’image : espace RVB de 24 bits • Compression de l’image : compression de niveau 8, haute qualité

Vidéo Voici la charte de la vidéo :

• Largeur : 504 pixels • Hauteur : 380 pixels • Format : Flv • Codage : codage Flv

5 Choix techniques

Logiciels utilisés

Voici la liste des logiciels nous avons utilisé pour réaliser le projet « à la découverte de Photoshop » • Dreamwear MX

− Le site et toutes nos pages ont été réalisés sous Dreamwear • Photoshop 7

− Les images numériques statiques ont toutes été réalisées sous Photoshop

• Image Ready 7 − Les animations des parties « image numérique » et « espaces

de couleur » ont toutes été réalisées sous Image Ready • Flash MX

− Les animations pour la partie « paramètres fondamentaux de Photoshop » ont toutes été réalisées sous flash. On a choisit de ne pas utiliser d’action-souris à cause de la difficulté technique engendrée par l’utilisation de codes.

− Les vidéos pour la partie « manipulations » ont été réalisées sous Flash MX. Le format de vidéo utilisé est *.flv, une nouvelle technologie de codage qui permet de réduire la taille des vidéos de façon très importante. Nous avons aussi utilisé une interface proposée par flash pour présenter la vidéo afin de permettre au navigateur de les manipuler facilement.

• Camtasia Studio 2 − Nous avons utilisé ce logiciel pour capturer les actions de la

souris sur l’écran et pour enregistrer les explications vocales. Ce logiciel donne des vidéos avec une bonne qualité d’image et de sons.

6 Gestion de la documentation

Présentation Le site web du projet « à la découverte de Photosop » a été réalisé

par deux personnes différentes mais comme les liens dans le site sont fortement liés aux noms des fichiers et des pages, nous avons défini une règle de nomination des fichiers et des pages. Voici ci-dessous ces régles et notre mode de gestion des documents et des fichiers.

Nomination des images

Voici la règle de nomination des images : • Le nom de l’image est composé de 10 chiffres et d’une lettre en

majuscule, les 8 premiers chiffres du fichier indiquent la date de la création du fichier, la lettre majuscule représente la première lettre du nom du créateur, les 2 derniers chiffres du fichier indiquent son ordre de création.

• Exemple : une image de nom « 20050531L01 » signifie que ce fichier a été créé le 31/05/2005 et c’est la première image créée par LU Ye ce jour.

Nomination des pages

Voici la règle de nomination des pages : • Le nom des pages est composé de quatre lettres, un tiret et deux

chiffres. • Exemple : une page de nom « conc_00 » signifie que c’est une

page de la partie concept et c’est la première page de cette partie.

Nomination des fenêtres

Voici la règle de nomination des fenêtres : • Le nom des fichiers est composé du nom de la page par où sort la

fenêtre plus une lettre indiquant la place hiérarchique de cette page dans le site

• Exemple : une fenêtre de nom « conc_01a » signifie que c’est une Pop up, elle fait partie de la page « conc_00 », elle est la première qu’on ait faite pour la page « conc_00 ».

Nomination des animations

Voici la règle de nomination des animations : • on reprend la règle de nomination des images.

Nomination de s vidéos

Voici la règle de nomination des vidéos : • on reprend la règle de nomination des images.

Gestion des fichiers

Voici la construction des documents (voir l’annexe 5) : • Une page index, au premier niveau hiérarchique • Un document « picture » pour mettre toutes les images du format

Jpg et du format Gif, au premier niveau hiérarchique • Un document « pages » pour mettre toutes les pages et les pop up,

au niveau premier hiérarchique • Un document « animation » pour mettre toutes les animations, au

premier niveau hiérarchique • Un document « vidéo » pour mettre toutes les vidéos, au premier

niveau hiérarchique • Un document « styles » pour mettre tous les fichiers CSS, au premier niveau hiérarchique.

7 Difficultés rencontrées

Voici la liste des difficultés que nous avons rencontrées pendant la

réalisation du projet : • Problèmes pour jongler avec les différentes versions de nos

travaux. • Problème pour télécharger le site du serveur vers le disque dur et

inversement • Problèmes pour appliquer les feuilles de styles dans chaque page • Problèmes pour insérer des animations ayant des actions par

souris de Image Ready dans Dreamweaver • Problèmes pour faire une animation avec des fonctions spéciales

dans flash MX • Problèmes pour obtenir des fichiers vidéo à la fois de bonne

qualité sonore et graphique et de petite taille.

8 Bilan

Même si ce site ne se veut pas exhaustif concernant le logiciel

Photoshop, nous espérons qu’il permettra aux étudiants de SI28 et du master DICIT d’acquérir les bases pour prendre en main Photoshop et qu’il leur donnera envie d’approfondir leurs

connaissances pour maîtriser ce logiciel. Nous nous sommes efforcés de concevoir une interface aérée afin que les utilisateurs puissent naviguer sans se perdre et sans qu’ils n’aient pas l’impression d’être noyés par les informations. Nous avons essayé d’utiliser des concepts interactifs pour rendre l’interface plus vivante, nous aurions voulu réaliser une galerie dans laquelle les utilisateurs auraient pu déposer en ligne leurs productions mais nous avons été limités par nos connaissances en base de données qui pourra être le sujet d’une UV future à suivre…

Annexe 1. Charte graphique des images JPEG

Voici la charte graphique des images de format JPEG du site web « à la découverte de Photoshop »

Image JPEG 1 : • Utilisation : dans la partie plan au 2ème niveau

hiérarchique • Largeur : 150 pixels • Hauteur : 120 pixels • Couleur : RVB 24 bits Nota : 4 images de ce type sont utilisées

−

Image JPEG 2 : • Utilisation : dans les pages d’accueil des parties

concept et manipulation (au 2ème niveau hiérarchique)

• Largeur : 114 pixels • Hauteur : 114 pixels • Format : JPEG • Couleur : RVB 24 bits Nota : 8 images de ce type sont utilisées

Image JPEG 3 : • Utilisation : dans les Pop up de la partie

concept (au 4ème niveau hiérarchique) • Largeur : 200 pixels • Hauteur : 200 pixels • Couleur : RVB 24 bits Nota : 3 images de ce type sont utilisées

Image JPEG 4 : • Utilisation : dans la partie concept (4ème niveau

hiérarchique) • Largeur : 200 pixels • Hauteur : 100 pixels • Couleur : RVB 24 bits Nota : 5 images de ce type sont utilisées

Image JPEG 5 : • Utilisation : dans la partie concept (3ème

niveau hiérarchique) • Largeur : 290 pixels • Hauteur : 165 pixels • Couleur : RVB 24 bits Nota : 3 images de ce type sont utilisées la page « paramètres fondamentaux »

Image JPEG 6 : • Utilisation : dans la partie manipulation (3ème

niveau hiérarchique) • Largeur : 400 pixels • Hauteur : 200 pixels • Couleur : RVB 24 bits Nota : 4 images de ce type sont utilisées

Image JPEG 7 : • Utilisation : dans la partie manipulation (3ème

niveau hiérarchique) • Largeur : 200 pixels • Hauteur : 300 pixels • Couleur : RVB 24 bits Nota : 2 images de ce type sont utilisées

Image JPEG 8 : • Utilisation : dans les parties manipulation et

galerie (3ème niveau hiérarchique) • Largeur : 200 pixels • Hauteur : 200 pixels • Couleur : RVB 24 bits Nota : 12 images de ce type sont utilisées

Image JPEG 9 : • Utilisation : Image des vignettes de chaque

partie • Largeur : 75 pixels • Hauteur : 60 pixels • Couleur : RVB 24 bits Nota : 5 images de ce type sont utilisées.

Image JPEG 10 : • Utilisation : Image des vignettes de chaque

partie • Largeur : 75 pixels • Hauteur : 60 pixels • Couleur : gris Nota : 5 images de ce type sont utilisées

Annexe 2. Charte graphique des images GIF

Voici la charte graphique d’image du format GIF du site web « à la découverte de Photoshop »

Image GIF 1 : • Utilisation : dans la partie concept (3ème

niveau hiérarchique) • Largeur : 498 pixels • Hauteur : 354 pixels • Couleur : Index 8 bits Nota : 1 image de ce type est utilisée dans la page concernant les espaces de couleurs

Image GIF 2 : • Utilisation : dans la partie concept (3ème

niveau hiérarchique) • Largeur : 586 pixels • Hauteur : 641 pixels • Couleur : Index 8 bits Nota : 1 image de ce type est utilisée dans la page concernant les formats

Image GIF 3 : • Utilisation : dans l’index (1er niveau

hiérarchique) • Largeur : 1024 pixels • Hauteur : 341 pixels • Couleur : Index 8 bits Nota : 1 image de ce type est utilisée

Image GIF 4 : • Utilisation : dans la partie concept dans les

pop up (4ème niveau hiérarchique) • Largeur : 200 pixels • Hauteur : 200 pixels • Couleur : Index 8 bits Nota : 2 images de ce type sont utilisées

Image GIF 5 : • Utilisation : dans la partie concept dans les

pop up (4ème niveau hiérarchique) • Largeur : 170 pixels • Hauteur : 60 pixels • Couleur : index 8 bits Nota : 2 images de ce type sont utilisées

Annexe 3. Charte graphique des pages

3.1 Page type basée sur le Tableau 2

41 pixels

60 pixels

980 pixels

180 pixels 40 pixels 585 pixels

100 pixels 114pixels

40pixels

215 pixels

Ce sujet continue page suivante

3.2 Page type basée sur le tableau 1

184 pixels

1024 pixels

3.3 Page type basée sur le tableau 3

41 pixels

60 pixels

980 pixels

50 pixels

40 pixels 655 pixels

110 pixels

50 pixels

225 pixels

3.4 Page type basée sur le tableau 4

60 pixels

980 pixels

25 pixels

40 pixels

110 pixels 40pixels

225 pixels

3.5 Page type basée sur le tableau 5

700 pixels

460 pixels

200 pixels

40 pixels

Annexe 4. Structure hiérarchique du site

Voici la structure hiérarchique du site composée de quatre niveaux hiérarchiques dont les pop up.

Vidéo Nota : Fenêtre Sortie

Galerie

VidéoEXO 6,7+explications

VidéoEXO 4, 5+explications

VidéoEXO2, 3+explications

VidéoEXO1+explication

PixelImage

Teinte LuminanSaturatio

TIFF PSDGIFJPG

LABHSLCMJNRVB

Outil à dessin, tampons

Calque

Masque

Outil à sélectionner, outil de remplir

L’image numérique et Photoshop

Paramètre fondamental de

Format d’images

Espace de couleur

Plan de site

Quiz

Manipulations

Concepts

Page

d’a

ccue

ille

Annexe 5. Structure hiérarchique des documents du site

Voici la structure hiérarchique des documents composée de 2 niveaux

hiérarchiques.

Annexe 6. Structure de l’interface

Structure de la page d’accueil (niveau hiérarchique 2)

Accès plan

Menu Zone de sous titre

Zone de texte Zone

Vignette thématique Titre de thème

Structure de la page d’index (niveau hiérarchique 1)

Zone d’animation

Zone d’image de fond de tableau

Structure d’une page de la partie concept (niveau hiérarchique 3)

Accès page précédente/suivante

Accès plan

Menu Zone de titre

Zone d’image

Vignette thématique Titre de thème

Structure d’une page de la partie manipulations (structure hiérarchique 3)

Accès plan

Menu

Zone de hyperlien à vidéo

Zone de texte

Zone d’image

Vignette thématique Titre de thème

Structure d’une page de pop-up (structure hiérarchique 4)

Zone d’image Zone de titre

Zone de texte