SI28 : Adobe Image Ready 3.0 Agathe Edange.

Présentation au sujet: "SI28 : Adobe Image Ready 3.0 Agathe Edange."— Transcription de la présentation:

1 SI28 : Adobe Image Ready 3.0 Agathe Edange

2 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é)

3 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

4 Interface d’utilisation :

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

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

7 Interface d’utilisation :
optimisations couleurs

8 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

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

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

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

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

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

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

15 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

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

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

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

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