Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Les Formats Graphiques Rappel : pixel et extensionLes principaux formats graphiquesLes niveaux de grisLe graphisme vectorielLa PAOLes logiciels de PAO David Crunelle – ESCG 2009 - 2010 – www.navalorama.be

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques • Pixel: Picture element • « Elément d'un quadrillage rectangulaire composant une image numérique. » BITMAP

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques RESOLUTION20X20

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques

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.

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques L’extension nomdufichier extension Exemple : image001.jpg Format Programme 7

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

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques JPG- compressé- format idéal pour Internet- mais perte de qualité

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques GIF- animé- plus lourd- fond transparent

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Les niveaux de gris 255 128 00% 50% 100%

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Millions de couleurs 14

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques 256 couleurs 15

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques 16 couleurs 16

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Noir et blanc 17

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Niveau de gris 18

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Le graphisme vectoriel Tracé est composé de primitives: - cercles - carrés - polygones - etcStockage sous forme de liste de primitives & transformationsAvantages: - Taille de stockage réduite - Haute qualité (surtout à l’agrandissement)

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

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Exemple: Logo Les images vectorielles :

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 : = 22

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques ax+b²(3x-7y)³ [3x(ab+b²-2ab)² +9x³] = < 1ko 1 pages de texte = environ 2 ko 2xax+b²(3x-7y)³ [3x(ab+b²-2ab)² +9x³] = < 1ko JPG 300dpi100x100 pixels = = 10ko 2:1 JPG 300dpi700x700 pixels = = 156ko Les dessins vectoriels sont largement utilisés en publication assistée par ordinateur (PAO) ainsi que sur Internet.

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques JPG Vectors 1:1 1:1 1000:1 10:1 10:1

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques JPG Vectors 800x800 pixelsvectorisé 300dpi= 17ko 800x800 pixels300dpi= 124ko

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

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

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,…)

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Les Logiciels de PAOAdobe Illustrator Quark Xpress

Création de pages Web Gestion/Communication • TRAITEMENT DE L’ IMAGE • Paint • Photoshop • Gimp 30 Herman Olivier – ESCG

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Paint

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Adobe Photoshop Propriétés Palette d’outils Calques 32

Multimédia & Internet 2èmes Gestion/CommunicationLes formats graphiques Gimp Calques Palette d’outils Propriétés 33

Création de pages Web Gestion/Communication TRAITEMENT DE L’ IMAGE Fonctions 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 34 Herman Olivier – ESCG

Création de pages Web Gestion/Communication EXERCICES Partez 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. 35 Herman Olivier – ESCG

Création de pages Web Gestion/Communication TRAITEMENT DE L’ IMAGE Fonctions complémentaires: - Couleurs - Clonage - Repiquer une couleur - Texte - Eclaircir - Barbouiller 36 Herman Olivier – ESCG

Création de pages Web Gestion/Communication EXERCICES Partez de l’image « DentsDuMidi.jpg » Recopier le point le plus haut dans la zone à gauche afin d’agumenter le nombre de « dents » 37 Herman Olivier – ESCG

Multimédia & Internet 2èmes Gestion/Communication Les formats graphiques