Image Ready SI28 _ P09 MACHIN Alexandre BRUTEL Aline

Présentation  Image Ready est un logiciel associé à Photoshop : même principe de fonctionnement.  CS2: à part  CS3/4: intégré à Photoshop  Plupart des fonctions et effets associés à Photoshop mais pour une utilisation orientée Web: Optimisation d’images Optimisation d’images Outil tranche Outil tranche Outil carte-image Outil carte-image Comportements (transformation par souris) Comportements (transformation par souris) Création de GIFs animés à partir de calques Création de GIFs animés à partir de calques

Formats d’image JPEG / GIF / PNG  JPEG: pour les photographies Compression efficace mais perte d’informations Compression efficace mais perte d’informations 16.7 millions de couleurs 16.7 millions de couleurs Aucune gestion des zones de transparence : on a un affichage progressif Aucune gestion des zones de transparence : on a un affichage progressif Pas d’animation Pas d’animation Système RVB Système RVB  GIF: pour illustrations, logos, objets à contours nets Compression sans perte Compression sans perte 256 couleurs => pas pour photos, images nuancées et dégradés 256 couleurs => pas pour photos, images nuancées et dégradés Gestion zones de transparence Gestion zones de transparence Animations Animations

Formats d’image JPEG / GIF / PNG  PNG: pour illustrations, logos, objets à contours nets Compression sans perte Compression sans perte 256 couleurs + niveaux de gris 256 couleurs + niveaux de gris Niveaux de transparence Niveaux de transparence Pas d’animation Pas d’animation Plus léger que GIF mais reconnu uniquement par les navigateurs récents Plus léger que GIF mais reconnu uniquement par les navigateurs récents

Optimisation d’image  Obj: A lléger poids des pages Rechercher le meilleur rapport qualité / poids des images Rechercher le meilleur rapport qualité / poids des images   Comment faire ? Ouvrir une image Choix du format de sortie Choix de l’onglet de visualisation de l’image Choix paramètres jusque optimisation adéquate Sauvegarder

Optimisation d’image  Palette Optimiser Paramètres préenregistrés Paramètres préenregistrés Paramètres spécifiques GF et JPEG Paramètres spécifiques GF et JPEG Optimisation automatique en fonction de la taille donnée Optimisation automatique en fonction de la taille donnée  Fenêtres de prévisualisation Pour comparaison image originale et celles optimisées Pour comparaison image originale et celles optimisées Tailles images Tailles images Paramètres d’optimisation Paramètres d’optimisation Durée de téléchargement Durée de téléchargement

Optimisation d’image  Paramètres du format GIF Palette de couleurs de l’image: création selon couleurs de l’image Palette de couleurs de l’image: création selon couleurs de l’image ADAPTATIVE couleurs les plus représentativesADAPTATIVE couleurs les plus représentatives PERCEPTION priorité aux couleurs perçues par œilPERCEPTION priorité aux couleurs perçues par œil SELECTIVE zones de couleurs proches de la palette Web mais lourd car une palette/pageSELECTIVE zones de couleurs proches de la palette Web mais lourd car une palette/page Palette de couleurs de l’image: adaptation à palette existante Palette de couleurs de l’image: adaptation à palette existante Web, palette systèmeWeb, palette système Noir, blanc, niveaux de grisNoir, blanc, niveaux de gris Réduction du nombre de couleurs Réduction du nombre de couleurs Tramage Tramage Alignement sur le Web Alignement sur le Web Entrelacé: affichage progressif Entrelacé: affichage progressif

Optimisation d’image  Paramètres du format JPEG 5 niveaux de qualité: 5 niveaux de qualité: Choix optimisation entre 40 et 60Choix optimisation entre 40 et 60 Points sensibles = fonds unis et contours netsPoints sensibles = fonds unis et contours nets Estomper: créer un flou sur l’image Estomper: créer un flou sur l’image Améliore le rendu des zones critiquesAméliore le rendu des zones critiques Valeur entre 0 et 2 (augmente le flou  diminue taille)Valeur entre 0 et 2 (augmente le flou  diminue taille) Optimisée (option) Optimisée (option) Permet d’avoir une taille légèrement réduitePermet d’avoir une taille légèrement réduite Progressif Progressif Affichage progressif de l’imageAffichage progressif de l’image

Outil tranche  Découpe image en zones rectangulaires indépendantes  A chaque zone peut être Définie sa propre optimisation Définie sa propre optimisation Ajouté un comportement (souris…) ou lien Ajouté un comportement (souris…) ou lien  Lors de la création d’une tranche, IR divise automatiquement le reste de l’image en tranches  Avantages LIBERTE DE CREATION: conception de la page Web avec les outils graphiques du logiciel puis exportation en html LIBERTE DE CREATION: conception de la page Web avec les outils graphiques du logiciel puis exportation en html OPTIMISATION DU POIDS: définition optimisation à chaque zone OPTIMISATION DU POIDS: définition optimisation à chaque zone MISE A JOUR FACILITEE: réexportation de la zone modifiée et non de tout l’écran MISE A JOUR FACILITEE: réexportation de la zone modifiée et non de tout l’écran

Outil tranche Aperçu sur le web

Outil carte-image  Carte-image = zone réactive associée à lien (du site où l’image est intégrée ou de tout autre page web)  Similaire à l’outil tranche mais permet la création de zones autres que rectangulaires

Comportement  Transformation par souris sur tranche ou carte-image: boutons réactifs, rollover…  2 actions possibles Changement état de l’image cible Changement état de l’image cible Changement état image distante Changement état image distante  Transformation limitée aux propriétés des calques  Palette transformation par souris, affiche et gère les différents états de la tranche sélectionnée

Comportement  Exercice: « bouton animé » rollover Sur fond transparent: création ellipse + effet couleur = bouton 1 (calque)Sur fond transparent: création ellipse + effet couleur = bouton 1 (calque) Dupliquer ce calque + modifier couleur pour nouveau bouton (nom calque: par dessus)Dupliquer ce calque + modifier couleur pour nouveau bouton (nom calque: par dessus) Définir le bouton 1 comme trancheDéfinir le bouton 1 comme tranche Faire apparaître fenêtre contenu webFaire apparaître fenêtre contenu web dans celle-ci, cliquer sur l’icône à gauche de la poubelle: il apparaît l’état par dessusdans celle-ci, cliquer sur l’icône à gauche de la poubelle: il apparaît l’état par dessus Dans fenêtre calques, faire disparaître le bouton 1Dans fenêtre calques, faire disparaître le bouton 1 Ctrl+Alt+p: aperçu sur le webCtrl+Alt+p: aperçu sur le web

Comportement

Création de GIFs animés  IR utilise l’animation image par image  Il existe deux types d’animation Par trajectoire: création de 2 images et générations des positions intermédiaires Par trajectoire: création de 2 images et générations des positions intermédiaires Par jeu de calques: création de toutes les images intermédiaires sur différents calques Par jeu de calques: création de toutes les images intermédiaires sur différents calques  Pour CS2: bascule entre Photoshop pour la création des calques et IR pour l’animation  Pour CS3/4: outil animation intégré: fenêtre > animation

Création de GIFs animés  Exercice: création d’une comète Sur Photoshop: création des images intermédiaires Sur Photoshop: création des images intermédiaires Calque arrière-plan: fond noirCalque arrière-plan: fond noir Sur nouveau calque: dessiner un point blanc + appliquer 5 fois le filtre soufflerie (Filtre > esthétiques > soufflerie : vent de gauche)Sur nouveau calque: dessiner un point blanc + appliquer 5 fois le filtre soufflerie (Filtre > esthétiques > soufflerie : vent de gauche) Fusionner les deux calques, renommer le calque logoFusionner les deux calques, renommer le calque logo Dupliquer 5 fois le calque logo (6 calques en tout)Dupliquer 5 fois le calque logo (6 calques en tout) Sur le premier duplicata insérer filtre halo: positionner au niveau de la tête / intensité 20 %Sur le premier duplicata insérer filtre halo: positionner au niveau de la tête / intensité 20 % Réitérer l’opération sur les autres calques en déplaçant le halo à droite et en augmentant progressivement l’intensitéRéitérer l’opération sur les autres calques en déplaçant le halo à droite et en augmentant progressivement l’intensité Basculer sur Image ReadyBasculer sur Image Ready

Création de GIFs animés Sur Image Ready: animation Sur Image Ready: animation Ouvrir la fenêtre animationOuvrir la fenêtre animation 1 ère image  calque 1 logo1 ère image  calque 1 logo A chaque image de l’animation correspond un calque: attention pour attribuer le calque, il faut que les autres soient cachésA chaque image de l’animation correspond un calque: attention pour attribuer le calque, il faut que les autres soient cachés Régler les délais (1 ère : 0.5 s, de 2 à 5: 0.2 s et 6 ème : 0.1s)Régler les délais (1 ère : 0.5 s, de 2 à 5: 0.2 s et 6 ème : 0.1s) Dans la fenêtre optimisation: mettre l’animation en GIFDans la fenêtre optimisation: mettre l’animation en GIF Ctrl+Alt+p: aperçu sur le webCtrl+Alt+p: aperçu sur le web Enregistrer-sous une copie optimiséeEnregistrer-sous une copie optimisée