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 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

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

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)

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

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

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)

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

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

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

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