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 :
Sujet: bar de chargement 
Jeu 16 Avr - 1:45
