Didacticiel du Pôle de création
Créez une bannière Web avec des boutons animés
Une bonne préparation est indispensable à la conception de transformations par souris réussies. Pendant cet exercice, vous mettrez en pratique l'une des méthodes d'organisation des calques dans Adobe® Photoshop® 7.0 et Adobe ImageReady® 7.0 afin de créer une bannière Web avec deux effets de transformations par souris, un effet principal et un effet secondaire. Découvrez comment animer votre bannière.
1. Composez la bannière.
Dans Photoshop, créez une image représentant le corps de la bannière. Dessinez ensuite des boutons de navigation à l'aide de l'outil Rectangle, puis ajoutez du texte à ces boutons à l'aide d'un outil Texte. Lorsque vous avez terminé, cliquez sur le bouton Nouveau groupe dans la palette calques, puis faites glisser tous les calques de la bannière dans le groupe de calques.
Il est indispensable de placer chaque élément de la bannière sur un calque distinct pour créer des effets de transformation de souris. Notre image se compose de quatre calques de forme (un par bouton), de quatre calques de texte et d'un calque image.
2. Créez les images correspondant aux différents états de transformations par souris.
Créez tout d'abord un groupe de calques pour chacun des boutons de la bannière. Dupliquez ensuite chaque calque de bouton et de texte du groupe de calques original, puis faites glisser les répliques dans les groupes correspondant. Cliquez deux fois sur la vignette de chaque réplique de calque de bouton, puis choisissez une nouvelle couleur pour le bouton. Cette couleur apparaît lorsque l'utilisateur fait glisser la souris sur le bouton dans la bannière. Cet effet, se produisant à l'intérieur du bouton, est appelé effet principal.
Créez une image différente, correspondant au corps de la bannière, pour chaque bouton. Faites glisser l'image dans le groupe de calques du bouton. L'image s'affiche lorsque l'utilisateur clique sur le bouton dans la bannière. Cet effet, se produisant à l'extérieur du bouton, est appelé effet secondaire.
3. Passez à ImageReady.
Avant de passer à ImageReady, désactivez la visibilité de chacun des nouveaux groupes de calques. (Assurez-vous que seuls les calques du groupe original sont visibles dans la fenêtre de document.) Cliquez ensuite sur le bouton Passer à ImageReady dans la palette d'outils.
4. Ajoutez une transformation par souris créée d'après un calque.
Dans ImageReady, sélectionnez l'un des calques de bouton dans le groupe de calques original. Cliquez ensuite sur le bouton Créer une transformation par souris d'après le calque dans la palette Transformations par souris. (Si la palette Transformations par souris est masquée, choisissez Fenêtre >Transformations par souris pour l'afficher.)
Lorsque vous cliquez sur ce bouton, ImageReady crée automatiquement une tranche à partir du calque, puis lui attribue l'état Survolé (Par-dessus), qui apparaît sous le nom de la tranche dans la palette Transformations par souris.
