Créer des icones de cristal avec Photoshop

Un look prisé par beaucoup de sites web qui veulent se donner une apparence impeccable et distinguée est le graphisme cristal (« crystal »), popularisé principalement par Apple dans le graphisme de son système d’exploitation. Voici comment créer des icônes, onglets et des boutons qui ont cette apparence vitrée, comme si elles étaient faites de cristal.

Utilisez l’outil « Rectangle Bords Arrondis » (« Rounded Rectangle Tool ») dans Photoshop pour dessiner un rectangle à coins ronds avec la couleur de votre choix, dans cet exemple j’opte pour un bleu foncé, mais la couleur peut être changée par la suite pour une famille d’icônes diverses:

Icône Cristal #1

Dans les propriétés du « Calque » (« Layer »), choisissez le style « Incrustation en dégradé » (« Gradient Overlay »), sélectionnez « Option de Fusion » (« Blend Mode ») en mode « Lumière linéaire » (« Linear Light ») avec un « Dégradé » (« Gradient ») standard noir et blanc, un angle de -90 degré, de façon à ce que la partie sombre soit au-dessus du bouton avec un dégradation pale vers le bas, et donnez-lui une opacité d’environ 50%.

Dialogue Photoshop #1

Vous devriez avoir un effet de ce type:

Icône Cristal #2

Ensuite pour le donner un peu de volume transparent et de luminosité interne, on va ajouter une « Lueur interne » (« Inner Glow ») avec un « Option de Fusion » (« Blend Mode ») en « Lumière linéaire » (« Linear Light »), une couleur blanche pure, une opacité de 25%, une Source Centrée (« Source Center ») et une Taille (« Size ») de 7 pixels:

Dialogue Photoshop #2

Le bouton ressemble maintenant à ça:

Icône Cristal #3

Nous y sommes presque! Il nous manque le reflet. Pour ce faire, faites une copie de votre « Calque » (« Layer ») contenant le bouton, changez sa couleur pour un noir pur, redimensionnez le rectangle pour qu’il soit plus petit que le rectangle original, et placez le vers le haut tout en vous assurant qu’il reste bien centré par rapport à celui-ci, comme dans l’image suivante:

Icône Cristal #4

Mettez « Option de Fusion » (« Blend Mode ») du « Calque » (« Layer ») en mode « Superposition » (« Screen »). Ne soyez pas surpris si à cette étape que notre forme soit devenue invisible, nous allons y remédier. Dans les « Style de Calques » (« Layer Style ») de notre reflet, sélectionnez « Incrustation en dégradé » (« Gradient Overlay ») avec un « Dégradé » (« Gradient ») standard noir et blanc, un angle de 90 degré et une opacité de 100%. Choisissez une « Option de Fusion » (« Blend Mode ») de type « Superposition » (« Screen »).

Dialogue Photoshop #3

Le résultat final devrait être comme suit:

Icône Cristal #5

Maintenant vous êtes libre d’y ajouter du texte par-dessus (ou d’utiliser l’image en arrière-plan en CSS et ajouter du texte HTML). Idéalement, dans mon exemple, je choisirais du texte blanc, sans anti-alias, parce que ça reste plus clair à cette taille, avec un ombrage en mode « Densité couleur  » (« Color Burn »), pour une couleur qui se mêle bien avec les effets vifs du dégradé cristal. Le texte doit bien se démarquer du reste. Exemple:

Icône Cristal #6

Il est possible d’utiliser cette même technique pour d’autres formes, par exemple, avec le même procédé, je peux créer une sphère de cristal:

Icône Cristal #7

Les propriétés des effets ne sont pas exactes en tout points mais je vous laisse libre de découvrir ça par vous-mêmes, c’est la meilleur façon d’apprendre.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Graphisme | 3 commentaires »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

3 commentaires pour “Créer des icones de cristal avec Photoshop”

  1. IMAD dit: 6 mai 2009 at 12:40

    Très bon travail, voire excellent..

    Merci.

  2. Marc Harnist dit: 29 août 2009 at 2:35

    Bonjour, excellente présentation. Pouvez-vous me dire où trouver photoshop à bon prix ?

  3. Webmart dit: 29 août 2009 at 3:49

    Salut Marc, j’imagine que amazon.fr doit avoir des bons prix, si tu es étudiant, il y a des rabais possibles aussi pour une version « éducation ».

Laisser un commentaire