Infographie

Introduction au HTML

É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 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: