Tuto: Créer Une Userbar Personnalisée

A la demande d'Abd je vais essayer de créer un tuto, sachant que je me suis aidé d'un tuto en anglais pour le faire mais bon j'vais essayer d'y apporter ma touche personnelle (qui a dit: "Oh non!" ).

Alors d'abord une userbar c'est la nouvelle mode. C'est toute ces barres de taille environ 300 x 19 que l'on peut voir dans les signatures de forumistes. Pour ma part j'en ai deux faites maison. Si vous pensez ne pas être capable d'en faire une vous pouvez en trouver sur pleins de sites. Mais bon le mieux est d'en faire une soit même et ce pour deux raisons: 1) la userbar sera exactement celle dont vous rêviez 2) vous êtes content d'avoir pu réaliser la votre tout seul

Bon c'est parti!

Note: j'ai la version anglaise de Photoshop donc quelques termes risquent de ne pas correspondre. J'aimerais que qqu'un les corrige si possibe.

Notes (bis): les images du tuto sont en 300 x 19 pixels et non pas en 350 x 19 pixels à cause d'une erreur de ma part. Mais le cheminement est exactement le même donc il ne devrait pas y avoir de problème.

1e étape: alors il faut créer une nouvelle image de dimension 350 x 19 pixels. Je crois que c'est une taille standard, la plus répandue en fait. Vous n'avez pas besoin de changer les autres options.

2e étape: maintenant il faut choisir le logo que vous voulez utiliser. Prenons ici le logo de l'Inter Milan (vous pouvez trouver des supers logos ici http://www.hqfl.dk/ ). Là c'est facile, il est déjà découpé. Si vous le prenez sur ce site c'est un fichier .ai. Ouvrez-le avec photoshop, une fenêtre s'affichera pour demander la taille. Ne changez rien pour l'instant et cliquez sur OK. Puis l'image s'affichera et le mieux est d'aller dans Image => Image Size (Taille de l'image) ou appuyer sur Alt + Ctrl + I. Ensuite changez la taille de l'image et mettez la hauteur à 100 pixels. Ensuite sélectionnez tout et copier l'image réduite de l'Inter. Puis vous la collez dans la userbar. Bien sûr le logo ne rentre pas mais c'est justement l'idée de la userbar: il faut que ça dépasse. Logiquement vous obtenez ceci:

3e étape: le fond. On va mettre un dégradé de haut en bas des couleurs dominantes (ou de gauche à droite comme vous voulez). Là on va prendre le noir et le bleu. Utilisez l'outil pour choisir les couleurs directement sur l'image. Prenez donc le noir et le bleu.

4e étape: le dégradé. Donc on a pris les couleurs. Maintenant créons un nouveau calque (Shift + Ctrl + N) et faites en sorte que ce calque soit en dessous du premier. Appelons ce calque "fond". Avec les couleurs noir et bleu on va faire un dégradé. Prenez l'outil dégradé . Puis cliquez en haut de la bannière et restez appuyé en allant jusqu'en bas de la bannière. Puis relâchez et vous obtenez ceci:

5e étape: la police d'écriture. La plus courante est la Visitor TT1 (BRK) dispo ici: http://www.webpagepublicity.com/free-fonts...TT1%20-BRK-.ttf Arpès l'avoir téléchargée vous la placez dans le dossier C\:Windows\Polices ou C:\Windows\Fonts. Puis cliquez deux fois dessus pour qu'elle s'active.

6e étape: ensuite revenez dans photoshop et cliquez sur l'outil Texte: . Puis cliquez environ aux 3/4 sur la droite de la bannière et tapez: "Inter Fan". Il faut que la taille soit à 10 et que l'anti-aliasing soit désactivé (par défaut). Vous obtenez:

7e étape: l'effet de lumière. D'abord mettez créez un nouveau calque appelée "lumière" et que vous mettez au-dessus de toutes les autres. Prenez l'outil d'ellipse et dessinez un grand cercle en démarrant tout en haut à gauche de la bannière et pour terminer tout en bas à droite. Puis appuyez sur la touche "haut" plusieurs fois jusqu'à ce qu'on ne voit plus que la moitié du cercle:

8e étape: on va faire un dégradé à nouveau sur ce demi-cercle. Prenez l'outil dégradé et choisissez le dégradé "blanc vers transparent". Partez d'en haut de la bannière et descendez tout droit jusqu'au cercle. Vous obtenez:

9e étape: la bordure. Tout d'abord créez un nouveau calque qu'on va appeler "bordure" et que vous mettrez au-dessus de toutes les autres. Ensuite sélectionnez tout (Ctrl + A), et allez dans Edition => Bordure (je ne sais pas comment ça s'apelle en français il faudrait le rectifier si besoin). Puis mettez les options suivantes:


10e étape: vous pouvez ajouter un effet tv en diagonale. D'abord créez une nouvelle image en 3x3 pixels. Zoomez totalement. Prenez le crayon et dessinez la diagonale en noir. . Puis allez dans Edition => Definir modèle (là encore en anglais c'est pattern mais en français j'sais pas). Sauvegardez sous le nom "diag".

11e étape: revenez à votre userbar et créez un nouveau calque appelée "diagonale"(Ctrl + Shift + N). Mettez la en 3e position derrière "bordure" et "lumiere". Prenez l'outil de pot de peinture et choisissez "Modèle" comme mode de remplissage. Puis choisissez le modèle "diag" que l'on vient de créer et remplissez l'image. Vous obtenez:

12e étape: voilà vous avez logiquement comme ordre de calques: bordure, lumiere, diagonale, le texte (inter fan) et le fond en dégradé. Maintenant sauvegardez votre userbar en .psd pour pouvoir l'utiliser ultérieurement et sauvegardez une copie pour le web (Alt + Shift + Ctrl + S) en .gif pour pouvoir la montrer à tout le monde!
PS: je suis en train d'écrire le tuto mais j'ai déjà envoyé pour pas perdre ce que j'ai écrit

Version 300 x 19 px:



Version 350 x 19 px:

Courage bomby

J'en ferai un sur monaco comme j'ai pas trouver de logo de gta san andreas. B)

Qu'en pensez-vous?

Je vais le tester de suite !

A l'aide pour les couleurs du degradé jai avec loutil pipette jai choisis les 2 couleurs dominantes, mais lorsque je fais mon dégrader ce ne sont pas ces couleurs qui sont utilisé.

En fait après avoir choisi l'outil dégradé faut que tu cliques sur le menu juste à côté:
Là faut que tu choisisses le premiere: de noir vers bleu (ou l'inverse).

Voila ce que j'ai fait en 10-15min :


Je suis un pro graphiste mais plutot pour les vidéo
J'ai pas sue faire la bordure ni les couches car je ne sais pas faire et ce n'est pas expliquer.
Bravo boomby pour ton super tuto et merci.

De rien tu sais je l'ai fait ne pensant que ceux qui le lisent savent utiliser un peu photoshop. Je rajouterai peut-être quelques trucs et au pire tu me donnes les images je t'en fais une de l'ASM.

Pourquoi la mienne est moche c'est sa.
C'est que j'utilise très rarement photoshop.

Je vais en faire une sur la Xbox:p

Quand tu pales de couches tu veux parler de calque nan ?

Bah ouai parce que couche j'ai pas trouver.

Ouais ben justement si tu pouvais me dire tous les mots qui apparaissent dans photoshop version française parce que je les connais pas.

Désolé j'ai fait une erreur: la taille standard est de 350 x 19 pixels, et pas 300 x 19 donc je l'ai corrigé là.

Merci pour ce Tuto j'avais pensé à le faire mais pas le courage
En tout cas tu as bien mérité ton poste car je t'ai mis Modo et je vois le boulot que tu fournies ça donne raison B)

Bonne chance !

boomy t'assure je l'utilise de suite

tu va toujours sur dinoparc ?

Non j'ai arrêté au bout d'une journée!

c'est vrai que c'est con c le 2eme fois que j'y vais je voulais avoir ton avis pour arreter pcq c vraiment con

En plus c'est toi qui m'a refilé le lien!

tres bon tuto , jai jamais encore essayer de faire des usebar mais je vais mis mettre

j'arrive pas a ouvrir un fichier .ai avec photofiltre c'est grave docteur ?

Ah moi j'utilise Photoshop donc peut-être que c'est pas compatible avec Photofiltre. Mais au pire tu prends un logo qui est en gif ou jpg ya pas de problème.

oui mais c'étais au cas ou...
merci qd meme

magnifique tuto
j'adore carément, j'vais pas tarder à me faire une signature est un avatar avec ca
merci

qelqu'un peut ù'aider je trove pas la couleur transparente

Ya pas de couleur transparente dans photoshop. Mais si tu parles du dégradé il faut que tu cliques juste à côté de l'icône, en haut et là tu pourras choisir un dégradé de ta couleur principale (exemple: bleu) et qui va vers le transparent.

ok

Excellent ce tuto ...
Mais j'arrive pas a faire le cercle transparent ! Qqn peut m'aider please ??

Qu'est-ce que tu comprends pas?

En fais j'arrive plus a partir de l'étape 7
Jsuis meme pas sur que j'utilise le bon ellypse

Ben faut d'abord que tu dessines un cercle avec l'outil situé tout en haut à gauche. Si tu vois un rectangle, ben tu restes cliqué sur l'outil et tu pourras choisir le cercle. Ensuite tu dessines un cercle totalement allongé, puis après t'appuies sur la touche "haut" de ton clavier pour qu'il apparaisse comme sur l'image de l'étape 7. Ensuite tu sélectionnes l'outil de dégradé, en choisissant de blanc à transparent (où l'inverse je sais plus lol) et tu fais un dégradé comme expliqué.

jarrive pas !!! C'est pas une ellipse ki ce fais c un cercle & donc ca entoure mon dessin !! En plus sur ton image l'ellipse est en pointillé alors ke moi le trai est plein !!!
Tu sais comment je peux faire ou pas ??
Si qqn sait repondez svp

Tu choisis le mauvais outil. Il faut un outil de sélection, et au pire avec ton cercle tu fais clic droit => définir sélection ou un truc dans le genre quoi.

aaaa ca yest jarrive a faire l'ellipse merci
Mais tu di de metre u blanc vers transparent mais tu fais ca ou ?? ( dsl de tembéter )

Lis le message #24.

Merci boomy bx
Voila voici ma premiere création graphique !!! Vous la trouver comment ???

Pas mal mais quelques modifications:
- monte le texte un peu et mets un effet d'ombre
- agrandit le logo
- change les couleurs du fond pour que ressorte davantage le logo
- ajoute une jolie bordure

Mais dans l'ensemble c'est bien.

oki bon c'est normal cT ma premiere création !! Jvais essayé de le refaire !!!

Bravo pour le tuto !! regarder ma premiere tentative



Quesque vous en dites??

Excellent man !!!

Merci pour le tuto !

Mais je bloque au niveau de la police, j'ai adobe photoshop CS et je trouve ni le ficher fonts ni le fichier police pour mettre la police appropriée

Help please

Windows/fonts

il peut se trouver dans C:/ (par défaut) mais c'est sur le disque syteme

j'y suis arrivé merci !

mais là je me rends fou avec les transparents! je trouve pas le screen que boomy bx a mis, moi j'en ai que 4 de dégradé dont un avec des arcs en ciel

Il faut que tu restes avec ton curseur dessus et ça te diras de quelle couleur à quelle couleur va le dégradé. Le premier dégradé dispo c'est toujours de ta 1e couleur vers la 2e, et le deuxième dégradé dispo (dans la liste aussi), c'est de la 1e couleur vers transparent.

Voila ce que ca donne sachant que les diagonales j''y suis pas arrivé!

Elle fait bien sans diag.
Tous les sites vont s'y mettre lol

Premiers essais réalisés à partir du tuto, mon logiciel ne permet pas de faire l'effet de lumière

Super Tuto voilà ce que j'ai pu faire vite fait :

Voici ce que j'ai fais : c'est du plus ancien au plus récent !!

& c'est écrit manager car c'est pour mon forum !!

Bien
Mais pourquoi ne pas avoir laissé la taille normale
20px en hauteur...

moi je peux pas il faut installer un truck en mdr