Shiny Button

Author	Newanz
Date	Jan 20th, 2008
Status	Done [?]

Create a Shiny Button in a few simple steps.

Welcome to Newanz second tutorial.
I will not give you a whole chat about the tutorial and get started right away. It's not a very long tutorial, but you will have a nice result!

See the final result here.

Step 1 - Making the PSD file

Create a new file, File > New. I gave it a width and height of 500pixels and a transparant background.
Now let's start filling this layer with a white background color. Go to Edit > Fill, choose white in the dropdown box and press ok.

Of course of course you can take a white background when you make the psd file in the first place, but as I noticed you will not be able to edit it afterwards. So I fill my background seperatly.

Step 2 - Creating the shape

Create a new layer Layer > New > Layer.
After this we will make the shape for the button. Grab the rectangular marquee tool and set it to a fixed size of 6/10 of the entire image for width and height. In this case 300pixels for both. Now go to your psd project and put the selection in the middle of this. Then fill it Edit > Fill with the color black. Deselect the selection Ctrl + D.
Now we will give it a better shape then the simple rectangle. Go to Filter > Disort > Spherize and give it the following settings.


Now we have the basic shape of the button unless you want to change that, but that's up to you.

Step 3 - Adding a style

For the style of the main shape go to the Blending Options. The first effect to add will be Drop Shadow. This will give the shape a shadow effect. Add the following settings:
Drop Shadow

Bevel and Emboss

Satin
Color: #000000

Gradient Overlay
Color left: #476491
Color right: #FFFFFF

Stroke
Color: #000000
I used a stroke of 2px, since when working with bigger images a 2px stroke is better to see.

That's all settings for the button so far, all the next effects will be set in different layers.

Step 4 - White overlay

To create a glossy like effect we need to create a shape first. Make a new layer. Go to your layer pallet and select the main shape layer by left clicking and holding Ctrl. Then select the Elliptical Marque Tool and then choose the substract from selection method.

Substract the shape needed to get kind of like the shape in the image below.

Fill this shape with the color white and set the opacity to around 25% to 30%.
Then deselect the shape with Ctrl + D.

Step 5 - Last effects

Now to give it a nice finnishing touch.
We will begin making a new layer. Then go to your layer pallet and make sure you have the new layer between your mainshape and white overlay. Then in the layer pallet left click, while holding the Ctrl button, on the shape layer. Now make sure you got your fore- and background color set correctly. Use forecolor: black and background color white. Now you will still have your shape selected. Go to Filter > Render > Clouds. And after that go to Filter > Render > Different Clouds. I would go for a evenly spread black and white different clouds filter, see image below.

Deselect your selection with Ctrl + D. Now to get the effect right you need to go to Filter > Artistic > Cutout This filter will minimize your clouds layer to a few colors and shapes.
I used these settings in my button, see image below.
I did this so it has a few clean looking shapes with sharp edges.

Now press OK and the filter will be set. Now you will get the filter layer as the most visible layer. Now we have worked on that layer with the main shape so we want to show it. We will change the Blending to Color Dodge and an opacity to 75%.

Finnish

Now we have our Shiny Button. It's not a very long tutorial, but we got it! You might want to add some text, I would recommend some silver/white text.

My end result is avaliable here.

No comments placed yet, be the first!