Barre de navigation style XP avec Photoshop

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

Article publié par Wonka

Vous aimez cet article? Partagez le !

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 !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

    Questions et commentaires, Il y a 3 messages de forum.

    Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

    • 24 avril 2008 21:05

      bon tuto mais pensez aux pauvres débutants comme moi dans vos futures tuto plus d’étapes nous fait du bien merci.

      Répondre
    • 24 avril 2009 20:32, par zirkan

      Excellent j’aime beaucoup ! simple, rapide, efficace

      Répondre
    • 31 juillet 2011 10:44, par Votre pseudonymeStefEd

      Très beau site, graphisme sobre et efficace, et excellents tutoriels variés. Bravo. Attention à l’orthographe et ce sera parfait ! Quelques corrections orthographiques à la volée sur cette page : Footer : toutes copies... SONT interdites et non pas « est » En haut, sous le logo « apprenez à utiliseR » et non pas « utilisez » Enfin à droite dans la liste des tutoriels (tutoriaux n’existe pas dans le dictionnaire !) changer la couleur d’un élément et non pas « élèment » Cordialement,

      Répondre

    Laissez un commentaire

    Remplissez correctement le formulaire puis appuyez sur Validez.