Round Web 2.0 Button with a Metal Ring

round web 2.0 button with metal ring preview

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.

FINAL IMAGE PREVIEW

This is what we’re going to create, we will also look at some variations of the button afterwards.

Final image preview


Step 1

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.

250x250 selection

Step 2

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.

Gradient settings

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:

Selection with radial gradient

Step 3

Shrink the selection by 25px. (Select->Shrink)

Shrink selection by 25

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.

Gradient inside the other gradient

Step 4

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.

Sphere layer

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.

Gradient settings

That should give us this result:

Cyan gradient added

Step 5

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.

Adding white with fuzzy brush

That should give us a gentle touch of white like this:

Gentel touch of white

Step 6

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.

Grow selection by 1

Then we fill the selection with black (000000) using the Bucket Fill tool.
Next go to Select->Feather.
Feather the selection by 20.

Feather 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.

After deleting

Next, duplicate the layer so that the inner shadow becomes stronger.

Duplicate the inner shadow layer

Step 7

Create a new layer and name it “gloss”.
Create a selection where you want the gloss to be.

Gloss selection

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.

Gloss gradient

Now reduce the opacity of the gloss layer to 75 so that it blends in more smoothly with the rest of the button.

Reduce opacity to 75

Step 8

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.

text settings

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.

Drop shadow settings

That should give us a nice dark outline around the text like this:

Z with dark outline

Step 9

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.

Add dropshadow to the ring layer

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)

Gaussian blur the inner shadow

That’s it, the button is done:

Round Web 2.0 Button with a Metal Ring

Variations

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.

Round Web 2.0 Metal Ring button deep sea gradient

Here is the same gradient from the top of the selection to almost the bottom of it, and with the gloss shaped differently.

Round Web 2.0 Metal Ring button

Here it is with the gradient Incandescent from the top of the selection to the bottom of it.

Round Web 2.0 Metal Ring button Incandescent gradient

That’s it, it’s the end of the tutorial, tell us what you think in the comments.

Comments

  1. BigFatty

    July 24th, 2010

    Thanks it’s really helped to understand some concept . but, write more tutorial for us(newbie) and people are not so graphics expert(me not)

  2. Rob

    July 25th, 2010

    Excellent tutorial!! Very easy to follow.

  3. Bronzepaw

    July 26th, 2010

    They look awsome!

  4. Ding

    August 14th, 2010

    Dude this is awesome. Thanks!!

  5. hi

    August 17th, 2010

    thanks the tutorial is very nice.

    but where to get the fuzzy brush stokes? can we download them somewhere.
    im using Gimp 2.6 and the fuzzy brushes are not in there.

  6. Keir

    August 17th, 2010

    Awesome thanks! :)

  7. Robert

    August 24th, 2010

    Thanks for the tutorial! Yes, it is quite easy to follow and understand. I really like it.

  8. JonP

    August 24th, 2010

    Thanks – that was really useful! Had gimp for ages but never tried anything like this.

    to the guy above – the fuzzy brushes are in with the other brush shapes – click the brush button (on the paintbrush tab on the toolbox) and scroll down the choices – took me a, erm, minute to find too…ahem.

  9. JOhN

    October 2nd, 2010

    Brilliant!

    A brilliant tutorial. Well laid out, each step is clearly presented and described without cutting corners, eliminating time wasted on trying to find how some simple step that is assumed is done. Everything is illustrated clearly with screenshots.

    In short excellent!

    Thanks.

  10. David

    October 6th, 2010

    Great tutorial.
    Had problems just with one thing: how do I set transparent as a background or foreground color?

  11. Chandana

    October 19th, 2010

    Thanks for the tutorial.
    Very useful.
    Keep up the good work.

  12. Paul

    October 23rd, 2010

    Really cool effect. Many thanks for sharing it. Only one problem – it makes all my other buttons look crap!

  13. Shadej

    October 31st, 2010

    very nice tutor.
    simple steps but complex icon
    tanx

  14. Bless

    November 9th, 2010

    Great tutorial,easy to follow,thanks…

  15. samj

    December 6th, 2010

    Thanks for this tutorial.

    Same render with this script-fu : Round_Web_2_0_Button_with_a_Metal_Ring.scm

    Link : http://aljacom.com/~gimp/script_fu.html#br

  16. Ananda98777

    December 20th, 2010

    WOW! Wonderful Tut, looks fantastic! :D Easy to follow, perfect for getting to know gimp too!

  17. Tan

    December 23rd, 2010

    Do you realize that gimp-tutorials.com is wrapping your content? http://www.gimp-tutorials.com/tutorial/Round-Web-2-0-Button-with-a-Metal-Ring-993.html

  18. Muhammad Farrukh

    December 25th, 2010

    Good Job…

  19. lorelai

    January 3rd, 2011

    Amazing tutorial! Thank you very much for this. I’m a beginner with GIMP and this tutorial is amazing for me! Many tutorials skip certain steps that someone with more GIMP use would know but this details EVERYTHING. It’s just perfect!

  20. 'Acid!'-made.me.do.it

    January 27th, 2011

    Awesome illustration dude!! Can u do 1 more of gel lyk buttons pweaze…
    ‘full metal-jacket gel button with glossy orbs’(“o)

  21. World Cricket Forum

    February 7th, 2011

    That is so cool, I’ve been trying to do that for ages, but couldn’t work out the gradients properly. By the way I’m not sure if you are aware but your webpage is embedded in another webpage http://www.gimp-tutorials.com/tutorial/Round-Web-2-0-Button-with-a-Metal-Ring-993.html

    I’m not sure if their both your sites or someone is claiming your work.

  22. krb

    February 15th, 2011

    Love it, thanks very much! Very nice!

  23. Me

    February 22nd, 2011

    The only hing i didnt get was the drop shadow but easy to follow

  24. Learning GIMP | KENG.MY

    March 1st, 2011

    [...] I start search related article or tutorial from the net, and I start from here: 50 Design Tutorials for Mastering Gimp | Creative Nerds > Round Web 2.0 Button with a Metal Ring [...]

  25. EricP

    March 4th, 2011

    Great tutorial ! Instructions are extremely clear ! There are not a lot of GIMP tutorials as good as this one.
    Thanks !

  26. Zod

    March 7th, 2011

    I am a programmer. As such, I am very much a logical thinker. Sit me down to write up a program, and I can see the logic faster than I can type, which is pretty darned fast. Unfortunately, this means that I am not much of an artistic thinker. When I design something..anything..remotely artistic, be it a texture, a graphic image, or a 3D model, it tends to be very symmetrical. I have literally been known to sit down with a calculator to figure out exactly how to lay out a 3D model.

    Regardless, I found your tutorial and decided to give it a try. I liked the looks of your finished product, and it pretty much hit the nail on the head for what I was looking to do. I got a bit scared when it got to the parts about manually painting in shading with a brush. I felt fairly certain I was gonna muck it up real good. Thanks to your very clear instructions though, it came out wonderful. I am actually proud of the finished image I did, which is a rare thing for me.

    Great job, and I will be having a look at your other tutorials as well, and recommending your site to others.

  27. t0mt4yl0r

    March 24th, 2011

    Nice! Love this ;D

  28. cspray

    March 24th, 2011

    I’ve always looked around for free graphics to create my website before but it just became a big hassle and I never found the look I was really going for. Your final button looks really nice and is the kind of thing I’m looking for…your excellently laid out, simple tutorial was fantastic. Like Zod, I’m more of a programmer than a graphics specialist and, also like Zod, after following your tutorial I’m happy with the final result.

    Thanks for the excellent job.

  29. Victor

    April 6th, 2011

    Love it, thanks very much! Very good comment

  30. marta

    April 18th, 2011

    Thanks a lot for this turorial, it’s great!

  31. Jason

    April 28th, 2011

    Great post, helped me out a lot!

    It’s amazing how something can be laid out so simply by someone who knows what they’re doing.

  32. Expat

    April 28th, 2011

    Thank you – very easy to follow for a someone totally new to all this. was amazed at the final result – have tried a few other tutorials but they just didn’t explain all the steps as well. Will be looking for more tutorials from you.

  33. Edit

    May 4th, 2011

    Thank you so much for this tutorial! It helped me a lot!

  34. Deus Deceit

    May 22nd, 2011

    Yup, it’s an amazing tutorial, and it’s amazing how people come up with stuff :D
    I mean everything is done with gradients?
    lol.

    Thnx again, and i’m waiting for more tutorials like everyone else :D

  35. Alisha N

    June 24th, 2011

    Thanks for the info!

    I have the final result of a tutorial I did back in Dec. 2009. For the life of me, I can’t find the actual tutorial. I’ve uploaded the result (http://www.box.net/shared/j6izu7bt825d406bqkcl). Do you know where I may find the original tutorial?

  36. Carlos

    June 30th, 2011

    Very Nice tutorial. even for experienced graphic designers.

  37. Sandhan Sarma

    July 17th, 2011

    Super cool!!!!!! tutorial…….i was schoked!!!to see what i created by following your tutorial……

  38. Watson

    July 22nd, 2011

    Wowsome coolness squared. Thank you! Really Gimple to follow.

  39. Joel McColl

    July 27th, 2011

    I am impressed! I have never done such a complex task before and it was really so easy to follow.

  40. davidwaf

    September 24th, 2011

    Thank you. Very much impressed!!!!!!!

  41. Bitacora

    October 25th, 2011

    soooooo omg wow!!

  42. Gimp tutorials

    October 31st, 2011

    Great effect, good job!

  43. Brian Martin

    December 23rd, 2011

    Surprisingly easy to follow :) I’m more of a web developer then a graphic designer. Learning PS I always imagined to be hard.

  44. Joe

    January 1st, 2012

    Thanks man, really gave me a good idea of how to use simple techniques like gradients to achieve stunning effects! plus very clear tutorial. 5 stars all round :)

  45. Lucio Mesquita

    January 19th, 2012

    Awesome Tutorial. Very nicely written. Kudos

  46. Rick R.

    January 24th, 2012

    Great tutorial! Thanks!

  47. Ketu

    April 7th, 2012

    Thanks! Its great Tutorial.

  48. Emily C

    April 7th, 2012

    Really great tutorial! Everything was explained in great detail, which I am happy about as I’m a gimp newbie. I am actually pleased about my final product as it wasn’t what I expected it to be!

    Fantastic tutorial and I am recommending this to other gimpers.

  49. zenada

    April 23rd, 2012

    I love it!

  50. tekz

    May 29th, 2012

    very nice tutorial..,:)

  51. luseng

    June 17th, 2012

    Best tutorial ever on GIMP

  52. Derek F

    June 18th, 2012

    Thanks very much for this tutorial! Having very, very little GIMP (or any other type of similar program) experience, I was able to make a few of these up. Trial and error on my part, as I am replacing my keyboard on my HP TouchPad…I have to make 2 buttons at the same time, (2nd button is the button press).

    I found I had to zoom in quite considerably, 1400% or more, to make sure the edges were perfect, as I was taking my keyboard png files and making the new buttons on top of the old ones.

  53. Ullas Prabhakar

    July 18th, 2012

    Thanks very much . really great tutorial.

  54. honey

    August 10th, 2012

    This is great,very easy-to-follow tutorial. i learned a lot about gradients! thanks a ton, please keep it up! :D

  55. Chad

    August 22nd, 2012

    I too am having trouble finding the large fuzzy brush (Circle Fuzzy 19). Any help would be greatly appreciated.

    Update: Apparently GIMP 2.8 doesn’t come with all the brushes as the previous versions. I found that the originals can downloaded here:

    http://project-gimpbc.deviantart.com/art/Default-GIMP-Brushes-70105324

  56. E.D.B

    October 5th, 2012

    Thank you for this tutorial. As someone who needed to learn this quick you made everything clear, concise and very easy to understand. Thanks!

  57. E.D.B

    October 8th, 2012

    One question when you have a chance…I see now how to edit the text layer, but I find that when I do, the drop shadow I created for the text will not edit. Is there an easy method to keep the same basic button design but be able to edit the text AND change the drop shadow?

  58. Royston Smith

    October 18th, 2012

    The answer to a quest in finding a great gauge skin – instead of a button ;-)

    Fantastic tutorial, thanks a lot!

  59. esp

    October 26th, 2012

    This is a really great starting place for some of buttons I’d like to replace in the forseeable future (actaully a fairly large number) thanks.

  60. Yves

    October 30th, 2012

    Wow! And GIMP turns out to be logical! Thanks a lot for a GREAT tutorial. Btw, the new GIMP 2.8 is a huge improvement over the older versions…

  61. ridge

    January 8th, 2013

    thanks, that was amazing!

  62. Agile

    January 16th, 2013

    Wonderful Art Work. Beautifully laid out tutorial. Very simple to follow. Complex appearance made too simple to create. Thank you for this amazing tutorial. 5 Stars from me. :-)

  63. crouchingbruin

    May 8th, 2013

    Great tutorial, very easy to follow with amazing results. My only modification would be to add an inner shadow to the text instead of a drop shadow. That would make the text look like it was inset or embedded into the button instead of raised on top. If you do a search on “GIMP inset typography” you should be able to find a tutorial, but it basically consists of using the Layer Effects Script-fu script from the GIMP repository, and selecting Inner Shadow.

  64. Pieter

    July 27th, 2013

    Thanks so much!

  65. devils

    August 18th, 2013

    thanks alot.. how could i use an image instead of text…..actually i wanna make a logo

Leave a Reply