Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Creating a Glossy 3D Button

Creating a Glossy 3D Button


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

Creating a Glossy 3D Button image 1

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

Creating a Glossy 3D Button image 2

Make sure your settings look like this:

Creating a Glossy 3D Button image 3

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

Creating a Glossy 3D Button image 4

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:

Creating a Glossy 3D Button image 5

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.

Creating a Glossy 3D Button image 6

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:

Creating a Glossy 3D Button image 7

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:

Creating a Glossy 3D Button image 8

With settings:

Creating a Glossy 3D Button image 9

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

Creating a Glossy 3D Button image 10

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:

Creating a Glossy 3D Button image 11

Now, apply different settings to the layer Button Base:

Creating a Glossy 3D Button image 12

At this point, we have this:

Creating a Glossy 3D Button image 13

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

Creating a Glossy 3D Button image 14

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:

Creating a Glossy 3D Button image 15

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

Creating a Glossy 3D Button image 16

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:

Creating a Glossy 3D Button image 17

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

Creating a Glossy 3D Button image 18

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

Creating a Glossy 3D Button image 19

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:

Creating a Glossy 3D Button image 20

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

Creating a Glossy 3D Button image 21

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

Creating a Glossy 3D Button image 22

At this point, it should look like this:

Creating a Glossy 3D Button image 23

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

Creating a Glossy 3D Button Tutorial: Final Result



Author's URL: MagnusFx
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Creating a Glossy 3D Button"

Only registered users can write comment

Reader's comments