SI 28 - Présentation Image Ready Aurélie Letenoux GSU 4

Présentation d’Image Ready 3.0 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’écrans –Création de roll-over –Création d’images animées

 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 : –Qualités esthétiques (rendu des couleurs et précision des contours) –Accessibilité (temps de chargement) Poids page = fichier html + images Poids image : –Taille –Résolution (écran = 72 ppp) –Nombre de couleurs –Algorithme de compression  optimisation  Recherche du meilleur rapport poids / qualité de l’image

Optimisation des images pour le Web JPEG –compression avec perte d’informations –affichage progressif, pas transparence  Photographies GIF –compression sans pertes –affichage progressif et transparence  Illustrations, logos, typographies, objets aux contours nets  Les formats de compression Le choix d’un format de compression se fait avec la palette optimiser :

Optimisation des images pour le Web  Choix des paramètres Les fenêtres de Prévisualisation : Elles permettent de comparer le rendu des différents réglages et formats. Exemple : vue en 4 vignettes Onglets de visualisation Image originale Optimisation Gif webOptimisation Jpeg Optimisation gif 128 Paramètres d’optimisation, poids et temps de chargement Optimiser pour taille du fichier menu local de la palette optimisation selon une taille donnée Conseils : faire ses réglages puis voir propositions d’Images Ready avec l’option Paramètres actuels

Optimisation des images pour le Web Paramètres du format Gif  Agit sur la palette de couleurs de l’image de 2 façons possibles : –Création d’une palette couleur 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 –Adaptation à une palette existante Web ; Système Noirs et blanc ; Niveaux de gris Palette externe (doc existant) Personnalisée (menu local palette ; enregistrement)  Autres paramètres : –Réduction du nombre de couleurs –Tramage –Alignement web  Choix des paramètres Les + : fidélité de la restitution des images Les - : poids élevé ; même palette pour tous les docs d’une même page

Optimisation des images pour le Web Paramètres du format JPEG –Qualité : 4 niveaux Choisir optimisation entre 40 et 60 Porter son attention sur les fonds unis et les contours nets –Lissage : 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 Équivaut à l’option entrelacé du format GIF  Choix des paramètres

Optimisation des images pour le Web 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 –Choix d’un format Choisir html et image s’il s’agit d’une image découpée : boutons et comportements.  enregistrement de la vue optimisée

Palette d’animation  Les tranches Découpage des tranches Sélection des tranches Mode visualisation des tranches Mode normal Les outils : Type : Image ou Texte ( zone remplacée par du texte -balises html) La palette : Nommer la tranche Définir un lien Création de tranches Outils découpage Menu tranche : à partir des sélections à partir des repères

Palette d’animation Lorsqu’on créé une tranche, Image Ready divise automatiquement le reste de l’image en tranches automatiques. 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 : On défini une optimisation appropriée à chaque zone et on n’exporte pas les zones de fond (refait sur l’éditeur) –Mise à jour de la page facilitée : il suffit de réexporter la zone de texte modifiée et non l’écran entier.  Les tranches

Palette d’animation Les tranches « auto » générées par Image Ready 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.  Optimisation des tranches L’icône « droplet » permet d’appliquer les mêmes réglages à une série de tranches par simple glisser. Astuce : Pour transformer une tranche Auto en tranche utilisateur, utiliser la commande « promouvoir » du menu déroulant tranche.

Palette d’animation L’export génère une série de fichiers images et une page html contenant la structure en tableau qui permettra de reconstituer la découpe. ! Ces éléments feront partie du site : les enregistrer dans les dossiers de structure du site ! Structure d’un site : dossier racine et 2 sous dossiers : pages et images  Exportation de l’image découpée Fichier html Fichiers Image

Palette d’animation C’est ce qu’Image Ready appelle des transformations par souris. Ils permettent d’ajouter des effets lors du passage de la souris sur une image ou une tranche ou une carte image  Création de comportements 1. Sélectionner la tranche qui activera la transformation 2. Dupliquer l’image dans la palette transformation 4. Modifier la copie en travaillant avec les calques 3. Choisir un comportement pour la souris 5. Prévisualiser la comportement

Palette d’animation Ce sont des zones réactives associées à des liens (rubriques du site ou pages web) Forme : polygone, cercle ou rectangle L’outil carte image de la palette : Mise en œuvre : –Chaque contenu de calque peut être défini comme carte image : menu calque  nouvelle zone de carte image d’après un calque Sinon, utilisation de l’outil carte image  Les cartes images Définir la forme de la zone réactive dans la palette carte image Définir la qualité Entrer l’URL de la page assossiée Affichage dans une nouvelle fenêtre ou jeu de cadres Texte survol du lien

Palette d’animation Image Ready utilise des animations image par image Deux outils de gestion de l’animation : La palette d’animation et les calques  Les animations Gif Dupliquer une image Outils de lecture Temps d’apparition de l’image Calques visibles dans l’animation en cour Édition des calques et visualisation de l’animation Outil d’interpolation