Blue Circle Button Tutorial
- Categories: Photoshop Tutorials,Web Graphics
- Author: John Ward
- Comments: 34 responses
- Tags:
-
In this tutorial we will create a “web 2.0” (I’m sorry I had to say it) style rounded button.
Start with a 150×150 pixel image with white as the background. Create a new layer. Select black as your foreground color. Using the circle marquee tool, hold down the shift key and draw a perfect circle.
Press alt + backspace to fill the circle with black.
Now we will apply some layer style to the circle of course. I will be using a blue gradient that I found online in a web 2.0 gradient pack. Go to the site and download the gradient pack by clicking here.
Download the file and extract the gradient. Then simple drag the gradient file into photoshop and drop it on the background. Then open the gradient tool and youw ill see that we now have some sweet web 2.0 gradients.
Now we will apply the layer styles for our circle. Right click on the layer and go to blending options.
Apply the following drop shadow settings:
Next apply the gradient settings. I will be using the dark blue gradient from the gradient pack we downloaded earlier.
Then we will use the following settings for the gradient
For the final touch we will add a stroke.
Apply the style and your image should look like this
Now we are going to add a little more gloss to the picture. First we will add the ring. Create a new Layer. Then alt click the circle layer to make a select the same size as the circle.
Fill the new layer with white keeping your circle selected.
Now go to Select > Modify > Contract
Contract the circle by 3 pixels
Now your circle select is smaller. Use the arrow keys to move the circle down to off set it form the original like below. Then delete the select.
Now we will set the transparency for the layer to 51%.
Your circle should look like this now.
Looks good, but web 2.0 requires more gloss (lol). Using the default photshop shapes draw the shape below.
You circle should look like this now.
CTRL + click on the circle layer again to make a circle selection. Then go to Select > Inverse on the photshop menu. Then delete your selection.
Now we are going to change the layer blend mode to overlay and the opacity to 43%.
The circle looks like this.
Now we will add a circle using the default Photoshop circle shape tool.
Draw the circle like on a new layer.
Now apply a 1px stroke inside using the blending options.
The image should look like this.
To finish it off add your logo. I also changed the circle layer to be 65% opacity. Here is the final result
You could go back and play with some other gradients to see what you can come up with.
Tutorials Inc on March 10, 2008 at 10:27 am
Thanks for submitting this good tutorial to tutorial-effect.net, also submit your tutorials to tutorials-inc.com, thanks
[Reply]
Paul on March 11, 2008 at 7:13 am
Simple, yet good.
I’m not a big fan of the whole “web 2.0″ trend in web design, but this one works thanks to that simple circular line in the center.
[Reply]
Professional Web Design | Flash Web design | Web Design Romania on March 11, 2008 at 6:54 pm
This wasn’t of big help.
Should have let us see the gradient colors you used.
Thanks Anyway :-j
[Reply]
John Ward on March 11, 2008 at 10:24 pm
if you read the tutorial you will see that you can download the gradient
[Reply]
Israel Revuelta on March 16, 2008 at 4:35 pm
Great tutrial, the buttons look great and the gradiant add ons for photoshop are nice!
[Reply]
Blue Circle Button Tutorial « PressWord Notebook on March 20, 2008 at 9:53 am
[...] read more | digg story [...]
G on March 23, 2008 at 11:00 pm
I implemented this gradient via code in flash. Perhaps others might find this useful.
http://extralongfingers.com/wordpress/?p=15
[Reply]
Benky on April 7, 2008 at 4:44 am
VERY GOOD TUTORIAL
THX
[Reply]
currun on April 9, 2008 at 6:14 am
execelent !!!!!!
i had no words to praise you !
it was very nice, written in simple words , so that everyone can understands it .
thanks ! keep writing tutorials like this !
[Reply]
medieval on April 9, 2008 at 7:57 pm
A really good tutorial. I can use it for my project. Maybe i will add some shapes on it ^_^
[Reply]
Bobby on April 10, 2008 at 7:40 am
Wo.. that’s great I wanna try it..
[Reply]
Top Stumbles - Best of StumbleUpon on April 15, 2008 at 7:30 am
Team Tutorials » Blue Circle Button Tutorial…
In this tutorial we will create a “web 2.0” (I’m sorry I had to say it) style rounded button….
Geoserv on April 15, 2008 at 7:32 am
STUMBLED!
Great post, I have been trying to do this for a while now.
Voted for you at:
http://www.newsdots.com/tutorials/blue-circle-button-tutorial/
[Reply]
alberto on April 20, 2008 at 2:06 pm
Hey, on “CTRL + click on the circle layer again to make a circle selection. Then go to Select > Inverse on the photshop menu. Then delete your selection.”
I did it but it deletes the entire layer, I just have two layers, anyone mind to explain this to me?
[Reply]
alberto on April 20, 2008 at 2:10 pm
it also says “content of layer not directly editable
[Reply]
Randy on May 1, 2008 at 1:46 pm
If u are having this problem select the circle layer and use the easer tool, try to erase this layer,you will a message pop up and click ok and now you can use the CTL + D function…
[Reply]
Rajita - Logo Design on May 21, 2008 at 5:42 am
This tutorial is superb.This is really very formative with excellent steps
[Reply]
Vishal Nayak on June 20, 2008 at 5:21 am
Very nice tutorial. And excellent gradients also. Thanks a lot.
[Reply]
Herman on July 13, 2008 at 10:23 pm
Thanks for the great tut(s) i’ve learned some new tricks now.I liked the tutorial so i clicked on all your Ads lol
[Reply]
Shilpam on August 25, 2008 at 5:45 am
This is very good tutorial and easy way to understand the process to change the color.
[Reply]
shahzad on December 24, 2008 at 6:40 am
Alberto, you will first have to rasterize the layer, else u cant del the inverse selection (since its vector).
[Reply]
Azhar on February 2, 2009 at 2:34 pm
Thanke you For
[Reply]
Noob on February 10, 2009 at 6:43 pm
I’m stuck at the
“Now we are going to add a little more gloss to the picture. First we will add the ring. Create a new Layer. Then alt click the circle layer to make a select the same size as the circle.”
What am I supposed to do ?
[Reply]
Nikhil on March 7, 2009 at 10:25 am
Hey ,
I am not able to delete the selection . I followed the same steps, also i am not able to select the circle of same size .. plz help me out… I am using CS3.
Kindly help me..
[Reply]
Mind Ruin on September 9, 2009 at 7:29 pm
I love this tutorial, it really looks fantastic. I will give it a try, but my end results are always sub par even when following directions. Anyhow Thanks.
[Reply]
Cute Graphics on September 19, 2009 at 5:34 pm
This is a wonderful tutorial, now I can finally have some professional buttons. thanks.
[Reply]
Lucas on October 3, 2009 at 4:48 pm
Yeah! This is awesume this is very helpful keep up the good work!
[Reply]
Yoeri on November 27, 2009 at 8:39 am
Looks great, clean and simple, thanks!
[Reply]
Cal on December 9, 2009 at 1:26 pm
Great tutorial and easy to follow, many thanks.
[Reply]
Megan Fox on January 27, 2010 at 6:27 pm
I love this tutorial John, the final image looks wonderful. I will give it a try but my finished version probably won’t look as good.
[Reply]
Borge on March 9, 2010 at 10:45 pm
Thanks for this nice tutorial dude, love it awesome. And now I know.
[Reply]
Richard on March 25, 2010 at 10:10 am
HELP – Anyone know why I’m getting stuck on…
Create a new Layer. Then alt click the circle layer to make a select the same size as the circle.
Using either alt keys on the circle layer 1 doesn’t do anything – I have the select tool on.
Cheers
[Reply]
SexyDesigner on May 13, 2010 at 11:09 am
Hey, did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.
Chao.
[Reply]
edi inayat on July 4, 2010 at 10:14 pm
i like this button thank you …
[Reply]