Concevoir un onglet Web 2.0 avec Photoshop

Le guide ci-dessous tente de vous donner une idée de la manière de concevoir un menu de type onglet élégant dans Photoshop, style Web 2.0..

Étape 1

Créez une nouvelle toile avec un arrière-plan blanc [#ffffff] à la taille de votre choix, de préférence rectangulaire; ils sont plus appropriés pour dessiner des onglets. Puis passez à Onglet Chaînes (Windows -> Chaînes), cliquez sur Créer un nouveau canal en bas à droite.

Étape 2

Sur le calque de canal sélectionné, dessinez une forme similaire à l'aide de l'outil Lasso polygonal. Remplissez-le de couleur blanche [#ffffff]; désélectionnez la région polygonale (sélectionnez un outil de sélection et cliquez sur celui de l'écran); donner la forme Flou gaussien avec rayon 6.0px.

Étape 3

CTRL-L Pour appeler la boîte de dialogue Niveau et appuyez sur les flèches gauche et droite pour atteindre la flèche centrale, comme sur l'image ci-dessus. Cette volonté “lisse” votre forme floue et vous donne une belle forme de coin arrondi.

Étape 4

Dans l'onglet Canaux, Tenir CTRL, cliquer sur Vignette de la chaîne du calque Alpha 1. La nouvelle forme va maintenant être sélectionnée, revenez à Onglet Couches, Créer un nouveau calque et remplissez la zone sélectionnée avec du noir [# 000000].

Étape 5

Supprimez les coins arrondis en bas à gauche et en bas à droite, déplacez-le vers la gauche et positionnez-le comme indiqué ci-dessus. Ensuite, nous allons nous concentrer sur la couleur noire Tab.

	Tenir CTRL, cliquez sur l'onglet Vignette de couche pour que toute l'image de l'onglet soit surlignée.
	Image de l'onglet étant toujours en surbrillance, sélectionnez Outil de chapiteau rectangulaire, tenir ALT et dessinez un rectangle de région que nous voulons supprimer.
	Vous ne devriez voir que la partie supérieure sélectionnée. Sélectionner -> Modifier -> Contrat, Contrat par 2px et vous devriez obtenir quelque chose comme l'image de gauche.
	Créez un nouveau calque, remplissez la région surlignée de blanc [#ffffff]. Clic droit, choisissez Options de fusion puis Superposition dégradée. Remplacez la couleur blanche [#ffffff] par la couleur grise [# 616161]. Votre onglet doit ressembler à l'image de gauche.

Étape 6

Créer un nouveau calque; Sélectionner Outil rectangulaire arrondi (Rayon 8px), tracez un rectangle et placez ce calque derrière le calque noir. Faites un clic droit et sélectionnez Options de fusion et insérez les paramètres suivants.

Ombre portée

Opacité: 31%
Distance: 0px
Propagation: 0%
Taille: 2px

Biseau et estampe

Profondeur: 100%
Taille: 0px
Ramollir: 0px

Superposition dégradée

Voici les paramètres de couleur s'arrête.
Couleur: #aaaaaa, Emplacement: 0%
Couleur: #ffffff, emplacement 100%

Étape 7

Mettez du texte pour voir l'aspect général du Web 2.0. J'utilise la police Lucida Fax, taille de police 32 et 25 pt. Et votre onglet est terminé! N'hésitez pas à jouer avec la combinaison de couleurs de l'onglet.

Téléchargez le tutoriel