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 !





Gagnez de l'argent facilement même en restant chez vous !
Sondages, tests de produits, enquêtes consommateur, mails rémunérés, cashback, publicités rémunérées...

Les derniers tutoriaux photoshop : Webdesign

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