SI 28 – Image Ready NJIWOUA Franck GI 02. Présentation d’Image Ready Image ready : Image ready : - Complément de Photoshop pour le traitement d’images.

Présentation au sujet: "SI 28 – Image Ready NJIWOUA Franck GI 02. Présentation d’Image Ready Image ready : Image ready : - Complément de Photoshop pour le traitement d’images."— Transcription de la présentation:

1 SI 28 – Image Ready NJIWOUA Franck GI 02

2 Présentation d’Image Ready Image ready : Image ready : - Complément de Photoshop pour le traitement d’images pour le web pour le web - Génère du code HTML utilisable sour Dreamweaver 4 fonctions principales : 4 fonctions principales : - Optimisation d’image - Les cartes-images - Les tranches - Les animations

3 Optimisation des images pour le web (1/4) Menus déroulants Optimiser Calques Tables des ouleurs Couleurs Animation /Tranches Barre d’outils Image originale optimisée

4 Optimisation des images pour le web (2/4) 2 Critères importants pour une page web : Qualité esthétique(rendu des couleurs et précision des contours) Qualité esthétique(rendu des couleurs et précision des contours) Temps de chargement Temps de chargement Recherche du meilleur rapport qualité/poids (poids = fichier html + images)

5 Optimisation des images pour le web (3/4) Formations de compressions JPEG JPEG - compression avec perte d’informations - compression avec perte d’informations - pas de transparence  Photographies GIF GIF - compression sans pertes - transparence - animation  Illustrations,logos,objets aux contours net

6 Optimisation des images pour le web (4/4) Enregistrement de l’image optimisée Sélectionner l’image optimisée Sélectionner l’image optimisée Enregistrer une image optimisée sous... Enregistrer une image optimisée sous... Enregistrer dans le dossier image du site Enregistrer dans le dossier image du site Choix du format : html + image (s’il s’agit d’une image découpée, boutons, comportements) Choix du format : html + image (s’il s’agit d’une image découpée, boutons, comportements) Rem : le HTML est à sauvegarder dans le dossier page

7 Les Cartes-images Création de zones réactives sur une image qui renvoient à une URL Création de zones réactives sur une image qui renvoient à une URL Outil carte image Zone réactive Définition de l’URL Définition de l’option d’affichage (Target)

8 Les Tranches Les tranches sont des zones rectangulaires sur lesquelles on peut : Les tranches sont des zones rectangulaires sur lesquelles on peut : - définir une optimisation - ajouter un comportement(souris,lien) L’optimisation des tranches est identique à celle d’une image L’optimisation des tranches est identique à celle d’une image Outils des tranches Outils des tranches Découpage des tranches Sélection des tranches Mode visualisation des tranches Mode normal

9 Les Comportements Ils sont nommés sous Image Ready par : « transformation par souris » Ils sont nommés sous Image Ready par : « transformation par souris » Ils permettent de définir une action à la suite d’un comportement précis de la souris Ils permettent de définir une action à la suite d’un comportement précis de la souris

10 Les Animations Elles ne peuvent être faites que sous un format GIF Elles ne peuvent être faites que sous un format GIF Elles se basent sur un principe de succession d’images Elles se basent sur un principe de succession d’images Les outils de gestion : La palette et les calques Les outils de gestion : La palette et les calques Option de l’interpolation Table d’animation Temps d’affichage Option d’écriture

11 EXERCICES Réaliser la pyramide alimentaire Réaliser la pyramide alimentaire (Exercice emprunté à Ronan Roullier)