Conseils utiles

Comment créer des animations avec Adobe ImageReady CS

Pin
Send
Share
Send
Send


La création d'animations dans Adobe ImageReady repose sur l'utilisation de calques. Chaque élément de l'animation est placé sur son propre calque. Cela vous permet de modifier la position et l'apparence d'un élément dans une série d'images à l'aide des commandes et des caractéristiques de la palette Calques. Pour créer des images d'animation à partir d'une image multicouche inhabituelle, avec la gamme Calques, la gamme Animation est utilisée. Grâce à cela, vous pouvez attribuer un délai à chaque image, créer de nouvelles images, générer automatiquement des états intermédiaires en fonction des images source et cible, déterminer le nombre de répétitions de l'animation, etc.

Il faut souligner que dans Adobe Photoshop CS2, vous pouvez également utiliser toute la gamme des animations sans passer par le programme ImageReady. Pourtant, le programme Adobe ImageReady version CS2 contient également une animation gamma.

Présentation de la gamme d'animation

Considérez le processus de préparation de l'animation. Et à titre d'exemple, nous allons «réactiver» la bannière que nous avons enregistrée dans le fichier other.psd. Mais tout d’abord, lancez le programme Adobe ImageReady.

Cliquez sur le bouton Démarrer de la barre des tâches et sélectionnez la commande Programmes - Adobe ImageReady CS (Programmes - Adobe ImageReady CS) dans le menu principal de Windows qui apparaît. Le programme sera lancé et sa fenêtre de travail apparaîtra à l'écran.

Comme mentionné précédemment, l'animation est préparée à l'aide de la palette Animation.

Sélectionnez la commande de menu Fenêtre - Animation. Au bas de la fenêtre contextuelle, la gamme Animation apparaît.

Tant qu'un nouveau document n'est pas créé dans Adobe ImageReady ou qu'un document existant n'est ouvert, les contrôles de cette palette sont inaccessibles. Par conséquent, nous ouvrons immédiatement le fichier other.psd.

Sélectionnez la commande de menu Fichier - Ouvrir. La boîte de dialogue Ouvrir un fichier apparaîtra à l'écran.

Ouvrez le dossier dans lequel vous avez enregistré le fichier other.psd et sélectionnez-le en cliquant avec la souris.

Cliquez sur le bouton Ouvrir. La boîte de dialogue Ouvrir un fichier se ferme. La fenêtre de document other.psd apparaît dans la fenêtre de travail du programme Adobe ImageReady.

La préparation d’une animation dans Adobe ImageReady consiste à développer une séquence d’images, pour chacune desquelles une image, un temps de retard et d’autres caractéristiques sont déterminés. La première image de cette séquence est créée automatiquement par le programme et figure déjà dans la gamme Animation avec une vignette et un raccourci 1 dans le coin supérieur gauche. Ce cadre inclut toutes les couches visibles du dessin actif.

Sur le bord inférieur de la palette Animation, des boutons permettent de contrôler la création et la lecture d'animations. Ces boutons ont un but ultérieur.

Sélectionne les options de boucle - ouvre un menu avec lequel vous pouvez choisir le nombre de répétitions de l'animation. L'option sélectionnée est affichée à gauche de l'icône. Par défaut, c'est toujours, autrement dit, l'animation est lue sans interruption.

Sélectionne la première image - Va à la première image de l'animation.

Sélectionne l'image précédente - Revient à l'image précédente de l'animation.

Animation Lectures / Arrêts - Permet la lecture de l'animation. Après le début de la lecture, l’image de la touche change, une pression qui interrompt la lecture de l’animation.

Sélectionne l'image suivante - passe à l'image suivante.

Tween (Création de trames intermédiaires) - génère automatiquement des trames intermédiaires entre 2 désignées.

Dupliquer l'image actuelle - Copie l'image actuelle.

Supprime les images sélectionnées - Supprime les images sélectionnées.

Dans le coin supérieur droit de la palette Animation, un bouton Entrée permet d'accéder au menu de la palette. A l'aide des commandes de ce menu, vous pouvez créer, supprimer, copier, coller et sélectionner des images, générer des images intermédiaires, améliorer l'animation et effectuer d'autres opérations.

Le processus de préparation de l'animation dans Adobe ImageReady est très simple. Dans la gamme Animation, les images sont créées en alternance. Le contenu graphique de chaque image est déterminé à l'aide de la palette Calques. Avec tout cela, vous pouvez utiliser tous les outils d'édition disponibles. Pour chaque image, la durée d'affichage est définie, ce qui peut être modifié sur une large plage. Si nécessaire, entre 2 au moins certaines images, la machine génère automatiquement au moins plusieurs images intermédiaires pour créer l’effet d’une configuration progressive. De plus, un tel changement progressif peut être créé pour la transparence, les effets et la position des objets. Et finalement, le nombre de répétitions de l'animation dans le navigateur est indiqué, il est déterminé par un entier ou peut être continu. À la dernière étape, l'animation est optimisée et enregistrée au format GIF.

Informations complémentaires sur le sujet

Cet article fournit des informations sur la création et la modification de menus à l'aide de VBA.

Description de la création d'images animées (boutons) à l'aide de l'éditeur graphique Adobe ImageReady

Cet article explique comment créer un site à l'aide de l'éditeur WYSIWYG, notamment Microsoft FrontPage 2003.

Description de la conception d'interface à l'aide de la programmation Visual Basic (VBA)

Création de fichiers GIF dans ImageReady

Avec l'animation GIF, un ensemble d'images est lu dans l'ordre spécifié par l'utilisateur. Vous pouvez créer divers effets d’animation pour une page Web: déplacer le texte ou les graphiques, les faire disparaître ou apparaître progressivement ou les modifier d’une autre manière.

Pour préparer une animation dans ImageReady, vous devez créer de nombreuses images à l'aide de la palette Animation présentée à la figure 2. 23.127. Vous pouvez ensuite modifier les calques individuels de chaque image à l'aide de la palette Calques. Chaque image possède son propre jeu de paramètres unique dans la palette Calques. Enfin, vous devez enregistrer la séquence d'images dans un seul fichier GIF. Désormais, l'animation est prête à être visualisée en mode interactif.

Ce livre parle de la création de deux effets d’animation principaux: déplacer un élément de calque et disparaître ou apparaître progressivement. Une fois que vous maîtrisez les bases, vous pouvez commencer à créer des projets d’animation plus complexes.

Déplacement d'un élément d'image à l'aide d'une animation

Créez un effet d'animation pour n'importe quelle image.

  1. Ouvrez ou créez une image contenant un calque d'arrière-plan et un calque transparent avec l'image d'un objet (Fig. 23.128). La procédure à suivre est décrite à la section «Masquage de chiffres à l’aide de la commande Extraire» du chapitre 5 et aux différentes méthodes d’effacement de l’image à la fin du chapitre 12.

Fig. 23.127. Palette d'animation

Fig. 23.128. Calques d'image dans l'onglet Calques

Fig. 23.129. Déplacer un élément de calque au bord de la fenêtre principale

Fig. 23.130. Faites glisser un élément d'image vers l'autre bord de la fenêtre principale

Fig. 23.131. Images d'animation originales (initiales) et copiées (dernières)

  1. Ouvrez la palette Animation en cliquant sur l'onglet Animation ou en utilisant la commande Fenêtre> Afficher l'animation (Fenêtre> Afficher la palette d'animation).
  2. Sélectionnez un calque dans la palette Calques.
  3. A l'aide de l'outil Déplacer, faites glisser l'élément d'image vers le bord de la fenêtre principale (Fig. 23.129). La vignette correspondante dans la palette Animation sera mise à jour pour refléter la nouvelle position de l'élément.
  4. Au bas de la palette Animation, cliquez sur le bouton Dupliquer l'image actuelle. Le cadre copié sera mis en évidence.
  5. Le calque sélectionné à l'étape 3 doit rester sélectionné.
  6. À l'aide de l'outil Déplacement (touche V), faites glisser un élément du calque de l'autre côté de la fenêtre principale (Fig. 23.130). La vignette actuelle de la palette Animation sera mise à jour en conséquence (Fig. 23.131). Laissez cette couche sélectionnée!
  7. Dans la palette Animation, cliquez sur le bouton Tween pour créer des images intermédiaires entre celles déjà sélectionnées.
  8. Dans la boîte de dialogue Tween, placez le commutateur Calques dans l’une des positions suivantes:
  • Tous les calques (Tous les calques), pour copier des points de tous les calques dans de nouvelles images, même les calques qui n'ont pas été modifiés (Fig. 23.132). Cette option vous permettra également de mémoriser les modifications apportées simultanément dans deux couches ou plus,
  • Calque sélectionné pour copier uniquement les points du calque sélectionné dans de nouvelles images. Toutes les autres couches seront masquées.

Ensuite, dans le groupe Paramètres, cochez les cases des paramètres qui changeront dans les cadres intermédiaires: Position, Opacité et / ou Effets.

Dans le menu contextuel Tween avec, sélectionnez le mode Image précédente (Ajouter des images intermédiaires entre l'image sélectionnée et la précédente).

Si plusieurs images ont été sélectionnées avant que la boîte de dialogue Tween ne s'ouvre, seule l'option Sélection est disponible dans le menu contextuel Tween avec (Ajouter des images intermédiaires entre les images sélectionnées).

Fig. 23.132. Boîte de dialogue Tween

Autres options d'animation

En appuyant sur la touche Maj et en cliquant avec la souris, vous pouvez sélectionner plusieurs cadres. Faites glisser un ou plusieurs groupes d’images à l’emplacement souhaité.

Pour placer chaque image dans un calque, sélectionnez Aplatir les images en couches dans le menu de la palette Animation. Les couches précédentes ne seront pas supprimées.

À l'aide de la commande Rétablir les images dans le menu de la palette Animation, vous pouvez modifier la séquence d'images de lecture. Cette option équivaut à lire l'animation.

Fig. 23.133. Palette d'animation après l'ajout d'images intermédiaires

Recréer des cadres intermédiaires

Pour répéter l'opération de création d'images intermédiaires, sélectionnez toutes les images intermédiaires créées précédemment en cliquant sur la souris tout en maintenant la touche Maj enfoncée, puis faites-les glisser vers le bouton Supprimer. Modifiez l'une des deux images restantes, puis appliquez à nouveau la commande Tween.

Ensuite, indiquez dans le champ Images à ajouter le nombre d'images à ajouter (de 1 à 100). Plus cette valeur est élevée, plus l'animation sera lisse (sans interruption), mais la taille du fichier et le temps de téléchargement augmenteront.

  1. Cliquez sur le bouton OK (Fig. 23.133). Vous pouvez maintenant prévisualiser l'animation (voir la section "Aperçu de l'animation"). Pendant la lecture, l’élément de calque se déplace en douceur d’un bord à l’autre de la fenêtre principale.

Vous pouvez utiliser un calque de texte pour l’animation et vous n’aurez même pas à le convertir en représentation raster. Vous pouvez créer un effet de fondu en entrée ou en sortie, ainsi que déplacer du texte le long de la fenêtre d'image ou l'utiliser pour d'autres effets d'animation.

Si vous souhaitez que l'animation soit chargée et lue rapidement, utilisez des tailles d'image réduites (environ 200 x 200 pixels ou moins).

Pin
Send
Share
Send
Send