Table des matières

Introduction ................................................................................................................................ 5
Partie 1 : Les images numériques ............................................................................................... 5
1. Image bitmap Vs image matricielle .................................................................................... 5
1.1. Présentation ..................................................................................................................... 5
1.2. L’image vectorielle à travers des exemples .................................................................... 7
1.2.1. Exemple 1 .................................................................................................................... 7
1.2.2. Exemple 2 .................................................................................................................... 7
1.2.3. Exemple 3 .................................................................................................................... 8
1.3. Conclusion ....................................................................................................................... 9
2. Terminologie ..................................................................................................................... 10
2.1. Définition de l’image..................................................................................................... 11
2.2. Résolution de l’image .................................................................................................... 11
2.3. Codage des couleurs ...................................................................................................... 12
2.4. Poids de l’image ............................................................................................................ 12
2.5. Compression, redimensionnement des images .............................................................. 13
2.5.1. Redimensionnement .................................................................................................. 14
2.5.2. La compression .......................................................................................................... 14
3. Format d’images ............................................................................................................... 15
3.1. Format d’images matricielles compressées ................................................................... 15
3.1.1. Le format JPEG ......................................................................................................... 15
3.1.2. Le format PNG (Portable Network Graphics) ........................................................... 16
3.1.3. GIF (Graphics Interchange Format) .......................................................................... 16
3.2. Format d’images matricielles non compressées ............................................................ 16
3.2.1. TIFF (Tagged Image File Format) ............................................................................. 16
3.2.2. BMP (Windows bitmap) ............................................................................................ 16
3.3. Format d’images vectorielles ........................................................................................ 17
3.3.1. EPS (Encapsuled PostScript) ..................................................................................... 17
3.3.2. SVG (Scalable Vector Graphics) ............................................................................... 17
4. Photo libre de droit et droit d’auteur : Comment rechercher une image ? ........................ 18
4.1. Droit d’auteur et licence ................................................................................................ 18
4.2. Comment vérifier la licence lors d’une recherche d’image ? ........................................ 19
4.2.1. Paramétrage du bouton outils de google .................................................................... 19
4.3. Recherche inversée avec google images ....................................................................... 20
5. Applications ...................................................................................................................... 20
5.1. Traitements de base ....................................................................................................... 21
5.1.1. Capture écran ............................................................................................................. 21
5.1.2. Outils de forme (vectorielle) ...................................................................................... 23
5.2. Disposition des formes .................................................................................................. 24
5.2.1. Application n°1 : Création de dessins vectoriels ....................................................... 24
5.2.1.1. Télécharger les fichiers de travail et les décompresser .......................................... 25
5.2.1.2. Modifier les couleurs ............................................................................................. 25
5.2.1.3. Insérer des formes prédéfinies ............................................................................... 27
5.2.1.4. Aligner des formes ................................................................................................. 27
5.2.1.5. Ajouter un effet prédéfini ....................................................................................... 29
5.2.1.6. Grouper/dissocier des éléments ............................................................................. 30
5.2.1.7. Gestion des calques ................................................................................................ 30
5.2.1.8. Exportation d’images ............................................................................................. 32
5.2.2. Application n°2 : Retouche d’images matricielles .................................................... 33
5.2.2.1. Description du photomontage à réaliser................................................................. 34
5.2.2.2. Téléchargement et décompression des fichiers de travail ........................................ 1
5.2.2.3. Rognage d’une image............................................................................................... 1
5.2.2.4. Découpage d’une image ........................................................................................... 3
5.2.2.5. Assemblage d’éléments............................................................................................ 6
5.2.2.6. Rotation d’éléments ................................................................................................. 8
5.2.2.7. Paramétrage d’effets sur image (Matricielle et vectorielle) ..................................... 9
5.2.2.8. Insertion de texte .................................................................................................... 11
5.2.2.9. Génération du photomontage ................................................................................. 12
Partie 2 : Autres formats multimédia ....................................................................................... 12
1. Propriétés des fichiers (audio et vidéo) ............................................................................. 13
2. Formats des fichiers (audio et vidéo) ................................................................................ 13
3. Les lecteurs de fichiers (audio et vidéo) ........................................................................... 15
4. Opérations de base sur un fichier multimédia ................................................................... 16
4.1. Interface des lecteurs multimédia .................................................................................. 16
4.2. Ajouter / modifier la bande sonore d’une vidéo ............................................................ 16
4.3. Ajouter des sous-titres à une vidéo................................................................................ 17
Liens utiles ............................................................................................................................... 20
Présentation du cours

Domaine de compétences : Création de contenu

Défi : Développer des documents multimédias
Objectifs du cours :

« Développer des documents à contenu multimédia pour créer ses propres productions
multimédia, enrichir ses créations majoritairement textuelles ou créer une œuvre transformative
(mashup, remix, ...) (avec des logiciels de capture et d'édition d'image / son / vidéo / animation,
des logiciels utiles aux pré-traitements avant intégration, etc.)» (Extrait du site officiel, Pix.fr)

Pour les compléments d’informations proposés dans ce document, il est conseillé

de se munir d’un lecteur de QR Codes (QR Scanner, QR Code Lecteur). Notez qu’à la fin du
document, vous disposez également des liens internet vers les mêmes documents.
Libre à vous de choisir le moyen qui vous convient le mieux !
Développer des
documents multimédias
Introduction
Pour ce défi, nous avons choisi de séparer les différents éléments multimédias. Étant donné le
volume de connaissances très important autour de l’image que la réussite du défi nécessite de
maîtriser, nous consacrerons une partie à part entière à l’image : où nous y aborderons des
aspects théoriques mais également une grande part, sera consacrée aux traitements sur les
images, à travers 2 grands exercices.
Quant aux 2 autres dimensions du multimédia, à savoir la vidéo et le son, elles seront regroupées
dans une même leçon. En fonction de l’évolution de la base de questions de la plateforme Pix,
nous viendrons enrichir au fur et à mesure la partie dédiée au traitement des vidéos et du son.

Partie 1 : Les images numériques

1. Image bitmap Vs image matricielle

1.1. Présentation
Une image numérique est un fichier informatique dont le rendu représente une image. Il existe
2 types d’images numériques : les bitmaps et les vectorielles.
Nous allons voir dans cette partie ce qui caractérise chacune de ces images ainsi que les
principaux avantages à utiliser les unes plutôt que les autres.
L’image bitmap est sans aucun doute, le type d’images le plus répandu. Ce sont des images
créées à partir des appareils photo numériques, ou obtenues à partir de scanners, par exemple.
Leur rendu est très précis notamment au niveau des détails, des ombres et des formes.
Elle se constitue de points, appelés pixels (pour PICture ELement), qui représentent la plus
petite entité qui va composer l’image. Nous l’avons vu dans une précédente leçon, les pixels
sont placés dans une matrice à 2 dimensions, qui vont représenter la hauteur et la largeur de
l’image. La notion de matrice a donné un autre nom à ce type d’image, que l’on peut retrouver
sous l’appellation d’image matricielle.
Les pixels d’une image bitmap étant figés dans une matrice, et étant donné que l’affichage sur
un écran se fait par défaut, de gauche à droite et de haut en bas, l’affichage des pixels qui
composent l’image, se fera dans le même sens.

Scanner ce code pour voir une illustrationi

Cette particularité des images bitmaps, offre à la fois des avantages mais a ses limites. En effet,
les pixels étant rigoureusement rangés dans des cases, afficher une image bitmap revient à
afficher cette matrice. Il s’agit là d’une simple opération d’affichage qui ne sollicite pas
beaucoup le processeur. En revanche, le fait de devoir identifier chaque pixel d’une image qui
en compte des millions, d’enregistrer ses coordonnées ainsi que le code couleur qui lui est
associé, nécessite un grand espace de stockage.
L’image vectorielle, quant à elle, est assimilée au résultat de l’exécution d’un algorithme sur
des formes géométriques, telles que les rectangles, cercles et autres formes plus complexes
comme les courbes de Bézier. Un fichier d’image vectorielle utilise comme les images bitmaps,
la technique des pixels mais contrairement à ces dernières, les pixels ne sont pas enregistrés
dans une matrice. Leur position sur l’écran ainsi que leur couleur sont déterminées d’une
manière dynamique. C’est le résultat d’un algorithme qui s’exécute à chaque ouverture du
fichier contenant l’image vectorielle, ou plus précisément contenant les codes informatiques de
chaque élément géométrique composant l’image. Nous reviendrons en détail sur cette notion
dans la vidéo suivante.
Les images vectorielles sont contenues dans des fichiers plus légers que les fichiers d’images
bitmaps, car ils ne vont contenir que 3 informations :

Les coordonnées des formes

Les couleurs de chaque forme
Les effets possibles sur chaque forme

L’affichage d’une image vectorielle consiste donc à afficher toutes ses formes géométriques, à
des coordonnées spécifiques de l’écran, en appliquant des codes couleurs prédéfinies ainsi que
des effets éventuels tels que l’opacité.
 1.2. L’image vectorielle à travers des exemples
Pour mieux comprendre le principe de ces images, étudions ensemble ces exemples d’images
vectorielles créées avec l’outil Inkscape et inspectons leur code. Notez que pour obtenir le code
d’une image vectorielle, il suffit d’ouvrir l’image à l’aide d’un navigateur internet.

Scanner ce code pour voir une illustration ii

1.2.1. Exemple 1
<svg xmlns="http://www.w3.org/2000/svg" >

<rect height="80" width="110" id="rectangle1" x="40" y="20"

fill="#000080" stroke="#666666" stroke-width="3" />

Il s’agit d’un rectangle bleu avec une bordure grise, décrit par 2 lignes de code :
La première ligne signifie qu’il s’agit d’un fichier SVG qui répond à la norme Internet W3C,
qui décrit la manière dont sont créées les pages web
La deuxième, décrit la forme qui s’affiche, à savoir :

C’est un rectangle, (rect)de hauteur 80px (height="80") et de largeur 110

(width="110").
Cet objet est identifié par l’étiquette rectangle1 (id="rectangle1")
L’attribut fill sert à définir la couleur de remplissage de la forme qui peut être soit
fournie en héxadécimal (fill="#000080") soit, définie en toutes lettres. Ici, on aurait pu
saisir (fill=blue) à la place du code hexadécimal.
Enfin, les attributs stroke et stroke-width, désignent respectivement la couleur du
contour ("#666666") ainsi que son épaisseur ("3").

1.2.2. Exemple 2
<ellipse cx=”100” cy=”130” rx=”80” ry=”50” fill=”red”
stroke=”#008000” stroke-width=”3” id=”Ellipse1” />

On retrouve dans l’exemple n°2, les attributs de description de l’ellipse, à savoir :

 La nature de la figure, ici, on voit qu’il s’agit bien, d’une ellipse (<ellipse),
Les coordonnées du rayon, abscisse (cx=  100 ) et ordonnée (cy=  130 ),
Les valeurs en pixels des 2 rayons, horizontal (rx=  80 ) et vertical (ry=  50 ),
La couleur de remplissage du cercle, (fill= red )
La couleur (stroke= #008000 ) et l’épaisseur (stroke-width= 3 )de la bordure,
Enfin le nom de l’objet (id= Ellipse1 )

On remarque au passage, que les couleurs peuvent être indiquées en anglais, ou bien désignées
par leur valeur hexadécimale, les 2 solutions sont possibles.
Question : que faut-il changer dans ce code pour transformer cette figure en cercle ?

Scanner ce code pour voir une illustration iii

Si vous avez compris le principe de description des images vectorielles, et que vous vous
rappelez qu’un cercle a un rayon horizontal de même mesure que le rayon vertical, alors vous
comprendrez assez facilement qu’il suffit de saisir des valeurs identiques pour les attributs
correspondants, à savoir : rx et ry et il y a donc 2 réponses à cette question :

Rx= 50 ry= 50 : on obtient un cercle de rayon 50

Ou bien

Rx= 80 ry= 80 et on obtient un cercle de rayon 80

Scanner ce code pour voir une illustrationiv

1.2.3. Exemple 3

Pour ce dernier exemple, on vous donne des portions de codes d’images vectorielles, on vous
demande de retrouver les images correspondantes. Attention, du code s’est glissé par erreur.
Rajouter les images de l’exemple

<circle fill="#ff6600" stroke="#ffff00" stroke-width="3" id="Figure-3"

r="50"/>
Il s’agit ici d’un cercle (circle)dont les couleurs de remplissage (fill="#ff6600") et de bordure
(stroke="#ffff00") sont définies. L’épaisseur de la bordure et de 3 (stroke-width="3"). Notez
qu’il n’y a qu’un seul rayon qui est précisé (r="50"), c’est normal puisque c’est un cercle qui
est défini avec l’attribut circle. Il s’agit donc de la 2ème figure et son identifiant est Figure-3
(id="Figure-3")
<rect fill= "blue" stroke="#ff0000" stroke-width="3" id="Figure-1"
width="110" height="80" />
Cette ligne de code décrit un rectangle (rect), sa couleur de remplissage (fill= "blue")
et celle de sa bordure (stroke="#ff0000"). Alors ici, il faut lire attentivement le reste du code
pour distinguer entre les rectangles proposés : l’épaisseur est 3 (stroke-width="3") et la
largeur (width="110") est plus grande que la hauteur (height="80") : il s’agit donc sans
aucun doute de la figure De gauche, on peut donc l’identifier, puisque l’attribut id est fourni
(id="Figure-1").
<ellipse fill" ="#ff00ff" stroke="#4d4d4d" stroke-width="2.5" id="Figure-4"
rx="50" ry="36"/>
Ce code décrit une ellipse (ellipse), plus précisément ses couleurs de remplissage (fill"
="#ff00ff") et de contour (stroke="#4d4d4d") ainsi que son épaisseur (stroke-width="2.5").
Enfin, le rayon horizontal (rx="50") est plus grand que le rayon vertical (ry="36"). Cette
figure ne fait pas partie des figures proposées.
<rect fill="#0000ff " stroke="#ff0000" stroke-width="0" id="Figure-2"
width="80" height="110"/>
Il s’agit ici, d’un rectangle (rect) dont les couleurs de remplissage (fill="#0000ff ") et de
contour (stroke="#ff0000") sont précisées. Mais attention ici, l’épaisseur du contour (stroke-
width="0") est égale à 0. C’est pour signifier qu’il ne faut pas faire apparaître la bordure,
même si on a défini sa couleur précédemment. La figure-2 est donc le rectangle du bas.
<ellipse fill="#ff6600" stroke="#ffff00" stroke-width="3" id="Figure-4"
rx="50" ry="50"/>
Enfin, ce code décrit une ellipse, (ellipse) ses 2 couleurs (fill="#ff6600" stroke="#ffff00")
ainsi que l’épaisseur de sa bordure (stroke-width="3"). Ce qui est intéressant de voir ici, ce
sont les valeurs de rx et ry qui sont identiques et qui représentent respectivement le rayon
horizontal rx="50") et vertical (ry="50") de l’ellipse. Il s’agit donc, d’une autre manière de
définir un cercle. Et comme, les codes couleurs (fill="#ff6600" stroke="#ffff00") et la valeur
des rayons correspondent aux données du cercle, alors nous avons là, 2 descriptions
différentes pour la même figure.

Scanner ce code pour voir une illustration v

1.3. Conclusion
Pour finir avec cette partie consacrée aux différences entre les 2 types d’images, il est important
de retenir que le concept même de définition des images vectorielles par le recours à du code
informatique, est né pour répondre au besoin de rendre encore plus fluide notre navigation entre
les pages web, en :
Accélérant d’une part, l’affichage de leurs éléments décoratifs comme les images, banderoles
et bannière,
Mais également en adaptant l’affichage des pages consultées à la diversité des écrans de
navigation tels que téléphones, ordinateurs, tablettes, smart TV, etc.
Dès lors, on comprendra aisément, la nécessité de créer un format d’images au poids plus léger
que celui des images matricielles. Voilà pourquoi une image vectorielle est définie à l’aide
d’une description rudimentaire (forme, coordonnées et couleur), et c’est le microprocesseur qui
a la charge d’effectuer les calculs et de l’afficher, alors qu’une bitmap, se définie par
l’identification (coordonnées et code couleur) des millions de pixels qui la compose.
Enfin la nécessité de s’adapter aux différents moniteurs, constitue en soi, une autre différence
avec les bitmaps. En effet, avec une image vectorielle, lorsqu’on fait un zoom dessus ou que
nous l’étirons, il n’y a aucune altération, puisque l’affichage est dynamique et résulte de
l’exécution d’un algorithme. Pour les bitmaps, en revanche, cela se traduit par l’apparition de
pixels, qui rendent l’image floue, c’est le phénomène de pixellisation qui résulte d’une perte
d’informations provoquée au moment du zoom et qui ne peut pas être compensée car d’une part
l’affichage n’est pas dynamique contrairement à celui des images vectorielles et d’autre part le
contenu de la matrice est figé et ne fait pas l’objet d’un traitement particulier par le processeur.

2. Terminologie
Nous l’avons vu dans la partie précédente, les images, bitmaps ou vectorielles, ont chacune
leurs caractéristiques et selon où nous plaçons nos priorités, nos choix pourront être influencés.
Pour une meilleure qualité, créateurs artistiques et photographes pour ne citer que ces 2
professionnels de l’image, opteront plutôt pour des images bitmaps, même si certains
traitements particuliers sont gourmands en mémoire vive et capacité de stockage. Tandis que le
souci majeur des web designers, par exemple, se matérialise par un éternel compromis entre
esthétique et vitesse de traitement, autrement dit, proposer des pages web ergonomiques et
attrayantes, certes, mais surtout à la navigation fluide et dynamique pour pouvoir être
visualisées sur la plupart des écrans.
Dès lors, il devient essentiel d’être attentif à certaines caractéristiques des images, si vous
voulez éviter de perdre un temps fou en les téléchargeant, en les partageant ou encore au
moment de les imprimer ou les scanner.
 2.1. Définition de l’image
Une des toutes premières propriétés d’une image est sa définition. On rappelle qu’une image
bitmap, se définit à l’aide d’une matrice à 2 dimensions, contenant les pixels qui composent
l’image. On dit, par exemple, qu’une image a une définition de 640 par 480, ce qui signifie que
l’image est formée par des lignes contenant chacune, 640 pixels et 480 par colonnes.
La définition de l’image est obtenue en multipliant le nombre de pixels sur une ligne de la
matrice par le nombre de pixels sur une colonne de cette matrice.
On obtient ainsi la définition de l’image également appelée dimension informatique. La
définition s’exprime en pixels.

Scanner ce code pour voir une illustration vi

Cet exemple montre comment en faisant un clic droit et choisissant Informations sur l’image,
on retrouve un certain nombre d’informations, dont la définition de l’image. Ici, elle est de 1920
* 1278 pixels

Scanner ce code pour voir une illustration vii

2.2. Résolution de l’image

La définition est souvent confondue à tort avec la résolution de l’image, qui détermine quant à
elle, la densité de pixels, ou encore le nombre de points sur une surface de l’image appelée
pouce soit 2.54cm (inch en anglais), cette propriété est exprimée en :
Points Par Pouce (ppp) ou encore en Dots Per Inch (dpi)
Reprenons l’exemple précédent, dans les propriétés de l’image, en plus de ses dimensions (1920
px de large sur 1278 px de long) on peut lire que la résolution est de 96 ppp, si l’on considère
un pouce carré de l’image (c’est-à-dire un carré de 2.54cm de côté) il y a 96 px sur chaque
ligne, et 96 px sur chaque colonne, soit : 96 * 96 = 9216 pixels sur un pouce carré
 Scanner ce code pour voir une illustration viii

2.3. Codage des couleurs

On vient de le voir, une image est représentée sous forme d’une matrice de pixels. Pour
reconstituer l’image, il suffit d’associer à chaque pixel, une couleur qui sera codée sur un certain
nombre de bits. C’est ce que l’on désigne par profondeur de couleur.
Il existe plusieurs normes de codage. On peut citer :

La norme de codage de la couleur sur 1 bit : 2 couleurs (21), le noir et le blanc.

Celle qui code les couleurs sur 4 bits : ce qui correspond à 16 couleurs (24)
Ou encore celle qui utilise 8 bits : pour coder 256 couleurs (28)
Et enfin, la norme dite couleurs vraies (truecolor), consiste à stocker dans chaque case
de la matrice, la couleur en RGB, c’est-à dire dans des proportions de Rouge, Vert et
Bleu. Pour cela, chacune des 3 composantes est codée sur 1 octet, ce qui donne une
profondeur de couleur de 3 * 8 = 24 bits

2.4. Poids de l’image

Après avoir passé en revue, les principales propriétés de l’image à savoir, sa définition, sa
résolution et sa profondeur de couleur, il ne reste plus qu’à aborder la notion de poids de
l’image.
On désigne par poids d’image, la taille en Ko, du fichier informatique contenant l’image.
Le poids de l’image est obtenu de la manière suivante :
Nb de pixels qui composent l’image * profondeur du codage.
Si l’on reprend l’exemple précédent :
Les dimensions de l’image sont : 1920 sur 1278, et la profondeur de couleur est de 24 bits
On commence par déterminer :

le nombre de pixels dans l’image :

1920 * 1278 = 2 453 760 pixels

 Puis le poids de chaque pixel en octets (ou encore la profondeur de couleur). S’il est de
24 bits, alors une rapide division par 8, nous donne le poids en octets :

24 bits / 8 = 3 octets

Et on en déduit le poids de l’image en octets, c’est-à-dire : le nb de pixels dans l’image

* le poids d’un pixel en octet, est on obtient :

2 453 760 * 3 = 7 361 280 octets

La conversion en ko, se fait par une division par 1024. Notre fichier a donc un poids de
: 7188 Ko qui correspond à la division de 7 361 280 par 1024.

En résumé, les principales propriétés d’une image sont :

sa définition, ou encore le nombre total de pixels contenus dans l’image.

sa résolution, qui désigne la densité de l’image, c’est à dire le nombre de pixels contenus
dans un pouce carré
la profondeur de couleurs, ou encore le nombre de pixels nécessaires pour coder chaque
couleur qui compose l’image
et enfin, le poids de l’image c’est à dire la taille du fichier informatique de l’image

Scanner ce code pour voir une illustration ix

2.5. Compression, redimensionnement des images

Nous avons passé en revue les propriétés des images et dans quelle mesure elles contribuent à
alourdir ou non le poids des fichiers informatiques. Une qualité d’image se paie en espace de
stockage, en temps de traitement et d’affichage. En effet, ne vous est-il jamais arrivé d’attendre
de longues minutes pendant l’envoi de vos photos. Vous êtes-vous demandé pourquoi ?
Tout est question de taille de fichier informatique. En effet, plus la définition et la profondeur
de codage sont élevées et plus le fichier informatique sera volumineux. Il faudra donc faire un
compromis entre qualité de l’image et taille de fichier : opter pour la qualité lorsque cela est
nécessaire ou au contraire réduire la taille du fichier.
Pour cela, vous devrez bien garder à l’esprit la distinction entre le redimensionnement d’une
image et sa compression.

2.5.1. Redimensionnement
Le redimensionnement comme on peut intuitivement l’imaginer, consiste à modifier les
dimensions de l’image d’origine. Il s’agit là, d’une manière de réduire la taille du fichier
informatique, sans altérer la qualité de l’image d’origine.
Pour mieux comprendre cette notion, prenons l’exemple de cette image. Son poids sur disque
est de 2548 Ko. Une rapide consultation de ses propriétés nous permet de voir ses dimensions
d’origine 3464 / 5196 px ainsi que sa résolution, 72 dpi (c’est à -dire, 72 points par pixels, ou
encore, dots per Inch, en anglais).
Si à l’aide d’un logiciel de traitement d’image, on réduit de 50% ses dimensions, on constate
que la taille du fichier informatique qui en résulte est réduite, on passe à 1464 Ko contre plus
de 2500 pour le fichier d’origine et ceci sans modifier la résolution, qui est toujours de 72 dpi.

Scanner ce code pour voir une illustrationx

2.5.2. La compression
Quant à la compression, elle consiste à réduire la taille du fichier image non pas en réduisant sa
définition mais plutôt en réduisant les pixels non indispensables, ceux dont la suppression
n’aurait pas ou peu de conséquences sur le résultat final. Cette réduction est le résultat
d’algorithmes de compression et a ses limites. En effet, un taux de compression élevé peut
altérer le rendu de l’image et la rendre floue. Mais pour la plupart de nos échanges, cette perte
en qualité n’est pas significative et nous permet de transférer des fichiers images sans trop de
perte de temps.
Cet exemple montre une image, ici, iceberg.jpg, et 2 images résultantes avec 2 taux de
compression différents : l’une compressée à 25%, et l’autre, à 70%.
On observe effectivement que le poids des 2 fichiers issus de la compression est bien plus bas
que celui de l’image d’origine, (respectivement 1.58 Mo et 887 Ko contre 6.93 Mo pour le
fichier non compressé) et que cela n’a pas de conséquence sur la définition de l’image qui reste
la même.
On vérifie également, que cet allégement dans le poids des fichiers compressés ne se fait pas
au détriment de la résolution des images qui est inchangée d’une image à l’autre.

Scanner ce code pour voir une illustration xi

Notez pour conclure sur cette partie, qu’un des algorithmes les plus utilisés en matière de
compression d’image est le programme JPEG, à ne pas confondre avec les fichiers d’extension
JPG, que nous verrons plus tard dans cette même leçon. Parmi les solutions gratuites de
compression d’images, Gimp et paint.net, sont 2 outils dont la prise en main est relativement
simple et intuitive.

3. Format d’images
Nous venons de voir l’ensemble des propriétés d’une image et leurs influences sur la qualité et
le poids du fichier informatique. Il est donc important, avant de se lancer dans un quelconque
travail de création, de se poser les bonnes questions pour choisir les bons formats, en fonction
de l’effet escompté. S’agit-il d’un travail destiné à être imprimé ou affiché ? Quelles seront les
dimensions de vos images ? ou encore, quelle sera la profondeur de codage des couleurs ?
Allez-vous opter pour des images matricielles ou vectorielles, etc.
Parmi les formats d’images matricielles les plus répandues, il y a celles destinées à la diffusion,
(fichier informatique léger) et donc qui subissent une compression et celles destinées à
l’impression, qui doivent conserver toute leur qualité au détriment de leur poids en Ko.

3.1. Format d’images matricielles compressées

3.1.1. Le format JPEG

Une image enregistrée sous le format JPEG, subit une forte compression et donc une grande
perte d’informations. Ce format est déconseillé pour les travaux d’impression. De plus, les
images .jpg ne tiennent pas compte de la transparence, ce qui peut représenter un frein pour les
retouches. Du fait de la compression des images, ces fichiers sont très légers et de ce fait, très
répandus sur internet.
 3.1.2. Le format PNG (Portable Network
Graphics)
PNG est un format d’image destiné à l’affichage sur écran et à la diffusion sur Internet. Ce sont
des images qui subissent un fort taux de compression avec très peu de perte en qualité. Du fait
qu’il gère la transparence, ce format est resté longtemps très utilisé dans la création de pages
web, avant d’être devancé par le format SVG, plus léger.

3.1.3. GIF (Graphics Interchange Format)

Le format GIF est très proche du format PNG en matière d’affichage des couleurs et de gestion
de la transparence. C’est un format limité à l’affichage de logos et d’icônes. Ce format léger,
est connu pour sa capacité d’animation image par image. Avec la normalisation du format PNG,
le format GIF tend à disparaître.

Scanner ce code pour voir une illustration xii

3.2. Format d’images matricielles non compressées

Dans la famille des images matricielles non compressées, les formats d’images les plus
répandus sont le :

3.2.1. TIFF (Tagged Image File Format)

Ce format est utilisé pour l’impression notamment au niveau professionnel, car il accepte les
principales profondeurs de couleurs, il offre des niveaux de compression différents et accepte
les zones de transparence et ceci sans perte de qualité. Ces qualités font que les fichiers de ce
format sont lourds et donc fortement déconseillés pour de la diffusion.

3.2.2. BMP (Windows bitmap)

Le format BMP est un des premiers formats d'image utilisé sous Windows. La compression sur
ce format est très rarement utilisée, ce qui explique que souvent les images au format bmp soient
de bonne qualité.
Malheureusement, ce sont des fichiers volumineux et ne sont pas adaptés à la diffusion bas
débit.

Scanner ce code pour voir une illustration xiii

3.3. Format d’images vectorielles

Enfin, dans le champ des images vectorielles, cette fois-ci, il existe essentiellement 2 formats
de fichiers :

3.3.1. EPS (Encapsuled PostScript)

Ce format créé par Adobe est essentiellement utilisé pour l’impression et la création de logos
et d’images illustrées. Le fait d’être un format vectoriel permet un agrandissement de l’image
sans perte. Il nécessite l’utilisation de solutions payantes pour visualiser leur code.

3.3.2. SVG (Scalable Vector Graphics)

Ce format est couramment utilisé dans les productions de pages internet, notamment dans les
logos et les illustrations graphiques. Elles peuvent être intégrées sous forme d’images ou
directement en intégrant le code à la structure HTML des pages. Pour les afficher, on peut soit
utiliser une application de création d’images vectorielles, telles que Gimp ou Inkscape, ou bien
demander à les ouvrir avec un navigateur. [OuvrirSvg.mp4]
Les fichiers SVG sont légers et permettent un agrandissement sans perte, ce qui les rend
particulièrement recherché par les développeurs de sites web responsives, c’est-à-dire qui
s’adaptent aux différents périphériques d’affichage.

Scanner ce code pour voir une illustration xiv

4. Photo libre de droit et droit d’auteur : Comment
rechercher une image ?
Même si le texte ne disparaîtra jamais des pages web, les images sont de plus en plus présentes.
Elles viennent ajouter des couleurs et rendre la lecture moins séquentielle. Elles peuvent être
utilisées pour illustrer une situation ou pour schématiser un concept.

4.1. Droit d’auteur et licence

Au même titre que n’importe quel auteur ou créateur, les œuvres des photographes et
concepteurs d’images bénéficient, elles aussi, du droit d’auteur. Certains auteurs protègent leurs
images, il est donc nécessaire, si l’on souhaite utiliser une de leurs œuvres d’obtenir leur
autorisation formelle avant d’en faire l’usage. D’autres, déposent leurs œuvres sur des sites qui
proposent des banques d’images, payantes ou gratuites, auquel cas, il est possible de les utiliser
même si parfois cela nécessite de prendre un abonnement ou l’achat à l’unité des images
désirées. C’est le cas de la plateforme shutterstock (payante) ou encore Unsplash (gratuite).
Enfin, une troisième catégorie d’auteurs, propose leurs œuvres sous licences Creative
Commons. Dans ce cas, les images sont gratuites, mais soumises à certaines conditions.
Alors, comment savoir si une image que vous vous apprêtez à insérer dans votre site ou votre
document est libre de droits et que le simple téléchargement sur vos supports de stockage est
permis ?
Notez que généralement, les auteurs incrustent dans leur photo des logos ou autres signatures
en filigrane, pour signifier que l’image n’est pas libre d’utilisation. C’est le cas de la banque
d’images, Shutterstock, qui propose des images de haute qualité. Leur téléchargement est
techniquement possible, mais si l’utilisateur ne s’acquitte pas du paiement dû, l’image s'affiche
avec le logo de Shutterstock en filigrane.
 4.2. Comment vérifier la licence lors d’une recherche
d’image ?

4.2.1. Paramétrage du bouton outils de google

Une autre façon de s’assurer des droits définis par les auteurs des images que vous consultez
consiste à faire une recherche avec Google Image. Dans la barre de recherche vous saisissez les
mots clés de votre recherche, puis, en déroulant l’option Outils, vous pouvez choisir, dans la
zone, droits d’usage, le niveau de protection ou bien préciser l’usage que vous comptez en faire.
S’agit-il d’une recherche d’images sous licence CC ? Ou bien allez-vous en faire un usage
commercial ? Le navigateur affichera alors les images en tenant compte de vos préférences.

Scanner ce code pour voir une illustration xv

En cliquant sur une image, vous pouvez vérifier sa licence. Ainsi, tandis que la première image
est libre de droit et gratuite, la seconde est soumise à une licence et à des conditions d’utilisation.
Pour qu’une image soit répertoriée correctement, il est important de renseigner ses balises. Dans
le cas contraire, le moteur de recherche la classe par défaut, avec conditions d’utilisation.
 4.3. Recherche inversée avec google images
Si malgré toutes ces précautions, vous vous retrouvez en possession d’une image dont vous ne
vous souvenez plus de la licence d’utilisation, sachez qu’il est possible de faire une recherche
inversée toujours à l’aide de Google Image.
Pour cela, allez sur une page de recherche de Google Images, plutôt que d’écrire dans la barre
d’adresse un ensemble de mots clés, cliquez sur l’icône appareil photo. Cette action, précise à
Google, que le critère de recherche portera sur une image et non sur une chaîne de caractères.
Il faudra alors, sélectionner l’image en question, stockée sur votre ordinateur ou bien saisir l’url
de la page web où elle apparaît, puis lancer la recherche. Au bout de quelques secondes, Google
vous renvoie toutes les informations dont il dispose sur l’image.

Scanner ce code pour voir une illustration xvi

5. Applications
Vous avez vu, dans les parties précédentes du cours, tout ce qui est nécessaire de savoir sur les
images, des différents types d’images, aux différents formats. Les propriétés des unes et des
autres et quand et pourquoi recourir à des images vectorielles plutôt qu’à des images
matricielles, et inversement.
Cette deuxième partie du cours, vient en complément, apporter de brèves explications et
références à la théorie autour de l’image. Vous y trouverez également des tutoriels, au fur et à
mesure de la réalisation de 2 applications : l’une consacrée aux images vectorielles et l’autre
aux images matricielles.
Vous apprendrez ainsi à opérer des modifications et créer à votre tour des images.
Ne vous est-il pas déjà arrivé de ne pas pouvoir publier des images ou partager des événements
immortalisés par des photos, à cause d’éléments parasites sur la photo, ou encore, d’une
personne qui se serait invitée dans le champ de l’image ?
Vous allez apprendre avec la première application à créer des images vectorielles, plus
précisément comment créer des éléments d’image, les modifier, les enregistrer pour constituer
votre propre médiathèque d’images.
La deuxième application, vous permettra de vous familiariser avec les images matricielles.
Vous créerez un photomontage à travers lequel vous apprendrez à découper des images, les
agencer et leur appliquer des effets artistiques.

5.1. Traitements de base

5.1.1. Capture écran

La toute première chose indispensable à connaître lorsque l’on entreprend de faire du traitement
sur les images, est sans aucun doute, la capture d'écran, que vous connaissez très probablement
sous le terme de screenshot, ou encore d’imprime écran. Il s’agit de photographier à des instants
donnés, une situation de votre écran, et puisqu’il s’agit de prendre une photo, le résultat se
traduit par la création d’un fichier contenant l’image de l’écran capturé dans un format de fichier
informatique, c’est-à-dire d’extension, jpg, Gif, bmp, etc.

Pour la petite histoire, la possibilité de capturer des écrans a grandement facilité

l’accessibilité et la généralisation de la bureautique, grâce à la multiplication des tutos, rendus
possibles par des outils fournis par la plupart des SE et des raccourcis clavier.

Méthode 1 : Combinaison de touches

Sous Windows, il existe plusieurs solutions. La plus ancienne est la solution clavier. En
appuyant sur la touche Impécr, (ou PrintScreen selon les types de claviers) on obtient une image
de la totalité de l’écran. Une variante à cette première solution est de combiner cette touche
avec la touche Alt. Cette combinaison permet de prendre en photo non pas la totalité de l’écran
mais uniquement la fenêtre active. En appuyant sur cette touche (ou cette combinaison de
touches), la capture d’écran est copiée dans la mémoire de l’ordinateur. Il suffit de la coller
dans l’application de votre choix (Traitement de texte, Logiciel de dessin, etc.)
Sous MacOs, on obtient la totalité de l’écran avec la combinaison : Pomme (⌘
Cmd) + SHIFT (appelée aussi MAJUSCULE) + 3 de votre clavier, et la fenêtre
active avec la combinaison de touche : Pomme (Cmd) + SHIFT (appelée aussi
MAJUSCULE) + 4 + espace. La capture d’écran est directement générée sous
forme de fichier de type Image sur le bureau.
Sur l’exemple ci-desssous, plusieurs fenêtres sont ouvertes, un printscreen, a pour
résultat l’image n°1, mais si l’on refait l’opération, en incluant cette fois-ci, la
touche Alt, on obtient l’image n°2, c'est-à-dire celle de la fenêtre active.

Image n°1

Image n°2

Sur les smartphones, il est également possible de faire des screenshots à partir des smartphones.
Chaque modèle de smartphone peut avoir une combinaison de touches différentes. Par exemple,
sous android le screenshot s’obtient en appuyant simultanément sur le bouton Marche/Arrêt et
sur le volume bas et en exerçant une pression prolongée jusqu’à entendre un son ou voir l’écran
s’animer.
Pour les Iphones, jusqu'à l'Iphone X, la combinaison de touches était le bouton ID et le bouton
latéral. A partir des Iphones X, la combinaison de touches est devenue le bouton latéral droit et
le bouton latéral supérieur gauche.

Méthode 2 : Utilisation d’une application

Sous Windows, l’outil capture d’écran et croquis, (anciennement capture d’écran) permet lui
aussi de prendre en image les écrans mais offre plus de possibilités :
En plus de l’option de prise en photo de la fenêtre active ou de la totalité de l’écran, il est
possible de prendre une partie d’une fenêtre. Cette partie de l’écran peut être rectangulaire ou
encore aux formes non prédéfinies, que l’utilisateur dessine avec sa souris, comme c’est le cas
sur Mac avec la combinaison CMD+SHIFT+4. Quel que soit l’écran photographié, vous pouvez
l’annoter pour attirer l’attention sur une zone spécifique. Cette possibilité est particulièrement
importante, lorsque vous demandez l’assistance d’une personne est que vous voulez attirer son
regard sur la zone qui vous cause soucis.

Scanner ce code pour voir une illustration xvii

5.1.2. Outils de forme (vectorielle)

Il peut vous arriver de vouloir illustrer vos idées, attirer l’attention des lecteurs en dirigeant leur
regard sur une partie de l’écran que vous aurez préalablement encadrée, encerclée ou indiquée
par une flèche. La majorité des logiciels de bureautique proposent une palette d’outils de dessin
vectoriel. Sous Ms Word et PowerPoint, elle est accessible à partir du menu insertion, sous
l’onglet Formes. Sous OpenOffice et Libre Office, il suffit d’afficher la barre d’outils Dessin
pour retrouver sensiblement les mêmes types de formes. Ensuite, il n’y a plus qu’à sélectionner
la forme à dessiner et la tracer sur l’espace de travail, et le tour est joué ! Sur Mac, il suffit
d’ouvrir l’image avec l’aperçu pour disposer de tous les outils d’annotation.
Dans tous les cas, plusieurs formes sont proposées, il suffit de les choisir une à une et de les
dessiner. Intuitivement, les bandeaux des menus se contextualisent et vous proposent un
ensemble d’outils : remplissage des formes, modifications des contours, ajout d’effets sur les
formes, etc. Il suffit de dérouler ces menus, et de prendre le temps de les découvrir.

Scanner ce code pour voir la méthode sous Windowsxviii

Scanner ce code pour voir la méthode sous MacOs xix

En cas d’erreur, on supprime une forme de la même manière que l’on supprimerait n’importe
quel objet sur un document. Une des méthodes les plus courantes consiste à le sélectionner puis
appuyer sur la touche Suppr du clavier (Sous macOs vous pouvez simplement utiliser la touche
retour). A noter que la touche suppr est remplacée par la combinaison Fn+retour sur MacOs.

5.2. Disposition des formes

5.2.1. Application n°1 : Création de dessins vectoriels

Pour aborder cette partie, nous allons réaliser un exercice qui consiste à créer une carte des
différentes régions de France. On y placera quelques éléments iconographiques pour illustrer la
météo en région. Cet exercice se termine par l’exportation d’images.
Pour réaliser l’activité, nous mettons à votre disposition un dossier compressé
(DossierDeTravail-Exo01.zip) contenant les fichiers images qui serviront de base de travail :

Nous utiliserons Powerpoint, sachez qu’il est tout à fait possible d’utiliser Inkscape, Gimp,
Paint ou Draw, pour tout ou partie de l’exercice, comme il est possible de combiner ces outils,
entre eux.
 Inkscape Gimp

Paint Draw

5.2.1.1. Télécharger les fichiers de travail et les décompresser

Il s’agit du dossier de travail mis à votre disposition pour la réalisation de cette

activité, contenant toutes les images dont vous aurez besoin. Il est fortement
conseillé de créer une copie de ce dossier qui contiendra toutes vos productions,
avant de décompresser ce dossier si vous êtes sous Windows (Inutile si vous êtes
sous Mac).

Suivre ce lien pour accéder au dossier de travail, DossierDeTravail-Exo01.zip

Scanner ce code pour voir une illustrationxx

5.2.1.2. Modifier les couleurs

Il peut vous arriver d’avoir besoin de changer les couleurs d’une image pour la faire
correspondre aux couleurs de votre site, modifier l’effet yeux rouges sur une photo, changer les
couleurs de cheveux d’une personne, etc. les applications sont nombreuses. Pour cela, il existe
plusieurs manières de colorier une image :
 Méthode 1 : Utilisation de la pipette

Pour être sûr de choisir exactement les mêmes couleurs qu’un modèle, on utilise la pipette. Pour
la faire apparaître, il faut tout d’abord sélectionner la zone à colorier, le bandeau des raccourcis
des tâches se modifie et s’adapte à la sélection. Vous remarquez que, au passage de la pipette,
les noms et codes couleurs des zones survolées s’affichent.

Scanner ce code pour voir une illustration sous Windowsxxi

Scanner ce code pour voir une illustration sous MacOsxxii

Méthode 2 : Sélection de la couleur dans le nuancier

Une autre méthode pour colorier des formes consiste tout simplement à sélectionner la couleur
dans la palette.

Scanner ce code pour voir une illustration xxiii

Méthode 3 : Saisie du code de la couleur

Enfin, il existe une troisième méthode, elle consiste à saisir le code couleur en RVB ou en
hexadécimal. Cette méthode est particulièrement intéressante si vous avez une charte graphique
à respecter et que vos couleurs sont formellement identifiées.

Scanner ce code pour voir une illustration xxiv

Application :
Dans une présentation Powerpoint, insérer, les images Départements-Français.svg (à gauche
de l’écran) et Carte-des-régions-de-France.png (à droite). On obtient ainsi 2 images, celle à
droite (image matricielle au format png) servira de modèle pour la construction de la carte,
située à gauche de l’écran (image vectorielle au format svg). A vous de jouer et de colorier
l’image de gauche en vous aidant de l’image de droite.

Scanner ce code pour voir une illustration xxv

Pour sélectionner plusieurs images en même temps, maintenez la touche Ctrl ou Cmd
du clavier enfoncée.
Pour pouvoir modifier une image vectorielle dans PowerPoint, il faut la convertir en forme.
Une fois cette transformation réalisée, il est possible de sélectionner une à une les parties de
l’image et d'apporter les modifications nécessaires.

5.2.1.3. Insérer des formes prédéfinies

Ici, vous allez apprendre à dessiner des formes. Vous pourrez soit les sélectionner et les glisser
sur votre zone de travail soit, vous allez devoir les créer, dans le cas où elles n’existent pas.
Pour cela, vous utiliserez le menu insertion et l’option forme.
Application :
Dans cette activité, on vous demande de reproduire un bulletin météo. Certains éléments qui
composent le bulletin, sont prédéfinis. Il suffit de les insérer sur la carte et de modifier leurs
couleurs. C’est le cas de l’éclair, du soleil avec rayons et des nuages qui sont ceux que vous
devez insérer à cette étape. D’autres éléments, qui nécessitent d’être dessinés, seront créés dans
les activités suivantes.
Fichiers fournis :
fondCarte-Etape1.svg : Nous mettons à votre disposition le fond de carte tel qu’il aurait dû
l’être à la fin de l’étape précédente.
bulletinMétéo.png : la production attendue à la fin de cette étape.

5.2.1.4. Aligner des formes

Souvent, pour dessiner des formes, il faut en combiner plusieurs, jouer sur les tailles et sur les
alignements entre les différents objets qui composent la forme.
Il est possible d’aligner des éléments en considérant :

Un plan horizontal par rapport aux éléments sélectionnés (1) : on parle alors
d’alignement à gauche, au milieu ou encore à droite.
Un plan vertical par rapport aux éléments sélectionnés (2) : on parle alors d’alignement
en haut, au centre et en bas.
Un plan horizontal par rapport à l’écran (3) : on parle de distribution horizontale
Un plan vertical par rapport à l’écran (4) : on parle de distribution verticale

2
3

Application :
Dans cette partie, vous allez devoir dessiner les icônes du bulletin météo qui ne sont pas
prédéfinies, et paramétrer l’alignement des éléments qui les composent. C’est le cas pour les
anneaux qui constituent la manche à air, la pluie et le soleil cachés par le nuage.
Pour dessiner la manche à air, les 4 anneaux sont de taille proportionnelle et placés avec la
souris pour obtenir l’effet escompté

Scanner ce code pour voir la méthode sous Windowsxxvi

Scanner ce code pour voir la méthode sous MacOsxxvii

La pluie est représentée par des gouttelettes au bout arrondi, qui tombent parallèlement selon
un angle d’inclinaison de 45°
Scanner ce code pour voir la méthodexxviii
Le soleil est centré horizontalement caché à mi-hauteur par des nuages bas.

Scanner ce code pour voir la méthodexxix

5.2.1.5. Ajouter un effet prédéfini

Dans vos créations, souvent, vous aurez besoin de mettre en valeur une partie de l’image, ou de
définir un effet artistique prédéfini, comme changer les couleurs d’une image, mettre de l’ombre
sur une partie, adoucir les arêtes d’une figure, etc. une panoplie d’effets est mise à votre
disposition et le principe est toujours le même : sélectionner la partie sur laquelle vous voulez
définir un effet artistique (image ou forme), sélectionner l’effet parmi ceux proposés dans la
barre d’outils Format de l’image ou Format de la Forme.
Application :
Il vous est demandé dans cette partie, de définir un halo jaune ocre de 25 pt, autour
du soleil caché par le nuage.

Scanner ce code pour voir la méthode sous Windows xxx

Sous MacOs, pour définir le halo jaune, il faut aller dans : Effets/Eclats
 D’autres effets seront abordés dans l’application n°2

5.2.1.6. Grouper/dissocier des éléments

Lorsqu’un objet est composé de plusieurs autres éléments, il est nécessaire parfois de les
regrouper pour n’en former plus qu’un. Cela facilite leur déplacement notamment. Cette
opération n’est pas définitive et il est tout à fait possible de les dissocier à nouveau.

Scanner ce code pour voir la méthode sous Windowsxxxi

Scanner ce code pour voir la méthode sous MacOsxxxii

5.2.1.7. Gestion des calques

Les calques sont des couches qui viennent se superposer sur une image. Ils peuvent contenir
aussi bien du texte que des images ou encore des formes. Les calques sont particulièrement
intéressants pour la superposition de certaines parties de votre image et les effets que l’on peut
définir sur tout ou partie de l’image.

Présentation des calques

Une des règles de bonnes pratiques lorsque l’on travaille sur des calques, est de les renommer
pour pouvoir se retrouver facilement. Tout se fait dans la zone dédiée aux calques. Avec
PowerPoint, il s’agit du volet sélection. Tous les éléments de votre zone de travail y figurent.
Par défaut, ils ont des noms génériques et sont tous visibles (icône œil ouvert). Il est fortement
conseillé de renommer tous les éléments et de ne faire apparaître que ceux sur lesquels vous
apportez des modifications pour alléger votre zone de travail.

Scanner ce code pour voir la méthode sous Windowsxxxiii

Scanner ce code pour voir la méthode sous MacOsxxxiv
Ordre des calques

Lorsque vous créez des éléments, ces derniers se superposent au fur et à mesure de leur création.
Une pile des éléments se crée, dans le volet sélection : Du premier élément ajouté (le plus bas
dans la pile), vers le dernier ajouté (le plus haut dans la pile). Il peut arriver que l’ordre de
création ne soit pas celui que nous désirons pour notre composition, ou bien qu’un élément soit
caché par un autre et de devoir l’avancer ou le reculer. Il est possible de modifier l’ordre des
claques, selon 2 critères :
1. Avancer / reculer un élément, par rapport à celui qui le précède ou le suit (dans la
pile des éléments)
2. Placer en arrière-plan/ premier-plan un élément, par rapport à l’ensemble de la
composition.

Au fur et à mesure, les objets sont déplacés à la fois dans la zone de travail mais
également dans la zone de sélection.

Application :
Pour mieux comprendre cette partie, nous allons finaliser la carte en la plaçant dans un cadre et
terminer en ajoutant les DOM-TOM.
Fichiers fournis :
Vous disposez des fichiers suivants : Guadeloupe.svg Guyane.svg Martinique.svg Mayotte.svg
et Réunion.svg. Nous utiliserons comme base de travail, l’image Carte-De-France.png et le
modèle à reproduire Carte des régions de France.png
Consignes :
1- Après avoir caché tous les éléments inutiles pour cette étape, placer la carte de France dans
un cadre de 17 / 18 cm et de couleur #27467D, puis la centrer en bas (par rapport au cadre).
Comment doit-on placer le cadre par rapport à la carte pour que cette dernière ne soit pas
cachée ?
Scanner ce code pour voir la méthode sous Windowsxxxv

Scanner ce code pour voir la méthode sous MacOsxxxvi

2- Faites apparaître un à un les éléments qui représentent les DOM-TOM, ajoutez un calque de
couleur pour illustrer l’océan tout autour. Regroupez ces éléments et nommez-les.

Scanner ce code pour voir la méthodexxxvii

5.2.1.8. Exportation d’images

Il est souvent intéressant de pouvoir enregistrer tout ou partie d’une image, notamment, dans le
but d’une réutilisation. Au fur et à mesure de vos créations, des objets sont enregistrés en tant
qu’image et viennent enrichir votre bibliothèque personnelle d’images que vous pourrez
réutiliser dans d’autres créations, et ainsi de suite. L’exportation d'images est la transformation
qui consiste à passer d’un format d’image à un autre. Opération très utile compte tenu des
particularités (précédemment énumérées) de chaque format d’image et de la finalité de vos
productions : pour une diffusion ou bien pour une impression ? Besoin d’espace, de profondeur
de couleurs ? Etc.
Application :
Pour la dernière partie de ce long exercice, vous allez apprendre à exporter des images d’un
format vectoriel (.svg) vers un format matriciel (.png). Pour cela, vous allez créer 5 fichiers
informatiques, contenant chacun une illustration d’un DOM-TOM (Terre, océan), créée au
cours de l’étape précédente. La création doit générer les fichiers : Guadeloupe.png Guyane.png
Martinique.png Mayotte.png et Réunion.png. Vous pouvez utiliser le menu contextuel.

Scanner ce code pour voir la méthodexxxviii

 5.2.2. Application n°2 : Retouche d’images matricielles
Pour aborder cette partie, nous allons réaliser un exercice qui consiste à créer ce qu’on a
communément l’habitude d’appeler un photo-montage. C’est-à-dire que l’on va apprendre à
créer une image à partir d’autres images et en ajoutant si nécessaire, des éléments
supplémentaires, comme du texte, des symboles ou des figures géométriques. Dans votre cursus
universitaire, le photomontage est une technique particulièrement intéressante si par exemple,
on vous demande d’illustrer un phénomène, un concept, une situation, etc. Prendre des photos
sans se soucier des éléments autour, découper, détourer, la partie de l’image à illustrer, ajouter
une légende, et en quelques tours de souris, vous aurez créé votre photomontage !!
Bien évidemment, il s’agit d’un exemple parmi tant d’autres, d’utilisation du photomontage.
Mais d’une manière plus générale et plus pratique, qui n’a jamais eu envie de réunir sur une
même photo, plusieurs personnes, ou au contraire supprimer un élément non désiré sur une
photo que vous aimeriez conserver ou partager avec vos proches ?
Vous apprendrez à travers cet exercice, à découper des images, modifier les arrière-plans,
ajouter des éléments vectoriels et définir des effets, pour ajouter une touche artistique à vos
photomontages.
Pour réaliser l’activité, nous mettons à votre disposition un dossier compressé
DossierDeTravail-Exo02.zip contenant les fichiers images qui serviront de base de travail :

Comme pour l’application n°1, nous utiliserons Powerpoint, sachez encore une fois, qu’il est
tout à fait possible d’utiliser Inkscape, Gimp, Paint ou Draw, pour tout ou partie de l’exercice,
comme il est possible de combiner ces outils, entre eux.
 5.2.2.1. Description du photomontage à réaliser
Le photomontage que vous allez créer dans cet exercice se compose de plusieurs éléments. En
voici une brève description :
Organisation Nom du fichier Description
Arrière-plan fondImage.webp Image rognée
ImageIntermédaire.png Image à créer par le regroupement des éléments décrits ci-après :
groupe1, groupe2, groupe3 et FondImage
Effet : Un effet de saturation des couleurs est défini pour vieillir
l’image.
Groupe1 : Images rognées
● Personnage-01.webp Le personnage subit une rotation horizontale
● Papillon.webp Le papillon est posé sur l’épaule du personnage
Premier-
Les éléments sont groupés et leur taille est ajustée
plan
Groupe 2 :
● Personnage-02.webp Images rognées
● Marguerite.webp La marguerite est posée sur les cheveux du personnage
Les éléments sont groupés et leur taille est ajustée
Groupe 3 :
● Personnage-03.webp Images rognées
● Sacbourse.jpg Le sac est posé contre le pied droit du personnage
 Les éléments sont groupés et leur taille est ajustée
Ellipse Image vectorielle à créer :
Son remplissage se fera par l’image ImageIntermédiaire.png, sa
bordure (invisible) sera estompée, sa taille sera ajustée pour
permettre de voir l’essentiel de l’image intermédiaire
Zone de texte Le texte va subir une rotation de -15°, on pourra choisir comme police
d’écriture « Edwardian Script ITC » ou équivalent pour reproduire
l’effet d’écriture à la main.
 5.2.2.2. Téléchargement et décompression des
fichiers de travail
Il s’agit du dossier de travail mis à votre disposition pour la réalisation de cette activité,
contenant toutes les images dont vous aurez besoin. Il est fortement conseillé de créer une copie
de ce dossier qui contiendra toutes vos productions, avant de décompresser ce dossier.

Suivre le lien pour accéder au dossier de travail

5.2.2.3. Rognage d’une image

Dans cette partie, vous allez apprendre à supprimer les contours d’une image. Le rognage d’une
image redéfinit ses bordures. Il s’agit d’une opération qui consiste à éliminer les éléments
parasites sur une image. Le rognage peut se faire selon une forme géométrique prédéfinie (un
rectangle, un cercle, un rectangle aux coins arrondis, etc) ou bien selon des dimensions
prédéfinies (hauteur-largeur)

Application :
Dans une présentation Powerpoint, insérer dans 2 diapositives différentes les
images intitulées ImageFinale.png et FondImage.webp. On obtient ainsi 2
images, celle de la première diapo (ImageFinale.png) servira de modèle pour la
construction de votre photomontage.
Sur l’image du fond, il faudra rogner une partie du feuillage pour accentuer le
focus sur le véhicule et ses alentours. Rogner au niveau du feuillage pour ne
garder qu’un rectangle de 13.5 cm de hauteur environ. (Ne pas changer sa
largeur)

Scanner ce code pour voir l’insertion d’imagexxxix

Scanner ce code pour voir comment rogner une imagexl

Résultat attendu :

Partie rognée
de l’image

Image initiale Image finale

N.B: Il peut arriver d’avoir besoin de rogner une zone en particulier de l’image avec des
dimensions précises, il est possible alors dans la barre propriétés de l’image, d’afficher des
paramètres plus avancés et de préciser, entre autres :

les coordonnées de la zone à rogner

les dimensions en cm ou en pixels de cette zone. Par exemple si l’on souhaite rogner
une image en conservant uniquement 200 pixels de hauteur sur 250 pixels de largeur.

Scanner ce code pour voir la méthode sous Windowsxli

Scanner ce code pour voir la méthode sous MacOsxlii

 5.2.2.4. Découpage d’une image
Il peut vous arriver d’avoir besoin de conserver qu’une partie de l’image et donc de supprimer
le reste. Si la zone à supprimer n’a pas une forme prédéfinie, le rognage ne peut pas répondre à
votre problème, vous devrez alors découper l’image, pour ne conserver que ce qui vous
intéresse. Pour cela, vous pouvez procéder de plusieurs façons selon que la partie à supprimer
est l’arrière-plan, ou non. Nous en présentons 2 :

Méthode 1 : Suppression de l’arrière-plan d’une image

Il s’agit en réalité de définir les zones de l’image que vous voulez garder et celles que vous
voulez supprimer.
Application :
Pour réaliser cette étape, vous allez insérer les images personnage-01.webp, personnage-
02.webp et personnage-03.webp. Ensuite, un à un, supprimer les arrière-plans des images

Scanner ce code pour voir la méthodexliii

Résultat attendu :

Image initiale Image sans fond

 Image initiale Image sans fond

Image initiale Image sans fond

Méthode 2 : Détourage d’une image

Une autre manière de découper une image, consiste à détourer la partie à conserver. Avec cette
méthode, on procède généralement en 2 temps. En effet, le détourage n’étant pas très précis,
vous aurez très probablement besoin de fignoler la découpe.
Application :

Pour réaliser cette méthode, vous allez appliquer ses étapes, sur chacune des images :
papillon.webp, marguerite.webp et sacbourse.jpg
Pour le détourage, vous choisirez le lasso de l’outil de capture d’écran à votre disposition.

Scanner ce code pour voir la méthode sous Windowsxliv

Scanner ce code pour voir la méthode sous MacOsxlv

Résultat attendu :

Marguerite avec fond Marguerite sans fond

Papillon avec fond Papillon sans fond

Sac avec fond Sac sans fond

5.2.2.5. Assemblage d’éléments

Nous l’avons vu au cours de l’application précédente, il est souvent très utile de grouper des
éléments sur une photo pour pouvoir mieux les manipuler : les placer par rapport à d’autres
éléments, les déplacer sur l’image, appliquer un effet sur une partie de l’image, etc., les
applications sont nombreuses.
Application :
En guise d’application, vous allez former les éléments groupe1, groupe2 et groupe3, tels que
définis dans la description du photomontage. Vous devrez entre autres, réaliser les actions
suivantes :
 Réduire les éléments, personnage + objet, qui vont composer chaque groupe, pour obtenir
un rapport de taille cohérent avec l’image d’arrière-plan. N’hésitez pas à zoomer pour du travail
de précision, notamment pour placer les éléments, papillon, marguerite et sacbandouliere.
Une fois les couples d’éléments placés et ajustés, procédez à leur regroupement.

Scanner ce code pour voir la méthode de regroupement xlvi

N.B : La réalisation de cette application, se fera sur les productions obtenues après l’exécution
des 2 applications précédentes (suppression des arrière-plans et détourage des images)

Résultat attendu :

Personnage 1 + papillon
 personnage 2 + marguerite

personnage 3 + sac bandoulière

5.2.2.6. Rotation d’éléments

Nous l’avons au cours de l’application précédente, il est souvent nécessaire lorsque l’on crée
ou insère un objet dans une image, de lui appliquer des rotations pour un rendu plus réaliste.
Application :
En guise d’application, vous allez appliquer une rotation horizontale au groupe1, pour disposer
les personnages 1 et 2, dos à dos.

Scanner ce code pour voir la méthodexlvii

Résultat attendu :

5.2.2.7. Paramétrage d’effets sur image (Matricielle et vectorielle)

Lorsqu’on définit un effet sur une image, on ajoute en quelque sorte une touche artistique, mais
on peut également corriger l’image. Enfin, l’effet peut concerner une image ou bien une forme.

Effet sur image (Image matricielle)

Nous avons déjà commencé par voir un premier effet sur image, celui de la suppression de
l’arrière-plan. Mais il existe un bon nombre d’autres effets comme des corrections à apporter
sur la luminosité ou la netteté d’une image, ou encore des modifications de ses couleurs ou de
sa transparence pour faire émerger des éléments en particulier, ou enfin, des modifications dites
artistiques pour faire ressembler l’image à une esquisse ou à un dessin.
Application :
En guise d’application, vous allez « vieillir » les différents éléments de l’image (groupe1,
groupe2, groupe3 et FondImage). Pour cela, vous devez paramétrer la saturation de couleur
de chaque élément à 0%.
N.B : La saturation ne fonctionne pas sur un groupement mais plutôt sur les éléments qui le
composent.

Scanner ce code pour voir la méthodexlviii

Résultat attendu :
 Effets sur objet (Image vectorielle)

De la même manière qu’il est possible de paramétrer des effets sur les images, il est également
possible de le faire sur des formes. Les formats d’image étant différents (Matricielles Vs
Vectorielles), l’ensemble des effets possibles est donc lui aussi différent. Sur une forme, les
effets concernent plutôt l’aspect de la bordure, les effets 3D possibles, et les effets
d’ombre/lumière.
Application :
En guise d’application, vous allez créer le cadre photo. Pour cela, vous allez devoir procéder en
3 temps :
Créer le fichier ImageIntermédiaire.png : Il s’agit d’exporter le résultat de l’application
précédente en une image de format png. (Vérifiez au préalable, que tous les éléments qui la
composent sont bien groupés)

Scanner ce code pour voir la méthodexlix

Créer une ellipse qui servira de cadre
Apporter les effets nécessaires sur le cadre (remplissage et bordure)

Scanner ce code pour voir la méthodel

Résultat attendu :
 5.2.2.8. Insertion de texte
L’ajout de texte sur image est très fréquent, il permet par exemple, de « taguer » une photo,
opération assez répandue sur les réseaux sociaux, pour identifier des personnes, il permet
également d’attirer l’attention sur une partie de l’image, etc.
Application :
En guise d’application, vous allez rajouter le titre « Souvenirs de vacances ». Pour cela,
choisissez une police de caractères qui reproduit l’effet écriture à la main et appliquer au texte
une rotation de -15°.
N.B : Beaucoup de polices de caractères peuvent correspondre, pour les besoins de l’exercice,
nous avons choisi « Edwardian Script ITC ».

Scanner ce code pour voir la méthodeli

Résultat attendu :
 5.2.2.9. Génération du photomontage
Il s’agit d’exporter la production obtenue en un fichier informatique. Rappelez-vous de ce qui
a été dit dans la partie cours : cette étape nécessite de se poser des questions cruciales qui vont
conditionner le format du fichier qui sera généré : s’agit-il d’un fichier destiné à être imprimer ?
à être afficher ?
Application :
Pour la dernière étape de ce long exercice, vous allez générer un fichier .png, du cadre photo
créé à l’étape précédente.

Scanner ce code pour voir la méthodelii

Partie 2 : Autres formats multimédia

Sur les réseaux, sites internet, spots publicitaires, d’autres formes de fichiers multimédias ont
le vent en poupe. Pour attirer l’attention des internautes, tous les moyens sont mobilisés,
morceaux de musique qui deviennent des tubes de variété et que l’on fredonne à longueur de
journée, apparition de célébrités dans des spots promotionnels, expressions qui entrent dans le
langage courant, prises de vue à couper le souffle, bref, tous les sens sont sollicités.
L’éventail des outils numériques a considérablement changé ces dernières années et fait la part
belle aux dimensions multimédias, notamment aux fichiers audio et vidéo, pour répondre à une
demande de plus en plus accélérée d’informations pertinentes et de consommation. D’après les
chiffres du SNEP, le marché numérique de la musique est passé de 50,8 millions d’euros en
2007 à 335 millions en 2018 tandis qu’une vidéo Facebook a en moyenne une portée 135 %
plus élevée qu’une photo selon SocialBakers.

1. Propriétés des fichiers (audio et vidéo)

Un fichier contenant un son numérique, peut-être assimilé à un conteneur qui va englober un
flux sonore. Nous ne reviendrons pas en détails sur la numérisation d’un son analogique, que
vous avez eu l’occasion de découvrir au cours d’une précédente leçon, mais nous aborderons
dans cette partie et d’une manière assez rapide, un aspect purement pratique, à savoir les formats
de fichiers et les principaux lecteurs.
À l’instar du numérique, une des principales propriétés des vidéos est sans aucun doute sa taille
exprimée en Mo, Go ou To.
Une vidéo étant d’une manière simplifiée, un ensemble d’images fixes qui défilent à une
certaine vitesse, d’autres caractéristiques de la vidéo peuvent être énoncées directement liées à
celles des images. On peut citer, pour rappel : la définition (nombre de pixels qui les
composent), la profondeur de codage des couleurs, et le format (compressé ou non mais
également ratio hauteur/ largeur).
Enfin, quand on aborde les caractéristiques d’une vidéo, on se doit d’évoquer la notion de
cadence ou encore le bitrate : Il s’agit du nombre d’images fixes qui s’affichent par secondes.
A titre d’exemple, la norme internationale au cinéma est de 24 ips et en France, les images
s’affichent à raison de 25 ips, sur nos écrans de TV.

2. Formats des fichiers (audio et vidéo)

Les formats de fichiers numériques, audio et vidéo, sont des formats qui décrivent la manière
dont sont codés les signaux analogiques. Le principe de codification du signal répond toujours
aux mêmes contraintes : comment coder un signal analogique sans trop perdre en qualité
d’information et en utilisant un minimum d’espace de stockage. Se pose, alors, l’éternel
dilemme, entre qualité du signal et poids du fichier informatique. Cette question est d’autant
plus importante, que la vidéo numérique est une composition de plusieurs éléments de formats
différents, à savoir :

Des images fixes qui donnent l’illusion du mouvement,

du son, ou dans certains cas, plusieurs bandes sons (c’est le cas des DVD, par exemple),
pour permettre de visionner la vidéo dans plusieurs langues
 et du texte pour représenter les titres et les sous-titres, les génériques et toutes autres
informations textuelles servant à décrire la vidéo.

Au regard des plateformes multimédias les plus utilisées, à savoir Youtube et Facebook, les
principaux formats audio et vidéo sont :

Les formats audios :

WAV Format mis au point par Microsoft et IBM

Le codage peut se faire en mono, stéréo ou multicanal. Ce format
est non compressé, sans perte de données et permet le stockage
des métadonnées.

MP3 Ce format a été massivement utilisé à partir des années 90 avec

l’avènement des baladeurs qui permettaient de lire des fichiers
audios compressés de haute qualité.
La qualité sonore est très correcte.

WMA Windows Media Audio, créé par Microsoft et utilisé par le

logiciel Windows Media Player. La norme WMA, a souscrit à la
Gestion Numérique des Droits, et de ce fait, limite l’usage des
fichiers (en définissant des durées limitées des fichiers ou encore
d'interdire les copies et les gravures). Vérification de la légalité
d’un téléchargement

Scanner ce code pour voir une illustration liii

Les formats vidéo :

MP4 Un des formats les plus prisés sur internet. Ce format propose un
bon compromis entre qualité de l’image et compression du
fichier. Il s’agit d’un format haute définition destiné à la
 diffusion sur Internet. Il présente l’avantage de pouvoir réunir
dans un seul format plusieurs pistes audio et d’autres éléments,
comme les sous-titres, génériques et méta-données.

AVI Audio Video Interleave Ce format est accepté par la quasi-

totalité des lecteurs et navigateurs, il offre une très bonne qualité
vidéo, mais il ne peut pas prendre en charge plusieurs pistes
audio et les fichiers AVI sont un peu lourds au chargement.

MOV Format créé par Apple. Son utilisation est relativement facile
dans un environnement Mac avec le logiciel Quicktime. Le taux
de compression permet de créer des fichiers de petite taille mais
pas toujours de bonne qualité.

WMV Format créé par Microsoft, largement répandu sur le Net. Il

respecte le Digital Rights Management et permet de protéger les
productions numériques contre la copie. Il ne peut être lu
qu’avec Windows Media Player

Scanner ce code pour voir une illustration liv

3. Les lecteurs de fichiers (audio et vidéo)

Il existe plusieurs lecteurs de fichiers audio et vidéo, hormis ceux fournis par défaut dans les
environnements Mac Os et Windows. Parmi l’ensemble des outils à notre disposition, il en
existe un, qui sans aucun doute, se démarque par sa facilité d’utilisation et la panoplie d’outils
qu’il propose : Il s’agit du lecteur VLC Media Player. Il s’agit initialement d’un projet
universitaire, qui voit le jour en 1996, à la suite d’un refus de l’administration de Science Po de
mettre en place un nouveau réseau informatique pour permettre à ses étudiants « de faire du
frag sans latence sur Doom », selon les propos d’un de ses créateurs, Jean-Baptiste Kempf.
Rapidement, le projet VLC se développe : compatible avec 20 systèmes d’exploitation, traduit
en 70 langues, il reconnaît la plupart des formats multimédia, aussi bien audio que vidéo,
convertit les fichiers vidéo dans différents formats, permet l’insertion de titres et de sous titres,
bref, certains le présente comme le couteau suisse du multimédia ! Il compte actuellement plus
de 500 millions d’utilisateurs.

4. Opérations de base sur un fichier multimédia

4.1. Interface des lecteurs multimédia

La plupart des lecteurs de fichiers multimédia, affichent les mêmes informations : Les boutons
de lecture, d’ajustement du volume du son, en un clic il est possible d’enlever le son de la vidéo,
ou bien avec la molette, ajuster le volume, le temps écoulé et le temps restant.
Sur Youtube, il est possible également de modifier 3 paramètres de la diffusion :

Supprimer les annotations, pour éviter d’avoir des liens cliquables en même temps que
la diffusion de la vidéo.
Modifier la vitesse de diffusion, qu’il est possible de diminuer ou au contraire
d’augmenter si l’on veut visionner la vidéo en mode accéléré. Cette option est
particulièrement intéressante si vous visionnez une vidéo que vous jugez assez lente.
Vous pouvez accélérer son débit, tout en continuant de l’écouter et reprendre un rythme
normal, dès que vous arrivez à un moment particulièrement intéressant. Notez que cette
option n’est pas toujours présente sur les lecteurs multimédias.
Modifier la qualité, en modifiant le nombre de pixels par image. Cette option est
gourmande en bande passante, donc si vous avez une mauvaise connexion Internet,
garder les valeurs proposées par défaut.

Scanner ce code pour voir une illustration lv

4.2. Ajouter / modifier la bande sonore d’une vidéo

Avec VLC, faire du montage vidéo, devient un jeu d’enfants. Sur cet exemple, on dispose d’une
vidéo, mais dont la bande son est de très mauvaise qualité. On voudrait pouvoir la modifier par
une autre pour un rendu plus réaliste. Notez au passage, qu’il existe pléthore de sites qui
fournissent gratuitement des vidéos et des fichiers de bruitage de cinéma.
Pour réaliser ce montage, il suffit d’ouvrir les 2 fichiers en même temps, le fichier vidéo puis
la bande son de remplacement, et demander à l’application de lire le fichier son en même temps
que la lecture du fichier vidéo. Puis, on convertit le tout au format Vidéo H.264 + MP3, puis on
nomme le fichier. Notez que le fichier ainsi créé, est un fichier qui va contenir au minimum la
vidéo et sa bande son d’origine, ainsi que la nouvelle bande son. Ce n’est donc pas uniquement
un fichier vidéo, et encore moins un fichier audio. On dit que c’est un fichier conteneur au
format mp4 et cette distinction est très importante, c’est le codec qui va déterminer comment
sont codées toutes les informations du fichier résultat (c’est à dire la combinaison de la vidéo,
des bandes sons et si nécessaire, des titres et sous-titres du film)
Une fois créée et que l’on lance la lecture, il devient alors possible, de choisir quelle bande son
lancer avec la vidéo : aucune, la vidéo sera sans son, la piste 1, c’est-à-dire la bande d’origine,
ou encore la piste n°2, celle que nous avons téléchargé d’un site de bruitage.

Scanner ce code pour entendre la bande sonlvi

Scanner ce code pour visionner la video initialelvii

Scanner ce code pour voir la vidéo finalelviii

Scanner ce code pour voir comment réaliser le montage vidéo lix

4.3. Ajouter des sous-titres à une vidéo

Enfin, pour conclure avec cette partie dédiée aux manipulations simples, sur les vidéos, vous
allez voir à travers cet exemple, comment rajouter des sous-titres à une vidéo.
Pour cela, il faut disposer en plus de la vidéo à enrichir, d’un fichier texte contenant le sous-
titrage. Notez au passage, qu’un fichier de sous-titrage, ce compose des éléments suivants :

N° du sous-titre : 1, 2, 3 etc.
Time code de début d’affichage 🡪 Time code de fin, exprimée en heure, minute, seconde
et dixième de seconde
Et enfin, le texte du sous-titrage

Pour pouvoir visionner le fichier du sous-titrage en même temps que la vidéo, il faut tout
d’abord, ouvrir le fichier vidéo, puis sélectionner le fichier des sous-titrages, à partir du menu
qui porte le même nom.

Notez que le fichier des sous-titres, a pour extension srt, il doit être placé dans le
même dossier que la vidéo et porter le même nom. Une fois, les 2 fichiers sélectionnés, il n’y a
plus qu’à visionner leur affichage !

Contenu du fichier de sous-titrage (à créer avec un éditeur de texte et lui donner

l’extension srt)
1
00:00:06,50 --> 00:00:09,60
Oh !Tiens Jéthro!
euh ... agent Gibbs désolée

2
00:00:10,23 --> 00:00:11,10
Je crois qu'je suis perdue...

3
00:00:11,20 --> 00:00:13,63
ça dépend, vous cherchez la salle d'autopsie?

4
00:00:13,66 --> 00:00:15,10
Non, le labo d'Abby, j'ai déménagé

5
00:00:15:13 --> 00:00:16,20
C'est encore un étage plus bas

6
00:00:16,85 --> 00:00:17:27
Heum!

Scanner ce code pour voir la video d’origine (sans sous-titrage)lx

Scanner ce code pour voir l’ajout du sous-titragelxi

Liens utiles

i
Affichage des pixels : Lien
ii
Ouverture d’une image vectorielle dans un navigateur : Lien
iii
Exemple n°2 : Lien
iv
Exemple n°2, suite : Lien
v
Exemple n°3 : Lien
vi
Définition d’une image : Lien
vii
Propriétés d’une image : Lien
viii
Résolution d’une image : Lien
ix
Récapitulation image : Lien
x
Redimensionnement d’une image : Lien
xi
Compression image : Lien
xii
Formats d’image matricielle compressée : Lien
xiii
Formats d’image matricielle non compressée : Lien
xiv
Format d’images vectorielles : Lien
xv
Paramétrage du bouton outils de Google : Lien
xvi
Recherche inversée avec Google Images : Lien
xvii
Outil capture écran : Lien
xviii
Outil de formes vectorielles (Sous Windows) : Lien
xix
Outil de formes vectorielles (Sous MacOs) : Lien
xx
Décompression d’un dossier : Lien
Utilisation de la pipette (Sous MacOs) : Lien
xxi
Utilisation de la pipette (Sous Windows) : Lien
xxii
Utilisation de la pipette (Sous MacOs) : Lien
xxiii
Utilisation du nuancier de couleurs : Lien
xxiv
Saisie du code couleur : Lien
xxv
Modifier les couleurs d’une image : Lien
xxvi
Alignement de formes (Sous Windows) : Lien
xxvii
Alignement de formes (Sous MacOs) : Lien
xxviii
Dessin n°1 : Lien
xxix
Dessin n°2 : Lien
xxx
Dessin n°3 : Lien
xxxi
Grouper/dissocier des éléments (Sous Windows) : Lien
xxxii
Grouper/dissocier des éléments (Sous MacOs) : Lien
xxxiii
Gestion des calques (sous Windows) : Lien
xxxiv
Gestion des calques (sous MacOs) : Lien
xxxv
Dessin n°4 (Sous Windows) : Lien
xxxvi
Dessin n°4 (Sous MacOs) : Lien
xxxvii
Dessin n°5 : Lien
xxxviii
Exportation d’images n°1: Lien
xxxix
Insertion d’images : Lien
xl
Rognage d’image méthode n°1 : Lien
xli
Rognage d’image méthode n°2 (Sous Windows) : Lien
xlii
Rognage d’image méthode n°2 (Sous MacOs) : Lien
xliii
Suppression de l’arrière-plan d’une image : Lien
xliv
Détourage d’une image (sous Windows) : Lien
xlv
Détourage d’une image (sous MacOs) : Lien
xlvi
Regroupement d’éléments : Lien
xlvii
Rotation d’éléments : Lien
xlviii
Vieillissement d’une image : Lien
xlix
Exportation d’image : Lien
l
Ajout d’effet sur image : Lien
li
Ajout de texte sur image : Lien
lii
Exportation d’images n°2 : Lien
liii
Les formats audio : Lien
liv
Les formats vidéo : Lien
lv
Interface d’une vidéo sur Youtube : Lien
lvi
Bande son Moto : Lien
lvii
Vidéo initiale Moto : Lien
lviii
Vidéo finale Moto : Lien
lix
Réalisation du montage n°1 : Lien
lx
Vidéo (NCIS) d’origine (sans sous-titrage) : Lien
lxi
Ajout du sous-titrage à une vidéo : Lien