This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.


Fireworks Zone logo

Tuesday, 2 December 2008 6:21




RSS FEEDS

  • News Feed
  • News Feed
  • Feed Aggregator
  • Feed Aggregator

Partnership

  • graphicxtras

Patterns


Advertisement

Store

  •  
    Seamless Textures
    Dot Patterns
    graphicxtras
     

ACROBAT.COM

Donation

Sponsored


BOUTON PIXEL
Retranscription d'un tutorial photoshop trouvé sur Release 911. Création d'un bouton 3D sans avoir recours aux effets mais en utilisant la juxtaposition et la superposition des couleurs.
# 1

Créer un nouveau document. Dessiner un rectangle 90 x 14 px avec un bord noir de 1 px. Appliquer à ce rectangle un dégradé linéaire #637173 -----> #4249A.

Un dégradé d'une couleur claire vers une couleur sombre va donner l'effet d'un bouton bombé. Si vous inversez :#4249A ----->#637173, vous allez donner un effet de creux à votre bouton.

Pour le bouton orangebold10 appliqué ce dégradé linéaire : #FFB65A -----> #668220

 
# 2

Pour l'instant nous avons un bouton 'plat' et pour créer un effet 3D, nous allons avec l'outil 'Line Tool' ajouter des lignes à l'intérieur du rectangle avec des couleurs différentes. La règle est simple, la lumière vient du coin supérieur gauche : les couleurs claires en haut et à gauche, les couleurs sombres, en bas et à droite.

La ligne claire en haut et à gauche : #84969C. La première ligne intérieure : #515E60. La deuxième ligne intérieure : #293031.

 

 
# 3
Maintenant pour donner l'impression que le bouton est encastré dans la matière nous allons ajouter autour du bord noir du rectangle une couleur sombre : #4249A, en haut et à gauche et une couleur claire en bas et à droite : #84969C.
 
# 4
Après avoir ajouté votre texte, voilà de superbes boutons, n'est-il pas ?
 
 
 
You can comment or ask your questions about this tutorial Contact