administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Article: Shaded buttons in Photoshop »

FERDY CHRISTANT - NOV 20, 2005 (12:05:14 PM)

I'm by no means a professional graphics designer. I do enjoy giving it a try every now and then. Mostly this means trying lot's of random things in Photoshop, starting over again and again, until I get something I like. This unpredictable sequence of steps in itself proves I bare the design skills.

For some effects, however, I do have a set technique. One effect is the creation of shaded buttons. You know what I mean, those shiny, Apple-like buttons you see everywhere. Photoshop has some out-of-the box features for this, such as the bevel effect and the gradient tool. But, as with many things in life, if you wanna do it right, you have to do it yourself. This mini-article shows the technique I use to manually create buttons like these:


If you like what you see, read on. If not, go to a real Photoshop site :)

The basics

The technique consists of only 3 steps:

  1. Choosing the color map
  2. Drawing a manual gradient
  3. Applying blur

Choosing the color map

The most important step is selecting a proper color map. We will use the Photoshop color picker for this. Our button effect will work best when using base colors, that's why we need to enable "Only Web Colors" in the dialog:


Next we will select 5 colors. A base color, one color a shade darker than the base color, and three colors lighter than the base color. The base color must be a solid color (i.e. pure red or pure black). The color increments must be evenly divided. For a black button, this results in the following color map:

ColorValueDescription
 #000Base color -1
 #333Base color
 #666Base color +1
 #999Base color +2
 #cccBase color +3

Drawing a manual gradient

Opposed to the gradient tool, drawing the gradient manually gives you full control. Let's first create a new image of height 30 pixels. Here are the steps we are going to go through:


  1. Fil the image with the base color
  2. Fill the bottom 25% (7 pixels) of the image with base color -1
  3. At 75% height, fill 15% (4 pixels) of the image height with base color +1
  4. Above the base color +1 filling, fill 7% (2 pixels) of the image with base color +2
  5. Above the base color +2 filling, fill 4% (1 pixels) of the image with base color +3

Note that these are guidelines, depending on how deep you want to bevel the button, or how intense it should shine, you can play around with values.

Applying the blur

Our gradient still looks a bit boxy. The last step is to apply Gaussian blur to it. Go to Filters->Blur->Gaussian Blur:

How much blur you apply will affect how deep the bevel will be. I personally prefer a low bevel, using a blur value of about 10. The end result of our button background is:


Next steps

If you are using the button background image on the web, it's best to apply the text, border and width by using CSS properties, for ultimate flexibility. In that case you could reduce the image above to a width of about 5 pixels, and let it repeat horizontally:

.button {
background: url(background_button.jpg); repeat-x
padding-:5px;
border-right:#666 1px solid;
}

Share |

Comments: 5
Reviews: 1
Average rating: rating
Highest rating: 3
Lowest rating: 3

COMMENT: PATRICK KWINTEN emailhomepagerating

JUN 7, 11:17:33

comment » Why don't you use css further because you are already using it?

.button {

color:#000;

font-size:100%;

background-color:#fed;

border:1px solid;

border-top-color:#777;

border-left-color:#777;

border-right-color:#333;

border-bottom-color:#333;

filter:alpha(opacity=50);

-moz-opacity:.50;

opacity:.50;

FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(gradienttype=0,

STARTCOLORSTR='#ffffff', ENDCOLORSTR='#bbbbbbb);

} «

COMMENT: FERDY

JUN 9, 12:26:15 PM

comment » I hope you're not serious about that MS-specific CSS rule? «

COMMENT: PATRICK KWINTEN

JUN 13, 13:05:34

comment » it's an option.

but we can now use this as reference:

http://www.ferdychristant.com/blog/resources/Fun/$FILE/shadedbutton11.gif

01 «

COMMENT: FERDY

JUN 14, 08:13:42 PM

comment » You're right it's an option, but I think only on corporate intranets. There is one more reason why the CSS rule will not be suitable, the button gradient is not linear from top to bottom. «

COMMENT: STEPHEN WARD emailhomepage

DEC 18, 2009 - 03:24:36 PM

comment » I know this is several years after the fact, but thanks very much for the article. I'm not much of a designer, but I found the technique to give me good results. Using the Gaussian blur, in particular, was an eye-opener. I appreciate the help. «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.