Voila, c'est mon premier VRAI tutorial, le tout premier étant le mini tuto sur la userbar  
Dans ce tuto, nous allons apprendre a faire une barre du style iPod, comme la barre de volume de ce même lecteur. Voici a quoi cela va ressembler (normalement) a la fin :
 

 
A vos marques ... prêt ? PARTEZ !
 
1 - Création d'un nouveau document et du patron principal.
 
Créer un nouveau document (Fichier > Nouveau... ou Ctrl + N ).
Indiquer les dimensions voulues. Attention : mettre une valeur de 10px supplémentaires, que ce soient pour la hauteur ou pour la largeur. Ces 10px serviront plus tard pour l'ombre interne et l'ombre externe .
Dans cet exemple, j'ai utilisé les valeurs suivantes pour obtenir au final une barre de 200px de largeur et de 20px de hauteur :
 

 
Cliquer ensuite sur Valider pour obtenir le nouveau document.
Placer des guides a 5px de chaque bords du document.
Dans cet exemple, j'ai placé des guides à 5px et 205px verticalement et à 5px et 25px horizontalement
Ce qui nous donne donc 4 guides en tout disposés comme ci contre :
 

 
Créer un nouveau calque et le nommer Patron.
Créer une sélection a l'intérieur des guides et la remplir de noir. Vous obtenez donc un rectangle noir et centré comme ceci :
 

 
Vous pouvez masquer ce calque, nous ne l'utiliserons plus (ou presque) par la suite.
 
2 - Fond.
 
Faire un Alpha vers sélection sur le calque Patron.
Créer un nouveau calque et nommez le Background.
Faites un dégradé vertical dans cette sélection, #007BEE > #B8FAFF.
 

 
Vous devriez obtenir :
 

 
3 - Ombre Interne.
 
La où Photoshop offre un outil directement intégré, nous devons faire une petite manipulation avec The Gimp pour obtenir un résultat similaire (ou a l'aide d'un greffon spécial ).
Pour cela faites un Alpha vers Sélection sur le calque Patron.
Créez un nouveau calque et nommez le Ombre Interne.
Inversez la sélection (Sélection > Inverser ou Ctrl + I) et replissez la de noir.
 

 
Appliquez un flou gaussien (Filtre > Flou > Flou Gaussien) avec un rayon de flou de 10.
 

 
Refaites un Alpha vers Sélection sur le calque Patron.
Placez vous sur le calque Ombre Interne, inversez la sélection et enfin supprimez la sélection (Edition > Effacer ou Ctrl + K).
 

 
Réglez l'opacité du calque Ombre Interne sur 30%
 

 
4 - Barres Verticales.
 
Faites un Alpha vers Sélection sur le calque Patron.
Créez un nouveau calque et nommez le Barres.
Sélectionnez l'outil Dégradé et prenez un dégradé Blanc > Transparent.
Attention : Choisissez Onde Triangulaire pour le mode de Répétition.
Appliquez le dégradé à partir du bord gauche de la sélection avec un mélange de (10,0).
 

 
Créez un masque de calque sur le calque Barres. Pour le type de masque sélectionnez Blanc (opacité complète).
Appliquez un dégradé vertical Noir > Blanc sur la sélection, ce qui enlève une partie des barres blanches :
 

 
Réglez l'opacité du calque Barres sur 50% et mettez Lumière Douce pour le mode de fusion.
 

 
Placez le calque Barres sous le calque Ombre Interne
 
5 - Reflet.
 
Faites un Alpha vers Sélection sur le calque Patron.
Créez un nouveau calque et nommez le Reflet.
Élever la moitié de la sélection, pour cela prenez l'outil Sélection rectangulaire, choisissez le mode Soustraire de la sélection courante et sélectionnez le bas de la barre.
Réduisez la sélection de 1px (Sélection > Réduire...)
Appliquez un dégradé vertical Blanc > Transparent, en dépassant un peu vers le bas :
 

 
Voici ce que cela donne après application du dégradé.
 

 
Réglez l'opacité du calque Reflet sur 75%.
 

 
6 - Ombre.
 
Dupliquez le calque Patron et nommez cette copie Ombre Portée.
Affichez ce calque (le calque Patron étant masqué).
Appliquez un Flou Gaussien de rayon 5.
Réglez l'opacité du calque Ombre Portée sur 50%.
 

 
7 - Résultat Final.
 
Masquez le calque d'arrière plan et enregistrez le document en *.png
Voici un récapitulatif des calques présents, de l'opacité appliquée :
 

 
Et le résultat final :
 

 
_______________________________________________________
 
Voila j'espère que ce tuto vous a plu  

Joli, bravo

 merci beaucoup! très joli résultat et très ressemblant un grand  

j'aimerais bien savoir comment avoir le meme résultat sur photoshop  
j'ai cherché... rien trouvé  

Je ne crois pas avoir deja vu ce genre de tuto. Ce tutorial est entièrement de moi. Mais sous photoshop ca doit etre possible, il suffit de faire un portage (c'est bizarre de dire ca, d'habitude c'est dans l'autre sens   ) vers Photoshop. Mais malheureusement je n'ai les memes bases sous photoshop que sous gimp désolé  

Yep! Bravo! C'est très sympa et ça rend super bien!

Super sympa .: Titi :. ce tuto  
Vais essayer celà dans la journée.

Ouais, moi aussi, ça m'aide...

...Et puis on pourra l'utiliser pour les thèmes en création.
Merci aussi de l'astuce pour l'ombre interne, avant j'utilisais une technique un peu plus fastidieuse.

Joli tuto même si je n'utilise pas The Gimp! Le rendu est fidèle, bravo!

Merci pour le tutorial

J'avais déjà vu un tutorial (en anglais) pour toshop, pour faire la même barre

Bon tuto !

Merci .: Titi :. !

Très bon tuto   ! Et le résultat est vraiment très propre et ressemblant, un grand bravo à toi   !

Voilà ce que ça me donne (j'ai vraiment suivi exactement le tuto   ) :

Superbe tuto !
Tu ne saurais pas titi de la communauté trackmania ?

Lui meme  
Donc je vous montre un peu une des utilisations possibles du tuto, pour faire une scroll-barre style Mac :

Bravo trés bot tuto .
J'adore le rendu    .

Super tuto , quand j'ai vu cette scrollbar , j'ai essayé de la bouger

Excellent rendu.  

J'essaierais de l'animer (au niveau des barres verticales) dès que j'aurais le temps.  

Edit : Hum, pas si facile...

J'ai suivi scrupuleusement ton tuto et l'ombre interne y'a rien    Peux-tu m'expliquer le pourquoi du comment de la chose?
Un screen

ton calque "ombre interne" est en dessous de celui du degrade donc on peut pas le voir... il faut qu'il soit au dessus  

au fait ca peut rendre sympa pour une userbar  

Super tutorial mais est-ce que quelqu'un pourrait le faire pour Photoshop ? SVP

Super ce tuto

A un moment pour les barres, tu dis de faire un dégradé avec un melange de 10,0, comment peut-on regler  ca ?

le mélange est affiché en bas de l'image, dans la barre qui indique les chargements quand il y en a. Il s'affiche quand tu trace ton dégradé.

Excusez le gros UP mais je ne vois que maintenant les interrogations par rapport au tuto (j'en suis a nouveau désolé, beaucoup de boulot en ce moment   )
Alors pour ceux qui demandent un version Photoshop du tuto, j'ai entendu dire qu'il allait se faire ... je ne sais pas trop quand mais il se fera
Si cette personne qui réalise le portage n'y arrive pas au bout du compte, je pourrai le faire moi, mais vraiment tiré par les cheveux car comme je le disais je ne me débrouille pas autant sous toshop que sous gimp  

Mais j'ai essayé et voila ce que ca rend :

Photoshop :

Gimp :

le rendu sous toshop est moin bien que sous Gimp mais est quand meme pas mal
mais je prefere quand meme Gimp
allez Gimp

Bon tutotiti (ca sonne bien ca non, tutotiti ).
Joli rendu, et je trouve que ca rend bien sur toshop aussi.
Aller toshop.