Imprimer
Catégorie : Fireworks

But : Créer et mettre en ligne un favicon animé ,le même que vous devez voir dans la barre d'adresse

ATTENTION :Les Favicons animés ne sont pas reconnu par tous les navigateurs, IE6 par exemple ! Alors que sous Firefox ,pas de probleme.

Version logiciel utilisée :Fireworks MX 8 .

Nous créer un gif animé ,qui sera composé de 4 images , l'animation sera le changement de couleur de lettres.

Lancer Fireworks >nouveau document:largeur 16 hauteur 16 , avec un arrière-plan bleu

 

Pour plus de facilitée ,zoomer l'image a 400%     

 

Choisir une police d'ecriture bien lisible ,Arial gras de taille 13 par exemple ,avec une couleur contrastant sur le bleu  

Nous allons ecrire les deux lettres separément ,afin de pouvoir les placer a des endroits  différents sur notre petite image.

A cette étape ,nous avons donc :une image avec 2 calques ,représentant chacun une lettre. Passons maintenant à l'animation.

Dupliquer cette première image afin de la modifier: Dans le panneau "images" cliquer et glisser l'image 1 vers cet icone

Nous avons maintenant 2 images identiques, modifions la deuxième en selectionant la lettre T à laquelle nous donnons la couleur rouge.

Création d'une troisième image, comme précédement ,cliquer glisser l'image 2 vers l'icone "dupliquer"

Nous avons maintenant 3 images , modifions la troisième en selectionant la lettre N à laquelle nous donnons la couleur rouge,comme nous l'avons fait précédement pour la lettre T.

 

Création de la quatrième et dernière image, comme précédement ,cliquer glisser l'image 3 vers l'icone "dupliquer" et donner la couleur jaune à la lettre T.

Voici les 4 images qui composent notre animation

Par defaut Fireworks met 7/100 de seconde pour l'affichage de chaque image, ce qui dans le cas d'un Favicon  ,est un peu rapide et devient vite lassant pour le visiteur de votre site.

Nous allons donc modifier le temps d'affichage des images. Pour cela double-cliquer sur sur le 7 a droite de l'image 1.,et mettre la valeur 100 (1 seconde) .

Faire de même pour l'image 3.

Voila notre animation terminée  ,il faut maintenant enregistrer et sauvegarder l'image animée.

Fichier "aperçu le l'image"  Format :"Gif animé"

Animation "En continu"

Puis , onglet "exporter" donnez lui le nom de "favicon.gif                      

Pour qu'il puisse apparaitre dans la barre de lien de vos visiteurs , deux choses à faire

1)Enregitrer l'image à la racine de votre site

2)Rajouter cette ligne dans la partie "head" du code html de votre page , ainsi que de toutes les pages  ou vous désirez qu'apparaisse votre Favicon animé.

<link rel="Shortcut Icon" type="image/gif" href="/favicon.gif">

 

Lien : Editeur de Favicon

 

Télécharger le fichier source