Créer une barre de navigation(scroll barre) avec Photoshop
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 Ajax,Javscript etc…
Résultat final
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.
Bonne chance 
A propos de l'auteur
Dans le même sujet
20 sites e-commerce pour vous inspirer
Il y a des nombreux sites web e-commerce qui ne sont pas...
Personnaliser l’affichage de votre like box
La personnalisation des plugins fournis par Facebook n’est pas une tache facile...
Intégrer un template XHTML/CSS en Joomla! – Surcharge des composants – Partie2 -
Salut , Aujourd’hui on va continuer à voir comment surcharger les vues...
0 Commentaire