De la sphère au bouton...version Glassy

Version PDF du tuto

Bonjour à tous!

Ceci est la transcription pour Photoshop du tutorial de pioumPiouM qui, à la base est pour notre cher The Gimp. J�ai tenté de reproduire au maximum l'effet désiré. Evidemment, j�ai obtenu l�accord de l�auteur avant de faire la transcription.  

De nombreux sites web arborent un style assez futuriste. Ils sont souvent composés d'une multitude d'éléments recourant à des effets visuels divers et variés. Parmi ces éléments on trouve des boutons, des sphères à l'aspect Glassy. Le présent tutorial vous propose de réaliser dans un premier temps une sphère puis sur cette base un bouton... tous deux Glassy évidement   (superbe introduction de pioumPiouM que je n�ai pu que laisser� )

 Etape 1 : Création du document

1 - Créez un nouveau document (Fichier > Nouveau... ou Ctrl+N) de 400x400 pixels (par exemple) avec un fond transparent.

2 - Placez maintenant des guides qui vont indiquer le centre de l'image pour que nous ayons un joli bouton bien au milieu :
- Affichez les règles (Ctrl+R)
- Cliquez sur la règle verticale, et faites glisser le repère jusqu�au milieu du calque (votre calque mesurant 400 x 400 pixels, il faut placer votre repère au 200ème pixel) Faites de même pour le repère horizontal. A ce stade, vous devriez avoir ça :

NOTE : Si votre règle n�est pas en pixels, cliquez droit dessus, et cliquez sur « pixels ».
Vous avez fini de poser les bases de votre document, passons à la réalisation.  

 Etape 2 : Forme de base  

Passons à la création de la sphère !
 
1 - Il faut maintenant choisir une couleur de premier plan. Pour ce tutorial, Pioumpioum a opté pour la couleur #00b7d2�alors suivons Pioumpioum !

2 - Créez un nouveau calque transparent et nommez le  fond .
[Ctrl+Shift+N ou Calque >> Nouveau >> Calque�]
 
3 - Munissez vous de l�outil sélection elliptique. Placez le curseur de la sélection au croisement des deux repères, cliquez gauche, puis, tout en commençant à tracer votre sélection, appuyez sur Alt et Shift. Alt pour que le centre de votre cercle soit le croisement des repères, et Shift pour que votre cercle soit bien rond. Voici la sélection à effectuer :

Attention : la commande Shift + Alt (en tout cas sur mon ordi) passe le clavier en Qwerty. Pour revenir par la suite en Azerty, ré appuyez sur Shift+Alt.

4 � Il faut maintenant remplir ce cercle de votre couleur de premier plan :
Vous pouvez vous munir de l�outil pot de peinture et cliquer dans la sélection, ou bien Edition >> Remplir�>> Avec : couleur de premier plan.

A ce stade, vous avez ceci :

  Etape 3 : Un reflet garçon !  

1 � Créez un nouveau calque transparent et nommez-le  reflet.

2 � Si la sphère bleue est encore sélectionnée : Ctrl+D pour désélectionner ou Sélection >> Désélectionner.

3 � Munissez vous de l�outil Sélection Elliptique et, comme au début, placez votre curseur pile au croisement des deux repères : appuyez sur Shift et Alt en même temps juste après avoir commencé votre sélection et réalisez une sélection comme ci dessous (si vous voulez un plus grand reflet, faites une plus grande sélection�mais pas trop quand même hein !   ) :
 

4 � En étant bien sûr d�être toujours sur le calque reflet et l�outil sélection elliptique sélectionné, appuyez sur la flèche du haut du pavé directionnel. Il faut que vous fassiez monter la sélection à environ trois ou quatre pixels en dessous du haut du cercle.
Comme ceci :

5 � Prenez la couleur blanche comme couleur de premier plan. Munissez vous de l�outil dégradé, et choisissez le dégradé Premier Plan vers transparent, comme ci dessous :

6 � Vérifiez que vous êtes toujours sur le calque Reflet et tracez votre dégradé depuis le haut de votre sélection jusqu�au repère horizontal, tout en maintenant Shift appuyé pour que le dégradé soit bien droit. Voici ce que ça donne :

7 � Réglez l�opacité du calque à 90%.

8 � Ctrl+D pour désélectionner le reflet.

  Etape 4 : Une lueur apparue au loin.

1 � Créez un nouveau calque transparent, appelez-le  lueur.

2 � Munissez vous de l�outil dégradé, Premier Plan vers Transparent, avec du blanc comme couleur de PP et de type Radial.

3 � Tracez votre dégradé en le commençant 3 pixels sous la sphère bleue, pour le terminer environ au tiers de l�objet :

4 � Il va maintenant falloir supprimer le dégradé sortant de la boule. Pour ce faire, Ctrl+Clique sur le calque fond, pour le sélectionner. Evidemment, restez toujours sur le calque  lueur .

5 � Réduisez la sélection de 3 pixels : Sélection >> Modifier >> Contracter >> 3px.

6 � Inverser la sélection : Ctrl+Shift+I ou Sélection >> Intervertir la sélection

Voilà ce que vous devez avoir :

7 � Sélection >> Modifier >> Lisser >> 10 px

8 � Maintenant, effacez la sélection : Appuyez sur Suppr

Voilà le résultat :

Note : Vous pouvez aussi intensifier un peu le dégradé de la lueur que nous venons de créer, en faisant monter le dégradé un peu plus haut lors de l�étape 3. Ce qui peu rendre ça :

Bon, vous avez bien travaillé pour l'instant, buvez un coup :   euh...j'ai pas dis buvez "beaucoup" j'ai dis buvez "un coup" (bon d'accord...c'était vraiment nul... )

  Etape 5 : Ajout d�ombres internes.  

Nous allons à présent ajouter un peu d�ombres.

1 � Créez un nouveau calque transparent nommé ombres.

2 � Ctrl+Clique sur le calque  fond  pour le sélectionner.

3 � Prenez l�outil Sélection Elliptique.

4 � Passez en mode soustraire de la sélection (dans la barre d�Options, en haut à gauche de l�écran) Commencez une sélection pour arriver à ceci :

5 � Remplissez la sélection obtenue de noir :

6 � Ctrl+Clique sur le calque  fond  tout en restant sur le calque  ombres .

7 � Appliquez un flou gaussien de 7,5 à 15 pixels [Filtres >> Atténuation >> Flou gaussien�de 7.5 px à 15 px selon votre goût] Et réglez l�opacité du calque à 30%. Voilà le résultat :

On a bientôt terminé, courage !  

  Etape 6 : Création du bouton.  

1 � Si vous ne l'avez pas déjà fait, Ctrl+Clique sur le calque  fond  pour reprendre la sélection de la boule bleue.

2 � Créez un nouveau calque transparent et nommez le  bordure.  (Veillez à ce qu�il soit bien en haut de la liste des calques)

3 � Agrandissez la sélection de 10 pixels, (sélection >> modifier >> dilater >> 10 px) puis, remplissez de blanc.

4 � Reprenez la sélection du calque  fond  (Ctrl+Clique dessus), tout en restant sur le calque  bordure . Supprimez. Vous avez votre jolie bordure toute blanche :

5 - On va maintenant ajouter un peu de relief :
Vérifiez qu'il n'y a aucune sélection active de la sphère (Ctrl+D), puis double-cliquez sur le calque Bordure pour faire apparaitre les styles de calque. Nous allons appliquer une ombre portée et un Biseautage :

Ce qui donne ça :

6 � Prenez la couleur blanche comme couleur de Premier Plan. Maintenant, il faut que vous placiez un élément dans votre bouton�là, vous pouvez soit utiliser des formes prédéfinis de Photoshop, soit, comme l�a suggéré PioumPioum, en mode Texte, utiliser la police Webdings. Pour la taille, c�est à vous de voir, mais si vous utilisez la police Webdings, je vous conseille de 185 à 215 pixels. Placez donc quelque chose dans le bouton (pour bien centrer l�objet, utilisez l�outil déplacement (V) ):

(pour cette exemple, j�ai utilisé la police Webdings, avec le caractère « @ » et la taille 190pt)

7 � Passez le calque de votre objet en mode « luminosité ».

8 � Clique droit sur le calque de votre objet : « pixelliser le texte (ou le calque) »

9 � Double cliquez sur le calque de votre objet, et appliquez lui cette ombre portée :

Voici le travail :

J�aime bien ce résultat, mais il n�est pas parfaitement ressemblant à l�original, donc, pour approcher encore plus du résultat sous the gimp :

-      Les ombres internes sont trop voyantes, étape « 5 »,  action « 7 », augmentez le flou gaussien.

- Le reflet du haut de la sphère n�est pas assez gros, étape « 3 », action « 3 », faites une plus grande sélection.

Résultat sous toshop (avec prise en compte des deux dernière notes) :

Résultat sous the Gimp :

Autres exemples de réalisations :

(dernière petite chose, si vous voulez vraiment être parfaitement sur le résultat The gimp, montez un peu le "reflet garçon", et augmentez la distance de l'ombre portée de la bordure...mais cela reste détails...)

Voilà c'est fini, il est l'heure de se quitter  

Pour toute question, laissez un message sur ce topic !
J�espère que ce tutoriel vous a plu !  

Ces sphères étant entièrement personnalisables, montrez moi vos créations!

Elfe noir

Liens

Petit lien vers le profil de Pioumpioum, l'auteur de ce tuto pour The Gimp :

Profil de Pioumpioum

Liens vers le tuto original :

Tuto sur Crystalxp

Lien du tuto sur Gimp4you

EDIT : j'avais oublié de préciser que c'était mon premier tuto photoshop

Et hop ! Validé

Super tuto, bien organisé, sans faute d'orthographe, avec de belles images pour expliquer

Merci bien de la validation et de tes compliments  

tuto très bien fait et expliqué, bravo la transition de the gimp à photoshop est bien réalisée.

Très bon tuto.
Un   pour un premier tuto.

Merci, très bon tuto.
J'm'y met dès que possible

c'est pas commun les transcriptions dans ce sens là

Bien joué

Merci à tous pour vos commentaires  

N'oubliez pas de montrer vos créations

Ps et HS : Croyez vous que cela vaut le coup que je transcrive d'autres tutos the Gimp vers photoshop?  

Sympa ce tuto ! Trés bien expliquer !    J'éspére que tu en fera d'autre ! De plus, j'avais jamais penser a crystaliser en me servant de repéres.    Merci beaucoups !

De rien et merci  

Sinon,  pour de les autres tutos, je suis en train de voir...mais je préfère en sortir peu mais qu'ils soient tous bien plutôt que d'en sortir tout le temps sans qu'ils soient de qualité  

Super tuto le rendu est très sympa bravo
voici le mien :

Très réussi  
Par contre, 2 conseils :

1 - Réduis l'ombre portée sous tes deux flèches.
2 - Je mettrais une plus grosse lueur au bas de la boule...  

Voilà, sinon, c'est bien  

j'avais oublié de mettre l'ombre en incrustation

Bravo

Je sais pas si c'était pour le tuto ou pour la création de hardwiigamer... en tout cas merci (si c'est la première solution...)

Sinon, hardwiigamer, c'est beaucoup mieux!

Voila ! Encore merci Elfe Noir !

Je n'ai pas mis de forme au centre car je m'en sert comme modèle pour faire plusieurs boutons voilà ^^

Bravo  

Par contre, il y a un peu d'aliasing en bas de la boule : utilise l'outil goutte d'eau avec une insistance de...25 environ, et puis tente de passer sur les endroits où il y a de l'aliasing. Voilà!

EDIT : ah j'avais pas vu, le dégradé radial du bas de la boule est un peu trop gros...ça accentue également l'effet aliasing
 

Désolé pour le double post  
J'ai fais une petite actualisation du tuto (quelques détails, deux trois fautes d'orthographe, deux images, etc.)

Donc maintenant il est tout beau tout propre  

Bonjour,

je tenais d'abord à remercier elfe noir pour ce tuto.
Mais j'ai cependant un petit problème. Je débute totalement avec Photoshop et ne comprends pas comment réaliser les étapes 4 à 8 ... Chez moi, le fait de sélectionner un deuxième calque ne me permet plus de faire de sélection ... Aurais-je mal compris une étape ?

Je ne suis pas sûr d'avoir bien compris! Pourrais tu faire un copier coller des étapes que tu n'arrive pas à réaliser? Pour que je vois bien tes problèmes  

Sinon, je crois savoir d'où ça vient... Quand je dis : sélectionner le calque ****, ça veut dire faire un Ctrl+Clique sur la miniature qu'il y a à côté du nom du calque...je sais pas si tu m'a compris  

Voici les étapes qui me posent problème (à partir du petit 4) :

J'ai bien fait un Ctrl+Clique sur la miniature du calque (en bas à droite par défaut). Mais une fois que les 2 calques sont sélectionnés, je ne peux plus rien faire sur les calques. J'ai donc suivi à la lettre ton tuto (que faire d'autre quand on ne maitrise pas un logicielle ) mais cela ne fonctionne pas ...

D'acc...euh, là j'ai pas photoshop (je suis pas sur mon ordinateur, mais sur celui de ma cousine   )...Mais en fait, il ne faut pas que 2 calques soient sélectionnés : il faut, pour l'étape 4, que tu ais la sélection du calque "fond", mais que celui ci ne soit pas surligné en bleu : seul le calque lueur doit être surligné...je sais pas si tu me comprends...  

écoute, dès que je suis sur mon ordi, je te fais quelques captures d'écrans pour que tu puisse y arriver!  

Oula la petite subtilité ... J'avais, moi, cliqué sur le nom du calque fond, sélectionnant ainsi les calques "reflet" et "fond" (surlignant en bleu ceux-ci), alors qu'il fallait cliquer sur la petite image du claque ... Un petit détail mais qui m'empêchait de pouvoir continuer ce tuto ^^

En tout cas, merci pour l'indice expliquant que seul le calque "reflet" devait être surligné Je continue !

Bon voilà, je reviens pour montrer ce que j'ai fait

Bon par contre, j'ai passé pas mal de temps à essayer de faire des aiguilles ... sans réussite. Donc si quelqu'un pouvait me montrer un peu comment on peu en faire simplement ^^

Très réussi !   Rien à dire!

Pour les aiguilles, faut utiliser la plume, pas le choix...