Créer un compte
Connexion

[Tutoriel]Créer une barre de navigation style Apple


[Tutoriel]Créer une barre de navigation style Apple [Tutoriel]Créer une barre de navigation style Apple Le 12/12/2008 à 22:11:56
Note: 4/5
Mots clés: Tutoriel photoshop pour créer une barre de navigation style type apple boutons de navigation apple ipod iphone mac avec photoshop

Bonjour, dans ce tutoriel, je vais vous apprendre à créer une barre de navigation style Apple voici un aperçu de ce que vous serez capable de faire à la fin de ce tutoriel photoshop:
Image
Une barre de navigation style apple faite sous photoshop

Pour commencer ouvrez photoshop et créez un document 800px*60px avec un fond blanc:
Image

Ensuite dans la barre des outils, choisissez l'outil rectangle arrondi (U) habituellement, dans la barre des options(en haut), le rayon est à 5px si ce n'est pas le cas, faite le.
Image

Tracez un rectangle comme dans l'image:
Image

Faites un clic droit dessus et choisissez Définir une sélection...
Image

Une fenêtre vas s'ouvrir, laissez les paramètres tel quel et cliquez sur OK:
Image

Vous devez obtenir quelque choses de semblable à ceci:
Image

Créez un nouveau calque:
Image
Image


Choisissez l'outil pot de peinture (G) :
Image

Changez la couleur du premier plan à #949494
Image
Image


Remplissez la sélection avec la couleur choisie en un simple clic dessus.
Image

Faites un double clic sur la vignette du claque pour acceder à ces options de fusion:
Image

Dans le menu de gauche, choisissez ombre portée:
Image

Appliquer les paramètres comme dans l'image ci-dessous:
Image

Ensuite encore dans le menu de gauche, choisissez incrustation de dégradé:
Image

Mettez la première couleur en blanc avec une opacité de 0% et la deuxième couleur en blanc avec une opacité de 100%
Image

Mettez les mêmes paramètres que dans l'image ci-dessous et cliquez sur OK:
Image

Votre barre est prête, vous devez avoir quelque chose de semblable à:
Image

Maintenant, attaquons nous au texte, choisissez l'outil texte (T):
Image

Tracez une sélection comme dans l'image:
Image

Dans la barre des options en haut, mettez les paramètres comme ci-dessous et la couleur du texte à #383838 :
Image

Choisissez l'outil de déplacement (V):
Image

Et alignez le texte :
Image

Faites un clic droit sur le calque du texte et choisissez options de fusion:
Image

Une fenêtre s'ouvre, choisissez dans le menu à gauche ombre portée
Image

Appliquez les paramètres comme ci-dessous (avec la couleur blanche #ffffff):
Image

Vous devez avoir quelque chose de semblable à ceci:
Image

Le texte est prêt, maintenant il faut mettre les barres verticales pour séparer les différents boutons de la barre de navigation. Donc créez un nouveau calque:
Image

Choisissez l'outil crayon (B):
Image

Dans la barre d'option mettez les paramètres comme ce qui suis:
Image

Si ce n'est pas déjà faut, cliquer dans la barre de navigation de photoshop sur Affichage -> Règles. ensuite faites un zoom sur l'image en cliquant sur Ctrl et +. Cliquez sur la règle de gauche et sans relâcher, déplacez la souris là ou vous voulez mettre la barre de séparation des boutons et relâchez:
Image

Mettez un point en haut de la barre de navigation et juste à côté de la ligne de repérage et faisant un simple clic:
Image

Ensuite, Cliquez sur Shift et sans relâcher, mettez un point en bas de la barre de navigation sans atteindre l'ombre que l'on avait mis et ensuite relâchez le Shift:
Image

Allez dans le menu des calques et changez l'opacité du calque de la barre à 30%:
Image

Maintenant, vous avez fini, il suffit de mettre les autres textes et barres et votre barre de navigation est finie. Voici ce que vous pouvez facilement faire:
Image

Vous pouvez améliorer votre barre en faisant un reflet pour cela regardez le tutoriel pour faire des reflets avec photoshop:
Image
Tutoriel photoshop pour faire des reflets
Merci

Scripts et Tutoriels similaires

[Tutoriel]Créer des boutons web 2.0 [Tutoriel]Créer des boutons web 2.0 [Tutoriel]Faire un rectangle avec angles arrondis sous photoshop [Tutoriel]Faire un rectangle avec angles arrondis sous photoshop [Tutoriel]Effet de perspective avec reflet sur une image avec photoshop [Tutoriel]Effet de perspective avec reflet sur une image avec photoshop [Tutoriel]Rendre une image en noir et blanc avec photoshop [Tutoriel]Rendre une image en noir et blanc avec photoshop [Tutoriel]Créer des titres (logos) web 2.0 avec photoshop [Tutoriel]Créer des titres (logos) web 2.0 avec photoshop