32
Créer un icône Facebook Glossy
Dans ce tutoriel , vous allez apprendre à créer vous même l’icône Facebook dite « Glossy » , ce tutoriel est assez facile , il requiert juste un tout petit peu de pratique avec la plume. 
Bonjour , bienvenue dans ce tutoriel , nous allons ensemble apprendre à créer un icône Facebook glossy de toutes les tailles , c’est assez rapide ... Qui aime me suive.
Au final nous obtiendrons ceci :
Mais avant ,il va falloir suivre plusieurs étapes ... Alors on commence tout de suite en créant un carré à bords ronds. (Mettez Contour Progressif : 5px ; c’est suivant la taille de votre image, pour ma part c’est en taille 600x600) :
- Début du projet
- Le carré noir
Puis appliquez les effets suivants :
- Les effets dans le carré
- La lueur ...
Couleur de la lueur : 164095
- Le dégradé du carré
- Le dégradé du carré ...
Le dégradé : 0d0d48 vers 708fd0
- Les contours du carré
- Contours du carré ...
Le contour : 16417c
Nous obtenons ceci :
- Le résultat du carré
- Résultat du carré ...
Maintenant nous allons nous occuper de la partie à la plume ... Pour cela prenez le logo Facebook ... et ne gardez que le f , comme nous avons besoin de dimensions plus grandes nous allons le retracer à la plume , donc voilà le résultat :
- La plume de Facebook
- Utilisation de l’outil plume pour le F de facebook
Maintenant copiez le tracé vers notre création en cours de développement ... Et faites Ctrl + T pour l’agrandir et le positionner à la même place que le vrai logo :
- Placement du logo
- Placement du tracé ...
Ensuite créez un nouveau calque puis , sélectionnez la couleur blanche dans votre palette , sélectionnez l’outil plume puis un clic droit : Fond du tracé vérifiez que la couleur du premier plan est bien sélectionnée ... Et vous voilà avec votre logo presque terminé (supprimez le tracé avec : Suppr) :
- Rendu fond du tracé
- Fond du tracé blanc ...
Nous allons maintenant appliquer les effets pour un peu plus de style ! Donc sélectionnez la lettre et puis réglez les effets :
- Ombre interne du F
- On applique une ombre interne au F de facebook.
L’ombre interne ...
- Lueur interne du F
- Lueur interne du F de facebook.
Et la lueur interne ...
Voilà , vous devriez arriver à ce résultat là (ne vous occupez pas de la fenêtre lol ^^) :
- Résultat des effets du F
- Résultats des effets du F.
Alors maintenant ... Voilà l’effet glossy ... Tout simple à réaliser , je ne mettrai pas d’images ... Commencez d’abord par créer un nouveau calque , puis faites Ctrl Clic sur le carré du début ... Ensuite il ne vous reste plus qu’à faire : sélection > modifier > contracter > 2px , et remplissez de blanc la sélection ... Puis déplacez la sélection de 1px à droite puis 1 en bas et appuyez sur Suppr pour enlever l’intérieur blanc et ne garder qu’un contour tout fin :D.
Pour terminer vous allez créer un reflet sur toute l’icône. Vous recommencez donc comme précédemment. Vous créez un nouveau calque, puis faites Ctrl Clic sur la base de l’icône pour récupérer votre sélection. Enfin, faites menu sélection > modifier > contracter > 2px. Remplissez de blanc la sélection. Avec l’outil sélection en ellipse créez un rond sur l’icône puis appuyez sur Suppr. (Manip assez difficile du premier coup , « dézoomez » de préférence pour faire un rond correct).
Pour presque terminer, ajoutez un masque de fusion et utilisez un dégradé de blanc vers noir pour cacher le bas.
Puis ... pour terminer , créez un calque et vous allez ajouter un carré en faisant une sélection et en la remplissant de blanc (attention à bien remettre à zéro les contours progressifs). Descendez le calque en dessous du f , et baissez l’opacité ...
OMG ! C’est déjà fini , vous vous rendez compte ... ? C’était pas très compliqué finalement , à part la plume et puis cette fichue sélection récalcitrante ... Et puis , si ça peut vous amuser , changez les couleurs ... Épatez vos amis en vous prenant pour le créateur de Facebook alias Mark Zuckerberg. :P
Allez, à une prochaine !
Article publié par Alexcouter
Vous aimez cet article? Partagez le !
Salut , je suis Alexcouter , je me considère sans prétention comme Graphiste Autodidacte , j’apprends sur internet tout ce qu’il y a et surtout toutes les astuces de WKS ! Je rajoute juste : J’aime les panthères !
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 10 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.
-
31 juillet 2009 17:55, par Wonka
Et voila facebook qui débarque sur wks
Répondre voila un service que je n’utilise pas du tout ^^ un tuto qui plaira à tous les fans de facebook bien évidemment ! Merci Alexcouter 
-
31 juillet 2009 17:56, par Sypho
Bon tuto
Répondre
Mais pourquoi est-il dans la catégorie Concours Rapide ? :o-
-
31 juillet 2009 18:46, par Sypho
Bah je naviguais par hasard dans la catégorie Concours Rapides, et je vois les 2 tutos alors ... :o
Répondre
-
-
-
31 juillet 2009 20:54, par Kiwi
« on commence tout de suite en créant un carré à bords ronds. (Mettez Contour Progressif : 5px »
Il y a une erreur, il faut utiliser l’outil forme rectangle arrondi avec un angle radial de 5°.
(sinon avec l’outil rectangle de sélection ça fait un contour diffus)
Répondre -
31 juillet 2009 23:14, par Alexcouter
:O Quelle chance ! Merci Wonka !
Mais ... Kiwi ... Moi ça marchait comme ça pour les bords ... Je vais verifier ...
Encore merci.
Répondre -
1er août 2009 10:26, par Air’
Un joli tutorial, mes félicitations à Alexcouter.
J’ajoute une petite information : il semblerait que la typographie du logo Facebook (et par conséquent celle du « f » présenté ici) soit du Klavika Bold OT légèrement modifié. Vous pourrez la trouver ici : http://www.fontshop.com/fonts/singles/process_type_foundry/klavika_bold_ot/
Il s’agit d’un police commerciale et donc payante. Voili voilà
Répondre -
2 août 2009 13:13, par Elodie
super merci.
Et bonne continuation pour votre site car je viens TOUT LES JOURS dans l’espoir de voir tout plein de nouveau tutorial
Répondre =) -
28 décembre 2009 00:53, par Admin.Necro
Bon tutos, Facile a faire mais avec un minimum de connaissance ! exemple moi il y a deux semaines j’aurai dit : < Mais F*ck Fait Chier ; comment On fait pour mettre le f dans le document >
Merci
Cordialement Admin.Necro
Répondre -
14 novembre 2010 21:23, par Votre pseudonyme
Bonsoir à tous, je réouvre un vieux post apparemment, mais la je suis comme qui dirait perdu ! j’ai fait toute la première partie et tout ce passe bien, mais c’est arrivé a l’effet glossy que je bloque. Après avoir créée un nouveau calque, j’appui sur ctrl et sélectionne le carré du début sauf que rien ne se passe ! A l’aide, j’en ai besoin pour mon site !
Je précise au passage que j’ai photoshop CS5 sur mac
Merci d’avance et bonne soirée
Répondre
