|
Un bouton de substitution est un bouton sur le site qui change d'état lorsque le pointeur de la souris dessus. Le changement d'état peut être n'importe quel nombre de changements, y compris la couleur, police, taille ou une combinaison de ceux-ci . Boutons de renversement ajouter à ongles et professionnalisme à votre site Web et peuvent être créés facilement dans Adobe Photoshop et ImageReady . Ces étapes détail comment créer un simple bouton de retournement , mais le processus peut être modifié pour les graphiques plus stylisées. Choses que vous devez
Adobe Photoshop
ImageReady
Afficher plus Instructions
créer les images des boutons dans Photoshop
1 Allez dans Fichier > Nouveau et régler la taille de l'image à 80 par 25 pixels avec une résolution de 72 pixels par pouce .
2 Cliquez sur la nuance de couleur de premier plan au bas de la palette d'outils sur le côté droit de votre écran. Choisissez une couleur pour le texte sur votre bouton. Ensuite, cliquez sur l'échantillon de fond et sélectionnez une couleur.
3 Appuyez sur "" Ctrl + Backspace pour remplir la zone de l'image avec votre couleur de fond choisie.
4 Sélectionnez l'outil "Type" de la palette d'outils , et de définir la police et la taille dans le menu outil en haut de votre écran . Cliquez sur la zone du document et tapez le nom de bouton, comme «portefeuille » ou « Home».
5 Utilisez l'outil "Déplacer" pour aligner le texte à votre goût.
< Br > 6 Copier la fois le fond et la couche de type. Créez une copie d'une couche par un clic droit sur une couche dans la palette des calques et en sélectionnant " Dupliquer ".
7 Fusionner le fond de l'original et les calques de texte en maintenant la touche "Shift" enfoncée tout en cliquant deux calques dans la palette calques. Puis allez dans Edition > Fusionner les calques . Renommez le « état normal. " De la couche
8 Double -cliquez sur l'image "T" à gauche de la couche de type copié pour surligner le texte . Cliquez sur l'échantillon de couleur dans le menu outils en haut de l'écran, puis sélectionnez une couleur différente pour le texte lorsque le pointeur de la souris sur le bouton .
9 Changez la couleur dans la couche de fond, si désirée.
10 fusionner les deux couches copiés , et renommez le calque " Etat Rollover ». Votre dossier doit maintenant contenir deux couches: la couche "Normal de l'Etat" sur le fond et la couche " Rollover de l'Etat" sur le dessus. Vous pouvez prévisualiser la façon dont le changement de bouton regarder en tournant la visibilité de la couche supérieure sur et en dehors . Bouton Cliquez sur le graphique à gauche de la couche d'afficher ou de cacher l'oeil .
Créer le bouton de substitution dans ImageReady
11 Cliquez sur "Aller à la ImageReady " . au bas de la palette d'outils à votre fichier de touche toujours ouvert
12 Aller à la palette d' apparence (en CS ou plus récent) ou la palette de retournement ( dans les anciennes versions ) , si elle n'est pas déjà ouvert, allez dans le menu de la fenêtre et sélectionnez la palette dans le menu déroulant
13 masquer le calque " Rollover de l'État» ; . cela va définir l'état normal de votre bouton à "Normal" couche .
14 Cliquez sur le "Créer un nouveau Etat " icône en bas de la "Représentation" ou palette " Rollover ». Allumez la visibilité sur la couche " Rollover de l'Etat» pour la définir comme l'état de renversement
15 Aller à la palette de tranche ; . S'il n'est pas déjà ouvert, il peut être trouvé dans la fenêtre menu. Attribuer une URL à votre bouton de substitution , ce qui est la page Web , l'utilisateur sera prise au moment où il clique sur le bouton
16 Testez votre bouton de substitution en cliquant sur le " Preview Navigateur par défaut dans " bouton. près du bas de la palette d'outils .
17 Aller dans Fichier> enregistrer Optimisé pour enregistrer le fichier HTML et un dossier d'images.
|
