Animation Arc-en-ciel

©2000

Ce tutoriel a été créé par Doro Sensen

animatedrainbow-17.gif (29283 bytes)

 

Avec les nouveaux dégradés multiples de PSP 6 et d'Animation Shop, vous pouvez créer de grandes animations arc-en-ciel!

 

imatutaniarc1.jpg (16433 bytes)

 

 

imatutaniarc2.jpg (5805 bytes)

 

 

 

imatutaniarc3.jpg (6310 bytes)

 

imatutaniarc4.jpg (6468 bytes)

 

 

 

animatedrainbow-05.gif (3402 bytes)

animatedrainbow-06.gif (3405 bytes)

animatedrainbow-07.gif (3403 bytes)

animatedrainbow-08.gif (3387 bytes)

animatedrainbow-09.gif (3393 bytes)

animatedrainbow-10.gif (3403 bytes)

 

 

 

 

 

 

 

 

animatedrainbow-11.gif (3120 bytes)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

animatedrainbow-12.gif (3403 bytes)

 

 

 

 

 

 

 

 

 

 

 

animatedrainbow-13.jpg (5733 bytes)

animatedrainbow-14.jpg (4795 bytes)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

animatedrainbow-15.gif (2398 bytes)

 

 

animatedrainbow-16.gif (29283 bytes)

 

 

animatedrainbow-17.gif (29283 bytes)

 

 

 

 

 

 

 

 

tlnew.gif (940 bytes) Ouvrez une nouvelle image, largeur=300, hauteur=100, couleur d'arrière-plan=transparent, 16 millions de coul.

tlfloodfill.gif (982 bytes) Choisir votre outil de remplissage pot de peinture. Configuration:

  • Style de remplissage: Dégradé linéaire
  • Mélange: Normal
  • Texture: Aucun
  • Correspondance: aucune-
  • Opacité: 100
  • Échantillon fusionné: non coché

D'abord, nous devons créer notre dégradé arc-en-ciel, alors cliquez sur la fonction " Editer ", le 2e bouton sur le tabulateur de la palette de configuration du pot de peinture, pour ouvrir la zone de dialogue de l'éditeur de dégradé.

Cliquez sur le bouton " Nouveau ", tapez " Rainbow_red " et cliquez OK. Ce sera notre début d'arc-en-ciel avec la couleur rouge. Cliquez sur la première bouteille à 0%, puis cliquez sur la couleur perso et choisir la couleur rouge (rouge=192, vert=0, bleu=0), puis faites la même chose avec la deuxième bouteille à 100%. Vous devriez maintenant avoir un " dégradé " totalement rouge.

Maintenant cliquez entres ces deux bouteilles, en dessous de la barre de dégradé pour créer une troisième bouteille et la positionner à 17%. Avec couleur Perso: choisir Orange (rouge=255, vert=61, bleu=1).

Cliquez encore pour ajouter une autre bouteille. La positionner à 33% et choisir la couleur Perso: Jaune (rouge=255, vert=255, bleu=64). Recommencez la même chose pour le vert (rouge=0, vert=128, bleu=0) à 50%, encore pour le bleu (rouge=0, vert=0, bleu=192) à 67%, et le violet (rouge=128, vert=0, bleu=128) à 83%. Vous devriez maintenant avoir un dégradé arc-en-ciel comme celui de gauche.

 

Cliquer sur le bouton "Copier", taper "Rainbow_orange" dans la boîte de texte et cliquer "OK".   Maintenant glisser la première bouteille rouge en dehors de la barre de dégradé, pour l'enlever.  Glisser la bouteille orange de 17% à 0%, la bouteille jaune de 33% à 17%, la bouteille verte de 50% à 33%, la bleu de 67% à 50%, la violet de 83% à 67% et la bouteille rouge de 100% à 83%.  Maintenant cliquez une fois sur la première bouteille orange et ensuite cliquez en dessous de la barre de dégradé à 100% pour ajouter une seconde bouteille orange à la fin de la rangée.

Cliquez à nouveau sur "Copier" pour le dégradé "Rainbow_yellow", et l'éditer de la même façon que le dégradé précédent. Recommencer la même chose pour le dégradé "Rainbow_green", "Rainbow_blue" et "Rainbow_violet".   À la fin, vous devriez avoir 6 dégradés arc-en-ciel, comme ceux de gauche (sans les pourcentages, qui ont été ajoutés simplement pour vous aider).

Maintenant que nous avons nos dégradés arc-en-ciel, nous pouvons créer l'image que nous voulons remplir avec ceux-ci.

 tltext.gif (194 bytes) Sélectionnez votre outil de texte et cliquez au centre de votre image. Dans la boîte de texte, choisir:

  • Nom de police: Impact
  • Taille: 72
  • Effets sur le texte: Une couleur assortie à la couleur de fond de votre page web (J'ai choisi un bleu foncé, gras, centré).
  • Sous forme: Vectorielle, Anti-alias non coché.
  • Paramètre du texte: crénage auto coché.

Taper "PSPUG" et cliquez "OK" pour placer le texte au centre de votre image.

tlvectorobjectselection.gif (225 bytes) Maintenant sélectionnez votre outil Objet Vectoriel, faites un clic droit sur votre image et choisir Convertir texte en courbes > Courbe unique; cliquer à nouveau et choisir Propriétés.

Dans Propriétés Vectorielles configurer comme suit:

  • Style: Contour et Rempli
  • Ligne: Largeur 3 (ne pas changer de couleur)
  • Remplissage: Couleur Blanc.

Désélectionner, faire un clic droit sur la couche vectorielle dans la palette de couche et choisir " Convertir en bitmap".   Aller dans Edition > Copier et puis Edition > Coller > Comme nouvelle image, de cette façon votre image sera de la grandeur que vous avez besoin.

tlmagicwand.gif (958 bytes) Sélectionnez l'outil baguette magique et cliquez dans la partie blanche d'une lettre, puis aller dans Sélections > Modifier > Sélectionner les zones similaires, afin de sélectionner toutes les parties blanches dans votre image. Sauvegarder cette sélection comme un Channel Alpha, en faisant Sélection > Enregistrer sur une couche Alpha et cliquez "OK"  pour Enregistrer sur la Couche Alpha et "OK" pour la nouvelle couche.  Vous pouvez maintenant ouvrir à nouveau cette sélection quand vous en aurez besoin. Désélectionner l'image.

Maintenant cliquer sur le contour d'une des lettres (pour moi, contour bleu), et retourner dans Sélections > Modifier > Sélectionner les zones similaires. Aller dans Image > Effets > Biseautage intérieur, et configurer la boîte de dialogue comme suit:

  • Biseau: Rond ( 2e de la ligne d'en haut), largeur = 1
  • Image: Adoucissement = 2, Profondeur = 1, Ambiance = 0, Eclat = 15
  • Lumière: Couleur = blanc, Angle = 315, Intensité = 50, Hauteur = 30

tlfloodfill.gif (982 bytes) Désélectionner et cliquer sur l'outil Pot de Peinture. Dans le deuxième onglet de la palette de configuration, choisir:

  • Dégradé: Rainbow_red
  • Angle = 90
  • Répétitions = 0

Aller dans Sélections > Charger depuis une couche Alpha et cliquez "OK". Cliquez sur la sélection pour le remplissage avec votre dégradé arc-en-ciel.  Maintenant aller dans Image > Effets> Biseautage intérieur encore; changer la largeur pour 4, Adoucissement à 15, Profondeur à 5 et laisser le reste tel quel.  Désélectionner et sauvegarder votre image sous "Rainbow_red¨" ou quelque chose comme ca.

Dupliquer votre image (Calques > Dupliquer), charger votre sélection depuis l'Alpha (Sélections > charger votre sélection depuis une couche Alpha) et remplissez avec le dégradé "Rainbow_orange".  Appliquer le biseautage intérieur avec la même configuration que précédemment, désélectionner et sauvegarder sous "Rainbow_orange" ou quelque chose comme ca.

Refaire la même chose pour "Rainbow_yellow", "Rainbow_green", "Rainbow_blue" et "Rainbow_violet". Vous avez maintenant les six images dont vous avez besoin pour votre animation.

Maintenant aller dans Fichier > Lancer Animation Shop pour faire de vos images une animation.  Dans Animation Shop, aller dans Fichier > Assistant d'Animation; ensuite choisir, "Même taille que la première image" suivant, "Transparent" suivant, "Centrées dans le Cadre" et "Avec la couleur du support" suivant, "Oui répéter l'animation indéfiniment" et durée d'affichage à 10, suivant,

Et maintenant vous devez ajouter les images qui feront partie de votre animation. Cliquer sur Ajouter l'image et sélectionner images arc-en-ciel pour les ajouter  Vous devez les ajouter en ordre, en débutant avec "Rainbow_red", "Rainbow_violet", "Rainbow_blue", "Rainbow_green", "Rainbow_yelow" et "Rainbow_orange". Suivant et Terminer.  Vous pouvez maintenant visualiser votre animation pour l'éditer.

Alors voilà votre animation terminée! Celle-ci bouge en permanence, ce qui peut devenir lourd dans certains cas, parce que cela détourne l'attention des visiteurs de votre site web des informations plus importantes.  Il y a deux autres variations que j'aimerais vous montrer:

Pour celle de gauche qui fait une petite pause à la première image, vous devez sélectionnez la première image dans votre animation (l'image entourée d'une large bande bleue), puis aller dans "Animation > Propriétés de l'image" et ajuster la durée d'affichage à 100.  Je préfère celle la pour une bannière animée.

La dernière, ma favorite pour une animation "effet mouseover".  Vous devez premièrement ajouter une autre image "Rainbow_red" après celle orange, faire "Animation > Insérer des Images > À partir d'un fichier...", mettre Insérer avant: 7. Puis vous aller dans " Animation > Propriétés de l'Animation" et dans l'onglet Boucle, choisir "Jouer 1 fois".  Dans Animation Shop vous ne verrez pas de différence, mais sur votre page web, prendre l'image "Rainbow_red" comme image de "mouseout" et l'animation comme image de "mouseover", et vous avez l'effet "mouseover" comme celle de gauche.

Avec cette technique, vous avez plusieurs possibilités, parce que naturellement les dégradés ne doivent pas nécessairement être des dégradés linéaires arc-en-ciel, et l'image peut être n'importe quoi, pas nécessairement du texte.

Amusez-vous bien à animer les dégradés!  :-))

Vous avez besoin d'aide spécifique, n'hésitez pas à utiliser le forum de message...en cliquant ICI!


Mesurez votre audience

 

Copyright Le Coeur des Anges 2000-2001©