SI28 : Adobe Image Ready 3.0 Agathe Edange

Utilité du logiciel : Logiciel de graphisme orienté vers le web Complément de photoshop (interface quasi-identique) Editeur HTML Utilisation : Optimisation des images Réalisation de carte image / tranche (avec exportation du code html) Réalisation d’images animées (GIF animé)

Optimisation graphique sur le web: JPEG: pour photographies Compression avec perte d’informations Pas de transparence GIF: pour illustrations, logos, objets avec contours nets Compression sans pertes Transparence Animations PNG: pour illustrations, logos, objets avec contours nets Plusieurs niveaux de transparence Pas d’animations

Interface d’utilisation :

Interface d’utilisation : Options des outils Fenêtre de travail Barre d’outils

Interface d’utilisation : Table des couleurs/ options de calque Onglets

Interface d’utilisation : optimisations couleurs

2 critères importants pour une image d’une page web : Optimisation : 2 critères importants pour une image d’une page web : Fidélité du rendu, couleurs et précision des contours temps de chargement Recherche du meilleur rapport rendu/poids

Optimisation : Fenêtre optimisation : Type de format/compression/qualité Type d’affichage des optimisations

Optimisation : Pour sauvegarder : Sélectionner l’image optimisée Fichier->enregistrer une copie optimisée sous…

Outils tranches et cartes images: Découper l’espace en tranches Remplir et agir de façon libre dans chacune des tranches Cartes Images Création de zones réactives au clic de la souris (renvoie à un url) Similaire à l’outils tranche mais permet une plus grande liberté de découpage (zones actives créées)

Tranches : Créer une tranche Tranche créée Propriété de la tranche

Carte images : Sélection Type de sélection Propriété de la zone réactive

Carte Image/tranche : Possibilité d’obtenir le code HTML correspondant au découpage : Aperçu : clic droit sur l’image puis aperçue dans IE Sauvegarder en html : enregistrer une copie optimisé … puis sélectionner type « HTML et images »

Transformation par souris : Permet de créer un bouton dynamique (comme dans Flash) Tranche selectionnée Transformation par souris Choix de l’état de transformation

Animations (Gifs animé) : 2 types d’animations : Par trajectoire Par jeu de calques Attention : enregistrer le travail en .gif

Animations : trajectoire Le but de l’animation par trajectoire est de créer 2 images du cercle a 2 position différente et de générer les images intermédiaires.

Animations : trajectoire Nombre d’images intermédiaires Génère la trajectoire Délais de l’image

Animations : calques Pour chaque images, on active/désactive les calques On créer le nombre de transition que contient l’animation