Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques
description
Transcript of Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques
![Page 1: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/1.jpg)
1
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
David Crunelle – ESCG 2009 - 2010 – www.navalorama.be
Les Formats Graphiques Rappel : pixel et extensionLes principaux formats graphiquesLes niveaux de grisLe graphisme vectorielLa PAOLes logiciels de PAO
![Page 2: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/2.jpg)
2
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Pixel: Picture element
« Elément d'un quadrillage rectangulaire composant une image numérique. »
BITMAP
![Page 3: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/3.jpg)
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
RESOLUTION20X20
![Page 4: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/4.jpg)
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
![Page 5: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/5.jpg)
5
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
![Page 6: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/6.jpg)
6
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
L’extension
nomdufichier extension Exemple : image001.jpg
Détermine le format Logiciel
Nombre d’extension > Nombre de logiciels.
![Page 7: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/7.jpg)
7
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
L’extension
nomdufichier extension Exemple : image001.jpg
Format
Programme
![Page 8: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/8.jpg)
8
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Les types de fichiers les plus utilisés actuellement sont :- BMP (Bitmap), premier fichier graphique utilisé par Windows- JPG, consiste en un BMP compressé (mais perte de qualité)- GIF (Compuserve), fichier graphique animé (superposition)- TIFF, format affectionné par les graphistes- PSD, format créé par Adobe Photoshop
- TGA (Targa) - RAS (Sun Rasterfile Image)- PNG (Portable Network Graphix)- SGI - PCX - RSB - IFF- etc.
Formats Internet:- JPG - GIF
![Page 9: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/9.jpg)
9
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
![Page 10: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/10.jpg)
10
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
JPG - compressé- format idéal pour Internet- mais perte de qualité
![Page 11: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/11.jpg)
11
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
![Page 12: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/12.jpg)
12
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
GIF- animé- plus lourd- fond transparent
![Page 13: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/13.jpg)
13
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Les niveaux de gris
255 128 0
0% 50% 100%
![Page 14: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/14.jpg)
14
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Millions de couleurs
![Page 15: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/15.jpg)
15
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
256 couleurs
![Page 16: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/16.jpg)
16
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
16 couleurs
![Page 17: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/17.jpg)
17
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Noir et blanc
![Page 18: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/18.jpg)
18
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Niveau de gris
![Page 19: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/19.jpg)
19
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Le graphisme vectoriel
Tracé est composé de primitives:- cercles- carrés- polygones- etc
Stockage sous forme de liste de primitives & transformations
Avantages: - Taille de stockage réduite- Haute qualité (surtout à l’agrandissement)
![Page 20: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/20.jpg)
20
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Les images vectorielles :
- Fonctions pixels- Polygones- gestion du calcul par la carte graphique
= 10 ko
Y= ax+b = 1 ko
![Page 21: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/21.jpg)
21
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Exemple: Logo
Les images vectorielles :
AV 100TD 90AV 100TD 90AV 100TD 90AV 100
![Page 22: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/22.jpg)
22
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Manipulations par objets en tant qu’entités distinctes.Exemples de manipulations: - Superpositions-Pivotement- Agrandissements
ax+b²(3x-7y)³ [3x(ab+b²-2ab)² +9x³]
=
Les images vectorielles :
![Page 23: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/23.jpg)
23
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
JPG 300dpi100x100 pixels
= = 10ko
Les dessins vectoriels sont largement utilisés en publication assistée par ordinateur (PAO) ainsi que sur Internet.
ax+b²(3x-7y)³ [3x(ab+b²-2ab)² +9x³]
= < 1ko
2xax+b²(3x-7y)³ [3x(ab+b²-2ab)² +9x³]
= < 1ko
= = 156ko JPG 300dpi
700x700 pixels
1 pages de texte = environ 2 ko
2:1
![Page 24: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/24.jpg)
24
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
1:1 1:1
10:1 10:1
JPG Vectors
1000:1
![Page 25: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/25.jpg)
25
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
JPG Vectors
800x800 pixels300dpi= 124ko
800x800 pixelsvectorisé 300dpi= 17ko
![Page 26: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/26.jpg)
26
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
La PAO (=Micro édition)
Utilisation de matériels de: - Micro-informatique - Logiciels spécialisés
But: produire des documents de qualité professionnelle combinant du texte et des images (photos, dessins, illustrations, graphiques…).
L’infographie:- Traitement de l’image- Modification d’images - Création graphique
![Page 27: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/27.jpg)
27
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
La PAO : Création de documents
Etapes:- Numérisations d’images- Créations d’images - Retouches- Mise en page
WYSIWYG
![Page 28: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/28.jpg)
28
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Applications
-Presse écrite (Journaux / Périodiques)-Communication (Pub)-Entreprises (Brochures, courriers, cartes de visites…)-Particuliers (Cartes de vœux, invitations,…)
![Page 29: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/29.jpg)
29
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Les Logiciels de PAO
Adobe Illustrator Quark Xpress
![Page 30: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/30.jpg)
30
Création de pages Web Gestion/Communication
Herman Olivier – ESCG
TRAITEMENT DE L’ IMAGE-Paint
-Photoshop
-Gimp
![Page 31: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/31.jpg)
31
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Paint
![Page 32: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/32.jpg)
32
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Adobe Photoshop
Palette d’outils
Propriétés
Calques
![Page 33: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/33.jpg)
33
Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques
Gimp
Palette d’outils
Propriétés
Calques
![Page 34: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/34.jpg)
34
Création de pages Web Gestion/Communication
Herman Olivier – ESCG
TRAITEMENT DE L’ IMAGEFonctions de base:
- Selection - image/découper la sélection- image/échèle et taille de l’image- image/mode/niveaux de gris- Couleurs/teintes-saturation- Couleurs/luminosité-contraste
![Page 35: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/35.jpg)
35
Création de pages Web Gestion/Communication
Herman Olivier – ESCG
EXERCICESPartez de l’image « DentsDuMidi.jpg »Réduisez sa résolution en 640x480 pixelsEnregistrer l’image sous le nom ddm.jpgRepartez de l’image originale et Isolez uniquement les dents comme ci-dessous.Transformez l’image en « niveaux de gris »Jouez avec le contraste et la luminosité pour arriver au résultat ci-dessous.
![Page 36: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/36.jpg)
36
Création de pages Web Gestion/Communication
Herman Olivier – ESCG
TRAITEMENT DE L’ IMAGEFonctions complémentaires:
- Couleurs- Clonage- Repiquer une couleur- Texte- Eclaircir- Barbouiller
![Page 37: Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques](https://reader036.fdocuments.net/reader036/viewer/2022081519/568141f4550346895dadd015/html5/thumbnails/37.jpg)
37
Création de pages Web Gestion/Communication
Herman Olivier – ESCG
EXERCICESPartez de l’image « DentsDuMidi.jpg »
Recopier le point le plus haut dans la zone à gauche afin d’agumenter le nombre de « dents »