[boomy bx]

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:



Ce message a été modifié par boomy bx - Jan 2 2006, 00:19.

[Ads]

[Abd]

Courage bomby

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

[boomy bx]

Qu'en pensez-vous?

[Abd]

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é.

Ce message a été modifié par Abd - Dec 31 2005, 16:33.

[boomy bx]

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).

[Abd]

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.

[boomy bx]

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.

[Abd]

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

[lindis]

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

[Abd]

Bah ouai parce que couche j'ai pas trouver.

[boomy bx]

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

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à.

[Modibo]

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)

[Abd]

Bonne chance !

[jojo0194]

boomy t'assure je l'utilise de suite

tu va toujours sur dinoparc ?

[boomy bx]

boomy t'assure      je l'utilise de suite

tu va toujours sur dinoparc ?

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

[jojo0194]

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

[boomy bx]

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!

[Jeje546]

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

[Tibitaï]

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

[boomy bx]

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.

[Ads]