Breadcrumbs

Make Your Own Round Web Button

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.

Circle created in Photoshop

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:

Blend Mode: Soft Light; Colour: #FFF; Opacity: 100%; Angle: 90; Use Global Light: Yes; Distance: 10px; Choke: 1%; Size: 10px; Noise: 0%

Under "Inner Glow" apply these settings:

Blending Mode: Normal; Opacity: 80%; Noise: 0%; Colour: #FFF; Technique: Softer; Source: Edge; Choke 0%; Size: 4px

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.

Gradient Type: Solid; Smoothness: 100%; Colours: #93DFFF, #4BA4D1, #3A7593 at start, half-way, and end points respectively on the colour bar

Finally, add these settings under "Stroke":

Size: 1px; Position: Inside; Blend Mode: Normal; Opacity: 70%; Fill Type: Colour;

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

Preview of what your image should look like at this point

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:

Blend Mode: Overlay; Colour: #FFF; Opacity: 75%; Angle 90; Use Global Light: Yes; Distance: 5px; Spread: 0%; Size: 5px; Noise: 0%

Under "Stroke" apply these settings:

Size: 1px; Position: Outside; Blend Mode: Difference; Opacity: 100%; Fill Type: Colour; Colour: #FFF

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

Final image