Victor's Studio
Bienvenue Sur Victor's Studio !
Connectez-vous ou inscrivez-vous Très Vite !
Vous aurez accès à Tous le Forum !
Connexion

Récupérer mon mot de passe

Qui est en ligne ?
Il y a en tout 1 utilisateur en ligne :: 0 Enregistré, 0 Invisible et 1 Invité

Aucun

[ Voir toute la liste ]


Le record du nombre d'utilisateurs en ligne est de 35 le Lun 24 Oct - 12:36
Rechercher
 
 

Résultats par :
 


Rechercher Recherche avancée


Créer un menu horizontal graphique pour son site Internet

Aller en bas

Créer un menu horizontal graphique pour son site Internet

Message  Vision le Ven 26 Juin - 11:08

Voici une méthode pour créer un menu graphique horizontal ! Il s’adapte très bien aux interfaces graphiques Sombres et Darks. Le style est frais et glossy tout à fait dans la tendance actuelle du Web 2.0 ! Normalement j’ai prévu de rédiger deux articles à la suite en supplément :

* Un pour intégrer des icônes supplémentaires sur chaque onglet
* Un pour le couper et le coder en css html.

Information importante : vous pouvez télécharger le fichier psd pour récupérer les styles de calques car je ne m’attarderai pas à développer chaque style de calque ou chaque reflet, car ce n’est pas le sujet de ce tutorial !
avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Premiére Etape

Message  Vision le Ven 26 Juin - 11:09

Je crée donc un nouveau document que je remplis de gris
foncé : #363636 puis je crée un nouveau calque et avec l’outil
rectangle de sélection, la base du menu que je remplis de noir.
J’applique sur ce calque un style de calque : calque > style de
calque > incrustation de dégradé.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Deuxiéme étape

Message  Vision le Ven 26 Juin - 11:10

Je crée un nouveau calque, je récupère la sélection de
mon rectangle et je remplis avec le pot de peinture, de blanc. Je coupe
ce rectangle blanc en deux (dans le sens de la largeur) puis je
camoufle le bas grâce à un masque de fusion : calque > masque de
fusion > tout faire apparaitre.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Troisiéme etape

Message  Vision le Ven 26 Juin - 11:11

En dessous mes deux calques je vais créer une ligne gris-claire.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Quatriéme etape

Message  Vision le Ven 26 Juin - 11:11

Puis une noire puis une gris-claire.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Cinquiéme etape

Message  Vision le Ven 26 Juin - 11:12

J’ajoute maintenant un dégradé noir 100% vers noir 0% d’opacité en dessous de ma base pour créer une sorte d’ombre portée.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Sixiéme etape

Message  Vision le Ven 26 Juin - 11:13

J’ajoute deux calques et je crée des lignes blanches de
séparation. Attention ! : sur le premier calque je dessine des lignes
blanches sur la partie basse puis sur le second la même chose pour la
partie haute !

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Septiéme etape

Message  Vision le Ven 26 Juin - 11:13

J’ajoute un masque de fusion sur ces deux calques et je camoufle le centre comme ci-dessous.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Huitiéme etape

Message  Vision le Ven 26 Juin - 11:14

Je crée un nouveau calque et à côté de chaque ligne
blanche, je crée une ligne noire. Je place ensuite ce calque en mode de
fusion lumière tamisée.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Neuviéme etpae

Message  Vision le Ven 26 Juin - 11:15

Je duplique la base de mon menu (le rectangle avec le
dégradé) et je change ce dégradé par un dégradé de couleurs : dans mon
exemple, orange foncé vers orange clair (cet onglet servira à créer
l’état hover de mon futur menu).

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Dixiéme etape

Message  Vision le Ven 26 Juin - 11:15

Je crée un dossier par-dessus les autres calques et je
crée mes titres avec l’outil texte. Pour créer le reflet, je duplique
mon dossier, je pixellise tous les calques et je les fusionne,
j’applique une transformation > symétrie verticale, je déplace mon
texte vers le bas et j’y ajoute un masque de fusion.

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3679
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Créer un menu horizontal graphique pour son site Internet

Message  Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum