Voila, c'est mon premier VRAI tutorial, le tout premier étant le mini tuto sur la userbarre
Dans ce tuto, nous allons apprendre a faire une barre du style iPod, comme la barre de volume de ce meme 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 extrene .
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 chaques 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 :



Creer un nouveau calque et le nommer Patron.
Creer une selection a l'interieur 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 selection sur le calque Patron.
Créer un nouveau calque et nommez le Background.
Faites un dégradé vertical dans cette selection, #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 Selection sur le calque Patron.
Creez un nouveau calque et nommez le Ombre Interne.
Inversez la selection (Selection > 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 Selection sur le calque Patron.
Placez vous sur le calque Ombre Interne, inversez la selection et enfin supprimez la selection (Edition > Effacer ou Ctrl + K).



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



4 - Barres Verticales.

Faites un Alpha vers Selection sur le calque Patron.
Creez 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 selection 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 selection, 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 Selection sur le calque Patron.
Creez un nouveau calque et nommez le Reflet.
Elever la moitié de la selection, pour cela prenez l'outil Selection rectangulaire, choisissez le mode Soustraire de la selection courante et selectionnez le bas de la barre.
Réduisez la selection de 1px (Séléction > Reduire...)
Appliquez un dégradé vertical Blanc > Transparent, en depassant 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 - Resultat 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