communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Intermédiaire] Créer un bouton glossy

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 14:57


Bonjour,

Dans ce tuto nous allons voir ensemble comment créer un bouton glossy design, toujours très utile quand on possède un site.

Ouvrez Gimp et créez une nouvelle image (j’ai choisi 250x90).



1° Le fond transparent :
Il faut que le fond soit transparent : allez dans « Calque / Transparence / ajouter un canal alpha ». Puis gommez toute l’image pour voir apparaitre un quadrillage gris, signe que votre fond est bien transparent.


2° La forme du bouton :
Maintenant nous allons créer un rectangle aux bords arrondis : allez dans Sélection  / rectangle arrondi.
Dans la fenêtre qui vient de s’ouvrir, réglez le rayon à 95%.


Vous obtenez un rectangle aux bords arrondis transparent aux bords lumineux.


3° La couleur :
Dans la Boîte à outils, sélectionnez la couleur que vous voulez en choisissant :
- plus clair en couleur de premier plan (PP)
- plus foncé en couleur d’arrière plan(AP)



Dernière édition par Maripiou le Ven 29 Juin 2012, 12:05, édité 9 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 14:58

Puis, cliquez sur l’outil « dégradé » et configurez-le comme ceci :


Faites un dégradé de la gauche vers la droite (ou de haut en bas), ça n’a pas d’importance car le résultat sera le même.
Partez d’un côté du rectangle et tout en restant appuyé, tracez une ligne jusqu’à l’autre côté.


Voici ce que ça donne une fois le dégradé effectué :

4° L’effet « glossy » :

Faites une sélection rectangulaire sur le haut de votre rectangle. Veillez bien à laisser un petit espace entre le haut du rectangle et votre sélection.


Allez dans « Sélection / rectangle arrondi » et gardez les mêmes options que précédemment (95%)



Dernière édition par Maripiou le Mar 14 Fév 2012, 12:39, édité 6 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 14:58

Dans la Boîte à outils, sélectionnez du blanc en couleur de premier plan (PP) (pour aller plus vite, cliquez sur le carré de couleur et tapez ffffff dans « Notation HTML »)


Puis cliquez sur l’outil « dégradé » et configurez-le comme ceci :


Faites un dégradé du haut vers le bas.


5° L’effet d’ombre :
Veillez bien à ne plus rien avoir de sélectionné, donc cliquez sur l’un des bords de la fenêtre pour vous en assurer.


Allez dans Filtres / Ombres et lumières / Ombre portée et réglez les options comme ceci :



Dernière édition par Maripiou le Mar 14 Fév 2012, 12:45, édité 8 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 14:59

Voici le résultat :


6° Enregistrez votre bouton glossy :
Je vous conseille d’enregistrer maintenant que vous avez fini la partie « création de bouton ». Enregistrez votre image en format PNG pour conserver la transparence du fond. Fermez Gimp.

7° Ajoutez du texte :
Sélectionnez l’image png que vous venez de créer.
Dans la Boîte à outil, sélectionnez l’outil « texte » et choisissez les options qui vous conviennent.
J’ai choisi d’écrire le mot « Télécharger», en blanc avec la police Verdana de taille 30, mais bien entendu vous pouvez choisir ce que vous voulez.


Sélectionnez la zone où vous souhaitez écrire, comme ceci :


Dans la petite fenêtre qui vient d’apparaître, écrivez le texte choisi, cochez « utilisée la police sélectionnée » et cliquez sur « fermer » :


Essayez de centrer votre texte par rapport à votre rectangle, voilà ce que ça donne :



Dernière édition par Maripiou le Mar 14 Fév 2012, 12:46, édité 6 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 14:59

8° Enregistrez votre bouton glossy avec son texte
Sauvegardez en format png.

Voici à quoi ressemble votre bouton glossy un fois enregistré dans vos documents :



MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Dernière édition par Maripiou le Mar 14 Fév 2012, 12:47, édité 1 fois
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 18

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 18:40

Merchii Beaucoup Pour Ce Petit Tuto Très Pratique !
Revenir en haut Aller en bas
As de l'acrylique
avatar
Cynimich
As de l'acrylique
Masculin Date d'inscription : 12/10/2009
Age : 21
Localisation : Québec

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Lun 25 Avr 2011, 18:44

Merci pour le tuto Wink
Revenir en haut Aller en bas
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 30

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 09:38

Merci pour le tuto Maripiou


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Peintre au doigt
Florent117
Peintre au doigt
Date d'inscription : 03/03/2011

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 10:19

Merci beaucoup c'est super utile ça !

Voici à quoi ressemble mon bouton glossy:



C'est pas super bien fait je trouve mais bon :/
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 18:01

Merciiii

Florent117 - Faudrait juste centrer ton titre, sinon il est super ! ^^
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
tchoutchou7
Grand artiste du pinceau
Masculin Date d'inscription : 27/09/2009
Age : 26
Localisation : Australia

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 19:45

Florent117 >> Comme le dit Maripiou, mis à part le texte pas centré, le reste est bien fait je trouve ! Wink
Revenir en haut Aller en bas
http://changementdetrain.wordpress.com
Peintre au doigt
Florent117
Peintre au doigt
Date d'inscription : 03/03/2011

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 19:58

Merci beaucoup !

Je vais en faire une petite dizaine d'autres boutons glossy, bleu, violet, noir, blanc etc. pour mon site !

Merci pour tout Maipiou What a Face
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 26 Avr 2011, 20:01

Ok, il te reste plus qu'à centrer ton texte (c'est pas pour rien que je vous ai dit de sauvegarder une fois le bouton fini ^^), comme ça tu peux toujours changer ton texte : sa couleur, sa police, le centrer.....

De rien je suis contente que mon tuto te serve. sunny
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
As de l'acrylique
avatar
Fyladel
As de l'acrylique
Féminin Date d'inscription : 23/02/2012
Age : 28

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Ven 09 Mar 2012, 15:41

Revenir en haut Aller en bas
http://fyladel.wix.com/le-diamant-rose
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Ven 09 Mar 2012, 15:46

Très joli bouton! Et merci pour le message qui est dessus. Very Happy
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Ven 09 Mar 2012, 17:03

Merci beaucoup Mari !

Edit : voilà mon bouton :



Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Débutant des galeries d'art
avatar
lilyp
Débutant des galeries d'art
Féminin Date d'inscription : 06/07/2012
Age : 18
Localisation : Perdue dans la campagne :)

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Sam 22 Sep 2012, 12:51

Merci Mari !!
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 30
Localisation : Au Sud

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Dim 23 Sep 2012, 13:46

Contente que ce tuto vous serve. Smile
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Illustre illustrateur
avatar
Anyamany
Illustre illustrateur
Féminin Date d'inscription : 16/08/2012
Age : 17
Localisation : J'vous en pose des questions moi ?

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mer 31 Oct 2012, 22:18

Merci beaucoup Maripiou pour ce super tuto!^^
Revenir en haut Aller en bas
http://lelegacyemeraude.canalblog.com
Timide du pinceau
avatar
lagrenouille
Timide du pinceau
Féminin Date d'inscription : 16/06/2012
Age : 32
Localisation : Naoned

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mer 14 Nov 2012, 21:11

Merci Maripiou, tuto bien expliqué et du coup c'est très facile à appliquer!
Revenir en haut Aller en bas
Illustre illustrateur
avatar
91070Camomille
Illustre illustrateur
Féminin Date d'inscription : 27/11/2012
Age : 22

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 11 Déc 2012, 07:07

Merci

Même si le mien n'ait pas le bouton du siecle.
Revenir en haut Aller en bas
http://91070camomille.tumblr.com/
Eclabousseur de peinture
avatar
charlaine412
Eclabousseur de peinture
Féminin Date d'inscription : 22/09/2012
Age : 20

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Ven 04 Jan 2013, 14:07

Merci je suis nouvelle et ce tuto ma beaucoup aide Very Happy
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 24
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    Mar 10 Nov 2015, 21:02

merci pour ce tuto! adaptable très facilement sur tout logiciel ^^
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Contenu sponsorisé


MessageSujet: Re: [Intermédiaire] Créer un bouton glossy    

Revenir en haut Aller en bas
 
[Intermédiaire] Créer un bouton glossy
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Import japon via intermédiaire
» [Tuto - Intermédiaire] Luffy By Luffy-Kun [Photoshop]
» Intermédiaire Paypal
» recherche d'un intermédiaire pour achat en chine :)
» Zombie Deck (intermédiaire) => besoin de vos conseils

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Graphisme :: The Gimp-
Sauter vers: