Créer un logo glossy web 2.0 pour son site internet

Voici un tutorial pour créer un logo glossy très web 2.0. J’utilise des couleurs que l’on retrouve tout particulièrement dans ce genre de sites. Les étapes ne sont pas bien compliquées mais nécessites cependant des bases et une maitrise de certains outils (comme le masque de fusion).

Photoshop - 599.5 ko
Fichier PSD tutorial 217 - Logo version 1
Logo version 1 : Télécharger le fichier source Photoshop
Photoshop - 667.5 ko
Fichier PSD tutorial 217 - Logo version 2
Logo version 2 : Télécharger le fichier source Photoshop

ETAPE 1

Je crée un nouveau document (CTRL + n), puis avec l’outil texte je crée mon titre. Je joue avec les configurations des caractères pour créer une sorte d’escalier avec mes lettres.

ETAPE 2

Je pixélise mon texte (je nomme le calque texte), puis j’applique trois styles de calques : une ombre portée, une incrustation de dégradés et enfin une bordure.

Vous pourrez retrouver la configuration des styles du fichier PSD disponible en haut de cette page.

ETAPE 3

Je crée un nouveau calque (que je nomme reflet) par-dessus les autres, puis je crée une ellipse de sélection très large, je la remplis de blanc. Je récupère la sélection de mon texte, j’intervertis cette sélection puis sur le calque reflet j’appuie sur suppr. pour supprimer les pixels en dehors du texte.

ETAPE 4

Je crée trois nouveaux calques (barre 1, barre 2 et barre 3) sur lesquels je crée des barres de plus en plus grandes. Pour le style il suffit de récupérer le style sur le calque texte (clic droit sur le calque texte puis copier le style de calque > clic droit sur le calque barre 1 > coller le style de calque).

Je change cependant les dégradés par du orange du vert (je laisse une barre bleue).

ETAPE 5

Sur chaque barre je crée un reflet comme pour le texte.

ETAPE 6

J’applique mon titre ; mon logo est enfin créé !

Jolie non ?

Voici une petite variante :

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

Questions et commentaires, Il y a 19 messages de forum.

Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

  • 6 novembre 2007 13:59, par Vulkanik

    C’est très jolie ! je mis met tout de suite à faire le mien !

    Répondre

    • 6 novembre 2007 14:59, par Clemens

      Trop beau !

      Répondre

    • 25 mai 2008 23:07

      Merci beaucoup pour tous ces tutos !! tu es vraiment un chef ! allez hop, ajouté en favoris !

      Bonne semaine à toi :)

      Répondre

  • 6 novembre 2007 15:08, par Fl.oz

    Quelle est la police utilisée ?

    Répondre

  • 6 novembre 2007 15:52, par Edilor

    C’est tres joli, je vais me mettre a faire le mien :D est ce qu’il serait possible que tu indique directement dans les tutos les configurations des styles, des degradés etc... ? C’est un peu la galere de devoir telecharger le Psd, ensuite de retrouver le bon calque... Si tu pouvait le faire pour les prochains tutos ce serait tres sympa ! Merci d’avance ;)

    Répondre

  • 9 novembre 2007 08:59, par tim

    excellent merci

    Répondre

  • 21 novembre 2007 15:13

    Je n’arrive pas à faire l’effet escalier sur le texte, enfin, c’est plutôt que je ne trouve pas la commande, se trouve-t-elle dans la fenêtre des caractères ? Ou plutot autre part ?

    Ld

    Répondre

    • 23 novembre 2007 09:13

      Oui tu trouveras les options necessaires à cet effet dans la fenètre des caractères !

      Répondre

  • 8 décembre 2007 00:58, par yo

    Salut,

    joli travail, cependant j’ emet une remarque au passage : sans screens des manips réalisées c’est irréalisable pour les les rookies....

    Répondre

  • 18 décembre 2007 20:18, par Stéphane Barlier

    Là je ne peux plus rester sans rien dire ... ton travail est à tomber et ta façon de l’expliquer claire. Pour ça merci.

    Tous tes infos repoussent plus loin les limites de la créa... J’ai quand même une petite question. Comment changer (si c’est possible) une couleur par une autre, tout en gardant les différentes zones de lumière ou d’ombre ?

    Encore merci et voila wonka en tête de liste dans mes préférences.

    Répondre

    • 19 décembre 2007 14:22, par Wonka

      Il faut changer la couleur dans le style de calque : calque > style de calque > incrustation de couleur ou incrustation de dégradé.

      Ceci te permet de changer la couleur d’un élèments sans interferer sur les styles de calques existant sur celui ci ;)

      Bonne chance.

      Répondre

  • 21 janvier 2008 18:02, par Johanna

    Bonjour, moi je ne trouve pas comment on fait les escalier, jai cherché cherché cherché et j’ai toujours pas trouver, quelqu’un peut m’expliquer s’il vous plaît ?

    Répondre

    • 10 juillet 2008 17:50, par Chou

      j’imagine que tu dois jouer avec ton interlignage... tu écris tes lettres sur plusieurs lignes différentes, tu modifie l’interlignage (options de caractère > les deux A l’un sur l’autre) et ensuite, tu recalles le tout...

      Répondre

  • 21 juillet 2009 16:38, par Votre pseudonyme

    quelqu’un peut-il m’expliquer les manips pour ceci SVP :

    Je récupère la sélection de mon texte, j’intervertis cette sélection puis sur le calque reflet j’appuie sur suppr. pour supprimer les pixels en dehors du texte.

    Répondre

  • 27 juillet 2009 14:49, par Tim

    Bonjour. Très bien, par contre, il n’y a aucune explication concernant les masques de fusion, ce qui fait que les débutants se retrouvent avec une ellipse blanche par dessus le logo. Cordialement.

    Répondre

  • 21 août 2009 20:14, par Slam

    Merci pour ce tuto encore une fois ! Par contre, le principe de donner les fichiers sources (.psd), ça encourage plutôt à changer bêtement ce qu’il y a de marqué sur ta compo, et donc, à oublier toute touche personnelle :/ Mais bon, ça n’est que mon avis ! Sinon, très bon tuto ! Tchou (k)

    Répondre

  • 31 janvier 2011 14:32, par Seblasteur

    Bonjour à tous, merci pour ce tuto. par contre j’ai un souci avec l’étape 3 . "Je crée un nouveau calque (que je nomme reflet) par-dessus les autres, puis je crée une ellipse de sélection très large, je la remplis de blanc. jusque la tous va bien. puis on me demande de récupèré la sélection de mon texte et d’intervertir cette sélection. c’est à dire ? éffectivement je suis débutant et vraiment j’ai du mal à comprendre cette manipulation. si on pouvez me donner un peu plus de détail se serais gentil. merci d’avance

    Répondre

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.