Comment crer un menu black gloss sur Photoshop

Comment crer un menu black gloss sur Photoshop

Dcouvrez dans cetutoriel Photoshopcomment designer un menu horizontal puis comment lintgrer en HTML / CSS.

Voici un tutorial pour crer de A Z unmenuglossy black aqua. Sen suivra une explication pour le dcouper et le coder en CSS / html.

Tutorial 193 - Fichier source Photoshopclic pour tlcharger le fichier source photoshop utilis dans ce tutorial

ETAPE 1Je cre unnouveau document, et je remplis le fond avec cette couleur: #272727. Puis avec loutil des formes personnalises je cre un rectangle arrondi noir au milieu de mon image (peu importe le radius, dans mon exemple il est de 10 pixels).

ETAPE 2Japplique deux styles sur mon calque: un contour gris trs fonc, ainsi quun dgrad. Vous pouvez vousrendrecompte des styles en tlchargeant le fichier sourcePhotoshopen haut de cette page.

ETAPE 3Je cre un nouveau document, et je rcupre la slection de mon rectangle (clic + ctrl sur le calque). Je remplis de blanc cette slection, puis je la coupe en deux. Et enfin je diminue son opacit 20%.

ETAPE 4 FacultatifJe peux ajouter un motif mon menu, pour cela je rcupre la slection de mon rectangle, je cre un nouveau calque et je le remplis du motif de mon choix.

ETAPE 5Japplique un masque de fusion pour camoufler mon motif et le rendre non visible.

ETAPE 6Sur un nouveau calque je cre une slection de 1 pixel de largeur du haut du menu vers le bas, puis je remplis de blanc ces slections, il sagit l de sparationspour lesboutons de notre menu. Avec un masque de fusion je camoufle le haut de ces barres.

ETAPE 7De chaque cot, je cre des barres de sparations oranges.

ETAPE 8Je remplis chaque extrmit dune couleur au choix. Pour cela je rcupre la slection de mon rectangle et sur un nouveau calque je la remplis de bleu. Ensuite je supprime les pixels au centre de mon menu.

ETAPE 9Sur mon premier calque jajoute une lueur externe, gris clair.

ETAPE 10Voici un second menu avec un style diffrent, je le prfre au premier et je vais lutiliser pour la suite, vous de voir celui qui est le mieux. Pour information, pour arriver au rsultat du second menu, il suffit de supprimer les dgrads du menu (barre orange, cot bleu, et intrieur du menu).

ETAPE 11Jajoute mon texte, avec une lueur externe blanche sur chaque titre.

ETAPE 12Je place tous mes calques dans un dossier et je duplique ce dossier. Je place ainsi mes deux menus.

ETAPE 13Je modifie la couleur de mon menu, ce deuxime menu sera utilis pour crer leffet de Rollover au passage de la souris.

ETAPE 14Je vais maintenant dcouper mon menu, pour cela jutilise la slection. Lastuce videmment cest de crer et de dcouper lidentique en haut et en bas.

ETAPE 15Une fois que ltape 14 est termine je dois pouvoir crer une sorte de mosaque de mon menu, voici ce que jobtiens: les extrmits simples, et les boutons noir et orange.

ETAPE 16Dans un fichier html je vais mettre le menu en place, je vais utiliser la technique du tableau pour la mise en page et du javascript pour le Rollover. Remarque: tout ceci peut tre fait en CSS mais ce nest pas le but de ce tutroialVoici le code pour crer le menu:

Voir le menu en action:http://www.wks.fr/tutorial_help/tutorial_193/index.htmlJespre que vous aurez maintenant compris un peu plus la technique du Rollover, quand la cration du menu en lui-mme, ce doit tre du gteau pour vous non?

[Tutoriel photoshop CS3] Crer un fond d'cran sympa

Voici un tutoriel qui m'a servi a faire un des wallpaper que j'ai dja post.

C'est une traduction d'un tutoriel existant et que vous pouvez trouverICI

Pour raliser ce tutoriel il seraitprfrable d'avoir fait avant le tutoriel de ptite_chipiecration d'un logoafin de maitriser les reflets sur une sphre

Etape 1 : le fond

Pour commencer ouvrez unnouveau documentde la taille de votre ecran. Pour l'exemple je vais prendre une rsolution de1920x1200 pixelset d'une rsolution de72px/pouce

Avec l'outil rectangle (U)avec lesoptions suivantes

Vous vous retrouvez donc avec deux calque : le calquearriere planet lecalque forme 1

Dans le style de calque du calque forme 1 (double clicsur le calque ou menuCalque/Style de calque) ajouter une incrustation de dgrad avec les rglages suivants :

Le rsultat devant donner ceci

tape 2 : Ralisation de la sphre

Avec l'outil ellipse (U) dessiner un cercle parfait en maintenant la touche Maj enfonce pendant le dessinVous allez vous retrouver avec un troisime calque du nom Forme 2 et le rsultat suivant

A ce calque Forme 2 appliquer un style de calque incrustation de dgrad avec les rglages suivants:

Le rsultat sur la sphre devra correspondre a ceci

Copier le calque Forme 2 en faisantCtrl + J, supprimer le style de calque (incrustation de dgrad) en faisant un clic droit sur le calque et faireEffacer le style de calque. Changer la couleur du calque forme en noir.Appeler l'outil de transformation manuelle Ctrl +T ou menuEdition/Transformation manuelle du tracdformer le pour obtenir l'effet de l'image ci dessous.

Appliquer a ce calque un style de claque avec :Ombre interne

Lueur interne

Etape 3 Les motifs de la sphre

Tlcharger des brush Swirl que vous pouvez trouversur Deviantart

Crer un nouveau calque que vous renommerez Swirl et a l'aide d'une brosse Swirl et de lacouleur blanchedessiner comme l'exemple ci dessous. Si vos Swirls sont trop net vous pouvez leur appliquer uneattnuation/flou gaussien

En maintenant la toucheAltenfonce cliquer entre le calque Forme 2 copie (cercle noir) et le calque des Swirl pour transformer le calque en masque d'crtage comme montr ci dessous

Crer un nouveau calque que l'on va nommer:Vertet avec une brosse a contour doux dessiner sur la sphre avec la couleur6B9801et la recouvrir compltement. En maintenant la toucheAltenfonce cliquer entre le calque des Swirl et le calqueVertpour transformer le calque en masque d'crtage comme montr ci dessous et lui appliquer un mode de fusionCouleur

Les motifs a l'intrieur de la sphre dpendent dela brosseSwirl que vous aurez utilis voici quelques exemples de rsultats

Etape 4 les reflets

Pour les reflets je vous renvoie au tutoriel fait par Ptite_chipie que vous pouvez voirIci

Voici les reflets appliqus. Pour chaque reflets l'outil ellipse(U)un calque forme est donc cre a chaque reflets

Premier reflet vert lumineux on renomme le calque: Vert

Deuxime reflet blanc on renomme le calque : Blanc

D'autres reflets peuvent tre ajouts selon cette mthode

Etape 5 Le dcors

Pour le dcors crer un nouveau calque entre le calqueForme 1(le fonddgrad) et le calqueForme 2de la sphreA l'aide de brush de votre choix (ici ce sera des fleurs) raliser le dcor en dessinant de couleur blanc et en passant le calque en mode fusion incrustation. Si vous faites plusieurs calques spars de dcors cela aura pour effet de faire des nuances de couleurs. Alors qu'un seul calque de dcors ne vous donnera qu'une seule couleur unie pour ce dernier.

Pour un dernier effet je vous renvoi au tutoriel de Lin'@art sur l'effet non.Vous pouvez le trouverICI

Merci d'avoir suivit ce tutorie

Vous verrez dans cetutoriel Photoshopcomment raliser un menu horizontal styleWindows Vista.

Voici une mthode pour crer un menu pour unsite internet. Celui-ci reprend franchement le style trs glossy web2.0 de laversion windowsVista!

La ralisationnest pas franchement compliqu, mais elle demande une certaine rigueur, de plus le tutorial est un peu long. Alors munissez-vous dune bonne dose de patience

Fichier PSD: tutorial 211clic pour tlcharger le fichier source Photoshop utilis dans ce tutorial

ETAPE 1Je cre unnouveau documentsur fond noir. Puis jutilise loutil slection pour crer un rectangle au milieu de mon image. Je cre un nouveau calque (menu calque > nouveau calque) et je remplie laide de loutil pot de peinture ma slection en blanc. Je nomme ce calque (en double cliquant dessus dans la bibliothque des calques) en fond.

ETAPE 2Japplique maintenant sur mon calque fond deux styles de calque. Calque > style de calque > contour puis incrustation de dgrad.

Astuce: Le fichier source photoshop est disponible en haut de cette page. Je tlcharge celui et je rcupre le style de calque que je dois utiliser dans cette tape. Pour ce faire il faut faire un clic droit sur le calque puis copier le style, je reviens ensuite dans mon image je clic droit sur le calque fond puis coller le style de calque.

ETAPE 3Cette tape est facultative: elle consiste : sur un nouveau calque je rcupre la slection de mon fond que je remplie avec un motif, puis je diminue fortement son opacit avec un masque de fusion.

Pour information cette tape nest franchement pas trs utile:/

ETAPE 4Je cre un nouveau calque que je vais appeler reflet principal. Je rcupre la slection de mon calque fond puis je remplie cette slection avec cette couleur: #525870. Je coupe cette slection en deux dans le sens horizontale (jutilise loutil de slection et la touche suppr). Jutilise ensuite un masque de fusion pour camoufler lgrement le bas de ce reflet.

ETAPE 5Jutilise loutil des formes personnalises pour crer un rectangle arrondies sur mon document, voir ci-dessous pour le placement du rectangle.

ETAPE 6Je lui applique plusieurs styles de calque: comme pour ltape 2 je me rends dans le fichier source photoshop fournis en haut de page pour rcuprer le style de calque (voir le calque appel Forme 1).

ETAPE 7Je cre un nouveau calque et je le nomme Reflet 2. Je rcupre la slection de mon rectangle arrondie et je remplie cette slection avec cette couleur #525870. Je coupe cette slection en deux dans le sens horizontale (jutilise loutil de slection et la touche suppr).

ETAPE 8Je cre encore un nouveau calque et je le nomme sparation. Je vais crer les barres de sparations qui serviront diffrencier les liens prsents dans notre menu.

Je cre une barre de 2 pixels de large qui commence en haut et qui finie en bas de mon rectangle arrondies. Je duplique cette barre autant de fois que je veux de sparation.

Puis je supprime 4 pixels en haut et 4 pixels en bas. Et pour finir le lui applique une incrustation de dgrad (je rappelle que vous trouverez le style de calque dans le fichier psd disponible en haut de page).

ETAPE 9Jajoute maintenant mon texte qui correspond a mes futurs liens, sur ceux-ci jajoute simplement une incrustation de couleur grise.

ETAPE 10Dans cette tape il y a deux choses faire: premirement je rcupre la slection de mon calque fond, et en bas je cre un dgrad de noir 100% vers noir 0% dopacit.

Ensuite avec laide de la plume je cre droite de mon menu une forme comme ci-dessous.

ETAPE 11Jy ajoute une incrustation de dgrad ainsi quun contour (je rappelle que vous trouverez le style de calque dans le fichier psd disponible en haut de page).

ETAPE 12Je vais crer une bordure biseaute sur ma forme. Pour cela je cre un nouveau calque et je rcupre la slection de ma forme, ensuite je dplace la slection de 2 pixels droite et gauche et je supprime.

Jutilise maintenant un masque de fusion (calque > masque de fusion > tout faire apparaitre) pour camoufler le haut et le bas de ma bordure.

ETAPE 13Je rajoute mon nom en bas gauche et voila le menu termin.

Pas mal non?

Mot-cls :Charte graphiqueExpertGlossyNaviguationPhotoshop