Elise Pierrot, GSU04 ImageReady, traitement d’image pour le WEB Présentation SI28

Image Ready : –Complément de Photoshop pour le traitement d’images pour le web –Nombreuses fonctionnalités communes avec Photoshop : c’est un logiciel graphique pour le web 4 fonctions principales : –Optimisation d’images –Découpe d’image en tranche –Création de roll-over, de lien –Création d’animation GIF Présentation d’Image Ready 3.0

L’interface de travail Palettes Barre d’outils Menu local Optimiser Couleurs Table des couleurs Calques Animations / tranches Menus déroulant Affichage de l’image originale optimisée Présentation d’Image Ready 3.0

Optimisation des images pour le Web 2 critères importants dans la publication page web : –Fidélité du rendu, couleurs et précision des contours –temps de chargement 40 ko par page pour une connexion modem analogique Poids page = fichier html + images Poids image : –Taille –Résolution (écran = 72 ppp) –Nombre de couleurs ( niveau de gris, NB, 256 couleurs, RVB, CMJN) Recherche du meilleur rapport poids / qualité de l’image

JPEG –compression avec perte d’informations –RVB –affichage progressif, pas transparence  Photographies, image en demi-ton, contours nets GIF –compression sans pertes –256 couleurs –affichage progressif et transparence  Images en aplats : illustrations, logos, typographies Les formats de compression Optimisation des images pour le Web

La palette Optimiser Les fenêtres de Prévisualisation Optimisation des images pour le Web pour comparer l’image originale et les images optimisées. - Paramètres pré-enregistrés - Paramètre spécifiques GIF et JPEG - Optimiser pour la taille du fichier: optimisation automatique en fonction d’une taille donnée - Droplet, le script de traitement d’image - Taille des images - Paramètre d’optimisation - Durée de téléchargement

Palette de couleurs de l’image –Création d’une palette selon les couleurs de l’image Adaptative : palette des couleurs les + représentatives Perception : priorité aux couleurs perçues par l’œil Sélective : zones de couleurs proches de la palette Web contraintes: poids élevé, une palette par page. –Adaptation à une palette existante Web, palette système Noirs et blanc ; Niveaux de gris Optimisation des images pour le Web Paramètres du format GIF Réduction du nombre de couleurs Tramage Alignement sur le web Entrelacé: affichage progressif

Qualité : 4 niveaux Choisir optimisation entre 40 et 60 Points sensibles: les fonds unis et les contours nets Estomper : créé un flou sur l’image Améliore le rendu des zones critiques Valeur entre 0 et 2 Optimisé Permet d’obtenir une taille légèrement plus réduite Progressif Affichage progressif de l’image Optimisation des images pour le Web Paramètres du format JPEG

Démarche à suivre : –Sélectionner la vue optimisée –Dans le menu Fichier : Enregistrer la vue optimisée sous –Enregistrer l’image dans le dossier Image du site Enregistrement de l’image optimisée Optimisation des images pour le Web

Les tranches Découpe de page-écran en plusieurs tranches indépendantes Les tranches sont des zones rectangulaires sur lesquelles on peut : –Définir une optimisation –Ajouter un comportement (souris ou lien) Avantages : –Liberté de création Conception de la page web avec les outils graphiques d’Image Ready puis exportation des tranches dans un tableau d’éditeur html (dreamweaver) –Optimisation du poids –Mise à jour de la page facilitée il suffit de réexporter la zone de texte modifiée et non l’écran entier.

Découpage des tranches Sélection des tranches Mode visualisation des tranches Mode normal Les tranches Création de tranches Barre d’outil : Menu Tranche : à partir des sélections, des repères Palette Tranche, nommer la tranche, type, lien Lors de la création d’une tranche, le reste du document devient une tranche auto

Les tranches « auto » générées par ImageReady sont toutes liées : le réglage de l’une s’applique automatiquement aux autres. L’optimisation des tranches « utilisateur » est identique à celle d’une images : Afficher la prévisualisation, afficher les tranches, sélectionner la tranche, faire les réglages d’optimisation. Le contrôle du poids de la tranche se faite dans la palette tranche Un même réglage pour plusieurs tranches: option droplet Optimisation des tranches Astuce : Pour transformer une tranche Auto en tranche utilisateur, utiliser la commande « promouvoir » du menu déroulant tranche. Les tranches

Enregistrer dans le dossier racine du site L’export génère un dossier images et une page html contenant la structure en tableau qui permettra de reconstituer la découpe. Exportation de l’image découpée Les tranches Démarche à suivre : –Menu > Fichier >Enregistrer une copie optimisée sous –Sélectionner le format HTML et images Astuce : Si les tranches auto ne contiennent qu’un fond de couleur, on peut exporter la découpe sans ces tranches. avant d’enregistrer, sélectionner les tranches auto, sélectionner l’option pas d’image dans le menu type de la palette tranche. pour définir une couleur de fond, dans paramètres de sortie > arrière plan

Une image, un événement déclencheur, une action 2 actions possibles: –Changement d’état de l’image cible –Changement d’état d’une image distante Les comportements Transformation par la souris : boutons réactifs, roll-over Palette Transformation par la souris, affiche et gère les différents états de la tranche sélectionnée. Créer un nouvel état Transformation limitée au propriétés des calques Effets du calques Visibilité / Masquage de calques Pour tester, menu Fichier > Aperçu dans.

Les cartes images Zones réactives associées à des liens, rubriques du sites ou pages web Définir la forme de la zone réactive dans la palette carte image Entrer l’URL de la page assossiée Affichage dans une nouvelle fenêtre ou jeu de cadres Texte survol du lien Palette Carte-image Mise en œuvre : – Depuis la palette calque > nouvelle zone de carte image – Depuis la palette outil

Les animations GIF Animation image par image Deux outils de gestion – Palette Calque, pour contrôler les visuels de l’animation – Palette Animation, timeline de l’animation Dupliquer une image Outils de lecture Temps d’apparition de l’image Outil d’interpolation possibilités d’animation: – propriétés des calques, via palette Calque – déplacer les objets, via la fenêtre de travail créer une animation à partir des calques insérer une animation dans un bouton