Vasili’s Blog

Jan 29, 2010Create a Shiny Web 2.0 Button

I posted on Twitter (too lazy to find the link) a couple days ago a little image of a sneak peek to the design for a project Lucy and I are doing. I thought I would write a little tutorial on how to do it since I was only able to find one tutorial on how to create this effect, and now, cannot seem to track it down. It's quite simple once you know the technique, and all that consists of is three layer styles!

Note: I'll be doing this in Photoshop CS4, but it can be done in almost any photo editing programs. Some of the procedures may need to be changed up a bit, though.

The first thing you are going to want to do is create a new document large enough for your button size. You can also do this in your working document (like a layout PSD), but I prefer to do it in its own file. Then I can just drag and drop it into the PSD. For the sake of space, I'm going to have a pretty big image size: 500px by 500px. You should also fill the background with either white or the background color the button will sit on.

Select the rectangle marquee tool and go up the options bar and change the style to fixed size. I've arbitrarily chosen to have the button 200px by 50px. Create a new layer, click anywhere in the document and fill selection with black. Now deselect the section (Cmd/Ctrl + D).

Double click on the layer, or right click and select blending options. Apply a gradient overlay to the rectangle. The gradient should be a 90° linear gradient going from a dark color to a lighter color of the same hue. Make sure you grab the dark color's hex value because we will need to in the next step!

Still in layer style, we will now add a stroke to the rectangle. The size should be set to 1px with all the other options being left alone. Change to the color to a darker version of your dark color. Don't make it too dark, just enough so you can tell there is a stroke.

Now for the real shiny part, at least I think so. Go into inner glow and change the belnd mode to screen, the opacity to 100%, choke to 100%, and size to 1px. The color of the inner glow should be a very light version of your main color. You will have to look at the rectangle as you change the color to see which color looks the best for it.

And you're done! Like I said, it's very easy to create one of hese buttons. You just need to make sure that the colors work well with each other. If the highlight is too white, it will look bad. If the stroke is too dark, it pops out too much.

You can either leave it like this and use it as a background with CSS, or add some text with their own layer styles. Here are a couple different variations:

If you want to create a banner like the one I posted, just add a layer mask to the rectangle layer! :)

Comments Closed — Tutorial