Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > PhotoFiltre > Création d'un bouton animé > Lecture du tutoriel

Création d'un bouton animé

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : meltir
Note : 17 / 20 (16 votes)
Visualisations : 33 362

Plus d'informations Plus d'informations
Bonjour chers amis zéros :D , nous allons apprendre, dans ce petit tuto, à réaliser un bouton animé à l'aide de Photofiltre...
Pour réaliser ce tuto, vous aurez bien sûr besoin de télécharger Photofiltre :p et UnFREEz (gratuit et ultra léger ^^ ) qui servira à animer notre bouton ;) .

UnFREEz : Téléchargez-le.
Sommaire du tutoriel :
Icône du chapitre

Création de la base du bouton

Après avoir téléchargé UnFREEz, décompressez-le, allez dans le dossier où il a été décompressé et copiez le fichier. Collez-le dans le bureau (ce n'est pas obligatoire de faire ça mais je trouve ça plus pratique :p ).

Bon maintenant commençons. Créer un nouveau document de 88*31.

J'insiste bien sur le fait que si vous voulez créer un bouton, la taille est de 88*31.


Tout le monde a survecu jusqu'ici? :lol:
On va lui appliquer un dégradé pour qu'il soit plus joli :

Image utilisateur

On clique sur ce qui est entouré en rouge, cette fenètre apparaît :

Image utilisateur

Laissez le style en bichrome, la direction de gauche/droite, par contre la couleur 1 et la couleur 2 vous pouvez la changer. Moi, j'ai choisi du rose. Voici quelques exemples de dégradés :

Image utilisateur

Image utilisateur

Image utilisateur


Création des différentes parties du bouton

Après avoir créé la base du bouton, on va s'occuper de ses différentes parties. Ce sont en clair, les différentes images de l'animation.

On va appliquer du texte. Cliquez donc sur l'îcone texte :

Image utilisateur

Choisissez la police que vous souhaitez. Par contre, pour la taille, mettez 8 ou 10 pour avir assez de place. Ici, j'ai écris SDZ (Site du Zér0 vous n'aviez pas compris :p ) :
La taille de la police dépend de la taille du texte que vous souhaitez écrire. Ici, pour SDZ, j'ai utilisé du 13 pixels. Comme c'est un court texte, il occupe aisément la place du bouton, et il n'y a pas de soucis !

Image utilisateur

Enregistrez le bouton sous le nom "sdz.gif" puis, revenez sur votre bouton et faites annuler :

Image utilisateur

Votre bouton redevient vide. Vous l'avez surement compris, il faut écrire un autre texte. Moi, je vais mettre "la référence" :

Image utilisateur

Pareil, enregistrez en .gif avec comme nom "ref.gif". Répètez l'annulation, et réécrivez du texte :) :

Image utilisateur

Enregistrez toujours en .gif : "prog.gif" par exemple, et on continue :

Image utilisateur

Idem, répètez l'opération une dernière fois, en n'ommettant pas d'enregistrer en .gif. Par exemple, "crea.gif" :p :

Image utilisateur

Enregistrez encore une fois en .gif : "site.gif", par exemple.

Animation du bouton

On va attaquer la plus complexe... :p . Ne paniquez pas, vous vous en sortirez :-° !

Désormais, nous avons tout ce qu'il faut pour réaliser l'animation. Ouvrez UnFREEz qui se trouve sur votre bureau (normalement, si vous avez bien fait comme je l'ai conseillé... :p ), cliquez deux fois dessus.

Ensuite, ouvrez le dossier où vus avez enregistré vos animations. Glissez/déplacez les différents gifs dans UnFREEz. On commence par SDZ.gif, puis ref.gif, prog.gif, créa.gif, et enfin site.gif.

Je vais essayé d'illustrer au mieux comment faire :

Image utilisateur

Voilà comment ça se présente. Sélectionnez le gif SDZ.gif.
Laissez appuyer le bouton gauche de la souris sur l'icône du gif et glissez-le dans UnFREEz :

Image utilisateur

Puis mettez-le dans l'espace blanc du logiciel. A la fin, ça doit donner ça :

Image utilisateur

Enfin, mettez 50 dans la case Frame delay (elle sert à déterminer le temps d'écoulement entre chaque image de l'animation). Cliquez sur Make Animated GIF. Le logiciel va vous demander sous quel nom voulez vous enregistrer l'animation, à vous de choisir.

De mon coté, ça donne ça :
Image utilisateur

Et bien voilà, le tuto se termine ici. J'espère qu'il vous a plu ;) .
Si vous avez des questions, envoyez moi un MP ;) .
Retour en haut Retour en haut


Créé : le 04/04/2006 à 18:30:33
Modifié : le 22/08/2008 à 16:08:42
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 509 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.3755s (0.3617s)