Barre de navigation style XP avec Photoshop

vendredi 2 mars 2007
Article écrit par : Wonka
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
WonkaStudio

Je suis le premier à admirer le style de Windows XP, j’adore ces couleurs et ces reflets ... j’ai eu donc envie de faire une petite barre de navigation pour site internet à la sauce Windows XP. Attention au résultat ;)

Photoshop - 571.8 ko
Fichier PSD tutorial 78
Clic pour télécharger le fichier utilisé dans ce tutorial.

ETAPE 1

Créez un nouveau document de 800 pixels sur 400, sur fond blanc, créez ensuite un rectangle.

JPG - 38.2 ko

ETAPE 2

Nous allons maintenant ajoutez un style de calque sur notre rectangle.

JPG - 70.7 ko

ETAPE 3

Dupliquez votre rectangle puis déplacez le au dessus du premier, modifiez le dégradé avec cette nouvelle configuration.

JPG - 70.6 ko
JPG - 37.4 ko

ETAPE 4

A droite de votre barre de navigation créez une ellipse, appliquez ensuite un style de calque (vous trouverez le style sur le calque ellipse droite présent dans le fichier PSD téléchargeable au début de cette page.

JPG - 38.6 ko

ETAPE 5

Vous allez créer une bordure blanche, pour cela récupérez la sélection de votre ellipse puis créez un nouveau calque que vous remplirez de blanc, déplacer maintenant votre sélection de 2 pixels en bas puis sur la droite et enfin supprimez les pixels. Passez votre nouveau calque en opacité 50%.

JPG - 38.7 ko

ETAPE 6

Nous allons maintenant ajoutez notre symbole, à vous de voir lequel vous voulez ajoutez, pour ma part je vais incruster un symbole suivant.

Appliquez à cette forme un style : biseautage et estampage avec comme configuration taille : 0 et flou : 0 (retrouvez le style sur le calque « suivant ».

JPG - 39.2 ko

ETAPE 7

Intéressons nous au reflet, créez une forme comme dans l’exemple, vous utiliserez la plume, ou tout autre technique tant que la forme ressemble à ceci.

JPG - 39.5 ko

ETAPE 8

Avec un masque de fusion, appliquez un dégradé du haut vers le bas pour cachez une partie de notre reflet.

JPG - 39.4 ko

ETAPE 9

Avec la même technique vous pouvez créez un ou plusieurs boutons en plus.

JPG - 58.7 ko
La galerie des membres

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 2 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.