Animation d'un texte déformé
Une animation donne toujours de l'effet sur une page Web. Si la déformation de texte constitue un moyen astucieux de donner du cachet à une page Web, l'animation de texte déformé est encore mieux ! Dans Adobe® ImageReady® CS, vous pouvez utiliser les trajectoires pour créer un texte qui danse sur l'écran. Il s'agit d'une technique simple, mais qui produit des résultats professionnels !
1. Ajoutez un calque de texte à votre image.
Créez un nouveau calque de texte dans ImageReady à l'aide de l'outil Texte. Ajoutez éventuellement un ou plusieurs effets au calque de texte.
Nous avons utilisé l'option de masquage afin de faire apparaître l'image du fruit du calque d'arrière-plan à travers le calque rouge uni situé derrière les lettres. Pour créer un masquage dans ImageReady, sélectionnez le calque dans la palette Calques et choisissez Calque > Options de calque > Options de fusion. Dans le menu déroulant Masquage, choisissez Profond (pour percer tous les calques et faire apparaître le calque d'arrière-plan) ou Superficiel (pour un masquage qui s'arrête au niveau du dernier calque d'un groupe de calques ou d'écrêtage). Vous aurez besoin d'un calque intitulé Arrière-plan pour créer un masquage Profond correct.
2. Commencez par animer et habiller le texte.
Pour accéder à la palette Animation, choisissez Fenêtre > Animation. Cliquez sur le bouton Nouvelle image dans la palette Animation pour ajouter une nouvelle image. Sélectionnez le calque de texte dans la palette Calques, en choisissant Calque > Texte > Déformer le texte, puis définissez les options de déformation (nous avons choisi le style Onde, sélectionné l'option Horizontal et défini l'option Inflexion sur 90 %).
3. Inversez l'effet de déformation dans l'image 3.
Créez une nouvelle image, sélectionnez le calque de texte et choisissez Calque > Texte > Déformer le texte. Dans la boîte de dialogue Déformer le texte, inversez les paramètres de déformation définis à l'étape 2. (Nous avons changé l'inflexion de 90 % à -90 %.)
4. Ajoutez éventuellement des images supplémentaires à l'animation.
Lorsque vous concevez une animation, pensez à la façon dont vous voulez que l'image s'anime, et créez une image pour chaque état principal de l'animation. Vous pouvez utiliser la fonction Trajectoire d'ImageReady pour générer des images intermédiaires entre les états principaux.
Vous avez déjà créé des images pour trois états de l'animation. Si vous le souhaitez, vous pouvez créer des images supplémentaires.
5. Utilisez les trajectoires pour fignoler l'animation.
Sélectionnez l'image 2 dans la palette Animation, puis cliquez sur le bouton Trajectoire. Dans la boîte de dialogue Trajectoire, sélectionnez l'option Image précédente dans le menu déroulant Trajectoire avec, spécifiez le nombre d'images à ajouter et cliquez sur OK. Nous avons ajouté deux images à notre animation.
Répétez le procédé de trajectoire pour générer d'autres images intermédiaires entre les images créées aux étapes 3 et 4. Vous pouvez également définir des options de paramètres dans la boîte de dialogue Trajectoire pour spécifier les éléments qui seront modifiés par la fonction de trajectoire. Par exemple, vous pouvez animer la position, mais conserver tels quels les paramètres d'opacité pour atténuer les couleurs progressivement ou les intensifier soudainement.
6. Prévisualisez l’animation.
Cliquez sur le bouton de lecture dans la palette Animation pour prévisualiser l'animation dans ImageReady. Sinon, cliquez sur le bouton du navigateur dans la boîte à outils pour prévisualiser l'animation dans votre navigateur Web par défaut.
