Badge Web 2.0

Bonjour, 
Grâce à ce tutorial, vous allez pouvoir vous créer vos propres badges avec le style Web 2.0 qui est bien connu du graphisme en ce moment. Et dont je suis sûr que vous en avez déjà vu au moins une fois sur un site web tellement il est répandu. Voici donc ce que vous allez faire :



Créer un nouveau calque de 400x400 pixel, vous pouvez prendre le fond que j'ai fais pour suivre ce tutorial.



Étape 1 - Outils et formes

Comme vous l'aurez remarqué, ces fameux badges sont en fait des étoiles avec un style qui est appelé Web 2.0 et qui est de plus en plus utilisé par les graphistes pour un meilleur rendu dans leurs créations. Vous devez vous demandé comment créer cette étoile, aucun outils de Photoshop n'a cette forme . Détrompez-vous vite car il y en a un même s'il faut lui apporter quelques modifications pour lui donne la forme d'une étoile.



Eh mais sa n'a pas la forme d'une étoile, c'est l'outil rectangle Attendez... on va apportez les fameuses modifications que vous devrez vous rappeler pour faire vos badges facilement. Dans la barre du haut des outils apportent ces modifications



Créez un nouveau calque et normalement, si vous avez bien respecté mes paramètres, vous devriez arriver à faire une étoile comme la mienne, je vous donne juste la couleur que j'ai utilisé pour la faire #c1dae0.



Étape 2 - Première option

La première option consiste à faire une ombre portée, c'est pas trop difficile je pense. Faites un clic droit sur le calque de l'étoile, et faites Option de fusion. Une fois dans les options de fusions du calque, allez dans l'option Ombre portée et appliquez ces paramètres.
Attention ! La taille de l'ombre varie entre 3 et 5 selon la grandeur de votre étoile.



Votre étoile aura donc une ombre ou une lueur autour d'elle, comme ceci



Etape 3 - Seconde option

La seconde option sera très rapide, elle sert juste à ajouter un contour à votre étoile, toujours dans les options de fusion, allez dans Contours et faite un contour de 1px avec une couleur légèrement plus foncée que celle de votre étoile.



Vous devrez obtenir ceci :



Etape 4 - Troisième option

Cette troisième et dernière grande ligne droite va donner tous le style à votre étoile, et pas n'importe lequel puisque c'est le style Web 2.0, pas très difficile à réaliser non plus si vous suivez mes couleurs, ensuite si vous choisissez d'essayer d'autres couleurs faites attention à bien suivre les indications. Allez dans Incrustation en dégradé dans les options de fusions. Voici le dégradé à faire et aussi les paramètres à mettre :





Je vous donne les couleurs que j'ai utilisé dans mon dégradé en partant de la gauche vers la droite. Nous avons donc le #0e7398 vers le #147ea6 et le second dégradé du #1581a9 vers le #1da6ce

Si vous avez bien réussi votre dégradé, vous obtiendrez donc ceci :



Voilà vous avez réussi votre badge avec le style Web 2.0 !
Laissez libre cours à votre imagination pour personnaliser ce badge, et le faire avec d'autres couleurs qui pourraient convenir à votre site web. Merci de poster vos créations dans vos commentaires et si vous avez pas compris a un endroit, je vous répondrais  A bientôt pour d'autres tutoriaux sur Crea-Paradise

4 commentaires

lbeetls01	> Posté le : 15/07/2007 à 15h47 | Note :
Groupe : Admins	Super tuto ! Bravo !
myGot	> Posté le : 15/07/2007 à 22h01 | Note :
Groupe : Membres	Très bien fait, bravo. Mes Tutoriaux : Effet Néon | Effet 3D TREVISAN brice
rocawear	> Posté le : 16/07/2007 à 05h35 | Note :
Groupe : Membres	Eum j'avais preparer un tuto pour fait les etoiles Sinon voici ques j'avais fait il ya quelque mois => Ancien modérateur sur : Règlement - Tutoriaux - Ressources - Concours
Tidus	> Posté le : 16/07/2007 à 16h17 | Note : Aucune
Groupe : Membres	Pas mal  Il y a plein de style différent pour les badge chacun a sa manière de créer un effet  Ultimate Tidus