Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Using Gimp to make Web 2.0 Buttons and Graphics

There are many tutorials about creating buttons and graphics in the new 'Web 2.0' style. Unfortunately, all these tutorials are for Photoshop users. The Gimp users are completely ignored. So, I have decided to correct this error - this is a tutorial on how to create a Web 2.0 style button in Linux using Gimp(will work in windows as well).

In this tutorial we will see how to create a Web 2.0 button - you know the kind I am talking about. Rounded corners, gradients, 3D effect - the works. I am using Gimp 2.2.8 in this tutorial. Before starting, get the latest stable version of Gimp(right now it is 2.2.13). Somewhat earlier versions will work as well - if it supports the rounded selection option(more about that later).

Create the Image

If you are ready, lets get to business. First create a new image with the following specifications...

  • Width - 200px
  • Height - 100px
  • Background - Transparent
New Image in Gimp

The Button

Now create a rectangle selection(Rectangle Selection button) with the height and width of the button we are going to create.

New selection

Click on 'Select->Rounded Rectangle' on the menu bar. If this option is not there, you are using an old version of Gimp. Try 'Script-Fu->Selection->Round'. If that is also not there, you are using a really old version of Gimp. Either upgrade you gimp to a newer version or learn how to make a rounded selection in the old way. Click OK in the 'Rounded Rectangle' Dialog to make our rectangle selection, well, rounded.

Now fill it with a web 2.0 colour - anything bright and/or blinding will do fine. We will use the color of the RSS icon(#f48f35) - you cannot get any more Web 2.0'er than that. Now you should have something like this...

The Highlight

The next step is to create a small rounded rectangle selection inside this rectangle at the top. Use the same methods as described above. The result will look like this...

Create a rounded rectangle inside the last one

Create a new layer and select the Gradient Tool(Gradient tool or L on the keyboard). Create a gradient in the new layer like this.

Now you have...

Text

Now add the text using the text tool( ). I use a white color with 'Ellinia CLM Bold' as the font. You can choose what ever you want.

That's it - you got a button that is as Web 2.0 as del.icio.us. You may have to tweak the transparency of the layers to make it look perfect. You can make it a bit better by using a small shadow of the outer rounded rectangle with the color #f48f35. You can do this by selecting the layer with the outer rectangle and selecting 'Scrit-Fu->Shadow->Drop Shadow'

To see the full effect giving the image a white background - create a new layer, move it to the bottom of the layer stack and fill it with white color.

That's it!

Now you have the final image. Is this Web 2.0 or what?

The XCF file of this button.

Photoshop Tutorials

There many photoshop tutorials to do this. Go read them, get the idea of how to do it, and use gimp to do it.

Now, let me see how to create those 'badges'(or violators) in Linux.

Filed Under...

50 Comments:

serhiy said...

Very good article. This is what I was looking for. Also there are many other different interesting articles I found on this Blog pages. And I want to ask you about possibility of translation some of them on russian on pages of my blog. If it is possible please, let me know.
Thanks

Anonymous said...

Great article! I was looking for something like this for ages! Thanks alot! Cheers! :)

Nbhat said...

Gimp stuff posted by you was quite useful Thanks !!

Anonymous said...

Good article!
Thanks!
Dugg!!!

Unknown said...

Web 2.0 has NOTHING to do with buttons like that.

Matt DeClaire said...

Your mom has nothing to do with buttons like that.

Anonymous said...

I undid you mom's buttons last night.

Anonymous said...

web 2.0 is a style of stuff,and its code so it is a part of it. Good job. Rite a tut on diff buttons now.

Anonymous said...

Thank you for that article! Good to see the gimp getting respect!

Anonymous said...

just what i want to do, but once i have my first rounded rectangle, gimp will not allow me to do a second rec select on top of it. when i choose rec select and move my curser over the first rectagle, the curser chagners to a 'move' curser. what am i doing wrong?

Binny V A said...

@Everyone
Thanks for the kind words guys!

@Anonymous
I never faced the selection problem you described. Try de-selecting the selection using the 'Ctrl+Shift+A' keys.

Anonymous said...

Your rounded corners looks sucks. Use Photoshop :)

Shankar Ganesh said...

look at this:
http://shankarsgimp.blogspot.com/2007/02/subscribe-icon-for-your-feed.html

P said...

If you apply the Blur filter to the 'Light' and 'Button' layers, it removes the jagged edges and really cleans up the image.

Anonymous said...

If you like to make button, you can have a look at button maker, which provides many kinds of tools about making button.

Anonymous said...

Great article, saved my day, thanks a lot for the clear explanation!

Spencer Russell said...

Thanks for posting some help for Gimp users! My one suggestion is that you do something about the nasty jagged edges, such as what Patrick suggested. Possibly some anti-aliasing could help?

Unknown said...

Thanks, very useful.

AnRkey said...

Awesome, thanks very much! Oh and never mind those narrow minded fools who are so rude for posting those lame comments.

AnRkey

Anonymous said...

Making colourful buttons has nothing to do with web 2.0. Sorry. Of course it is nice design according to some voices...

Anonymous said...

great

Ming the Merciless said...

Hey, thanks for posting this. It's easy, and makes nice looking buttons. You can see the ones I made last weekend on the site linked in my profile if you want to check them out. :)

Anonymous said...

Wow, great helped me, thanks very much!

Anonymous said...

Thank you very much. This is going to help me enormously!

Anonymous said...

Simple (when you know how of course), I've been trying to figure out how to do that for ages.
Well written and easy to follow, thanks for taking the time to write the tutorial.

Anonymous said...

Excellent articl

Anonymous said...

Thanks alot

ever-re said...

A good tutorial for our linux friends.
I have a blog with similer content about
web 2.0 graphics

Anonymous said...

Thank you so much!

Willem :) said...

Thank you! =)

Anonymous said...

Thank you. GIMP is a powerful tool, but many of the features are hidden from the users.

Anonymous said...

Thanks! this is just what i needed!

Gyges' Ring said...

thanks! i'm a newcomer to GIMP and that was a helpful tutorial.

Jennifer said...

Thank you for publishing this... I am looking forward to updating my blog with these buttons!

angie said...

Very helpful tutorial and how I can create buttons in Gimp. But I do have a question. Now that I have the xcf doc, I can not get it to rinder in my browser. I dunno if it is just a windows thing or if I should try it in firefox, but I need my buttons to rinder. :D Do you have any idear what I am doing wrong?

Binny V A said...

@angie,
Download the XCF file and open it in GIMP.

teambob said...

Great tutorial. I found that when I was putting the shine on the button I needed to start the selection from outside the orange rounded corner.

Also the text you use on your final buttons are really horrible - it really lets down what is really a great design.

I will give you a link when I am finished.

Thanks for the tutorial!

teambob said...

Hi,

The image I created from scratch from the instructions in this article is here: https://magneticbooks.com.au/icons/checkout-button.png

-Andrew

Unknown said...

Great article. Thanks for giving me another reason to stick with GIMP. Long live open source.

Anonymous said...

Several problems- exactly how do you create a 2nd rectangle inside of the first? I'm new to GIMP so leaving out an important step prevents me from understanding what you're trying to make.

Anonymous said...

Thank you so much. I'm absolutely new to this. Started today and already figured out a lot. downloaded the xcf button and opened the layers to see there's a lot more to it than what's in the tutorial like making the shadow layers to give it 3d floating look. Awesome! Thanks again!

Anonymous said...

Thank you so much for the guide... It is very helpful. This is the first time i have created such a wonderful button after following the guide...

SunKing2 said...

Thanks! I found that selecting an inner square rectangle and then selecting rounded rectangle from the menu did the trick.

Web 2.0 Design said...

Nice post. Many thanks for sharing this informative resource.GIMP can accomplish the essential image workflow steps like resizing, editing, cropping images, combining multiple images and converting between different image formats.

Ginny said...

Great resource! At first I thought "Wow, I could just change the color and text" for my project, but then realized that wouldn't teach me anything. GIMP n00b here, but I followed your steps and I'm very happy with the result (had to fool with different colors with the gradient of course)!

The new buttons will not be "live" for a day or two, but at least the graphics are mainly done thanks to you excellent tutorial.

Anonymous said...

Wow, this was my 1st GIMP creation! Thanks for the tut Bin :o)

Lucia Otoyo said...

Excellent tutorial. So easy to follow. Thank you! :)

Anonymous said...

This is a great tutorial - but it is missing an essential part for making good web2.0 buttons - is there an easy way to make a hover/active copy? Something that is identical only brighter colors?

ManTaboo said...

I just wanted to say thank you very much for this. I am trying to build a nice web site with every aspect of it created from scratch by me. I am hard coding it myself and creating all of my own graphics. I would like to share with everybody that if you use the blur tool and blur the edges on the top layer to blend them in a bit, it really does make it look much nicer. Excellent tutorial. Thanks again.

Anonymous said...

Thanks for the tutorial, this really helped me to get started with making web buttons with GIMP!