32
Créer un logo Glossy pour son site Internet
Voici un petit tutorial pour créer un logo pour son site internet, l’effet glossy gélatine est assez sympa et pourra passer sur tous les sites Web2.0 !
- Fichier Source PSD : tutorial 207
- clic pour télécharger le fichier source Photoshop utilisé dans ce tutorial
ETAPE 1
Je crée un nouveau document, et avec l’outil texte je crée mon titre en plein milieu.
ETAPE 2
Je partitionne mon titre en deux, et je place chaque partie sur un calque.
- J’ai normalement mon calque de fond,
- un calque avec la première partie de mon titre,
- et un troisième calque avec la seconde partie de mon titre.
Sur la seconde partie, je place quelques styles de calques : Une bordure, une incrustation de dégradé ainsi qu’une ombre portée.
ETAPE 3
J’ajoute les mêmes styles de calques à la seconde partie de mon titre.
ETAPE 4
Avec l’outil des formes personnalisées, je crée une ellipse sur le dessus de mon titre.
ETAPE 5
Je pixélise mon ellipse, puis je récupère la sélection de mon titre (partie 1 plus partie 2*), je vais la contracter de 1 pixel (sélection > modifier > contracter), enfin j’intervertis puis je supprime.
ETAPE 6
J’utilise un masque de fusion (calque > masque de fusion > tout faire apparaitre) pour camoufler légèrement le haut de mon reflet.
ETAPE 7
Je crée un nouveau calque que je place sous mon titre. Avec l’outil sélection polygonale je crée une forme comme ci-dessous.
ETAPE 8
J’ajoute mon slogan sur cette petite forme.
ETAPE 9
Je supprime l’ombre portée sur mon titre. En dessous de tous les autres je crée un nouveau calque. Je récupéré la sélection de mon titre et de ma forme* et je remplis le tout de blanc. C’est sur cette nouvelle forme que j’applique une ombre portée.
*Je rappelle que pour récupérer la sélection sur plusieurs formes je fais Ctrl + Clic sur mon premier calque puis Ctrl + Shift + Clic sur les autres.
Bonne chance à vous pour réaliser votre composition !
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 !
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 42 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.
-
7 septembre 2007 16:27, par Valck
Un très bon tuto encore une fois ! A remarquer quand même que je trouve que tu expliques bien mieux pour ce tuto que sur la plupart des autres (non pas qu’ils sont mal expliqués ^^) mais tu montres plus d’images et ça c’est mieux ! En plus tu utilises les bons termes (comme par exemple Intervertir au lieu de Inverser
Répondre
).
Merci encore ! Tu choisis de très belles couleurs, c’est très beau, bravo !
Valck-
7 septembre 2007 16:30, par Valck
Juste une petite suggestion : pourrais-tu afficher la police que tu utilises à chaque fois car ce sont des polices je trouve très bien choisies et ça serait intéressant de pouvoir les retrouver ! Merci !!
Répondre-
7 septembre 2007 16:58, par Wonka
Normalement pour retrouver la police tu télécharges le fichier PSD puis quand tu l’ouvres tu devrais pouvoir la lire. Photoshop te dit Vous n’avez pas la police xxxx voulez vous utilisez une de remplacement ...
Enfin c’est un message du genre.
Mais pour répondre à ta question j’ai utilisé la police : Folkblack.
Bonne continuation.
Répondre-
7 septembre 2007 17:41
Merci de ta réponse, je ne l’avais pas ! Mais quand tu ouvres le .PSD sous photoshop et que tu n’as pas la police, ça ne t’en donnes pas le nom
Répondre
-
-
-
-
-
13 septembre 2007 09:20, par Wonka
Si tu rencontres des problèmes avec la création de reflet je te conseil de lire ce tutorial, tout y est expliqué : http://www.wks.fr/Mille-et-une-facon-de-creer-un.html
Répondre
-
-
21 septembre 2007 21:18
salut j’arrive pas a faire le truc blanc sur les lettrees etapes 5 pourai tu m’aider s’il te plait ? avec plus de detaille
Répondre-
23 septembre 2007 13:41, par Wonka
- Tu prends l’outil des formes personnalisées.
- Puis tu crées par dessus le texte une ellipse blanche.
- Ensuite tu recuperes la selection du texte en faisait ctrl+ clic sur le calque du texte.
- Tu clique droit pour pixeliser l’éllipse
- Ensuite tu modifie la sélection en la contractant de 2 pixels, et enfin tu intervertis et tu supprimes.
Bonne chance
Répondre
-
-
27 septembre 2007 15:25, par Mélanie
C’est vraiment génial !!! moi qui n’ai pas encore une pro de photoshop...tous tes conseils sont canons !!!
Merci merci !!!!
Répondre-
27 septembre 2007 15:35, par Wonka
Je suis bien content de pouvoir t’aider
Répondre
Bonne chance pour la suite de ton apprentissage de toshop !
-
-
12 octobre 2007 21:41
Bonsoir, super tutorial mais idem pour moi après avoir placé l’elipse sur le texte, je fait un click droit dessus pour la pixeliser et ensuite je sélectionne le texte + l’élipse, je vais dans le menu sélection mais le sous-menu « modifier » est grisé.
Merci de ton aide
Répondre -
13 novembre 2007 20:28, par toto
Bonjour à vous,
super tuto mais je suis débutant et je bloque complétement !
Je voudrais savoir précisement comment faire pour placer chaque partie de mon titre sur un calque ! Pour vous c’est super facile mais moi ... lol !
Merci beaucoup d’avance.
Répondre-
16 novembre 2007 14:03, par Wonka
Tu sélectionne la partie gauche par exemple avec l’outil sélection (m) puis tu fait ctrl + x pour couper les pixels puis ctrl + v pour coller les pixels automatiquement sur un nouveau calque
Bonne chance !
Répondre
-
-
25 janvier 2008 16:56, par Brisqo
Super le tuto, moi qui ne suis pas adepte de Photoshop ni graphiste, j’ai réussi à faire l’effet pourtant pas si detaillé que ça mais au moins ça laisse une part d’imagination
Répondre -
-
8 avril 2008 21:01, par Wonka
clic droit sur le calque (dans la fenètre des calques) de ton ellipse puis pixeliser le calque.
Voila
Répondre bonne chance !
-
-
10 avril 2008 13:01, par MØG
Salut,
très beau rendu, simple mais efficace, mais j’ai pas trouvé la police Folkblack sur Dafont :’( Tu l’as trouvé ou ? merci
Répondre-
13 avril 2008 05:31, par NewbiZ
Eh si elle est sur dafont, mais il faut chercher
Répondre
http://www.dafont.com/fr/folks.font
La font Folks, avec variante Black
-
-
2 mai 2008 18:25, par MØG
Voila mon resultat :D j’attends vos com’
Merci à NewbiZ pour avoir trouvé la police Folkblack sur Dafont !
Répondre-
2 mai 2008 21:43, par Wonka
Moi je trouve que c’est vraiment pas mal, très beau logo ! Et il y a un site qui vas avec ou non ?
Répondre-
3 mai 2008 18:00, par MØG
Merci du compliment
Répondre
Oui exact, il y a un site qui vas avec je suis en train de le fignoler mais il reste très basique.
-
-
-
19 février 2009 09:12, par walid
salut ! moi jarrive pa a faire létape 5 si vous pouvez m expliquer en plus des détail plz , ca sera cool NB : j utilise Photoshop depui 3 jours ^^ merci d’avance
Répondre-
19 février 2009 09:34, par Wonka
En fait c’est simple il faut créer un grand rond blanc au dessus du texte (ellipse sélection + pot de peinture) puis supprimer les pixels qui se trouve en dehors des lettres, donc je récupére la sélection des lettres (le contour en sélection) en faisant ctrl + clic sur le calque texte. Et enfin je vais dans le menu sélection > intervertir et sur le calque du rond blanc j’appuie sur suppr. ce qui supprime les pixels en trop.
Répondre-
8 mars 2009 22:14, par maxime
Bonjour, faut il créer un nouveau calque pour faire l’ellipse car je mets quand je fais l’ellipse sur le même calque que le texte et que je veux le mettre en blanc ensuite il ne veut rien savoir ? Et quand je créer un nouveau calque et que je dessine l’ellipse en blanc, je ne peux pas le pixeliser.
Peux-tu m’éclairer par hasard ? Sinon très bon boulot pour ton site. Merci
Répondre
-
-
-
1er avril 2009 04:25
impossible de faire-sélection modification-puis contracter après avoir sélectionné les calques : encore un tuto pour les chevilles enflées... dommage
Répondre -
1er avril 2009 06:09
ca y est ! j’ai enfin compris ! il faut créer un nouveau masque et ensuite selectionner ellipse de selection...et selectionner les calques à droite ( carrés) avec control puis shift super merci
Répondre -
25 juillet 2009 19:56, par ethan68
Bonjour
Je suis archi nouveau :) mais déja passionné par votre travail. Fé-li-ci-ta-tions tout est superbe.
J’ai une question de néophyte qui a un rapport avec le glossy mais pas forcément avec ce tutorial :
Lorsqu on envoie par sms une photo depuis un iphone, on a un thumbnail qui apparait avec la photo affublée d un effet bouton glossy que je trouve superbe.
Quelle manipulation doit on faire pour ce résultat ?
Merci d’avance
Répondre-
26 juillet 2009 00:15, par Wonka
Sous photoshop il suffit d’utiliser les techniques expliqués ici, notamment avec le masque de fusion
Répondre
-
-
20 décembre 2009 21:47, par Dod
Bonsoir,
Je trouve votre logo très sympathique. J’essaie de le reproduire mais je rencontre un problème au niveau de l’étape 6. J’applique un masque de fusion comme vous l’indiquez mais rien ne se passe. Y a t’il une manipulation à faire au niveau du masque ? J’utilise photoshop cs4 Merci pour votre réponse
Répondre-
24 décembre 2009 16:57, par wonka
Bien sur le masque de fusion ne sert à rien si vous n’appliquez aucune modification sur celui ci. Le masque de fusion permet de cacher et d’afficher certains éléments d’un calque. Les parties en noir seront cachés, les parties en blancs seront affichés, avec toutes les nuances entres les deux. Bonne continuation pour la suite.
Répondre
-
-
10 novembre 2010 10:24, par Loxor
Bonjour, j’ai bien suivis les instructions sauf que il met impossible de faire la manipe sélection>modifier>contracter car le menu n’est pas actif pourtant j’ai bien sélectionner tout mes calques comment faire ? merci.
Répondre
