Web metal Navigation bar

Cette barre est très répandue, et donne un aspect très sympathique à vos boutons. D'autant plus qu'il est facile à reproduire...

Etape 1 : La barre.

Optez pour l'outil forme "rectangle arrondi". Dessinez votre barre.
(la couleur n'a aucune importance)

Etape 2 : Le dégradé
Il s'agit d'un dégradé métallique style chrome, c'est à dire qui reflète les couleurs de l'environnement, soit ciel bleu / soleil ou nuages / le sol.
Aussi ces couleurs doivent reprendre ces teintes.

Cliquez sur le pot de peinture longuement, et choisissez le dégradé.
Double-cliquez sur le dégradé en cours. Modifiez et faites Nouveau.

Notez les couleurs (terre / bleu / blanc (soleil)/bleu)

Appliquez le dégradé.
Clic droit sur le calque > Options de fusions (ou le f dans le rond noir)
Et Incrustation en dégradé.

Choisissez votre dégradé MetalNavBar

Une ombre portée.

Etape 3 : les barres de fractionnements.

Affichez la grille si vous souhaitez obtenir des boutons de taille régulière.
Affichage > Afficher > Grille
Affichage > Magnetisme > Grille
Vérifiez que le magnétisme est activé.

Grâce à l'outil crayon (pas le pinceau), choisissez un diamètre de 1 pixel.
Dans un nouveau calque, dessinez vos barres noires régulièrement ou non.

Dans un nouveau calque, dessinez une barre blanche juste à gauche.
(Pensez à désactiver le magnétisme !)

> Baissez l'opacité des barres noires à 50%
> Passez les barres blanches en "incrustation"

Voilà c'est fait.

Etape 4 : le texte

Tapez votre texte (Arial, 11 points, sans)

Et appliquez un biseautage et estampage.

Ca donne ça...


Redécoupez votre image si elle dépasse trop (CTRL+Clic sur la barre noire : la selection de la barre s'affiche. Image>Recadrer).

Etape 5 : découpage pour le web.

Grâce à l'outil Slice, scalpel, tranche comme on veut,

on peut découper les bandes de chaque bouton, et lui attribuer un URL par exemple, directement depuis photoshop ! Si si !

On découpe !

Grâce à l'outil selection de tranche (clic long sur l'outil TRANCHE), vous pouvez ensuite double-cliquer sur chaque tranche et lui appliquer un URL par exemple...

Vous n'avez ensuite qu'à faire "Fichier > Exportation pour le web..." :
Vous aurez un fichier HTML avec vos images et vos liens...

Enjoy !!