News Joomla 
Tests d'extensions 
Outils pour Joomla 
Astuce Joomla 
Tutoriels libres 
SEO Joomla 
Dossiers 
Références Joomla 
Glossaire 
Support / Forum 
Guide pour débutants 
F.A.Q 
Tutoriels Joomla vidéos 
Joomea c'est quoi ? 
Nos Abonnements 
Formations e-Learning 
Formation Joomla à Paris 
Site e-Commerce 
Offre Maintenance 
Nos références 
Nos réalisations 
Demande de devis 
Investir dans un site 
Nos valeurs 
Notre équipe 
Notre expertise 
Nos liens partenaires 
Pour ceux à qui cela aurait échappé, les traductions d'extensions Akeeba se gèrent manuellement et des pages spéciales "Translations" ont été mises à disposition par Akeeba pour AkeebaBackup et AdminTools
Créer un bouton glossy avec Fireworks CS4
Ce 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.
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 :
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 
. 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 :
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 :
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 :
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.
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 rectangle 
et 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 :
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 
ce qui nous donne :
Appliquer une couleur
Pour finir, appliquez la couleur blanche unie à ce tracé et une opacité de 30. 
Vous pouvez également appliquer du texte sur votre bouton glossy.
Résultat final
Avec et sans texte
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 :
- Articles sur le même sujet
- Articles en rapportInsérer un clickTAG dans votre pub Adwords (3206 Vues)Astuce JoomlaGrâce à Adwords de Google, vous avez la possibilité de publier une annonce pour votre site internet ou autre et ce sous la forme d'une animation flash. Par contre, vous devez respecter certaines...HikaShop - Créer une nouvelle catégorie (2604 Vues)Tutoriels Joomla 2.5Dernièrement, nous vous parlions d'un composant qui s'appelle HikaShop et qui s'avère être une excellente alternative à VirtueMart. Après l'avoir testé en profondeur, nous proposerons quelques...Configurer simplement Ozio Gallery 2 (5793 Vues)Tutoriels Joomla 2.5Ozio Gallery 2 est un gestionnaire de galeries d'images proposant des effets en flash très dynamique. Dans ce petit tutorial, je vous propose simplement de vous expliquer comment le paramétrer et...Tutorial Joomla - Créer un nouvel article (2637 Vues)Tutoriels Joomla 2.5Pour créer un nouvel article (ou page), il faut une fois de plus se rendre dans la section « gestion des articles ». Pour cela, identifiez-vous pour accéder au panneau d’administration de...Phoca Gallery - Créer une nouvelle catégorie (2741 Vues)Tutoriels Joomla 2.5Phoca Gallery est l'un des meilleurs composants en matière de galerie d'images. De plus, il est très simple d'utilisation ce qui ne gâche rien. Mais il se peut que ceux qui débutent avec Joomla...
- Derniers Articles
- Derniers articlesBlog JoomeaJoomea est heureux de mettre à disposition de sa communauté la première formation complète sur AcyMailing. En effet, suite à de nombreux votes sur le dernier sondage que nous vous avons...Blog JoomeaGrande nouvelle ! NosyWeb possède désormais sa propre application mobile où vous pourrez retrouver toute l'actualité Joomla par l'intermédiaire des réseaux sociaux (Facebook et Twitter)....HikaShop : une alternative à VirtueMart (2491 Vues)Test Extensions JoomlaVoici une très belle alternative à l'extension e-Commerce VirtueMart en la personne de HikaShop. Construit sur la même ergonomie que AcyMailing, donc autant dire d'excellente facture, ce tout...Astuce JoomlaDans ce tutoriel, nous allons voir ensemble comment convertir votre ancien template Joomla 1.5 en template compatible avec Joomla 2.5. Nous allons prendre comme exemple, le template par défaut...Formation complète HikaShop (51 Vues)Blog JoomeaNotre objectif chez NosyWeb est de vous faire profiter de notre expérience avec Joomla et de vous aider à créer votre site web. C'est pour cela que nous vous proposons des tutoriels vidéos sur...
- Articles de la même catégorie
- Articles de la même catégorieTutoriels Joomla 2.5Nous y voilà, Joomla 2.5 est arrivé. Et il se pose maintenant une question épineuse pour tous ceux qui seraient encore à Joomla 1.5 et qui voient avril 2012 arrivé à grands pas : Comment migrer...Comment installer Joomla 2.5.x (chez 1and1.fr) (10444 Vues)Tutoriels Joomla 2.5Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1and1) en quatre étapes. Similaire à tout autre CMS cette...Mettre en place le module Image Scroller (1482 Vues)Tutoriels Joomla 2.5Lorsque vous avez plusieurs partenaires liés à votre activité, il est intéressant de pouvoir faire apparaître leur logo sur votre site web. Pour ce faire, une des solutions est d'utiliser un...Mettre en place Site Corner Image (788 Vues)Tutoriels Joomla 2.5Dans ce petit tutoriel, nous allons vous expliquer comment mettre en place une image sous forme de bandeau dans un des coin de votre site Joomla. Le but principal de ce bandeau est en quelque sorte...Comment mettre à jour Joomla ? (761 Vues)Tutoriels Joomla 2.5Ce petit tutoriel est destiné à ceux qui débutent avec Joomla et qui peuvent se demander comment mettre à jour leur version de Joomla. En effet, cette opération relativement simple n'est pas...
- Articles les plus lus
- Articles les plus lusComment installer Joomla 2.5.x (chez 1and1.fr) (10444 Vues)Tutoriels Joomla 2.5Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1and1) en quatre étapes. Similaire à tout autre CMS cette...Test Extensions JoomlaPhoca Gallery est à ce jour le composant Joomla le plus intuitif pour gérer ses galeries, ses photos, ses thumbnails et tout ce qui est relatif à la gestion d'images sur son site Internet.Outils pour JoomlaSi vous avez les moyens d'investir dans un template (comptez entre 20 $ et 60 $), vous êtes alors en mesure d'habiller votre site web avec ce qu'il se fait de mieux sur Internet. En effet, des...Joomfish 2.1.5 - Comment ça marche ? (7000 Vues)Tutoriels Joomla 2.5Le composant Joomla, JoomFish 2.1.5, permet de traduire votre site internet dans quasiment toutes les langues. Il se base sur les packs de langue Joomla qui sont déjà très nombreux à ce jour....Créer un gif animé avec Fireworks CS4 (6832 Vues)Tutoriels Joomla 2.5Ce tutorial concerne à nouveau Fireworks CS4, je vais vous expliquer comment créer facilement des gif animé afin d'apporter un peu de vie à votre site internet. Dans cet exemple, je vais vous...
Tout sur Joomla
Sur quelle extension souhaiteriez-vous avoir un tutoriel vidéo ?
Total des votes: 63
Coordonnées
Commentaires