Créer des boutons
Faire des images de bouton 3D dans Fireworks
Dans ce tutoriel, vous allez apprendre à créer trois effets brillants bouton à l'aide d'Adobe Fireworks. Ces effets incluent bouton:
- Un bouton de démarrage vert qui brille sur le haut et le bas pour dessiner focus sur le texte du bouton.
- Un bouton de réinitialisation rouge qui est similaire, mais avec une coupe en demi-éclat vitreux.
- Un bouton bleu soumettre avec une 3D sublime effet fluide pressé sur le dessus.
Les échantillons de ces effets de bouton que nous allons vous apprendre à créer étape par étape sont donnés ci-dessous.
Bouton Start
Pour concevoir l'effet de bouton de démarrage vert indiqué ci-dessus, procédez comme suit:
- Étape 1: Ouvrez un nouveau document dans Adobe Fireworks et dessinez un rectangle arrondi à l'aide de l'outil Rectangle arrondi et définir sa couleur de remplissage à un remplissage dégradé - aller à la catégorie >> Remplissez sélectionnez Gradient >> Choisir l'option linéaire.
- Étape 2: Maintenant, cliquez sur la couleur de remplissage. puis cliquez sur le petit rectangle de couleur qui se trouve sur le côté gauche et définir la couleur à # 15501E.
- Étape 3: Après cela, cliquez sur le petit rectangle de couleur qui se trouve sur le côté droit et définir sa couleur à # BAD32F. Donnez un coup cette douce 1 pixel avec la couleur # 9FBB66. L'illustration ci-dessous montre comment votre rectangle arrondi devrait maintenant apparaître:
Étape 4: Dessinez un autre rectangle arrondi et placez-le sur le premier rectangle arrondi et définir sa couleur de remplissage # 94BE34 et la couleur de la course comme aucun. Maintenant, appliquez une plume de 5 à elle. Pour cela, cliquez sur le bord du panneau Propriétés, choisissez Plume et définissez la valeur de plumes à 5.
Étape 5: Maintenant, tracez un troisième rectangle arrondi et placez-le sur les précédents rectangles à coins arrondis. Définissez la couleur de remplissage à un remplissage dégradé - Remplir la catégorie >> sélectionnez Gradient >> Choisir l'option linéaire.
Étape 6: Maintenant, cliquez sur la couleur de remplissage. puis cliquez sur le petit rectangle de couleur qui se trouve sur le côté gauche et définir la couleur à # FFFFF7. Maintenant, cliquez sur le petit rectangle de couleur qui se trouve sur le côté droit et définir sa couleur à # D4E076. L'image ci-dessous montre comment le bouton devrait ressembler à ce jour:
Étape 7: Couper le 3ème rectangle arrondi en deux - environ 15 pixels de hauteur à partir du sommet. Pour cela, sélectionnez l'aide de l'outil Rectangle Arrondi Sous-sélection, puis sélectionnez l'outil de couteau et couper le rectangle arrondi en faisant glisser votre curseur sur le côté gauche vers la droite. Effectuer un réglage de l'effet linéaire en fonction de la hauteur du rectangle arrondi et appliquer une plume de 2 (cliquez sur le bord du panneau Propriétés, choisissez Plume et définissez la valeur de plume à 2). Le bouton résultante devrait ressembler à ce qui est indiqué ci-dessous:
Etape 8: Maintenant copier et retourner le rectangle arrondi coupé verticalement - Copier et Coller (Ctrl + C, Ctrl + V) puis passez à Modifier >> Transformer >> Retourner verticalement. Déplacer le rectangle arrondi vers le bas et appliquer une plume de 1.
Etape 9: Maintenant, cliquez sur la couleur de remplissage. puis cliquez sur le petit rectangle de couleur qui se trouve sur le côté gauche et définir la couleur à # 96C932. Cliquez ensuite sur le petit rectangle de couleur qui se trouve sur le côté droit et définir sa couleur à # ECEC81. L'image ci-dessous montre comment le rectangle arrondi inversé devrait ressembler à:
Étape 10: Cliquez sur l'outil Texte, sélectionnez Police - Trebuchet MS. Taille de la police - 20. Couleur - # 003300. Poids police - gras. niveau anti-aliasing - Anti-Alias lisse et écrire « Démarrer » ou tout autre texte du bouton. Votre bouton brillant est prêt et devrait ressembler à ceci:
Bouton de réinitialisation
Similaire à la touche verte ci-dessus en suivant les 10 étapes pour une palette de couleurs rouge au lieu de vert, vous pouvez créer un bouton rouge brillant. Les couleurs que nous, mentionnons les suivantes: # 510000. # E8201F. # B89762 (étape 1: Course douce 1px), # E93730. # F0817A. # E93B34 et # F39791. Pour obtenir un effet légèrement différent comme indiqué dans notre échantillon bouton rouge, nous devons modifier l'étape 7 un peu. Au lieu de couper une partie seulement de la partie supérieure du 3ème rectangle arrondi, vous devez couper en moitié comme indiqué ci-dessous. De plus, le Opacité doit être réglé sur 80 (changer 100 à 80 - Opacité situé au-dessus des filtres dans panneau Propriétés).
Alors maintenant, vous avez une marque nouvel effet de bouton en mettant en œuvre tout ces changements mineurs. Après avoir ajouté « Reset » texte du bouton (color: # 330000) votre image bouton rouge devrait ressembler à ceci:
Bouton de soumission
Pour cet effet bouton, similaire aux boutons verts de début et de réinitialisation rouge, nous avons d'abord besoin de créer un bouton bleu brillant suivant les étapes 1 à 9 avec ces couleurs: # 103C5A. # 04A5E7. # 0D7EAC (étape 1: Course douce 1px), # 3799CD. # 80C6EA. # 2D98CC et # 6ACCF3. Après avoir terminé l'étape 9 s'il vous plaît procédez comme suit:
- Étape 10. Nous devons maintenant prendre la coupe supérieure rectangle arrondi derrière le deuxième rectangle arrondi (qui a plumes 5). Pour cela il suffit de sélectionner le deuxième rectangle arrondi et le rectangle arrondi coupe bas (appuyez sur Maj puis sélectionnez), puis les mettre en avant (appuyez sur Ctrl + Maj + flèche). L'image ci-dessous montre comment votre bouton doit s'occuper ces changements de placement:
Étape 11. Maintenant, dessiner un cercle blanc en utilisant l'outil Ellipse au-dessus du rectangle aux coins arrondis (couleur de remplissage comme #FFFFFF. Couleur de la course comme aucun), puis mis son Opacité comme 50. Réglez maintenant une plume de 10 (cliquez sur le bord du panneau Propriétés , choisissez plume - valeur de plumes par défaut à 10 doit apparaître). Voici comment votre bouton doit presque ressembler maintenant - ajuster l'ellipse à la position montré ci-dessous:
Étape 12. Puisque l'ellipse a une valeur d'opacité qu'elle recouvre une partie du contour du bouton. Pour éviter cela, nous devons faire l'ellipse pour montrer que partiellement. Pour ce faire, tout simplement dupliquer le second rectangle arrondi (copier coller) et Couper et Coller à l'intérieur de l'ellipse dans le (Ctrl + X, puis Ctrl + Maj + V). Après cela le remplissage bleu de rectangle arrondi copié affichera alors il suffit de sélectionner et modifier à Transparent. Maintenant, ajoutez votre « Soumettre » texte du bouton (couleur: # 000033) et le bouton soumettre fini ressemblera à ceci:
logiciels requis
Adobe Fireworks: Depuis ce tutoriel couvre une caractéristique essentielle d'Adobe Fireworks, toute version de celui-ci fera.
Versions compatibles de Fireworks pour ce tutoriel
Articles Liés