Skins Méric
Css et skin Guppy
Présentation Première approche Présentation Graphisme Les fonds Présentation Techniques de base
Animations
Astuces|Placer une ancre Astuces|Texte défilant
Header Les Ecritures Les images Les nouvelles Les différents blocs Les menus Boîtes latérales Les articles Les côtés latéraux Les tables Personnalisation
Présentation Le Blog Les boites css Les boîtes centrales Les liens Menu Horizontal Contrôle Divers Les fonds Tutos GuppY
Tutos The Gimp
Tutos Divers
Base Skn_1
Skin Pas à Pas
Méric' Gifs
 mise a jour
nouveau
|
Boîtes latérales - Bouton relief
Le but de ce tuto est de réaliser un bouton avec une bordure en relief.
Avec ce type de bouton, j'ai réalisé les skins "série uniform" comme celle-ci
Le bouton fini :  La dénomination de bouton est en fait incorrecte... en ce qui concerne la réalisation d'une skin pour GuppY, cette image prendra place en haut d'une boîte latérale afin de recevoir le titre de celle-ci. La description de celle-ci permet de comprendre assez facilement comment et de quoi est constitué cette image.
Attention une fenêtre de calques se lit de bas en haut !!!
Créer une nouvelle image et mise en place des guides Dans la "Boîte à outils", veiller à ce que la couleur de premier-plan soit noire et celle d'arrière-plan blanche.  - Dans la fenêtre "Créer une nouvelle image", régler la largeur à 200px et la hauteur à 100px. Toujours dans cette même fenêtre, dérouler les "Options avancées" afin de régler la résolution (X et Y) à 72pixels/in puis veiller à être en "Couleur RVB" et l'option de remplissage de l'arrière plan avec la "Couleur d'arrière-plan" - Placer 2 guides horizontaux : un à 20px du haut, l'autre à 54px. - Placer 2 guides verticaux : un à 10px du côté gauche, l'autre à 185px.  Voici le résultat.
Calque du fond
- créer une nouveau calque transparent, le nommer : "couleur fond" et le remplir avec l'outil de remplissage  avec une couleur grise, dans cet exemple code : b4b4b4 (attention dans "The Gimp", ne pas mettre le symbole # avant le code)Si nécessaire un tuto pour créer des calque se trouve ici
 Voici le résultat.
Créer une sélection rectangulaire arrondie: - créer un nouveau calque et le nommer :"fond uni arrondi" - Sélectionner l'outil "Sélection rectangulaire"
 et tracer dans la fenêtre de travail un rectangle qui suit les guides.- Pour arrondir les coins du rectangle : menu Sélection>>Rectangle arrondi et régler dans la fenêtre "Script-Fu : Rectangle arrondi", la valeur à 65%
 Voici le résultat.
Remplir le fond du bouton par une couleur unie - Sélectionner l'outil de remplissage
(couleur de premier-plan : noire code : 000000) et cliquer à l'intérieur de la sélection Voici le résultat.
Créer une bourdure Pour réaliser cette bordure nous allons en fait réduire la sélection précédente de 1px sur le pourtour afin de conserver un liseré noir.
- créer un nouveau calque et le nommmer "dégradé" - Réduire la sélection de 1px : menu Sélection>>Réduire...   Voici le résultat.
Réalisation du dégadé - Sélectionner l'outil "dégradé"  et choisir comme couleur de premier plan et pour couleur d'arrière plan.Traçage du dégradé Positionner la souris en X=50 et Y=0, maintenir le bouton gauche enfoncé et tirer un trait oblique environ x=200 et y=80 . .  Plusieurs essais seront peut-être nécessaires afin d'obtenir le résultat attendu.  Voici le résultat.
Réaliser l'intérieur du bouton - Créer un nouveau calque et le nommer : "couleur milieu"
- Réduire la sélection de 8px : menu Sélection>>Réduire... et régler cette valeur dans la fenêtre "Réduction de la sélection".  Voici le résultat. - Remplir la sélection de couleur noire avec l'outil de remplissage.
 Voici le résultat.
Placer l'ombre portée
Cette ombre devra faire le contour du bouton, il nous faut donc récupérer la sélection de la forme arrondie noire du calque 3 (fond uni arrondi).
Pour cela : - se placer sur le calque 3 de la boîte des calques, faire un clic droit et activer la commande "alpha vers sélection" (des traits pointillés doivent entourer cette forme arrondie noire). - Ouvrir menu Filtre>>Ombre et lumière>>Ombre portée et régler la fenêtre "Script-Fu : Ombre portée", comme ci-dessous :  - Valider  Voici le résultat. Découper l'image :
- Se placer sur le calque tout en haut de la pile - Effectuer une sélection rectangulaire tout autour de l'image (sans oublier l'ombre portée) - Ouvrir le menu Image>>découper la sélection Voici le résultat.
- Enregistrer l'image au format .xcf afin de conserver l'original avec tous ses calques, il sera alors possible de réaliser des boutons avec d'autres couleurs sans à avoir tout à recommencer. - Enregistrer une nouvelle fois l'image au format souhaité (jpg, png) afin de pouvoir l'insérer dans une skin. Variantes : En repartant du fichier au format .xcf, il est très facilement possible d'obtenir d'autres variantes de ce bouton. Il suffit par exemple de se placer sur le calque "couleur milieu" de récupérer la sélection (clic droit puis "alpha vers sélection") et de remplir cette sélection par une couleur de son choix.    Astuces :
En désactivant l'Arrière-plan et le calque "fond", il est possible d'isoler le bouton   Date de création : 03/07/2009 @ 14:56 Réactions à cet article
Tags Cloud
| Skins au choix
Choisissez une skin Connexion...
 Membres : 418
 Visites du jour : (1)[ Devenir membre ] Membre en ligne : Anonymes en ligne : 3 Total visites: 716978 Record connectés :
 Membres: 23Le 26/12/2007 @ 21:50 Webmaster - Infos
Calendrier
Tchat non-Membres
Vous devez être connectés en tant que membre pour accéder au Tchat
Recherche
Sites skins Guppy
Lettre d'information
Outils en ligne
Sondage
Nouvelles des Amis
Visites
716978 visiteurs 6 visiteurs en ligne Liens
| |||||||||||||
Présentation
Imprimer l'article
Haut Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.
© 2004-2012 
Document généré en 0.75 seconde
