In this Gimp tutorial we will create a round web 2.0 button/icon with a metal ring around it. This button is very handy for download icons and such, and it can easily be customized, especially with gradients.
This is what we’re going to create, we will also look at some variations of the button afterwards.
Create a new image with a white background. I made mine 600×400.
Now create a new layer and name it “ring”.
Use the Ellipse Select Tool to create a circle that measures 250×250.
Set your FG and BG color to a dark gray (333333) and white (ffffff).
Use the Blend Tool to create a gradient from the top of the selection to the bottom of it.
The gradient should be Reversed, the shape set to Radial, the Offset should be set to 20, and Adaptive Supersampling should be enabled.
The offset simply makes it so that we get more white on the top of the button, while Adaptive Supersampling makes it smoother. Our image should look like this now:
Shrink the selection by 25px. (Select->Shrink)
Use the Blend Tool to create a gradient from the bottom of the selection to the top of it.
Use the same settings as last time.
Create a new layer and name it “sphere”. Shrink the selection by 5px (Select->Shrink), then fill the selection with a blue color (216eda) using the Bucket Fill tool.
Now set your FG color to cyan (4feeff).
Create a radial gradient a little bit above the bottom of the selection and approximately 120px up.
The Gradient should be set to FG to Transparent, it should not be reversed, set the Offset to 20, and make sure Adaptive Supersampling is disabled.
That should give us this result:
Set your FG color to white (ffffff). We’re going to use the Paintbrush tool to add a little white at the bottom of the button.
Set the opacity of the brush to 70%, use a large fuzzy brush (Circle Fuzzy 19) and set the scale to 10.
Position the brush so that half of it is inside the selection, then click just once with the mouse.
That should give us a gentle touch of white like this:
We’re going to create an inner shadow, to do this we first need to create a new layer and name it “inner shadow”.
Now grow the selection by 1px. Select->Grow.
Then we fill the selection with black (000000) using the Bucket Fill tool.
Next go to Select->Feather.
Feather the selection by 20.
Now hit the Delete button on the keyboard.
Also, we don’t need the selection anymore so get rid of it by going to Select->None.
Next, duplicate the layer so that the inner shadow becomes stronger.
Create a new layer and name it “gloss”.
Create a selection where you want the gloss to be.
Set your FG color to white (ffffff).
Create a gradient from the top of the selection to the bottom of it.
The Gradient should be set to FG to Transparent, the Shape to linear, Offset to 0.
Now reduce the opacity of the gloss layer to 75 so that it blends in more smoothly with the rest of the button.
Time to add some text, select a font you like and write something on the button, these kinds of buttons are very good for adding short words like GO! or a symbol such as a downwards arrow for a download button.
I simply added the letter Z. The font is Verdana Bold size 100.
Next we give the text an outline.
To do that go to Filters->Light and Shadow->Drop shadow.
Set Offset X and Offset Y to 0.
That should give us a nice dark outline around the text like this:
Almost done know, we just need to give the whole button an outline, and soften it a little.
Select the layer named “ring”, and then give it a drop shadow with the same settings as we used on the text.
Now we need to soften the button a little bit just where the inner shadow meets the metal ring.
We have two layers with inner shadow, so we need to merge them into one. In the Layer Dialog, select the top layer with inner shadow, right-click and choose Merge Down.
Next we’re going to give the inner shadow layer a Gaussian blur of 2. (Filters->Blur->Gaussian Blur)
That’s it, the button is done:
It’s also very easy to make variations of this button by using gradients instead of all that
blue and cyan we made in step 4 and step 5.
Here is the button with the gradient called Deep Sea, the gradient was created
from the bottom of the selection and 450px up.
Here is the same gradient from the top of the selection to almost the bottom of it, and with the gloss shaped differently.
Here it is with the gradient Incandescent from the top of the selection to the bottom of it.
That’s it, it’s the end of the tutorial, tell us what you think in the comments.
By subscribing to our RSS
feed you get notified when
new tutorials are published
Want to help make this site better?
There are lots of things you can do!
If you know some good tricks or
techniques maybe your interested in
Writing a tutorial.
Perhaps you simply have a good idea for a tutorial,
then you could
Suggest a tutorial.
Have a look at the Contribute page to learn more.
Flimm
November 6th, 2008
I like it. I think the hardest part for me was step 7, deciding where the gloss should be exactly. Mine didn’t feel as natural as yours.
yay
November 6th, 2008
I’m glad you like it Flimm
maybe I should have included some more details on the gloss, the selection is around 130×73 and the top of it is 5px from the metal edge.
Adam
November 15th, 2008
wow
Aglow
November 15th, 2008
plz can u do that by using video ? plzzzzz
yay
November 16th, 2008
Aglow, I can’t unfortunately, I don’t have the hardware to do that, my computer is way too slow
Strogg
November 17th, 2008
Very impressive and professional this tutorial, I’ve learned a lot, thanks for sharing your knowledge!
Yuiko
November 18th, 2008
Dude! Thank you! This will make theming for MyBB and other software MUCH easier!
Thank you!
adi
November 26th, 2008
Thank you so much for taking the time to do this, it was very easy to follow and I am so pleased with the end result, Do you have any others ?
yay
November 26th, 2008
adi: I’m glad you like it
So far I only have this other button tutorial: http://gtuts.com/web/web-20-button-with-reflection
I will create more in the future though, they will be posted under the web category so just keep a lookout!
These kinds of buttons are easy to make variations of though, I would recommend experimenting with the colors and shape of the gloss, also the angle used when applying gradients can be cool to experiment with, especially on step 2 and 3.
oh and Strogg and Yuiko thanks for your comments, I’m glad you guys found it useful
HF
November 29th, 2008
Very nice!
Teri
December 3rd, 2008
Awesome tut. Very easy to follow. Thanks
Tedster
December 4th, 2008
For the GIMP newbie, this was the best tutorial I’ve done! As a PSP user and GIMP wanna-be, this tutorial helped me shed my PSP mindset and focus exactly on what you were doing. It also helped that your tutorial was up to date with the latest version! Thanks for the tut!
yay
December 5th, 2008
Thanks for your comments HF, Teri and Tedster, I appreciate it
I know what you mean there Tedster, I changed 3d modelling software once and it was really hard to change my mindset. So I’m glad I could help you with that
Nomie
December 29th, 2008
Cool. I currently am working on getting acquainted with gimp and this tutorial was great. I figured out how do do some of the stuff i normally do in psp in gimp.
Denis
January 3rd, 2009
This tutorial is amazing. I love the pictures. Perhaps if you could explain why you’re doing the stuff would be even more education. But amazing tutorial!
bjbk
January 5th, 2009
Great and easy to follow tutorial!
Thanks!
Martin
January 7th, 2009
Great tutorial! But where’s the Web 2.0 part?
tab16602
January 8th, 2009
Very well-constructed tutorial, accurate and easy to follow. Thank you.
Yog
January 9th, 2009
Cheers for this, best intro to GIMP I could have asked for. Check out results of first-time tryout! http://westernlotus.deviantart.com/art/Button-One-108887941
Zarnad
January 10th, 2009
That’s really beautiful. After I played with the tut and made some round ones, I tried a rectangular one with rounded corners. Beautiful!
Thanks for the great tut!!!
Kevin
January 11th, 2009
Great tutorial. This is not just about making buttons, it is a wonderful introduction to using and manipulating layers; just what I needed. Thanks a lot — keep up the great work!
Kevin
January 11th, 2009
P.S. Could you show us how to make the button look pressed? That would be very useful too. Thanks again.
Brett
January 11th, 2009
hey excellent tutorial im new to gimp and i found this tutorial quite easy. little problems here and there but i got it in the end.. the thing im wondering is ..just how did u edit the shape of your gloss layer as showin in the variations with the Deep Sea gradient if you could tell me it would be appreciated thanks.
yay
January 11th, 2009
Ahhh..I’m finally back from Christmas holiday! Thanks for all the comments and nice words guys
Brett: I can’t remember exactly how I did it, but I would guess it was something like this:
Instead of creating a small selection in step 7, create a selection around the whole button except for the metal ring (basically a selection like the selection we have in step 4).
Then create an FG to transparent gradient from the top of that selection to the middle of the button (or further or shorter if you want to, experiment and see what looks best).
Now create an elliptical selection around the part of the gloss you don’t want to keep (approx the bottom 2/3 of the button), then hit the delete button on your keyboard to delete that part of the gloss.
Kevin: Pressed, why on earth didn’t I think of that?
I’ll try to remember to include that the next time I make a button tutorial
Matteo
January 12th, 2009
Thanks a lot yay. Top quality tutorial. Thanks for sharing your skills. Please keep these tutorials coming.
James
January 13th, 2009
Very nice. Easy tut that gives great results! I used an oval shape since I had more text to put in, but it all translated very easily. Thanks!
Pena
January 15th, 2009
It´s very good tutorial.
Thanks
marytee
January 17th, 2009
Thanks for taking the time to publish this tutorial. Very helpful.
vikas
January 18th, 2009
It’s Awesome.
Kalle Johansson
January 19th, 2009
Hi
Very stylish and good quality thinking in every detail, absolutely great tutorial.
Kalle
Denis
January 19th, 2009
100% for this tutorial. I appreciated it very much.
Kevin, a way to make the button look pressed is simply take the same image and rotate the ring layer 180 degrees or as you wish or make a copy of the ring layer and rotate that layer then you’ll have both button in the same image by turning on the ring layer you want.
JagFel
January 21st, 2009
Thank You so much for this tut, great job, I have learnt a lot!
Visitor
January 25th, 2009
How do you make the crescent-shaped gloss?
yay
January 26th, 2009
I’m glad so many people find this tutorial helpful
Visitor: If I remember correctly I did something like this:
Instead of creating a small selection in step 7, create a selection around the whole button except for the metal ring (basically a selection like the selection we have in step 4).
Then create an FG to transparent gradient from the top of that selection to the middle of the button (or further or shorter if you want to, experiment and see what looks best).
Now create an elliptical selection around the part of the gloss you don’t want to keep (approx the bottom 2/3 of the button), then hit the delete button on your keyboard to delete that part of the gloss.
Awdie
January 29th, 2009
My gimp is different from the gimp shown above and I am not sure how to select a different layer for step 9, but this is a very good tutorial!
yay
January 30th, 2009
Awdie: Yeah Gimp usually looks a little different depending on what operating system and themes one uses, nothing to worry about though, as long as you make sure you have a somewhat recent version of Gimp you should be fine. The latest version can be found here: http://gimp.org/downloads/
Oh, and to select a layer just click on it in the layer dialog, if you don’t have the layer dialog open, you can find it under Windows->Dockable dialogs.
Bmack
January 30th, 2009
Hey there! I just got gimp, since we use it at school >.<, I usually use photoshop but thought I’d get some practice in at home
. I opened it up and was soo confused but this tutorial even taught me the basics about Gimp.
Thanks a lot and it’s a wonderful tut.
Awdie
January 31st, 2009
Thanks, that helped me a lot!
Gin
February 4th, 2009
Awesome tutorial. Very easy to do.
tabuhan
February 15th, 2009
Thank You so much
Darillian
February 18th, 2009
Thanks a lot, really enjoyed it and gotta play around with the settings soon.
Here’s my outcome, did it simultaneously to reading the tut
http://darillian.deviantart.com/art/Radioactive-Button-113357419
Steve
February 26th, 2009
verrrrry nice toot!! Thx!!
Fred
March 2nd, 2009
Excellent Tutorial. This I how tutorials should be done. Step by step. I can’t follow video tutortials as well as this. Good Job!
joe
March 3rd, 2009
Congratulations on an excellent tutorial. It was understandable from someone with only 2 days of Gimp experience, and my button looks great. I have been working my way through tutorials and I finally grokked Gimp while working on your buttons.
Knowledge is a wonderful paradox, the more you learn the less you know. I have some questions.
I can play around with your buttons and create a whole suite with different text and/or colors.
What is the best way to manage a larger project with more than one button?
All the buttons in one gimp project with multiple text layers?
Or one master button template from which the actual buttons are derived?
Is it possible to automate the creation of the gif/jpg at the end of the process? If not, do you just have to be very careful to keep the xcf and the gif/jpg in sync?
There are basically two questions:
a) How would you create 20 buttons that use a common template; and
b) How would you manage graphic resources for larger projects?
I come from a software background, but I am not sure how to adapt my software techniques to the graphics world. I tried googling but couldn’t find anything useful.
yay
March 3rd, 2009
Thanks guys I’m glad you like it
Joe: I guess it’s a personal preference really, storing all buttons in one xcf could quickly become messy since 20 buttons would be a little over 60 layers (one layer for each color, one for each text, one for each text dropshadow), I probably wouldn’t do that. On the other hand 20 xcf files would take up space and takes a little longer to open, but it would be way easier to organize. I would probably go with the one xcf for each button because then I would have more room to try out different variations of a color for example to see what looks best.
In either case, I would always recommend keeping a backup of your finished xcf file, it’s pretty much the “source code” to put it that way. It’s the image at 100% quality, unlike jpg and gif that reduces the quality (and size) of the image.
I haven’t tried it, but I think it should be possible to automate the saving as gif or jpg or png, in fact it’s possible to automate the whole button creation process as well. Gimp allows scripting you see, it uses a variant of Scheme called script-fu. You can open the script-fu console through Filters->Script-Fu->Console. In the console you can browse the procedures, it has procedures like file-save-gif or file-save-jpeg. I also know you can use a glob command. See this page at the bottom for how to process several files: http://www.gimp.org/tutorials/Basic_Batch/
Here is a script-fu template btw if u need one: http://www.home.unix-ag.org/simon/files/script-fu-template.scm There are also script-fu tutorials here and there around the web.
Harri
March 3rd, 2009
I LOVE this one! Thanks for putting it up.
Quark
March 12th, 2009
Very good tutorial for someone who is starting out. I got the results exactly as shown on the tutorial. Cool stuff. Thanks
JBz
March 17th, 2009
Very helpful. I added a layer sized to the ring and filled with a wood pattern. When opacity is reduced, the bevels and shading show through the wood, making a nice picture frame. Adding a layer with a country road in the frame, and an MG driving out of the frame, and I’m on my way to a 3d illusion, if I can ever get the shading right.
This tutorial was of great use in understanding the use of gradients and drop shadows. The use of a gloss layer was quite impressive. I’ve been trying to figure that out for some time.
Phil
March 27th, 2009
Thanks ;D I am learning how to use GIMP by going through some tutorials and this one is great!
It’s so nice, and SHINY
Daniel
March 27th, 2009
Thanks, this is one of the best tutorials i’ve ever read! Very good job!
Aleksey
April 2nd, 2009
Excellent tutorial. Usually I google for images that I can use, but so much better to learn how to do it yourself! Thanks for an excellent tutorial.
emeck
April 19th, 2009
Thank you Yay for this great tutorial. I’m using it to create a pack of icons for AmigaOS 4.x and would like to upload it to a web forum when finished so other AmigaOS users could make use of them. So, I would like to give the credit you deserve in the text info of the pack. If that is ok with you, how should I do it?
Regards,
emeck
yay
April 19th, 2009
emeck: Thanks, I’m glad you like them
There’s no need to give credit, but if you want to you can just write gtuts.com so that other people know where to find the tutorial
rich64nv
April 27th, 2009
Excellant, easy to follow tutorial that results in an awesome image. Thank you!
proximux
April 30th, 2009
Amazing tutorial. I was able to create some shape variations using the technique you have outlined. I have a oval and a rectangular button. The oval button looks great the rectangular button was done without the light at the bottom of the button.
Thanks a million.
Rev. Voodoo
May 4th, 2009
these tutorials are great. just redid my entire wordpress theme with knowledge I got from here. Go ahead and check it at http://www.rvoodoo.com, and thank you!
Random
May 4th, 2009
Great tutorial, have to admit it is one of the best graphics tutorials I have done on the web, and have done a lot with PS, but this is one of my first with GIMP. Will now see what others you have done to try those. Quick question, do you have a tutorial of how you made your avatar image? Like to try that one would be great for neon logos.
yay
May 4th, 2009
Random: No I haven’t made a tutorial for the avatar, maybe I should though since a couple of people have asked for it
In the meanwhile, here are some quick (and complicated) instructions:
The avatar is basically a bi-linear incandescent gradient created a little bit below the middle of the image, then whirled and pinched (by 360 if I remember correctly). Then that layer is duplicated and rotated 180. Make the rotated layer blue (with curves or colorize or whatever get’s the job done). Put it all on a black background, make a selection around the good-looking part and then Image->Crop to selection. Afterwards just rotate or flip the image the way you want it.
That was all by memory so I hope I didn’t forget anything.
buzzyli
May 5th, 2009
One of the best tutorials I’ve seen. I had no doubts while doing it despite I’m not experienced GIMP user. Great job Yay
jacberk
May 15th, 2009
Great Tut! Great Button! I’ve had Photoshop Elements 2.0 for a few years (the only purchased software beside Win XP & games I’ve got). I’ve tried Gimp on Windows and Linux and am slowly converting over. Tutorials like yours make it so much easier. Clear and to the point. Simply excellent! Thanx much! jacberk
dtm824
May 17th, 2009
Hey, I just recently finished up the tutorial and it turned out similar to yours. Thank you, it is an extremely useful tutorial. My question is though, how do you add the effect to make the button seem as if it is being pushed down? If you can help me out with this it would be highly appreciated. Thanks in advance.
P.S.
Please make more tutorials such as this one. This button is extremely professional and good looking.
Sarah
May 20th, 2009
This was a great tutorial and very easy to follow
James
May 30th, 2009
Absolutely Outstanding tutorial, there now for the people who wanted i video i could try my hand at that as i make heaps of tuturioals on youtube.
Other than that Fantastic
Campig
June 1st, 2009
Eh when I go to shrink by 25px it shrinks the out line but not the gradient I am stuck
Salvador
June 1st, 2009
Excellent!!! This is my first tutorial. It is very easy to get the main idea. Then I will practice a lot of times, because I need to learn it.
Thanks!!!
Mike
June 19th, 2009
One of the best tutorials I have seen regarding Gimp. Really top notch. Thank you so much.
Alex
June 20th, 2009
Holy crap that’s nice!
Japs
July 8th, 2009
Hey…I like it..please give me more information about this…thnx
sabari
July 11th, 2009
Excellent tutorial…..I could do it without a single glitch (which is rare
)
thanks for helping us all…
pat
July 20th, 2009
very good. thanks a lot
Rob
August 21st, 2009
What tool did you use? Photoshop? Dreamweaver?
I am a web developer with 5 years experience, I use Visual Studio 2008 and while that is a great tool, it has no fantastic graphic tool built in like this
Anyone ASP.NET devs’ out there know how I could create buttons like this using the .NET System.Web.UI.Webcontrol class, (I mean the way the pro custom control developers do, without resorting to CSS/ tricks)
Paul
August 28th, 2009
Rob,
VS is the best dev env but it is by no means a design tool (unless you are a master with the paint style tool in VS). If you want cool buttons or controls, use a true design tool. Pick one that you like Photoshop, this one here, whatever.. Create your images then overlay them on your controls. use the WebControl class to build the logic and load the images. I’ve used Photoshop to create my images but it takes a while to learn maybe this tool here is easier.
Michael
August 28th, 2009
Nice tutorial, mine turned out great. Inorder to make that a botton on my desktop, do i merge all layers down into one layer? And then save as a ico file
Drifte
August 30th, 2009
Very nice! Thx
Josh
September 9th, 2009
Great tutorial and really good to learn more about layers gradients etc. I have played with square and rectangular buttons as well. I have found the glossy effect difficult…..any ideas or examples?
Thanks!
Darlene
October 15th, 2009
Great tutorial. My button is awesome. I’m in the process of redesigning my site and your button will help to make it look more Web 2.0.
Just one problem – when I place it on my website there is a square border around the button. How do I get rid of it in GIMP. I used a transparent background but I still get the border. Also, I saved the button as a “png” file.
Any help will be much appreciated. Thanks for the great tut!!
Dave
October 27th, 2009
Haha! Great tutorial – so great Chase bank is using this exact button on one of their pages… https://www.chase.com/ccp/index.jsp?pg_name=ccpmapp/shared/marketing/page/chase_take_control_faq
h_p
November 9th, 2009
Great tutorial! I tried it out! I changed the text instead of “Z” to “Click me”
@ Darlene: Use the fuzzy on the white background and press delete on your keyboard.
mo
November 18th, 2009
Awesome! Thanks Dude!
graphically impaired webmaster
December 12th, 2009
I believe you just saved me several thousands dollars that I would of had to spend at graphic design school. You are the Man! I’ve been struggling with learning how to make gloss look good and it led me here where I learned even more great stuff. Every other tutorial on gloss overlooked playing with the transparency.
Merlin
December 15th, 2009
Fantastic tut, thank you. I will be using my new button skill many times in the future
Jcorn
December 16th, 2009
Fantastic! Many thanks
Roman
January 8th, 2010
My goodness. Five, six years ago, I did almost the very same thing with Photoshop. Now even a fool like me can do this in GIMP thanks to such an excellent tutorial!!!
Thank you so much.
Greetings from Switzerland
xtian
January 10th, 2010
Great tutorial! Thanks!
sam H
January 29th, 2010
Great Tutorial found it very easy to follow and good results.
Sean
February 5th, 2010
I absolutely love this tutorial. I’ve used it several times now and it always produces excellent results. I’ve used it with not just circles, but with rounded Rectangles and it comes out gorgeous. Thanks for this!
DIOS_MIN
February 15th, 2010
Just Great!!
Lee
February 16th, 2010
Stunning. Hands down the best tutorial I’ve followed.
Shorty
March 2nd, 2010
Brilliant! Thanks very much.
Borge
March 10th, 2010
Thanks for this nice tutorial dude, love it awesome. And now I know.