25 August 2007 - Posted in Uncategorized
Create a web 2.0 button with Gimp
Web 2.0 design lifts sites into a new league of elegance, and one of the main features is web 2.0 buttons, they look hard to make but in actual fact, they are really simple.
Just follow this tutorial to create this:
- Create a new canvas with the dimensions 100px by 27px
- We are going to make our button green, but you can make it whichever color you wish, go to The Gimp main window and double click on each of the colors in the color choose area and select two shades of a similar color, make the bottom of the two the darker shade.
- Now go back to your canvas and press Ctrl and . (full stop). This will fill the layer in the darker shade.
- Now choose the gradient tool on the main window or press L
- Click and drag the tool from the top of the layer to the bottom. This will create a gradient.
- Now select the New Layer option from the Layers menu.
- Go to the main window again and change the top color in the color chooser to white.
- Make sure the new layer is selected on the Layers window (if it isn’t shown then press Ctrl + L)
- No go to the canvas and press R on your keyboard, now click and drag a rectangle exactly half of the canvas size (in the top half, not the bottom).
- Now press Ctrl and ,
- Now go back to the Layers window and look for the opacity slider, set this to 40% and you should have a web 2.0 look button similar to the one above.
- Finally add some text by clicking the Text option on the main window or pressing T. You can change the fonts and colors by using the Tool options in the bottom half of the main window.
Julius Kuhn said...
I liked your tutorial but I think there are things you could improve. First it seems to me like the buttons you were uploading are not really uploaded after all. Instead of the actual button I just see “web20button1.png” and a box around it. Secondly it is always a lot easier to provide some picture of what you are actually doing in gimp. Take a look at http://gimp-tutorials.net/taxonomy/term/1 , look how he does it.
I hope you don’t mind my criticism btw I love Scrubs too
July 18th, 2008 at 6:06 pm
Simon North said...
Hi Julius, this is a very old tutorial and when I changed over the blog all the images were lost so I am sorry about that
July 18th, 2008 at 6:18 pm