Une barre version Glassy

Voici un petit tutoriel qui vous permettra de vous confectionner des barres de menus ou des fonds pour les titres de sections de votre forum relativement simples mais du plus bel effet.


Etape 1 : Un petit dégradé

Créez une nouvelle image (Ctrl+N ou Fichier > Nouveau...) de la dimension qui vous chante (pour les besoin du tutoriel j'ai opté pour 200x100 px) avec un fond transparent ou blanc ou noir, peu importe.
Choisissez une couleur de premier plan, ici ce sera du #549bee. La couleur d'arrière plan sera celle par défaut, du blanc.
A l'aide de l'outil Dégradés (L) réalisez un dégradé de type PP vers AP du haut en bas de l'image (du calque plus précisément) avec un mode de fusion Normal.

Voilà, la base est posée, mais avant de passer aux étapes suivantes, voici ci-contre l'organisation des futurs calques ^_^

Etape 2 : Reflet

A présent il vous faut créer le reflet. Pour cela créez un nouveau calque transparent et nommez le reflet.
En utilisant l'outil Sélection rectangulaire (R) sélectionnez la moitié supérieure du calque. En prenant soin d'avoir le calque reflet d'actif, remplissez cette sélection avec la couleur d'arrière plan qui devrait être du blanc : Edition > Remplir avec la couleur d'AP (Ctrl+.).
Maintenant réglez l'opacité du claque à 75%.
Désectionnez la sélection (Sélection > Aucune ou Shift+Ctrl+A).

Etape 3 : Tracé d'un trait

Créez un nouveau calque transparent trait.
Comme son nom le laisse entendre vous allez tracer un trait, de 3 pixels. Pour cela sélectionnez l'outil Crayon (N) puis choisissez la brosse Circle 03 (3x3).
Dans les options de l'outil Crayon l'opacité doit être placée à 100% et le mode de fusion de type Normal.
Tracez un point dans le coin supérieur gauche (ou droit ^^) du calque mais à 1 pixel du bord supérieur du calque. Ensuite tracez un point à l'autre extrémité du calque (toujours à 1 pixel du bord supérieur du calque) en maintenant la touche Shift enfoncée afin de tracer une droite.
N'hésitez pas à user de l'outil Loupe pour utiliser un zoom de 400 ou 800% par exemple :-]

Etape 4 : Touche finale, une petite bordure

Créez un nouveau calque transparent bordure et remplissez le avec la couleur de premier plan que vous aviez sélectionné en étape 1. Si vous avez suivi le tutoriel à la lettre (ce qui n'est pas une obligation ;-) ) cette couleur doit être la couleur d'arrière plan, dans ce cas un petit Ctrl+. et le tour est joué.
Maintenant récupérez l'alpha vers une sélection (Calque > Transparence > Alpha vers sélection) puis réduisez la d'un pixel (Sélection > Réduire) et supprimez son contenu (Edition > Effacer ou Ctrl+K).
Il ne vous reste plus qu'à la déselectionner (Sélection > Aucune ou Shift+Ctrl+A) pour obtenir l'effet recherché \o/

Exemples:

Voici 2 exemples d'utilisation.
Si vous cherchez à réaliser une forme non rectangulaire comme dans le premier exemple il vous suffira de commencer le tutorial en réalisant une sélection de la forme finale souhaitée avant d'appliquer le dégradé de l'étape 1.

Gimp4you : Une barre version Glassy

Bon petit tuto !!! j'ai essayé vite fait, et voilà ce que ça donne :
(je sais, les couleurs sont pas terribles et le rendu aussi...mais c'est un essai ::

Je vais en refaire une plus belle tout de suite !

Merci piouPiouM pour tes tutoriaux qui sont vraiment très bien réalisés

Merci beaucoup pour le tuto
Bravo pour la réalisation qui est excellente ( j'adore, il y a carrément des ombres aux screenshots )
Le rendu et très joli

Joli tuto, bravo

Merci


De rien dlb, depuis le temps que je te promettais que je les posterai ici...

J'en posterai un ou deux autres, mais pas aujourd'hui, c'est d'un gavant la mise en forme BBCode

J'ai terminé. Merci, tu explique vraiment bien!
 R_ussi.png ( 6.13K ) Number of downloads: 25

salut à tous vous pardonnerez ls imperfections etant donné ke je ne me suis mis sur gimp que depuis pas longtmps!!!;-)

moi je trouve que c'est vachement bien expliqué
bravo^^

Super bravo pour ce tuto très bien expliqué ça va m'aider pour faire de meilleurs graphiques pour mon site web. Bravo!

p.s.:Je ne peux pas vous montrer le résultat parce que juste au moment où j'allait sauvegarder le résultat, Gimp a buggé (heureusement que ce n'est pas trop long à refaire ). Désolé!

Bonjour, je suis nouveau sur se forum ET sur Gimp, et je voulais savoir comment as tu fait pour voir tous les calques (image avec les yeux).

Merci

Super tuto, bravo!!

Et bonjour à vous tous !!!(Nouveau pingouin )