MagnusFx

The Finished Product

Start off by creating a new document, any size will do.

Fill the empty canvas with a dark grey color, I am using #4C4C4C. Grab your Rounded Rectangle tool:

Make sure your settings look like this:

I’m using the color #D32424 but you can use whatever shade of red you’d like.

My shape

Rasterize the layer you just created (Right click layer -> Rasterize Layer) and Duplicate it (Right click layer -> Duplicate Layer.) This is what your layer palette should look like so far:

So Far

Rename both layers to “Button Top” (the top layer) and “Button Base” (the bottom layer) Now we are going to start adding the effects. To give your button the 3D effect, you need to make Button Base a darker shade of red than Button Top. Select Button Base and press Control+U (Or go to Image -> Adjustments -> Hue/Saturation) to bring up the Hue/Saturation box. Now where it says “Lightness”, set that to -38. You wont be able to see what it looks like until the next step.

Now we need to move the layer to give it the basic 3D look. With the layer still selected, press your Down Arrow key 10 times. That’s 10 pixels. It should look something like this:

Our Button So Far

Now were going to add detail to the Button Top. Select Button Top in your Layers box. Then control and click on the Layer to select the Light red shape. Then go to Select -> Modify -> Contract, and set it to 1px. Grab your burn tool:

With settings:

Click outside of the selection area. Press shift and drag the burn tool to the right across the top of your selection, like so:

Now that you’re done, we are going to add some blending effects to Button Top. Deselect the layer, and click on Button Top in the layers palette. Then go to Layer -> Layer Styles -> Inner Glow and apply these settings:

Layer Styles for Button Top

Now, apply different settings to the layer Button Base:

Layer Styles for Button Bottom

At this point, we have this:

So Far

Now we are going to add little shine effect to the button. First off Select your brush and set them to these settings:

Now make sure you have your Foreground and Background set to default(Black and White), Press ‘D’ to do so if you haven’t. Then press X to switch them. Now select your Pen Tool and make sure you have it set on “Paths”, Not shape Layers. To set this, just simply click on the icon on the Pen Tool Bar located above:

Now on your button, Click from one end to the other like below:

Now Create a new layer then Select the Path Selection Tool(Or press ‘A’) and right click on the Path, then go down to “Stroke Path…” then set these settings:

Then right click on the Path again and select “Delete Path”. Now your button should look something like this:

So Far

Let’s add some more detail. First select Dodge tool, and set the settings to this:

Now select the Button Top Layer by pressing Control and Clicking on the Layer. Now with Dodge tool, click in the middle around about 2 times, do it too many times and it will look horrible:

For a final touch, grab the Burn Tool and select Button Base. Make sure burn is set to these settings:

Then draw two straight lines at either side, like so (Button Top layer not shown in this image):

At this point, it should look like this:

So Far

That’s it! You’re done! Here is my final product with some extra spit and polish added:

Our Finished Button

About the author:

Andy Mallaby is a freelance web designer currently living in the UK. You can view his portfolio at iam-andy.co.uk and be sure to check out zymic.com for free hosting.