Site de tutoriaux photoshop

Faire une barre de navigation d'un site internet

Tutoriel photoshop : Faire une barre de navigation d'un site internet

Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Faire une barre de navigation d'un site internet


Dans ce tutoriel nous allons voir comment cr?er une barre de navigation pour un site internet.
1) Cr?er un nouveau document. (pour mon exemple j'ai choisi de mettre un fond noir)
Tutoriel barre de navigation

2) Prenez l'outil rectangle Outil rectangle et faite une forme rectangulaire de la largeur de votre menu.
Tutoriel barre de navigation

3) Maintenant on va appliquer 2 effets sur ce rectangle : Incrustation de d?grad?, contour.
Dans la fen?tre calques cliquez sur l'icone Style de calque et s?lectionnez incrustation de d?grad?.
(Sinon allez dans le menu calque -> style de calque -> incrustation de d?grad?. Ou encore double cliqu? sur le calque et allez sur incrustation de d?grad?)
Voici mes param?tres :
Tutoriel barre de navigation

Au niveau du d?grad? ?a donne ?a :
Tutoriel barre de navigation

4) A pr?sent un contour. Cliquez sur contour.
Voici mes param?tres :
Tutoriel barre de navigation

5) Validez. Voici ce que vous devriez avoir ? pr?sent
Tutoriel barre de navigation

6) Maintenant on va faire les s?paration de nos diff?rents onglets le plus facilement du monde. Prenez l'outil trait Outil trait (situ? au m?me endroit que le rectangle pr?c?dent)
S?lectionner une couleur fonc? proche des couleurs pr?c?demment utilis?es.
Tracez un trait de 1px de la hauteur de votre barre de navigation. (l'?paisseur du trait se r?gle dans les options situ?es en dessous du menu du logiciel)
Renouvelez une fois la manipulation en choisissant cette fois-ci une couleur claire.
Plac? les 2 traits l'un ? cot? de l'autre
Tutoriel barre de navigation


7) Ecrivez votre texte.
Pour avoir ? nouveau une s?paration, nous allons d'abord faire un groupe. Dans la fen?tre calque cliquez sur le calque correspondant au trait fonc? puis en maintenant la touche CTRL cliquez sur le calque correspondant au trait clair, (pour s?lectionner les calques) et appuyez sur CTRL+G.
Sinon allez dans le menu calque -> nouveau -> nouveau groupe d'apr?s les calques. Nomm? ce groupe s?paration.
Vous n'aurez qu'? dupliquer ce groupe pour avoir ? nouveau la barre de s?paration entre chaque onglet.
Ptite astuce pour dupliquer facilement un calque ou un groupe de calque : S?lectionnez le calque ou groupe de calque ? dupliquer et tout en appuyant sur les touches CTRL+ALT appuyez sur une touche de fl?che directionnelle. (haut, bas, gauche, droite)
Sinon le raccourci est CTRL+J, ou sinon menu calque -> dupliquer le calque (ou dupliquer le groupe)

Voil? le r?sultat final :

Tutoriel barre de navigation





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...




Tutoriaux photoshop

Les derniers tutoriaux photoshop : Webdesign

Tutoriaux photoshop : Créer une icone de média sociaux (facebook, twitter...)Créer une icone de média sociaux (facebook, twitter...)
Tutoriaux photoshop : Créer une icone glossy pour une interface webCréer une icone glossy pour une interface web
Tutoriaux photoshop : Faire une barre de navigation, scroll barreFaire une barre de navigation, scroll barre
Tutoriaux photoshop : Flux RSS glossyFlux RSS glossy
Tutoriaux photoshop : Création d'un boutonCréation d'un bouton
SW-Conception.com - Création de site internet