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
The Button
Now create a rectangle selection(
button) with the height and width of the button we are going to create.
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 new layer and select the 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?
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.
37 Comments:
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
thank you!
Great article! I was looking for something like this for ages! Thanks alot! Cheers! :)
Gimp stuff posted by you was quite useful Thanks !!
Good article!
Thanks!
Dugg!!!
Web 2.0 has NOTHING to do with buttons like that.
Your mom has nothing to do with buttons like that.
I undid you mom's buttons last night.
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.
Thank you for that article! Good to see the gimp getting respect!
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?
@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.
Your rounded corners looks sucks. Use Photoshop :)
look at this:
http://shankarsgimp.blogspot.com/2007/02/subscribe-icon-for-your-feed.html
If you apply the Blur filter to the 'Light' and 'Button' layers, it removes the jagged edges and really cleans up the image.
If you like to make button, you can have a look at button maker, which provides many kinds of tools about making button.
Great article, saved my day, thanks a lot for the clear explanation!
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?
Thanks, very useful.
Awesome, thanks very much! Oh and never mind those narrow minded fools who are so rude for posting those lame comments.
AnRkey
Making colourful buttons has nothing to do with web 2.0. Sorry. Of course it is nice design according to some voices...
great
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. :)
Wow, great helped me, thanks very much!
Thank you very much. This is going to help me enormously!
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.
Excellent articl
Thanks alot
A good tutorial for our linux friends.
I have a blog with similer content about
web 2.0 graphics
Thank you so much!
Thank you! =)
Thank you. GIMP is a powerful tool, but many of the features are hidden from the users.
Thanks! this is just what i needed!
thanks! i'm a newcomer to GIMP and that was a helpful tutorial.
Thank you for publishing this... I am looking forward to updating my blog with these buttons!
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?
@angie,
Download the XCF file and open it in GIMP.
Post a Comment