Au départ j’ai crée un pack d’icônes pour Wks.fr qui représente chaque logiciel de la suite Creative Adobe, chacune de ces icônes devait illustrer les rubriques de ce site : Photoshop, Illustrator, Flash etc…

Puis j’ai décidé de les partager, je me suis dit, autant être aimable jusqu’au bout et partager toutes les créations graphiques qui sortent du sudio Wks

Et puis en fin de compte, j’ai pris la décision d’aller plus loin en vous proposant un tutoriel de création de ces icônes ! Car oui, c’est bien beau de télécharger des fichiers déjà tout prêts mais si vous ne connaissez pas les techniques qui ont permis de les créer, à quoi bon ? Vous ne pensez pas ?

Dans tous les cas vous trouverez dans cet article :

 Un tutoriel pour que vous puissiez créer vous-même ce type d’icônes glossy
 Un fichier zip contenant les icônes, les fichiers sources du tutoriel

Voici l’image que vous obtiendrez en suivant ce tutoriel :

Et voici l’illustration de toutes les icônes PNG téléchargeable dans le fichier zip :

Je vous propose de commencer tout de suite par le tutoriel.

 TUTORIEL PHOTOSHOP : ETAPES 1 à 5

Tutoriel Photoshop : ETAPE 1

J’ouvre le logiciel Photoshop et je crée une nouvelle image sur fond blanc (dans mon exemple j’ai utilisé une image de 600 px de côtés), je sélectionne l’outil rectangle arrondi et j’en crée un sur mon image (radius 10 px).

Tutoriel Photoshop : ETAPE 2

Ensuite je vais directement lui appliquer quelques styles de calques. J’ajoute une incrustation de dégradé, une lueur interne ainsi qu’une ombre portée.

Vous pouvez regarder l’image ci-dessous pour vous aider à configurer tout cela, pour rappel les styles de calques sont disponibles dans le menu calques > style de calque.

Tutoriel Photoshop : ETAPE 3

Je crée ensuite une très grande ellipse au dessus de mon rectangle, pour cela je peux utiliser soit l’outil sélection soit l’outil des formes personnalisées (vectorielles).

Voici ce que cela devrait vous donner sur l’écran de Photoshop.

Tutoriel Photoshop : ETAPE 4

Ensuite très simplement j’ajoute un masque de fusion qui va me permettre de la camoufler légèrement, cette manipulation me permet d’ajouter dors et déjà un effet glossy !

Pour ajouter le masque de fusion, je me rends dans le menu calque > masque de fusion > tout faire apparaître. Et j’utilise un dégradé de noir 100% vers noir 0% pour créer l’effet glossy.

En observant la fenêtre des calques voici ce que je devrais voir :

Tutoriel Photoshop : ETAPE 5

Ensuite toujours sur ce masque de fusion, j’utilise un large pinceau diffus blanc pour créer une lueur sur le centre de mon reflet.

Voici une illustration qui devrait vous aider à comprendre comment cela est possible :

Et voici le résultat en image :

 TUTORIEL PHOTOSHOP : ETAPES 6 à 11

Tutoriel Photoshop : ETAPE 6

Je fais un Ctrl + Clic sur mon ellipse pour récupérer sa sélection. Puis je vais dans le menu sélection > intervertir et avec un pinceau noir je colorie en noir sur le masque de fusion tout autour de mon rectangle arrondi de façon à créer une bordure tout autour de mon reflet glossy.

Voici une illustration pour explication :

Et voici le résultat en image :

Tutoriel Photoshop : ETAPE 7

J’utilise l’outil texte pour ajouter « PS » correspondant au logiciel Photoshop, attention la première lettre doit être plus grande que la seconde !

Tutoriel Photoshop : ETAPE 8

Attention cette étape n’est pas forcement très simple, je vais donc essayer d’être le plus clair possible, cependant si vous vous ne sentez pas en mesure de la réaliser vous pouvez la simplifier à votre souhait, le but est de rendre le texte un peu plus transparent pour éviter de le garder avec sa simple couleur blanche.

Je commence par ajouter un masque de fusion sur mon texte : menu calque > masque de fusion > tout faire apparaître.

Puis avec l’outil sélection en ellipse je crée un large ovale donc les côtés viennent couper les côtés de mon reflet glossy, pour plus de précisions se reporter à l’image ci-dessous.

Je crée un premier dégradé de bas en haut pour cacher une première fois la partie basse de mont texte.

Puis je récupére la sélection de ma première ellipse, celle que j’ai utilisée pour créer le reflet glossy, et je crée un deuxième dégradé noir 100% vers noir 0% de bas en haut sur le masque de fusion de mon calque texte.

Comment ça, vous n’y comprenez rien ? Regarder donc l’image ci-dessous. Observez bien la fenêtre des calques pour comprendre ce qui se passe sur le masque de fusion !

Et voici le résultat en image :

Tutoriel Photoshop : ETAPE 9

Je vais maintenant créer un effet de brillance intense sur le haut de mon texte, je crée donc de petites étincelles sur les parties hautes de mon texte.

Comme ceci :

Et voici le résultat en image.

Je ne décris pas la procédure de création des étoiles car vous pouvez vous reporter à cette page pour lire des tutoriaux qui portent seulement et rien que sur la création d’étoiles ou d’étincelles :

• http://www.wks.fr/Creer-une-etincelle-de-lumiere.html ?decoupe_recherche=%E9tincelle
• http://www.wks.fr/Dessiner-des-etoiles-de-toutes.html ?decoupe_recherche=%E9toile
• http://www.wks.fr/Creer-un-effet-abstrait-lumineux.html ?decoupe_recherche=%E9toile (à partir de l’étape 15)
• http://www.wks.fr/Magic-Book-V2-l-effet-magique-avec.html ?decoupe_recherche=%E9toile (étape 23)
• http://www.wks.fr/Creer-une-mise-en-scene-improbable.html ?decoupe_recherche=%E9toile (étape 12)

Tutoriel Photoshop : ETAPE 10

Et je termine par ajouter simplement une ombre portée sur mon texte.

Et le tutoriel est déjà terminé, finalement c’était plutôt simple non ?

Si vous avez réussi ce tutoriel, un GRAND bravo à vous, j’espère que vous nous ferez le plaisir de partager votre création dans la galerie ci-dessous. Vous pouvez également poser vos questions ou vos mercis dans les commentaires ci dessous. D’avance MERCI à tous pour votre participation à ce tutoriel.

Un autre merci d’avoir lu ce nouveau tutoriel pour Photoshop sur Wks : )

 Copyright

Vous avez la possibilité de diffuser ces icônes gratuitement ou de les utiliser mais vous devez toujours citer l’auteur ainsi que la page d’origine des ressources. Ici l’auteur Wks.fr, la page d’origine : http://www.wks.fr/Creer-les-icones-Adobes-glossy.html