Tuto UserBar
Une UserBar personnalisée ça vous tente?
Il s’agit de toutes ces images au format 350×19 pixels, ou encore au format mini 175×19. C’est en effet la nouvelle mode, on en voit de plus en plus fleurir dans les signatures de forumeurs, la vague des mini-pics est passée :]
Une UserBar est une barre graphique qui se place généralement dans une signature pour indiquer par exemple qu’on joue à cs, qu’on aime les nouilles, qu’on utilise une fourchette ou alors qu’on aime le Blog de Nico :p
Format Standard :
Format Mini :
Soyons clairs, ce tuto est très facile !
Il est donc par conséquent plutôt indiqué pour les personnes débutant sous Photoshop.
Ensuite, à l’aide du crayon de taille 1px et de couleur noire, dessinez la diagonale comme ceci :
Enregistrez ce motif en allant dans Edition > Utiliser comme motif. Vous pouvez maintenant fermer ce document.
Vous vous retrouvez donc avec votre document vierge, avec un fond transparent. Renommez le calque de départ en Stries (enfin appelez le comme vous voulez mais c’est plus pratique si on l’appelle tous pareil !). Allez dans le menu Edition > Remplir. Vous l’aurez sans doute deviné, dans le menu déroulant il faut surligner Avec : Motif. Ensuite, il vous suffit de sélectionner le motif que vous avez créé en étape 1.
Vous vous retrouvez désormais avec ceci :
On va maintenant créer un second calque (Maj + Ctrl + n), que l’on va placer tout au dessus. On appellera ce calque Contours.
Il n’y en a pas déjà des contours ?
Non, les contours que vous voyez sont ajoutés par Photoshop, mais n’apparaissent pas lors de l’exportation de l’image.
Créer des contours est extrêmement simple ! Une fois que vous êtes sur le calque nouvellement créé, utilisez le raccourci Ctrl + A pour sélectionner l’ensemble de la zone de travail. Allez ensuite dans le menu Edition > Contours, et entrez les valeurs ci-dessous :
Si vous avez bien travaillé vous devriez avoir quelque chose qui ressemble à ça :
Passons maintenant à l’étape suivante qui est la plus difficile, et fait appel à votre créativité
Une des étapes des plus cruciales est de choisir les couleurs du dégradé ! Créez un nouveau calque appelé Fond, situé tout en bas. Il faut sélectionner l’outil Dégradé, et modifier les couleurs primaires et secondaires selon ses goûts, mais choisissez les en rapport avec le thème/le logo. Je ne peut pas faire du cas par cas, c’est à vous de voir ! Après selon les différences de couleurs entre votre image et votre dégradé il y a plusieurs techniques pour ‘marier’ les deux : utiliser un masque de fusion ( 
), faire ça à la main avec la gomme et l’outil doigts, à vous de voir !
Maintenant, on va ajouter un petit reflet à notre image. Créez donc un nouveau calque nommé Reflet, que vous placerez un peut où vous voulez en fonction de l’effet voulu, mais en général je le place juste après le calque Stries. Attrapez l’outil de sélection circulaire 
, et réalisez une selection telle que celle ci :
Remplissez la de blanc, modifiez son opacité et son mode de fusion afin d’obtenir l’effet souhaité
Tant qu’on y est, baissez si vous voulez l’opacité des stries. On approche de la fin, voici où on en est :
Pour l’écriture, la police d’écriture la plus courante et la plus adaptée est la Visitor TT1 (BRK) : Télécharger cette police. Une fois enregistrée, placez la dans le dossier C:\Windows\Fonts. Tapez votre texte en blanc, avec une taille de police de 10px et en veillant à désactiver l’anti-aliasing :
Si votre dégradé est dans des tons clairs, je vous conseille de lui appliquer un contour noir de 1px, en allant dans les option de fusion du calque.
Donc petit récapitulatif des calques, du premier au dernier :
- Contours
- Texte
- Stries
- Reflet
- Logo
- Fond
Cette liste est donnée à titre indicatif, vous pouvez modifier l’ordre des calques si vous recherchez un effet plus particulier.
Maintenant il ne vous reste qu’à enregistrer votre image, utilisez de préférence Enregistrer pour le web avec ces réglages :
Votre image ne pèse en moyenne qu’entre 3 et 7 ko 
Voici ce que j’obtient avec mon exemple :
Je vous laisse à vos réalisations !
Ce tuto était au départ prévu pour le Site du Zero, mais il s’est averé qu’il en existait déjà un en attente
Derniers commentaires