Inscrit le: 24 Mar 2012 Messages: 642 Localisation: Zenotopia. |
Il y a fort longtemps, un tuto apparu sur le forum concernant l'art des userbars... une mode retro aux années 2008, 2009, tirant un peu vers les années 2012... mais récemment, ce tutoriel réalisé par Hone Onna, s'est mis à souffrir des conséquences d'un forum vieillissant... les liens des images sont morts les uns après les autres. Résultat, ce tuto n'était plus du tout exploitable.
Alors, je profite de ma fournée de tuto 2024, pour vous proposer un remake à ma sauce de ce tuto. Mais au lieu de vous le proposer sur Photoshop, je vous le ferai sur sa version gratuite et par navigateur... Photopea.
Dans ce tuto, vous apprendrez à réaliser une simple userbar à mettre dans votre signature.
Télécharger le ".psd"
Niveau de difficulté : Débutant.
Nombre de calques : 3 (dont un quatrième -> fond transparent).
_______________
Introduction
Pour réaliser une userbar, vous aurez besoin de créer un nouveau projet sur Photopea (ou Photoshop). Quant au format, j'ai choisi une hauteur de 24 pixels pour une largeur de 200 pixels. Au-delà, ça ne sert pas à grand-chose. Le risque est de faire quelque chose de trop large ou trop haut.
En hauteur, vous pouvez sans problème pousser à 32 pixels, cela dit.
Vous n'aurez besoin que de 3 calques, un claque réservé à l'userbar, un autre pour le texte, puis un dernier pour y mettre une icône (facultatif) à droite, comme dans l'exemple ci-dessus.
Pour l'icône, je vous mets à disposition celle que j'ai utilisée, mais vous pouvez parfaitement en utiliser une autre.
Génération du fond de l'userbar
En utilisant de sélection en rectangle de photopea, tracer un rectangle à remplir en noir qui démarre à 3px du haut, de la gauche, qui se termine à 3px du bas et de la droite.
Ce qui devrait donner à peu près ceci :
Astuce : CTRL+Molette permet de bouger horizontalement votre plan de travail. ALT+Molette vous permet de zommer/dézoomer votre plan de travail, parfait quand vous avez besoin d'être précis.
Dans la liste des calques à droite, double-cliquez sur la miniature du rectangle noir que vous avez généré. Vous ouvrirez la fenêtre des effets... qui sera très utile pour construire votre userbar.
Le premier paramètre que vous allez définir sera "Incrustation de motif". Vous laisserez le mode en normal, vous choisirez celui qui vous inspire le mieux, dans mon cas, j'ai pris le motif lignes horizontal, puis, je l'ai incliné à 40 degrés à l'aide de la molette d'angle. C'est ce qui permet de faire cet effet rayures à l'ancienne sur l'userbar. Je l'ai aussi définis à une échelle de 168%, de sorte à ce que ça soit pas trop petit, mais pas trop gros non plus, concernant la largeur du pattern.
Une fois ça fait, vous allez créer un dégradé. Il suffit de cocher "Incrustation en dégradé". Mais vous allez avoir un petit souci, ça cachera votre opération effectuée précédemment... c'est temporaire. Définissez vos deux couleurs de dégradé en cliquand sur le dégradé dans les paramètres, puis validez. J'ai choisi un angle à 0 degrés, mais vous pouvez faire comme vous le sentez, ça déterminera juste la direction dans laquelle les deux couleurs sont en dégradés. Mettez le mode "Obscurcir", ça fera apparaître les rayures que vous avez définies lors de votre incrustation de motifs.
Création des contours
Le premier contour sera un contour extérieur de 1px en noir. Je vous recommande de mettre le mode en "Normal" même si sur le screen, c'est marqué "Incrustation". Et assurez-vous que "Overprint" soit décoché.
À côté de votre première option "contour" il y a un +. Cliquez-dessus pour créer un second contour. Celui-ci, définissez-le en intérieur, mode incrustation, définissez une opacité modifiable au besoin (j'ai mis à 54%). Cette fois activez l'Overprint (afin que l'incrustation de votre second contour passe par-dessus votre fond, et ne le remplace pas), faites un type de remplissage en Dégradé, choisissez soit : des couleurs en lien avec votre fond, soit un simple dégradé noir/blanc.
Si vous avez suivi toutes ces étapes, vous aurez ce résultat :
Ecrire le texte
La partie la plus simple, utilisez l'outil texte, choisissez une typo qui vous semble approprié, dans la barre supérieure (j'ai choisi "FjallaOne" en 20px) j'ai écrit "Userbar - photopea", j'ai essayé de center le texte verticalement à gauche de l'userbar.
Pour que ça soit tout en majuscule sans m'embêter, j'ai sélectionné le texte, et j'ai utilisé les paramètres avancés de textes pour le passer en gras et en majuscule :
Puis, dans les effets de calque du texte j'ai activé l'ombre portée comme ceci :
BONUS : L'icône
À droite de l'userbar j'ai incrusté une icône en mode de fusion "Lumière tamisée". Pour pas que le png dépasse l'userbar, je me suis juste assuré de le pixeliser (clique droit sur le calque -> Pixeliser), puis, j'ai découpé le render en me servant de l'outil sélection rectangle dessus, choisissant ce que je voulais retirer, puis j'ai appuyé sur la touche "suppr".
Et ainsi, j'ai obtenu l'userbar présenté en début de message. Et vous aussi, vous pouvez l'obtenir, maintenant !
À votre tour !
Pour conclure le tuto, j'invite les courageux à essayer l'exercice de faire une userbar, puis, de la publier en réponse à ce tuto en décrivant ce que vous avez fait différemment (et pourquoi).
Utilisez ce topic pour aussi poser vos questions, si un point ou plusieurs points vous semble pas clair.
À vos calques ! _________________
|