Logo FireworksCe nouveau tutorial est consacré cette fois-ci à Fireworks CS4 et à la possibilité de réaliser des boutons avec effet glossy. Vous pourrez utiliser ces derniers sur votre site web en guise de décoration ou tout simplement pour rendre vos boutons plus jolis.

Vous souhaitez aller plus loin dans la maîtrise de Fireworks ? Découvrez tous les tutoriels vidéos Fireworks chez tuto.com !

Créer un bouton étoile avec Fireworks

1ère étape - Créer un nouveau document

La première étape est toujours la même, il faut créer un nouveau document comme pour Photoshop. Pour cela, une fois que Fireworks a démarré, utilisez le raccourci ctrl+N et entrez les mêmes paramètres que ci-contre :

Nouveau document Fireworks

2ème étape - Créer une forme avec l'outil étoile

La seconde étape consiste à créer une étoile grâce à l'outil de création de forme vectorielle Outil étoile Fireworks. Par défaut, cette forme n'est pas séléctionnée, il suffit de maintenir clic gauche sur l'outil et de choisir la forme étoile. Le code couleur utiliser pour cet exemple est #333333. Et voilà le résultat :

créer bouton Fireworks

3ème étape - Modification de l'étoile

Au cours de la troisème étape, nous allons transformer notre étoile en commençant par augmenter le nombre de pointe. Pour cela, il faut utiliser l'un des petits losanges jaunes et maintenir clic gauche jusqu'à 25 pointes comme sur l'image : 

La seconde transformation est la réduction de la hauteur des pics en réduisant le rayon de l'étoile. Pour cela, il faut utiliser l'un des petits losanges jaunes de la même manière que pour le nombre de pics. Réduisez le rayon jusqu'à obtenir cette forme : 

La forme de notre bouton est prête, maintenant, nous allons lui donner des couleurs. Pour cela, utilisez un dégradé radial avec les deux couleurs de votre choix mais en plaçant la couleur la plus claire au centre du dégradé. Vous devez obtenir quelque chose qui ressemble à ça :

Dégradé Fireworks

La prochaine étape consiste à la mise en relief du bouton. Pour cela, dupliquez la forme étoile en utlisant le raccourci ctrl+alt+D puis réduisez légèrement ce nouveau calque avec l'outil de redimensionnement (raccourci lettre Q). Lors de la réduction, maintenez alt + shift afin de maintenir le ratio et de réduire par rapport au centre de la forme. Enfin, appliquez unr ombre interne sur le deuxième calque avec les réglages suivants :

Ombre interne Fireworks

Résultat

Si vous avez bien suivi jusqu'ici, vous devez obtenir un joli bouton classique auquel il ne manque plus que le fameux effet glossy.

Bouton Fireworks

 

Ajouter un effet glossy avec Fireworks

 

Créer une forme avec l'outil rectangle

Les dernières étapes de ce tuto seront donc consacrées à la réalisation de l'effet glossy. Pour ce faire, commencez par dupliquer une nouvelle fois votre forme étoile (celle de base). Puis, créez une forme rectangleOutil rectangle Fireworkset placez la au-dessus des autres calques. Ensuite, séléctionnez le rectangle et la dernière forme étoile créée en maintenant la touche shift. Si tout ce passe bien, vous obtenez ceci :

Effet glossy Fireworks

Modifier le tracé avec l'outil plume

Maintenant, allez dans Modification > Combiner les tracés > Poinçon afin de fusioner les deux éléments et séléctionnez l'outil plume pour créer un nouveau point sur la ligne diagonale Outil plume Fireworksce qui nous donne :

 Plume Fireworks

Appliquer une couleur

Pour finir, appliquez la couleur blanche unie à ce tracé et une opacité de 30. Opacité FireworksVous pouvez également appliquer du texte sur votre bouton glossy.

 

Résultat final

 

Avec et sans texte

Bouton glossy FireworksBouton glossy Fireworks

Avec différentes couleurs

Je vous donne une dernière petite astuce afin de changer rapidement la couleur de votre bouton glossy. Il vous suffit de faire varier la teinte et la saturation en allant dans Filtres > Régler la couleur > Teinte/saturation. Voici quelques exemples :

Bouton glossy rouge FireworksBouton glossy vert FireworksBouton glossy violet Fireworks

L'auteur : un expert à votre service
Geoffrey LEOST
Nom : Geoffrey LEOST

Commentaires (1)

This comment was minimized by the moderator on the site

sympa le tuto sur les boutons sa m'as bien servie en cours de web l'explication est simple et précise pas mal pour les debutant :-)

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact
Dernier article sur la même thématique
Affichage des modules Joomla sur mobile, tablette et desktopAffichage des modules Joomla sur mobile, tablette et desktop
La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs...