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