Académique Documents
Professionnel Documents
Culture Documents
18 - Création D - Images Web Complexes
18 - Création D - Images Web Complexes
complexes (ImageReady)
1. A propos des transformations par souris et des états
2. Utilisation des calques pour les transformations par souris et les
animations
3. Utilisation de la palette Contenu Web
4. Création et modification de transformations par souris
5. Animations
6. Affichage des animations
7. Optimisation des animations
8. Affichage des images animées dans Photoshop
9. Enregistrement des animations
10.Exportation des images d'animation en tant que fichiers
11.Ouverture et importation des fichiers en tant qu'animations
A propos des transformations par souris et des états
Une transformation par souris est un effet Web permettant d'afficher différents états d'une image en
fonction de l'opération effectuée à l'aide de la souris par l'utilisateur comme, par exemple, le survol ou
un clic sur une image. Un état est défini par une configuration particulière de la palette Calques,
notamment par l'emplacement du calque, les styles et d'autres options de mise en forme.
Par défaut, chaque image est dotée d'un état : l'état Normal. Cet état correspond à l'aspect de l'image
lorsqu'elle est chargée pour la première fois dans un navigateur Web et qu'aucun effet de transformation
par souris n'a encore modifié son aspect. Vous pouvez ajouter des états à une image. Les autres états
sont affichés, par exemple, lorsque le pointeur survole l'image ou lorsqu'un utilisateur clique sur
l'image.
2
Utilisation des calques pour les transformations par souris et les animations
Dans ImageReady, les calques permettent de créer des transformations par souris et des animations.
En effet, le placement du contenu d'une image destiné à l'effet de transformation par souris sur des
calques séparés, vous permet de modifier le style, la visibilité et la position des calques pour la
transformation par souris. D'une façon similaire, le placement des différents éléments d'une animation
sur des calques séparés, définit cette dernière comme un objet indépendant dont vous pouvez modifier
la position et l'aspect à travers une série d'images.
Vous pouvez également utiliser les effets de transformation par souris pour les tranches de calque,
autres que celles que vous avez sélectionnées. Vous pouvez utiliser ces transformations par souris à
distance pour créer des effets comme, par exemple, le lancement d'une application ou la lecture d'une
animation dans l'état Par-dessus (Survolé) (voir la section Création de transformations par souris
distantes).
Exemple d'une transformation par souris. Le bouton se situe sur son propre calque ; des effets sont
ajoutés au calque pour créer un nouvel aspect du bouton pour l'état Par-dessus (Survolé). Le texte
« EVENEMENTS » est également sur un calque séparé.
Exemple d'une animation. L'image de la bicyclette se trouve sur un calque séparé ; la position du calque
varie dans chaque image de l'animation.
Modification des calques dans les états de transformation par souris et les
images d'animation
Certaines modifications apportées aux calques s'appliquent uniquement à l'état de transformation par
souris actif ou à l'image d'animation active, tandis que d'autres portent sur tous les états et toutes les
images d'animation comportant ces calques.
Modifications spécifiques aux images et aux états
Elles affectent uniquement l'image d'animation active ou l'état de transformation par souris actif. Par
défaut, les modifications apportées à des calques à l'aide des options ou des commandes de la palette
Calques (notamment l'opacité, le mode de fusion, la visibilité, la position et le style) sont spécifiques
aux images et aux états. Vous pouvez cependant appliquer des modifications de calques à tous les états
d'une transformation par souris et à toutes les images d'une animation à l'aide des boutons d'unification
de la palette Calques (voir la section Unification et correspondance des transformations par souris de
calque et d'animations).
Important : certaines modifications apportées à un calque dont l'état est Normal ou Image 1 (comme
l'opacité, le mode de fusion, la visibilité, la position et le style) affectent tous les états ou toutes les
images présentant des calques identiques. Par exemple, considérez une tranche dont l'état est Normal,
Par-dessus (Survolé) et un état Bas (Enfoncé). Si les calques dans les états Normal et Par-dessus
3
(Survolé) sont identiques et si vous appliquez un style de calque au calque Normal, ce style de calque
sera également appliqué au calque dont l'état est Par-dessus.
Modifications globales
Elles affectent tous les états et les images incluant les calques. Les modifications des valeurs de pixels
de calque à l'aide des outils de dessin et d'édition, des commandes de réglage des teintes et des couleurs,
des filtres, du texte et d'autres commandes de retouche d'images agissent sur toutes les images contenant
ce calque.
4
Utilisation de la palette Contenu Web
La palette Contenu Web permet de créer, de visualiser et de définir des états de transformation par
souris dans une image. En plus des états de transformation par souris, cette palette affiche les tranches,
cartes-images et images animées. L'affichage de tranches et de cartes-images permet de contrôler les
éléments d'une image contenant des effets de transformation par souris. L'affichage des images
d'animation permet de voir facilement les états d'une image contenant des animations.
Palette Contenu Web avec tranches, cartes-images et images d'animations : A. Etat Normal B. Carte-
image avec l'état Par-dessus (Survolé) C. Icône de visibilité de tranche D. Elle indique que cette tranche
contient un état de transformation par souris actif E. Faites glisser l'icône d'affectation jusqu'à la fenêtre
de l'image pour rendre la tranche cible distante pour cet état de transformation par souris F. Indique
qu'une tranche distante est associée à l'état Bas (Enfoncé) G. Indique qu'une cible distante est associée à
cette tranche H. Indique qu'une animation est associée à cet état I. Indique que cette tranche est un
tableau imbriqué J. Informations de tranche imbriquée : numéro de tranche, indicateur créé d'après un
calque, badge de déclenchement à distance K. Informations de tranche individuelle : numéro de tranche,
indicateur créé d'après un calque L. Informations de tranche distante : numéro de tranche, indicateur
créé d'après un calque, badge cible distant
Affichage de la palette Contenu Web
Choisissez Fenêtre > Contenu Web. Une coche indique que la palette est affichée.
Utilisation du menu de la palette Contenu Web
Cliquez sur le triangle dans le coin supérieur droit de la palette pour accéder aux commandes
d'édition des transformations par souris.
Affichage des tranches et des cartes-images dans la palette Contenu Web
5
La palette Contenu Web contient des sections pour les cartes-images et les tranches . Cliquez
sur le triangle pour les afficher ou les masquer. Une option de la boîte de dialogue Options de palette de
la palette Contenu Web, permet d'afficher ou de masquer les badges des tranches (petites icônes, sur les
tranches indiquant les propriétés de la tranche).
Affichage des images d'animation dans la palette Contenu Web
Choisissez Options de palette dans le menu de la palette Contenu Web. Sélectionnez ou désélectionnez
Images d'animation, puis cliquez sur OK.
Modification de la taille des vignettes de transformation par souris
Choisissez Options de palette dans le menu de la palette Contenu Web, puis sélectionnez une taille de
vignette. Pour les tailles autres que Sans, sélectionnez Limites de l'objet ou Document entier pour
déterminer le contenu des vignettes.
Développement ou réduction des états, des tranches et des cartes-images
Cliquez sur le triangle situé à gauche de chacun des éléments de la palette Contenu Web. Cliquez en
maintenant la touche Alt (Windows) ou Option (Mac OS) enfoncée pour développer ou réduire tous les
éléments à la fois.
6
Création et modification de transformations par souris
Utilisez la palette Contenu Web conjointement à la palette Calques pour ajouter des effets de
transformation par souris à une image. Lorsque vous enregistrez une image comme page Web,
ImageReady ajoute du code JavaScript au fichier HTML pour spécifier les états de transformation par
souris.
Image avec trois états de transformation par souris A. Etat Normal B. Etat Par-dessus (Survolé) C. Etat
Bas (Enfoncé)
Pour créer une transformation par souris :
1. Créez une tranche d'après un calque pour la transformation par souris (voir la section Création
de tranches pour des transformations par souris). Vous pouvez aussi utiliser une image créée d'après un
calque pour y placer la transformation par souris.
2. Créez des états de transformation par souris (voir la section Création et modification d'états de
transformation par souris).
3. Sélectionnez un état dans la palette Contenu Web, puis éditez le contenu du calque de l'état
pour créer l'effet de transformation par souris (voir la section Modifications spécifiques aux images et
aux états).
Vous pouvez utiliser des styles de calque pour créer des effets de transformation par souris
instantanés. Lorsque vous travaillez avec des tranches créées d'après un calque, vous pouvez aussi
enregistrer la série d'états comme style de transformation par souris (voir la section Application et
création de styles de transformation par souris).
4. Si vous créez une transformation par souris distante, définissez la tranche distante comme cible
de l'état sélectionné (voir la section Création de transformations par souris distantes).
5. Prévisualisez la transformation par souris (voir la section Prévisualisation des états de
transformation par souris).
7
Par défaut, ImageReady ajoute un état Par-dessus (Survolé) à la nouvelle tranche.
8
Active l'état de transformation par souris lorsque l'utilisateur relâche le bouton de la souris sur la
tranche ou la zone de carte-image. (En général, l'état Normal assure cette fonction.)
Sans
Préserve l'état actuel de l'image pour une utilisation ultérieure, mais n'exporte pas d'image lorsque le
fichier est enregistré sous forme de page Web.
Etat de transformation par souris avec pour cible une tranche distante
Pour permettre à ImageReady de rechercher et marquer automatiquement toutes les tranches
distantes du document, sélectionnez Rechercher toutes les tranches distantes dans le menu de la palette
Contenu Web.
Pour permettre à ImageReady de rechercher et marquer automatiquement les tranches distantes
pour un état sélectionné, sélectionnez Rechercher les tranches distantes pour l'état dans le menu de la
palette Contenu Web.
9
5. Prévisualisez la transformation par souris dans un navigateur. Reportez-vous à la section
Prévisualisation des états de transformation par souris.
10
3. Cliquez sur la vignette du style de transformation par souris à appliquer. Les vignettes des
styles de comportent un triangle dans leur coin supérieur gauche.
Pour créer un style de transformation par souris :
1. Dans la palette Contenu Web, créez les états de transformation par souris souhaités (voir la
section Création et modification d'états de transformation par souris).
Remarque : vous devez utiliser une tranche créée d'après un calque pour créer un style de
transformation par souris.
2. Appliquez les effets à chaque état à l'aide des styles prédéfinis de la palette Styles ou en
définissant manuellement des effets de calque dans la palette Calques (voir la section Utilisation des
effets et styles de calque).
3. Dans la palette Styles, cliquez sur le bouton Crée un nouveau style ou choisissez Nouveau
style dans le menu de la palette.
4. Donnez un nom au style, définissez ses options, puis cliquez sur OK. Il faut sélectionner
l'option Inclure les états de transformation par souris pour créer un style de transformation par souris.
Le nouveau style apparaît dans la palette Styles. L'aperçu des vignettes affiche les effets dans l'état
Normal.
11
Enregistrement des états de transformation par souris sélectionnés dans des
pages Web
Pour choisir le bouton qui doit s'afficher comme bouton sélectionné par défaut la première fois que vous
affichez la page Web dans un navigateur, cliquez deux fois sur l'état sélectionné de ce bouton dans la
palette Contenu Web, puis sélectionnez Utiliser comme état sélectionné par défaut. L'état sélectionné
préalablement est supprimé et votre sélection devient la valeur par défaut.
Si vous voulez générer une page HTML pour chacun des états sélectionnés, choisissez Fichier >
Paramètres de sortie > Enregistrement HTML et Sortie sur plusieurs fichiers HTML.
Page Web avec l'état Bas (Enfoncé) enregistré comme état sélectionné par défaut. Le bouton sur la page
donne un indice visuel quant à l'emplacement dans le site Web.
12
Animations
ImageReady prend en charge les animations dans les pages Web et fournit des outils de création,
d'édition et d'affichage d'animations.
Ajout d'images
La première étape de la création d'une animation consiste à ajouter des images. Si une image est ouverte
dans ImageReady, la palette Animation l'affiche comme première image d'une nouvelle animation.
Chaque image que vous ajoutez débute comme duplication de l'image précédente. Modifiez ensuite
l'image en utilisant la palette Calques.
Remarque : créez et modifiez toujours les images dans leur mode d'affichage Original. En effet, les
options de modification de la vue Optimisé sont très limitées.
13
Pour ajouter une image à une animation :
1. Dans la palette Contenu Web, sélectionnez l'état dans lequel afficher une animation (voir la
section Utilisation de la palette Contenu Web).
L'ajout d'une animation à l'état Normal entraîne le déclenchement de cette animation lorsque l'image est
chargée dans un navigateur Web. L'ajout d'une animation à un autre type d'état entraîne le
déclenchement de cette animation lorsque l'internaute active l'état.
2. Vérifiez que vous pouvez bien voir le bouton Créer une image d'animation et la commande
Nouvelle image d'animation. S'ils ne sont pas visibles, sélectionnez Images d'animation dans la boîte de
dialogue Options de la palette Contenu Web (voir la section Utilisation de la palette Contenu Web).
3. Pour ajouter des images à une animation, utilisez l'une des méthodes suivantes :
Cliquez sur le bouton Reproduit l'image sélectionnée dans la palette Animation ou
choisissez Nouvelle image dans le menu de la palette.
4. Modifiez l'image pour l'image en utilisant la palette Calques (voir la section Utilisation de la
palette Calques).
14
Réorganisation et suppression des images
Vous pouvez changer la position des images dans une animation et inverser l'ordre des images
contiguës sélectionnées. Vous pouvez également supprimer des images sélectionnées ou l'animation
entière.
Pour changer la position d'une image :
1. Sélectionnez l'image à déplacer dans la palette Animation ou la palette Contenu Web.
2. Faites glisser la sélection vers la nouvelle position.
Remarque : dans la palette Animation, vous pouvez sélectionner et changer la position de différentes
images (voir la section Sélection des images). Cependant, si vous faites glisser plusieurs images non
contiguës, les images sont placées de manière contiguë à la nouvelle position.
Pour inverser l'ordre des images :
1. Sélectionnez les images à inverser. Elles ne doivent pas nécessairement être contiguës ; vous
pouvez inverser toute sélection d'images.
2. Choisissez Inverser les images dans le menu de la palette Animation.
Pour supprimer des images sélectionnées :
Dans la palette Animation ou la palette Contenu Web, utilisez l'une des méthodes suivantes :
Sélectionnez Supprimer une image dans le menu de la palette.
Cliquez sur le bouton Corbeille , puis sur Oui pour confirmer la suppression.
Faites glisser l'image sélectionnée vers le bouton Corbeille.
Pour supprimer une animation entière :
Sélectionnez Supprimer l'animation dans le menu de la palette Animation ou le menu de la palette
Contenu Web.
15
Trajectoire des images
Vous utilisez la commande Trajectoire pour ajouter ou modifier automatiquement une série d'images
entre deux images existantes, autrement dit pour modifier les attributs de calque (paramètres de
position, d'opacité ou d'effets) uniformément entre les nouvelles images, afin de créer une illusion de
mouvement. Pour réaliser un fondu sur calque, par exemple, réglez l'opacité du calque de l'image de
départ sur 100 %, puis l'opacité du même calque dans l'image d'arrivée sur 0 %. Lorsque vous utilisez la
fonction Trajectoire entre les deux images, l'opacité du calque est réduite uniformément au fil des
nouvelles images.
Le concept de trajectoire reprend la technique d'animation traditionnelle, l'interpolation, utilisée pour
reconstituer un mouvement en continu. La fonction Trajectoire réduit sensiblement le temps nécessaire
pour créer des effets d'animation tels que les fondus ou le déplacement d'un élément dans une image.
Vous pouvez modifier individuellement des images avec trajectoire après les avoir créées.
16
Définition de la boucle
Sélectionnez une option de boucle pour spécifier combien de fois la séquence d'animation sera répétée.
Pour spécifier une boucle :
1. Cliquez sur la case de sélection de l'option de boucle dans le coin inférieur gauche de la palette
Animation.
2. Sélectionnez une option de boucle : Une fois, Toujours ou Autre.
3. Si vous avez sélectionné Autre, entrez une valeur dans la boîte de dialogue Définir le nombre
de boucles, puis cliquez sur OK.
Méthodes de suppression d'image A. Image à fond transparent avec l'option Restaurer au fond B. Image
à fond transparent avec l'option Ne pas supprimer
17
L'icône de méthode de suppression indique si l'image est réglée sur Ne pas supprimer ou Restaurer
au fond . Aucune icône n'apparaît lorsque la méthode de suppression est Automatique.
Pour choisir une méthode de suppression :
1. Sélectionnez une ou plusieurs images pour lesquelles vous souhaitez choisir une méthode de
disposition.
2. Cliquez avec le bouton droit (Windows) ou cliquez tout en maintenant la touche Contrôle
enfoncée (Mac OS) sur l'aperçu de l'image pour afficher le menu contextuel Méthode de suppression.
3. Choisissez une méthode de suppression :
Automatique, pour déterminer automatiquement une méthode de suppression de l'image
actuelle, en supprimant l'image actuelle si l'image suivante contient un calque transparent. Pour la
plupart des animations, l'option Automatique donne le résultat escompté, c'est pourquoi elle est
sélectionnée par défaut.
Remarque : choisissez l'option de suppression Automatique lorsque vous utilisez l'option
d'optimisation Suppression de pixels redondants, afin d'activer ImageReady pour préserver les images
contenant des zones transparentes.
Ne pas supprimer, pour préserver l'image actuelle tandis que l'image suivante est ajoutée à
l'affichage. L'image actuelle et les précédentes peuvent apparaître au travers des zones transparentes de
l'image suivante. Pour avoir un aperçu précis d'une animation en utilisant l'option Ne pas supprimer,
affichez un aperçu de l'animation dans un navigateur.
Restaurer au fond, pour supprimer l'image actuelle de l'affichage avant que l'image suivante ne
s'affiche. Une seule image est affichée à la fois à quelque moment que ce soit (et l'image actuelle
n'apparaît pas au travers des zones transparentes de l'image suivante).
18
Affichage des animations
L'affichage d'une animation permet d'obtenir un aperçu des images en séquences programmées. Vous
pouvez afficher un aperçu de l'animation dans ImageReady ou dans un navigateur Web.
Pour afficher une animation dans ImageReady :
1. Cliquez sur le bouton de lecture/arrêt de l'animation dans la palette Animation. L'animation
s'affiche dans la fenêtre de document. L'animation est répétée indéfiniment, à moins que vous ne
spécifiiez une autre valeur de répétition dans la boîte de dialogue des options de lecture (voir la section
Définition de la boucle).
2. Pour arrêter l'animation, cliquez sur le bouton d'arrêt .
3. Pour revenir en arrière dans l'animation, cliquez sur le bouton Sélection de la première
image .
Pour afficher une animation dans un navigateur :
1. Cliquez sur l'outil Aperçu dans (navigateur par défaut) dans la palette d'outils ou choisissez
Fichier > Aperçu dans, puis sélectionnez un navigateur dans le sous-menu.
Le navigateur par défaut du système est celui que vous avez choisi par défaut.
Autre navigateur vous permet de choisir une application parmi celles installées sur votre
système.
La modification de la liste des navigateurs vous permet d'ajouter des navigateurs à la liste
Autre navigateur.
Remarque : une fois que vous avez sélectionné un navigateur, le bouton Aperçu dans (navigateur par
défaut) prend la forme de l'icône du navigateur.
2. Utilisez les commandes Arrêter et Actualiser du navigateur pour arrêter ou exécuter de
nouveau l'animation.
19
Optimisation des animations
Vous pouvez appliquer des paramètres d'optimisation sur images animées tout comme vous le feriez sur
des images non animées. Optimisez toujours une animation au format GIF, car il s'agit du seul format
dans ImageReady prenant en charge l'affichage d'images animées sur le Web.
Remarque : vous pouvez optimiser une image contenant une animation au format JPEG ou PNG, mais
ces formats ne prennent pas en charge l'animation. Les pages Web ainsi obtenues affichent uniquement
l'image en cours de l'animation.
Outre les options d'optimisation standard pour le format GIF, vous pouvez optimiser des images de
façon à n'inclure que les zones qui changent à chaque image. (Cela réduit considérablement la taille du
fichier GIF animé.) ImageReady applique également une technique de tramage spéciale aux animations,
afin de garantir l'uniformité des motifs de tramage dans toutes les images et d'éviter les papillotements
pendant la lecture. En raison de ces fonctions d'optimisation supplémentaires, ImageReady prend
parfois plus de temps pour optimiser un GIF animé que pour optimiser un fichier GIF standard.
Pour optimiser une image animée :
1. Sélectionnez Optimiser l'animation dans le menu de la palette Animation.
2. Définissez les options suivantes :
Zone à transformer, pour recadrer chaque image dans la zone qui a été modifiée depuis l'image
précédente. Les fichiers animation créés en utilisant cette option sont plus petits, mais sont
incompatibles avec les éditeurs GIF qui ne prennent pas en charge cette option. (Cette option,
sélectionnée par défaut, est celle recommandée.)
Suppression de pixels redondants, pour rendre transparents tous les pixels d'une image qui sont
identiques par rapport à l'image précédente. Cette option, sélectionnée par défaut, est celle
recommandée. L'option Transparence doit être sélectionnée dans la palette Optimisation pour que la
suppression des pixels redondants s'opère (voir la section Options d'optimisation pour les formats GIF
et PNG-8).
Important : choisissez la méthode de suppression de l'image Automatique lorsque vous utilisez l'option
Suppression de pixels redondants (voir la section Définition de la méthode de suppression de l'image).
3. Cliquez sur OK.
4. Appliquez des paramètres d'optimisation (voir la section Optimisation des images).
Lorsque vous optimisez les couleurs d'une animation, utilisez les palettes Adaptative, Perception ou
Sélective. Cela garantit l'uniformité des couleurs dans toutes les images (voir la section Génération
d'une table des couleurs).
20
Affichage des images animées dans Photoshop
Lorsque vous ouvrez un fichier contenant une animation dans Photoshop, seule l'image sélectionnée
lors de l'enregistrement du fichier dans ImageReady s'affiche. Vous ne pouvez pas modifier séparément
les images de l'animation, lire l'animation ou l'enregistrer comme GIF animé.
Si vous ajoutez un nouveau calque au fichier dans Photoshop, le calque est ajouté à toutes les images de
l'animation. Cependant, le nouveau calque n'apparaît dans l'image sélectionnée que lorsque vous
rouvrez le fichier dans ImageReady. Si vous changez l'ordre d'empilement des calques dans Photoshop,
il sera modifié lorsque vous rouvrirez le fichier dans ImageReady.
21
Exportation des images d'animation en tant que fichiers
Vous pouvez exporter des images d'animation individuelles en tant que fichiers, notamment au format
Photoshop (PSD), GIF, JPEG, PNG 8, PNG 24, WBMP ou SWF.
ImageReady fournit plusieurs formats prédéfinis pour les fichiers d'animation. Vous pouvez également
développer vos propres formats et les ajouter dans la bibliothèque des paramètres prédéfinis.
Pour exporter des images d'animation en tant que fichiers :
1. Choisissez Fichier > Exportation > Images d'animation sous forme de fichiers.
2. Dans la section Options de fichier de la boîte de dialogue, effectuez les opérations suivantes :
Entrez un nom de base pour les nouveaux fichiers. Vous pouvez définir votre propre
convention de dénomination des images, si vous le souhaitez.
Cliquez sur le bouton Définir pour définir une convention de dénomination des fichiers pour
les nouveaux fichiers. Choisissez parmi les paramètres de dénomination et suffixes proposés.
Cliquez sur le bouton Sélectionner pour spécifier l'emplacement des fichiers enregistrés.
3. Dans la zone Options d'enregistrement, sélectionnez l'une des options suivantes :
Images sélectionnées uniquement, pour n'exporter que les images sélectionnées.
Aperçu, pour afficher les paramètres de calque courants dans le document. Utilisez les
triangles vers l'avant et vers l'arrière pour passer en revue vos sélections.
Appliquez pour définir la préférence de mise en forme.
4. Dans la zone Options de format, sélectionnez un format dans le menu Paramètre prédéfini.
Vous pouvez enregistrer des ensemble de formats et les placer dans un répertoire qu'ImageReady peut
lire ; cela vous permet de construire une bibliothèque de paramètres prédéfinis. Vous pouvez également
utiliser le paramètre prédéfini Sans nom et entrer les valeurs appropriées.
5. En fonction du paramètre prédéfini que vous avez choisi, le menu Format reçoit une valeur
automatique ; vous pouvez également lui attribuer une valeur Sans nom. Les autres options de la zone
Options de format sont alors renseignées automatiquement pour prendre les paramètres de
formatage/prédéfinis, ou bien vous pouvez les renseigner vous-même et créer votre propre paramètre
prédéfini Sans nom.
22
Ouverture et importation des fichiers en tant qu'animations
Vous pouvez utiliser les fonctions d'animation dans ImageReady pour modifier des GIF animés, des
fichiers multicalques Photoshop et des séquences QuickTime.
23