JN Forum

Posté le: 15 Oct 2005 13:57:25

Photoshop 7 et +

Bonjour !!
Dans ce tutorial, nous allons voir comment créer une très belle barre de navigation. Vous pourrez vous en servire pour un lecteur vidéo, audio et même (en ne mettant que certains boutons) pour un site Internet perso.

- Créer un nouveau document de 430 x 120 pixels, le fond dépend de l'utilisation dont vous allez en faire
- Prenez l'outil Rectangle arrondit (U) avec un Rayon (en haut) de 30px

- Dessinez la forme entière de votre barre de navigation:

- Prenez l'outil Dégradé

- Choisissez (en haut) le dégradé Réfléchi:

- Cliquez sur le dégradé
- Dans la fenêtre qui s'ouvre, mettez la couleur #535B5E aux 2 point de chaque coté et la couleur #FFFFFF à un point que vous mettrez à 50%:

- Appuyez sur OK
- Cliquez sur le calque contenant la forme en maintenant Ctrl (pour sélectionner tout ce qu'il contient)
- Faites votre dégradé (en maintenant Shift pour qu'il soit bien droit) du bord de la sélection à l'autre (supérieur et inférieur)

- Vous devriez avoir cela:

- Désélectionnez tout (Ctrl+D)
- Ajouter un nouveaux calque (Ctrl+Maj+N), nommé Lignes
- Prenez l'outil Trait (U)

- Et tracez les lignes de séparation (en maintenant Shift) en noir et de 1px d'épaisseur (en haut)

Astuce: vous pouvez créer une image (à utiliser comme motif) de 73x100 px et tracer une ligne avec le crayon sur le bord droit en suite vous rogner juste autour de votre barre de navigation et vous remplissez (sur le calque Lignes) avec le motif (voir le tutorial sur les Quadrillages), vous supprimer (avec une sélection) la dernière ligne à droite et vous déplacer de 3px le calque Lignes vers la droite, enfin (avec Image/Taille de la zone de travail...) redonnez à l'image sa taille d'origine (430 x 120 pixels)

- Prenez l'outil Crayon (B)

- Et tracez une ligne blanche (#FFFFFF) à la DROITE de chaque ligne noire pour donnez un effet d'épaisseur

- Cliquez sur le calque (dans la Palette des calques) où il y a votre barre de navigation pour le sélectionner et cliquez sur le petit F en bas de la palette

- Puis cliquez sur Ombre portée...:
¤ Opacité: 60%

- Cliquez sur Biseautage et estampage:
¤ Taille: 13px

- Puis sur Incrustation couleur:
¤ Mode fusion: Incrustation
¤ Pour la couleur choisissez celle qui vous plait (pour celle de l'exemple: #3333B3)

Voilà le résultat:

Pour les boutons:
- Créer un nouveau calque (Ctrl+Maj+N) nommé Boutons
- Dessinez vos bouton dessus avec, par exemple, le Crayon (B):

Astuce: mettez cette image entre les calques Boutons et Lignes pour pouvoir copier les boutons

Voilà le résultat final:

Voilà !!

Merci à tous...

:black: Tutorial réalisé par Jack NUMBER :black

Inscrit le: 24 Oct 2005 Messages: 1

j'ai essayer la méme chose pour un forum sa donne quelque chose de trop classe merci pour ce tuto Wink