Créer une userbar avec photoshop, avec tous les reflets & co nécessaire pour qu'elle soit belle
Nous allons voir comment créer une userbar avec Photoshop
Citation
1) Créer une nouvelle image avec un fond transparent de 350 par 20px
2) Remplir l'image avec une couleur au hasard avec le pot de peinture de la palette d'outils puis clic droit sur votre calque dans la fenêtre des calques: "Option de fusion" puis cliquez sur Incrustation en dégradé.
3) Cliquez sur le dégradé qui est du Noir vers le blanc, une fenêtre va s'ouvrir avec un zoom du dégradé. Sur ce zoom, vosu avez 4 curseurs: 2 en haut et 2 en bas à chaque extrémités. Cliquez uniquement sur ceux du bas pour changer les couleurs. Mettez une couleur plus foncée à gauche qu'à droite. [size=9](La gauche représentant la couleur du bas sur votre userbar)[/size]... Ici je prend du bleu plus foncé en bas qu'en haut, ce qui permetra d'accentuer l'effet de transparence / 3D.
Vous aurez logiquement ceci:

4) Maintenant, créer à nouveau une image, de 4 par 4px sur fond transparent puis zoomez à fond dessus. Prenez l'outil crayon et mettez le à 1px en noir. Faite la diagonale du carré.
Vous aurez ceci:

5) Une fois fait, faites "Edition, utiliser comme motif" puis OK. Fermez l'image. Revenez à votre première image.
6) Créez un nouveau calque puis nommez le "Lignes" et cliquez sur "Edition, remplir" et sélectionnez le motif que vous avez créé auparavent. [size=9](Vous avez une liste déroulante dans la petie fenêtre qui s'est ouverte. Sélectionnez "Motif" puis cliquez sur le votre)[/size]. Mettez une valeur entre 15 à 25px d'opacité sur ce calque.
Vous aurez ceci:

7) Insérez maintenant une image que vous aurez découpé avant cela. Mettez là à une taille qui la mette en valeur. Vous aurez donc environ ceci:

8) Maintenant, nous allons créer le texte.
Téléchargez la police Visitor (par ici) et créez votre texte en lui mettant une taille de 8px, sans aucun anticrénalage [size=9](en haut, dans les propriétés du texte vous avez un "A a" avec une liste déroulante à côté. Mettez "Aucun".) et mettez lui un contour gris foncé (pas noir) de 1 px et un intérieur blanc. [size=9](Pour le contour et la couleur interne, click droit sur votre calque puis option de fusion
)[/size](les couleurs peuvent varier des fois selon le fond
Par exemple, sur fond très foncé, mettre un gris clair ou du blanc et mettre le texte en noir
)[/size]
Vous aurez ainsi:

9) Créons un reflet. Créez un nouveau calque, puis prenez l'outil elipse de sélection. (Il est en haut à gauche de la palette d'outils. Si vous ne le voyez pas, faites un click droit sur la première icone en haut à gauche et vous aurez une liste. Prenez l'outil ellipse!.) Tracez une demi ellipse partant du haut de l'image et venant d'arretter aux 3/4 de l'user bar en bas. [size=9](voyez l'exemple pour comprendre)[/size]
Remplissez de blanc et réglez son opacité à environ 50 à 75%.

10) Pour finir, mettons un contour: Créez un nouveau calque en mode Normal. Faite une sélection de toute la taille de l'userbar avec le rectangle de sélection(pas l'élipse), puis allez dans "Edition => Contour" puis régler comme ceci:
-Epaisseur: 1px (couleur au choix, ici: noir)
-Position: intérieur
-Mode normal, opacité 100%
Et voilà!!

Par StyphaX
, Le 12 Juin 2006 à 10h57
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.
Retour à Photoshop
Ajouter un commentaire
Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez
vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.
Commentaires sur cet article
StyphaX - Le 19 Juillet 2007 à 17h57
Joli^^ Manque plus que le contour que tu as oublié
voila pour lost
[img]http://img529.imageshack.us/img529/19/lostfancopiehj9.gif[/img]
Les images n'existent plus^^ Vas falloir que je les recrée lol
Ca sera mon premier tuto à refaire xD
Mystic - Le 30 Mars 2007 à 19h38
30 Mars et toujours pas d'images
[EDIT] désolé pour le double post =/
Mystic - Le 30 Mars 2007 à 19h38
30 Mars et toujours pas d'images
salut
tu peut remettre les images sil te plait
merci
Pouzy - Le 09 Novembre 2006 à 21h13
Images rétablies, désolé pour le retard
Oui ,l'hébergeur à foiré... je verrai si je peux remettre
baleze - Le 10 Août 2006 à 12h03
on voie pas les images
koc - Le 05 Juillet 2006 à 14h23
Bin moi je suis plus loin mais je n'is arrive toujours pas avec toshop cs 8....
Merci quand même car j'ai jammais etais aussi loin !