Trucsweb.com

Trucsweb.com

Infographie

Introduction au HTML

RDFFav

Étape 2 - Création d’un bouton à deux états

Note, ce truc fonctionne avec Photoshop 5.5 mais à été fait pour Photoshop 3 et 4... 1- Créer un fichier bouton.psd 50x50 pixels Transparent. 2- Ajouter une nouvelle trame. 3- Nommez-la Fond bouton. 4- Faire un cercle (n’importe où) de 20x20 pixels Avec l’outil de sélection. 5- Sauvegardez cette sélection (#5): Menu Select = Save simages infographie bouton button rollover roll over deux état étape site construction allumé éteint étaint sensitif réactif photoshopÉtape 2 - Création d’un bouton à deux états

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Note, ce truc fonctionne avec Photoshop 5.5 mais à été fait pour Photoshop 3 et 4...

1- Créer un fichier bouton.psd 50x50 pixels Transparent.

2- Ajouter une nouvelle trame.

3- Nommez-la Fond bouton.

4- Faire un cercle (n’importe où) de 20x20 pixels Avec l’outil de sélection.

5- Sauvegardez cette sélection (#5): Menu Select => Save selection => OK

6- Ajouter un flou "feather" de 1 pixel à la sélection (#5)

7- Avec la couleurs de fond blanc et celle du texte noir Remplissez le cercle en dégrader (de gauche haut à droite bas): Avec l’outil "Gradient" cliquez dans la sélection tout en tenant le bouton de la sourie puis glissez dans la sélection, relachez le bouton.

8- Reprendre la sélection du cercle si vous l’avez perdu: Menu => select => load selection Sélectionnez le "chanel" du bouton (#5 dans ce cas ci).

9- Diminuez la sélection de 3 pixel: Menu => select => Modify => "Contract..." 3 => OK

10- Sauvegardez cette sélection (#6).

11- Ajoutez une nouvelle trame.

12- Nommez-la Bouton eteind.

13- Avec vos couleurs pour un bouton éteind, remplissez cette nouvelle sélection en dégrader (de droite en bas à gauche en haut).

14- Ajuster sa position pour quelle soit bien centré sur la trame fond bouton avec l’Outil "Move tool".

15- Ajoutez une nouvelle trame.

16- Nommez-la Bouton allume.

17- Reprendre la sélection #6 et agrandissez la de 2 pixel: Menu => select => Modify => "Expend..." Entrez 2 => OK

18- Ajoutez un flou "feather" de 2 pixel.

19- Avec vos couleurs pour un bouton allumé, remplissez cette nouvelle sélection en dégrader (de droite en bas à gauche en haut).

20- Ajuster sa position pour quelle soit bien centré sur la trame fond bouton.

21- Duplicatez la trame fond bouton.

22- Attacher ensemble les trames fond bouton et bouton eteind.

23- Fonder "Merge" ensemble la trame fond bouton et bouton eteind.

24- Attacher ensemble les trames fond bouton et bouton allume.

25- Fonder "Merge" ensemble les trame fond bouton et bouton allume.

26- Il est très important que les deux boutons soient vis-à-vis.

27- Couper "crop" ;le bouton de façon à avoir le minimum d’espace autour du bouton.

28- Sauvegardez vos bouton en format "PSD" sous "bouton.psd".

29- Mettre invisible le bouton allume.

30- Sauvegarder le bouton eteind en format "GIF" sous "b_eteind.gif" (25 couleurs)

31- Recharger l’original des bouton en format "PSD". Menu => File => "Revert".

32- Mettre invisible le bouton eteind.

33- Sauvegarder le bouton allume en format "GIF" sous "b_allume.gif". (25 couleurs)

Voici ce que ça donne:

    
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 3885 - Pages vues : 33140
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@