15 utilisateurs inconnus

 Mot :   Pseudo :  
 
 Page :  1  2  3  4  5
Page Précédente 
Auteur
 Sujet :

[Gimp] De la sphère au bouton... version Glassy

 
n°14920
piouPiouM
Profil : Penguin
Avatar
profil
Posté le 27-08-2006 à 17:12:07  
 

De la sphère au bouton... version Glassy

 

De nombreux sites web arborent un style assez futuriste. Ils sont souvent composés d'une mutitude d'éléments recourant à des effets visuels divers et variés. Parmis ces éléments on trouve des boutons, des sphères à l'aspect Glassy. Le présent tutoriel vous propose de réaliser dans un premier temps une sphère puis sur cette base un bouton... tous deux Glassy évidement :smile:

 

Etape 1 : Création du document
Créez une nouvelle image (Ctrl+N ou Fichier > Nouveau...) de 400x400 pixels (par exemple) avec un fond transparent pour vous laisser un maximun de liberté d'intégration par la suite.
Nous allons maintenant placer des guides qui vont indiquer le centre de l'image afin de nous faciliter la tâche :Image > Guides > Nouveau guide (par pourcentage) et sélectionner Horizontal pour la direction et 50% pour la position.Répétez l'opération mais en sélectionnant cette fois ci Vertical pour la direction.http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-001.png

 

Avant d'aller plus loin, voici l'organisation des futurs calques.
http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-calques.png

 


Etape 2 : Forme de base
Passons à la création de ce qui sera une sphère :smile:
Tout d'abord il vous faut choisir une couleur. Pour ce tutorial j'ai opté pour la couleur #00b7d2.
Créez un nouveau calque transparent et nommez le fond.
A l'aide de l'outil Sélection elliptique http://gimp4you.eu.org/img/articles/tools/tSelectEllipt.png (E) maintenez la touche Shift enfoncée pour réaliser une sélection circulaire de 140px de rayon environ. Remplissez la sélection avec la couleur de premier plan (Ctrl+, ou Edition > Remplir avec la couleur de PP).

 

Comment réaliser la sélection à partir du centre de cette dernière et non pas à partir d'un bord ?
En appuyant sur la touche Ctrl une fois la sélection débutée. Maintenant, effectuez votre sélection en toute simplicité en partant du centre de l'image symbolisé par les guides :wink:

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-002.png

 


Etape 3 : Un reflet garçon !
Créez un nouveau calque transparent et nommez le reflet.
Effectuez un clic droit sur le calque fond puis sélectionnez Alpha vers sélection. Nous récupérons ainsi la couche alpha du calque sous forme d'une sélection.
Réduisez la sélection d'environ 50px (Sélection > Réduire > 50px).
Toujours en ayant l'outil de sélection activé, maintenez la touche Alt enfoncée pour déplacer à l'aide du clavier la sélection à environ 3px du sommet du cercle.

 

Utilisateurs de systèmes libres, déplacer la sélection au clavier vous incommode et vous préféreriez utiliser la souris ? Qu'à cela ne tienne, en maintenant la touche Alt enfoncée, activez la touche Shift et déplacez la sélection.
Une autre méthode est d'acviter l'outil Déplacer http://gimp4you.eu.org/img/articles/tools/tMove.png et de positionner l'option Affecte à Transformer la sélection (bouton du milieu) puis de déplacer la sélection.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-003.png

 

Echangez les couleurs (X) pour que la couleur blanche passe en couleur de premier plan, puis sélectionnez l'outil Dégradés http://gimp4you.eu.org/img/articles/tools/tDegrader.png (L). Choisissez le dégradé de type http://gimp4you.eu.org/img/articles/interfaces/article1/a1-degrade.png PP vers Transparent.
Replacez-vous sur le calque reflet puis réalisez un dégradé en partant du haut de la sélection jusqu'au guide horizontal en maintenant le bouton Ctrl enfoncé afin d'obtenir une droite parfaite.
Réglez l'opacité du calque reflet à 90%.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-004.png

 


Etape 4 : Une lueur apparue au loin...
Effectuez un clic droit sur le calque fond puis sélectionnez Alpha vers sélection.
Créez un nouveau calque transparent et nommez le lueur.
A l'aide de l'outil Dégradés http://gimp4you.eu.org/img/articles/tools/tDegrader.png (L) réalisez un dégradé de type radial http://gimp4you.eu.org/img/articles/interfaces/article1/a1-degrade.png PP vers Transparent en le commençant environ 3px sous la sélection jusqu'au 1/3 de l'objet.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-005.png

 

Il faut maintenant supprimer le trop plein. Néanmoins, au lieu de se contenter de supprimer ce qui déborde de la sphère nous allons en supprimer un peu plus afin de donner un meilleur effet.
Pour cela, réduisez la sélection de 3px (Sélection > Réduire > 3px) puis inversez la (Ctrl+I ou Sélection > Inverser).

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-006.png

 

Au lieu de réaliser une découpe nette adoucissez la sélection de 5px (Sélectection > Adoucir).
Enfin supprimez la sélection (Ctrl+K ou Edition > Effacer).

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-007.png

 


Etape 5 : Ajout d'ombres internes
 Afin de renforcer l'effet de volume nous allons ajouter des ombres internes.
Créez un nouveau calque qui aura pour nom ombres puis réinitialisez les couleurs de premier plan et d'arrière plan (Ctrl+D).
Récupérez la sélection de la couche alpha du calque fond (clic droit sur le calque fond puis sélectionnez Alpha vers sélection). A l'aide de l'outil de Sélection elliptique http://gimp4you.eu.org/img/articles/tools/tSelectEllipt.png (E) placez vous à l'intersection des guides puis commencez par appuyer sur la touche Ctrl afin de passer la sélection en mode de soustraction puis commencez à réaliser la sélection. Laissez la touche Ctrl enfoncée pour obtenir une sélection en mirroir.
Essayez d'obtenir le même résultat que ci-dessous.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-008.png

 

Remplissez la sélection obtenue de noir.
Tout ceci est trop net à mon goût, pour vous aussi ? Parfait, on va y remédier :biggrin:
Récupérez la sélection du calque fond puis repositionnez vous sur le calque ombres. Appliquez un flou gaussien (Filtres > Flou > Flou gaussien) RLE de 15px. Passez le calque en mode Superposer et réglez son opacité à 30%.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-009.png

 

Voilà, la sphère est terminée \(^_^)/
Au fait, pourquoi est ce que je vous ai fait récupérer la sélection du calque fond avant de réaliser le flou gaussien ? Pour que le flou ne déborde pas de la sphère et ainsi vous économiser une inversion de sélection suivie d'une suppression :smile:

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-010.png

 


Etape 6 : Création du bouton
En se basant sur la présente sphère nous allons réaliser un bouton du plus bel effet.
Normalement la sélection de la couche alpha du calque fond est toujours active, si ce n'est pas le cas récupérez là :wink:
Créez un nouveau calque et nommez le bordure. Placez le au sommet de la pile de calques.
Nous allons réaliser une bordure de 10 pixels : agrandissez la sélection de 10px (Sélection > Agrandir) puis placez vous sur le calque fond. Là, allez dans le menu Calque > Transparence > Soustraire de la sélection pour soustraire la couche alpha du calque fond de la sélection.
Il ne vous reste plus qu'à vous repositionner sur le calque bordure et de remplir la sélection d'une couleur. Ici j'ai opté pour du blanc.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-011.png

 

Pour donner un peu de relief à cette bordure ajoutez lui un biseau de 5px en allant dans le menu Script-Fu > Décor > Ajouter un biseau. Ne cochez aucune case.
Ajoutez lui maintenant une ombre. Allez dans Script-Fu > Ombre > Ombre portée et entrez les valeurs suivantes.
Il ne reste plus qu'à ajouter un élément qui donnera un sens au bouton.

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-a1-012.png

 

ci, j'ai choisi d'utiliser un symbole fourni par la police Webdings.
A l'aide de l'outil Texte http://gimp4you.eu.org/img/articles/tools/tText.png (T) créez donc un calque texte avec pour police Webdings d'une taille de 210 pixels, de couleur blanche, les cases Indices d'ajustement et Lissage cochées. Entrez le caractère @.
Déplacez le calque à l'aide de l'outil Déplacer http://gimp4you.eu.org/img/articles/tools/tMove.png (M) afin de le centrer.
Il ne reste plus qu'à ajouter une ombre comme précédemment mais cette fois-ci en choisissant une opacité de 65. Enfin il ne vous reste plus qu'à passer le calque de l'ombre de l'élément en mode Lumière douce.
Le bouton est achevé !

 

http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-final-a1-001.png

 


Quelques exemples :
http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-final-a1-003.png http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-final-a1-002.png http://gimp4you.eu.org/img/articles/interfaces/article1/thumb-final-a1-004.png

 


 :info: Gimp4you : De la sphère au bouton... version Glassy :info:

answer
mood
GoogleAds
profil
Posté le 27-08-2006 à 17:12:07  
 

answer
n°14921
cool-rabbits
Profil : Top Penguin
Avatar
profil
Posté le 27-08-2006 à 17:13:31  
 

Je crois que tu vas me faire installer TheGimp :mdr:

 

Bravo pour cet excellent tuto, et pour les autres :great:

answer
n°14928
dimebag_hammett
Profil : Big Penguin
Avatar
profil
Posté le 27-08-2006 à 20:45:49  
 

Tres Tres bon tuto !!! Je crois que je vais faires boutons comme ca pour mon site !

answer
n°14932
Orboreale
Profil : New Penguin
Avatar
profil
Posté le 28-08-2006 à 01:54:17  
 

Coucou !

 

J'ai un coup de foudre pour votre tutorial et je t'en remercie :smile:

 

Je suis en train de créer un site écologique et que j'espère qu'il va devenir commercial si cela marche. Ai-je le droit de créer des boutons inspirant de ce tutorial ?

 

Le bouton sera en forme d'une goutte d'eau.

 

Bisous

answer
n°14933
piouPiouM
Profil : Penguin
Avatar
profil
Posté le 28-08-2006 à 02:23:51  
 

Bonjour Orboreale et merci :smile:

 

Ce tutoriel est et reste un guide offrant toute liberté de création.
Bien évidemment son utilisation pour réaliser une image n'implique aucune restriction d'utilisation de vos créations.

answer
n°14939
Orboreale
Profil : New Penguin
Avatar
profil
Posté le 28-08-2006 à 13:03:17  
 

Je vous remercie beaucoup piouPiouM :smile:

answer
n°14942
elfe noir
Profil : Penguin
Avatar
profil
Posté le 28-08-2006 à 13:51:36  
 

C'est un excellent tuto...faut que j'essaie !!!   :great:

answer
n°14946
EnableConsole
Profil : Penguin Pro
Avatar
profil
Posté le 28-08-2006 à 15:56:22  
 

Très bon tutoriel :great:  :biggrin:
Voici mon résultat:

  

http://www.crystalxp.net/forum/uploads/sm/post-54105-1156773543_thumb.jpg

answer
n°14958
cerises250
Profil : New Penguin
Avatar
profil
Posté le 30-08-2006 à 00:15:16  
 

Magnifique tuto! :biggrin:

 


J'en ai profiter pour faire une image contre la cigarette. :he:

 

http://img244.imageshack.us/img244/7218/anticigarettewz5.png

answer
n°14960
SuperJK
Profil : New Penguin
Avatar
profil
Posté le 30-08-2006 à 11:53:50  
 

Erf moi le fond ! Je sais pas pourquoi mais il s'est mis en bleu  :he:

 

http://img165.imageshack.us/my.php?image=boutongimplp7.jpg

 

Sinon Bon tuto ! J'ai tout compris :great:

answer
n°14961
ynik
Profil : Penguin
Avatar
profil
Posté le 30-08-2006 à 11:55:04  
 

Très joli tuto qui nous donne un très bon rendu, merci à toi :smile:

answer
n°15012
Drakonis
Profil : New Penguin
Avatar
profil
Posté le 04-09-2006 à 14:53:06  
 

Bravo, vraiment,

 


Voici le mien

 

http://www.image-dream.com/membre/up/mini_anonym/8ec69902eea3cd6fd9e65e42a46644dc.jpg

 

quand je l'ai fait, il y avait un peu d'aliasing, alors j'ai mit un flou cinetique, et finalement c'est different mais je trouve ca bien, pour un débutant.

answer
n°15020
Kurios
Profil : Penguin
Avatar
profil
Posté le 05-09-2006 à 11:13:03  
 

C'est quoi de l'aliasing?

answer
n°15026
Drakonis
Profil : New Penguin
Avatar
profil
Posté le 05-09-2006 à 17:51:16  
 

L'aliasing, c'est une sorte d'effet "escalier", un peu comme des crans, c'est visible dans les jeux aussi :wink: .

 

Mais j'ai du raté une manip, puisque dans le tuto, il n'y a pas d'aliasing.

 

A plus

answer
n°15027
Steex
Profil : Penguin Pro
Avatar
profil
Posté le 05-09-2006 à 17:53:50  
 

Kurios a écrit :

C'est quoi de l'aliasing?


L'aliasing, c'est ça:

 

http://img461.imageshack.us/img461/2586/aliasingvsantialiasingmz1.th.gif

 

Clique dessus pour agrandir :wink:

answer
n°15033
piero_56
Profil : Penguin
Avatar
profil
Posté le 07-09-2006 à 20:58:59  
 

Exellente retranscription du tuto ! :great: (je l'avais fait avec celui de gimp4you :wink:)

 

Mon résultat est pas mal, j'ai un peu d'aliasing :err:, je voudrais savoir comment l'enlever :smile:

 

Désolé, je n'ai pas ma création avec moi (problèmes :ouch:)

 


J'aime bien la variante anti-cigarette, mais tu devrais centrer le signe, et faire une barre qui se distingue plus de la cigarette, sinon je trouve la cigarette très bien ! :wink:

answer
n°15034
piouPiouM
Profil : Penguin
Avatar
profil
Posté le 08-09-2006 à 10:58:22  
 

Merci pour vos avis :smile:

 

@GlOuP's^^' : il n'y a pas réellement de solution pour enlever l'aliasing sur une création. La seule qui me vient à l'esprit de suite (au levé du lit donc :he: ) est de réaliser une sélection de la sphère moins 1px en veillant bien à ce que la case Lissage des options de l'outil de Sélection elliptique (E) soit cochée. Ensuite inverser la sélection (Ctrl+I) puis supprimer (Ctrl+K).

answer
n°15035
EnableConsole
Profil : Penguin Pro
Avatar
profil
Posté le 08-09-2006 à 14:17:05  
 

Ou appliquer un Flou (gaussien ou cintéique) sur ton calque comportant de l'aliasing, comme les autres l'ont fait.

 

Aussi, tu peux enregistrer en XCF et tu enregistres en PNG après :wink:

answer
n°15037
piouPiouM
Profil : Penguin
Avatar
profil
Posté le 08-09-2006 à 15:48:18  
 

L'ajout de flou ne donne pas un résultat aussi propre que la recoupe. Mal utilisé il risque aussi de dégrader la forme ainsi que sa texture.

 

Le fait d'enregistrer en XCF ou en PNG ne va ajouter d'aliasing :wink:

answer
n°15041
Drakonis
Profil : New Penguin
Avatar
profil
Posté le 08-09-2006 à 20:29:43  
 

Exact,

 

Tu peut regarder mon bouton, c'est different de l'original, mais bon :he:

answer
n°15045
Kurios
Profil : Penguin
Avatar
profil
Posté le 09-09-2006 à 16:40:45  
 

voilà la mienne et merci pour vos réponses! :happy2:

answer
n°15046
piero_56
Profil : Penguin
Avatar
profil
Posté le 09-09-2006 à 17:05:29  
 

Pas mal Kurios ! :great:

 

Pour ma part :

 

http://img417.imageshack.us/img417/3737/boutoncoeur2yl9.png

 

Chui assez content de moi pour une première ! :he: J'avoue il y a un peu d'aliasing :ouch:

 

Vos critiques sont les bienvenues ! :oui:

answer
n°15059
kairiwill
Profil : Penguin
Avatar
profil
Posté le 12-09-2006 à 17:23:12  
 

GlOuP's^^' il est manifique  :wink: il y a juste un dégradé sur tout le bouton qui n'été pa dans le tuto mais moi je le trouve très beau  :great:

 

Et piouPiouM, merci beaucoup pour ce super tuto  :great:  :great:  :great:

answer
n°15060
Drakonis
Profil : New Penguin
Avatar
profil
Posté le 12-09-2006 à 18:06:40  
 

Superbe le tien GlOuP's^^

answer
n°15062
piero_56
Profil : Penguin
Avatar
profil
Posté le 12-09-2006 à 19:47:50  
 

Merci beaucoup .. ça me touche beaucoup étant un débutant! :he:
Mais de quel dégradé tu parles kairiwill ? :neutral:

 

Euhh .. un truc aussi : ça ne sert à rien de mettre les "^^'" :wink: .. pasque déjà que j'aime pas trop mon pseudo ! :boulay:

answer
 Page :  1  2  3  4  5
Page Précédente 

Aller à :
Ajouter une réponse