How-to: A tutorial on using GIMP to create Glossy Shiny Buttons

Ok, this is a quick'n'easy tutorial on creating two types of shiny button using the unfortunately named but free Photoshop clone "the GIMP". If you're looking to do any web design work on the cheap, this is the best free tool for graphics work, but is a little complex when you first start.

I've found tutorials on this for Photoshop, but because GIMP doesn't have exactly the same features, its not always obvious what the equivalent step is. So this is a real no-brainer, follow the steps approach. For this tutorial, I'm using GIMP 2.

The aim is to end up with buttons that look like these:

How very Web2.0. And if the steps are too complicated, or you want further info, or better still you ACTUALLY USE THEM - let me know by leaving a comment!

Style 1

This was my first stab, and it's ideally suited towards the sort of widgets/site-branding you see on the sidebars of blogs.

 Step 1: create a 200x100 image, and use the 'advanced options' to set the 'fill with' to Transparency. This is so you can use it on any coloured background.

Step 2: select All (ctrl-A), and the make a rounded rectangle (menu 'select->rounded rectangle), selecting a radius of 30%.

Step 3: select two colours for the fill; i'm going to use a brown (#525a38) and a lighter brown (#8e9c61).

Step 4: do a gradient fill, shape 'linear', starting with the dark brown at bottom, and light at the top.

Step 5: create a new layer, transparent.

Step 6: select the new layer, and shrink the rounded rectangle section (menu 'select->shrink') by 5 pixels

Step 7: fill the new selection with white.

Step 8: add a layer mask to this (now-white) layer. do this by selecting the layer, and right-click, then 'add layer mask'. make it full transparent

Step 9: select the layer mask. select fg/bg colours as black/white, then do a linear gradient fill with white at the top of the selection, and black down only a few pixels (experiment with this, I used 10 pixels). This should leave the highlight glint on the button

Step 10:  add the full web2.0 treatment with a drop-shadow. use step2 for getting the selection, select the bottom layer, then menu 'scriptfu->shadow->drop shadow'. colour black, offset x and y = 4, blur radius = 15. must allow resizing.

Step 11: add some text onto the button, and place it on your site now!

Style 2

This was an improved effort, giving a sort of bevel effect that makes it better for glossy buttons etc.

Step 1: create a 100x100 image, and use the 'advanced options' to set the 'fill with' to Transparency. This is so you can use it on any coloured background.

Step 2:  select All (ctrl-A), and the make a rounded rectangle (menu 'select->rounded rectangle), selecting a radius of 30%.

Step 3: select two complementary colours for the fill; so I'm going to use primary green (00ff00) and white.

Step 4: do a gradient fill, shape 'linear', starting with the green at around 25% in from the bottom and the white at the top.

Step 5: select a curved portion of the bottom using the ellipse selection tool. make it bigger than the image to just get part of the elipse in. The selection will be square at the bottom - not rounded like our rectangle edges from earlier: don't worry, we'll fix this later!

Step 6: invert the selection (ctrl-I), then add a new layer - transparent again. keeping the selection active, select the new layer.

Step 7: fill the selection with white, and now lower the opacity of the new layer to 30. the button should now have that glossy look!

Step 8: lets remove the corners; repeat step2 on the new layer to get a rounded button selection. invert it (which is effectively selecting the 4 corners) and cut it (ctrl-x). we should now have a fully rounded button again!

Step 9: now lets add a bevel. repeat step2 to get the rounded rectangle again, create a new transparent layer, select and fill this with black (don't worry, our real button is still there on the layers underneath).

Step 10. menu 'scriptfu->selection->fade outline'. border size=10, fade from=0, fade to=100. click ok. lower the layer's opacity down to around 20, and you get a little bevel effect making it look more like a real button.

Step 11. finally, for web2.0 completists, add a drop shadow for depth. Again, use step2 for getting the selection, select the bottom layer, then menu 'scriptfu->shadow->drop shadow'. colour black, offset x and y = 4, blur radius = 15. must allow resizing.

Step 12. and that's it. hoorah! use it everywhere.

Conclusion

Well, there you have it; two glossy button styles created using GIMP. Not much more to add, although if you use them in your sites design, drop me a link...