Les Docs de Doc

Je vais vous apprendre à réaliser avec Adobe Photoshop une barre de navigation qui fait très Web 2.0 comme c'est à la mode en ce moment.

1. Nous allons créer un nouveau document. Fichier ->Nouveau... Les dimensions pour cet exemple sont de 550 pixels(px) sur 100 pixels (px) avec un fond blanc

2. Dans le document nous allons créer un rectangle arrondi comme ci dessous. Pour la couleur du rectangle je suis parti sur un gris pale (#8F8F8F)

3. Nous allons appliquer maintenant quelques effets d'ombre sur ce calque. Pour cela fait un clic droit su le calque puis Options de fusion. Tout d'abord nous allons mettre une Ombre portée. Rentrez les données comme ci dessous.

4. Puis une lueur interne a appliquer comme le montre l'image.

5. On va mettre une incrustation de dégradé :

6. Pour le dégradé il faut mettre 3 couleurs : #212121, #424242 et #3e3e3e

7. Pour finir, on va mettre un petit contour #2a2a2a comme ceci :

8. A ce niveau vous devriez avoir quelque chose comme ceci :

9. Nous allons commencer à mettre du texte dans notre création. Pour cela nous prenons l'outil texte et la police : Trebuchet MS en Bold (gras) et en 15 pt. La couleur pour le texte sera le blanc. Petite astuce : pour faciliter le placement de votre texte, mettez un calque vierge entre votre claque de fond et votre calque de texte. Cela va éviter que l'outil texte ne se colle à la forme du fond. Vous devez obtenir ceci

10. Maintenant nous allons mettre des effets sur le texte. Pour cela même technique clic droit sur le calque puis Options de fusion. Puis ombre portée pour appliquer les données suivantes :

11. Vous devez obtenir ceci :

12. Afin de bien séparer les rubriques du menu, nous allons utiliser l'outil Texte et faire des bandes comme ceci | Petite astuce : pour faire des petites bandes maintenant appuyez sur votre clavier Alt Gr et 6 Pensez aussi à réduire la taille de la police par exemple j'ai mis 12 pt et j'ai retiré l'effet Bold pour remettre Regular. La couleur que j'ai utilisé est #b3b3b3.

13. Pour atténuer les espaces nous allons passer le calque des barres en lumière vive pour cela fait un clic droit sur le claque puis option de fusion. Puis dans fusion générale passer le claque en mode de fusion lumière vive comme ceci

14. Vous arrivez au résultat suivant :

15. Pour terminer ce tuto nous allons simuler un effet hover sur le lien. Pour cela on va sélectionner Tutoriaux par exemple et le mettre avec la couleur #aefa1d

16. Félicitations vous savez maintenant créer un menu de navigation très Web 2.0

Ce tuto a été inspiré de pscloud