Tutoriel photoshop : Faire une barre de navigation, scroll barre Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Faire une barre de navigation, scroll barre

Vous allez voir comment réaliser une scroll barre avec photoshop.
Cela peut être utile ensuite pour du flash ou d'autres langages comme le javascript/ajax and co.

1) Commencer par créer un rectangle avec l'outil rectangle


Appliquez y ces différents style de calque. (Menu calque -> style de calque -> incrustation de couleur)



Pour obtenir ce rendu


2) Maintenant on va rajouter un bouton. Toujours avec l'outil rectangle créer un premier bouton de la même hauteur que la barre.


On va lui appliquer aussi différents styles de calque. (Menu calque -> style de calque -> incrustation de dégradé)


Voilà ce que ça doit donner


3) Maintenant on va créer un triangle. Toujours avec l'outil rectangle créer un carré. Pour cela rester appuyez sur SHIFT pour garder toujours les mêmes proportions.


Tournez le de 90°


Prenez l'outil sélection directe sélectionnez l'angle droite


Et appuyez sur la touche SUPPR. Voilà notre triangle est fait.


On appliquer une ombre interne pour donner un peu de relief. Menu calque -> style de calque -> ombre interne


Pour avoir ce résultat


4) Pour créer l'autre bouton, dans la fenêtre calque, sélectionnez le calque du triangle et du bouton.
Puis Tout en appuyant sur les touches SHIFT (pour avoir un magnétisme et rester bien droit) et ALT (pour dupliquer) cliquez glissez le bouton à l'autre extrémité. (sinon clique droit sur le calque -> dupliquez le calque puis déplacer la duplication)
On a plus qu'à effectuer une rotation. Menu édition -> transformation -> symétrie horizontale.


5) Voilà pour nos boutons maintenant la petite barre de navigation. Prenez l'outil rectangle angle arrondi en mettant dans les options de l'outil un rayon à 5px.
Faites une forme un peu plus petite qui rentre dans le rectangle en haut et en bas de 1px.


A présent appliquer différents style (menu calque -> style de calque -> incrustation de dégradé)



Voilà ce que ça donne


Maintenant un petit reflet.
Dans la fenêtre calque tout en appuyant sur CTRL cliquez sur la vignette du calque correspondant à la petite barre de navigation qu'on vient de créer


Allez dans le menu édition -> transformation -> contracter mettez en valeur 2px


Prenez l'outil rectangle de sélection et tout en appuyant sur la touche ALT couper la sélection au milieu en gros.


A présent avec l'outil dégradé, en option un dégradé de blanc vers transparent, cliquez glissez (en maintenant la touche SHIFT appuyé) de haut en bas.
Puis déselectionnez. Menu sélection -> déselectionner (raccourci CTRL+D)


Dernière finition, prenez l'outil flèche de déplacement et appuyez une fois sur la touche flèche de direction haut. Ca montera le reflet de 1px.


Voilà le tuto est à présent terminé. Vous pouvez toujours faire varier les formes couleur ou autres pour vous rapporhcer d'un style "apple" ou autre.


A vous de jouer !

Autres tutoriaux photoshop : Webdesign

Faire une barre de navigation d'un site internet Création d'un bouton Flux RSS glossy Créer une icone glossy pour une interface web Créer une icone de média sociaux (facebook, twitter...)