Breadcrumbs
Make Your Own Round Web Button
- Author
- Date
- Sun 31 Dec 2006 at 11:39
Photoshop time! Alright, today I am going to guide you through making a stylish round button.
Step 1: Create your document
First, create a new document with the dimensions 120x120 pixels. You can use any background colour that you would like. I will be using a white background (#FFFFFF).
Step 2: Create your circle
Next, create a new layer (CTRL+SHIFT+N). Using the "Elliptical Marquee Tool", make a round selection, holding SHIFT to keep it proportional. You can make the selection any size you would like, although I recommend not to make it too small.

Fill it with a colour; I will be using #92AAB6.
Step 3: Setup the Blending Options
Now you need to add some style to your newly created circle. Right click on the the layer you just made and select "Blending Options".
Under "Inner Shadow" apply these settings:

Under "Inner Glow" apply these settings:

Select "Gradient Overlay", double click on the color bar to open the "Gradient Editor". Apply these settings using the colours you desire. I will be using these three colors: #93DFFF, #4BA4D1, #3A7593.

Finally, add these settings under "Stroke":

Your image should now look like this, differentiating depending on the colours you selected:

Step 4: Add your text
You are almost done! To finish up, you are going to add some text to the button. Grab the "Text Tool" and add whatever text you would like in the centre of the circle.
Step 5: Style your text
After you have added some text, right click on the text layer and select "Blending Options".
Under "Drop Shadow" apply these settings:

Under "Stroke" apply these settings:

And you are done! Until next time, take care and have a happy new year!

