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:

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;
}

BOOKMARK THIS CONTENT

	Bookmark at:

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.