But :créer une bannière animée au format GIF, d'une taille de 468 X 60 pixels , le résultat devrait ressembler à la bannière ci dessous.

Ce tutoriel est certe long , mais très détaillé avec beaucoup de captures d'écran , j'espère qu'il vous donnera satisfaction .

Lancer Fireworks >>Fichier >> Nouveau , utilisez les paramètres ci dessous , fond transparent (fond transparent ,nous permettra de mettre en avant cette fonctionnalité interessante qu'est la transparence dans un gif)

Puis valider par OK Nous voila sur la scène de Fireworks avec un damier blanc et gris , ce qui indique que notre fond est transparent.

Ouvrez dès maintenant les fenêtres dont nous aurons besoin pour cet exercice, cochez à l'identique de l'image ci dessous.

A droite de l'écran apparaissent deux fenêtres importante ! Images et Calques (peut importe qu'elles ne soient pas dans cet ordre) Il faut bien comprendre le role des images et des calques , avant de poursuivre. Un gif animé est une succession d'images, et dans chacune de ces images se trouve un ou plusieurs calques. Votre bannière se comportera comme un dessin animé, soit une succession d'images .

RAPPEL! L'animation (votre bannière en gif animé) est une succession d'images et chaque image comportera un ou plusieurs calques   Chacun des calques d'une même image est indépendant des autres calques.   Un calque peut être copier dans d'autres images.   Un calques peut être déplacer à l'intérieur une image , pour le placer au dessus ou au dessous d'un autre calque.

Entrons dans le vif du sujet !

1)Le fond de la bannière

Nous allons tout d'abord créer le fond de notre bannière, qui sera commun à toutes les images. Dans la palette "Outils" choisissez rectangle.

.et dans le panneau "Propriétés" les paramètres ci dessous ( ou d'autres )

Remplissage bleu ,sans contour.

Cliquez et tirez pour appliquer le rectangle bleu sur la scène(si vous débordez , cela n'a aucune importance car votre animation aura la taille de la scène définie au départ).

Relachez, vous avez maintenant un fond bleu

Pour agrémenter le fond de notre bannière, nous allons y rajouter un cercle jaune, choisissez "Outils Ellipse" dans la fenêtre Outils .

Dans le panneau "Propriétés " choisissez une couleur pour votre cercle , ici jaune

Maintenez la touche "Maj" enfoncée quand vous dessinez votre cercle ,pour obtenir un rond parfait.

Le cercle est volontairement excentré par rapport au fond, pour le placer à l'endroit voulu , utilisez les touches directionnelles de votre clavier ou l'outils "pointeur".

Pour visualiser la transparence appliquable à un gif , nous allons effectuer la manip suivante.

L'outils 'pointeur" selectionné" faites un clic droit sur le rectangle puis "Fusionner la selection"

Dans la fenêtre "Calques" ,le calque du rectangle à changé, c'est maintenant un bitmap

Nous allons dessiner une forme, qui sera notre "pochoir"

Fenêtre "outils" choisissez "outils cadre de selection ovale"

Dessinez un cercle ( + touche Maj, si vous voulez un cercle parfait) à droite du rectangle bleu

Positionnez le précisément avec les touches directionnelles de votre clavier.

Touches directionelles du clavier

Puis appuyez sur la touche Suppr de votre clavier ,la sélection disparaît laissant apparaître le fond transparent de notre bannière.

Nous avons réalisé ce qui est le fond de notre bannière, une opération reste à effectuer pour que cette "image" soit commune à toute l'animation , sans avoir à la copier/coller à chaque image.

Double cliquez sur "Calque 1 " dans le panneau Calque, puis renommez ce calque >Fond et cochez "Utiliser pour toutes les images"

Notre fond étant terminée , nous n'aurons plus à y toucher ,donc ,dans le panneau "calques" réduisez l'arborescence du dossier "fond" qui contient nos calques .

>>>>>>>

Nous allons même verrouiller ce dossier pour éviter de selectionner les calques qui composent ce dossier.Cliquez sur le "crayon" qui devient un cadenas

Il sera évidement toujours possible de modifier ces calques par la suite et effectuant les manipulations en sens inverse.

>>>>Page suivante L'ANIMATION

haut de page