In this tutorial you will learn how to create a nice blue glossy Web 2.0 button with a reflection in Gimp.
Create a new image with a white background. It can be nice to have some space to work on so let’s make the image 500×500.
Create a new layer. With the Rectangle select tool, create a selection that’s 200×70 in the middle of the image. Rounded corners should be enabled and set to 15.
Set your FG color to 3377ad and your BG color to 4bb7f0,
This layer is going to be the border around the button, it’s always nice to have a dark border color, so fill that selection with that dark blue color (3377ad).
Create a new layer, shrink your selection by 1 pixel. Right-click->Select->Shrink.
Select the Blend tool, reverse the gradient.
We’re going to create a gradient from the bottom of the selection to the exact middle of the button.
So how do we find the exact middle? Look at that bar in the bottom of the image window while you drag the gradient, when it says -34 it’s in the middle of the button.
(since the button is 70px minus 2px (border), and half of that is 34.)
(hold Ctrl to get a straight line)
Our button should look like this now:
Create a new layer. Use the Rectangle select tool and create a selection on the top half of that button. Rounded corners should be enabled and set to 15. My selection measures 190×32.
Set your FG color to white. (ffffff)
Select the Blend tool, set the gradient to FG to Transparent. The gradient should not be reversed.
Now create a gradient from the top of the selection to the bottom of it.
Get rid of that selection, Select->None. Also reduce the opacity of the layer to 75.
Create a new layer, grab the Pencil tool and select the brush called Circle (03).
Now draw a white line not too far from the bottom edge of the button. The beginning and end of the line should be aligned with the beginning and end of the “gloss”.
(hold Shift to go into line mode, then hold Ctrl to draw a straight line.)
Do a Gaussian blur of 12 on that layer. Filters->Blur->Gaussian Blur
That should give our button a nice blurred white line like this:
Select the layer with the button border (the first layer we made), and give it a drop shadow.
Filters->Light and Shadow->Drop Shadow.
The settings should be: Offset X 0, Offset Y 0, Blur Radius 5, Color: black.
That gives our button a nice dark outer edge like this:
Add some text to that button. I used a font called FreeSans Bold with size 35. Use the Move tool to position the text perfectly.
Give the text a drop shadow with the same settings as we used on the button border. (Offset X 0, Offset Y 0, Blur Radius 5, Color: black)
Now for the reflection. First, merge together all your layers except for the background. There are many ways to do this, but the easiest in this case would be to make your background invisible, and then right-click and select Merge Visible Layers, and choose Clipped to image.
Make the background visible again, and duplicate the layer with the button on it.
Now we’re going to flip the duplicate button upside-down with the Flip tool, simply set the Flip tool setting to vertical and click on the button.
Use the Move tool to position the duplicate button right underneath the original button. The borders of the buttons should be right next to each other.
Add a layer mask to the button that is upside-down. (right-click on the layer and select add layer mask) Set the mask to White (full opacity)
Layer masks control the opacity of individual pixels on a layer, so you can use them to have different opacity in different areas on a layer.
Set your FG color to black, select the Blend tool and set the gradient to FG to Transparent.
We’re going to create a gradient inside the layer mask, so click on the layer mask in the layer dialog to make sure that it’s the layer mask we’re working on and not the layer.
It’s where you start the gradient that controls the height of the reflection, so if you want a small reflection you should create the gradient from the middle of the duplicate button to the middle of the original button.
If you want a large reflection, then create a gradient from almost the bottom of the duplicate button to the middle of the original button. I chose to create a large reflection.
Reduce the opacity of the layer to 75. This makes our reflection a bit smoother.
The button is done! The final result looks very nice:
A short word on saving before we end the tutorial, if you save the button as JPG the white background will be included, if you don’t want the white background included with the button, you should either change the color of the background, or delete the background and save as PNG. You should of course cut out the button from the rest of the image afterwards so you don’t end up with a 500×500 button.
By subscribing to our RSS
feed you get notified when
new tutorials are published
Want to help make this site better?
There are lots of things you can do!
If you know some good tricks or
techniques maybe your interested in
Writing a tutorial.
Perhaps you simply have a good idea for a tutorial,
then you could
Suggest a tutorial.
Have a look at the Contribute page to learn more.
Pete Januarius
October 27th, 2008
Great Tutorial. I was looking for one like this all over the net. This is the best one I have seen and I’ll be using the created buttons in my current application
Cheers
Pete…
yay
October 27th, 2008
Thanks for the kind words Pete, I’m glad you found the tutorial useful
Ricardo
October 30th, 2008
Thank you very much for the tutorial!!! Simple, quick and very usefull
Harry
October 31st, 2008
Looks nice but I can’t get the step 7. each time I make a border I get a square border not rounded.
What can I do ?
Harry
October 31st, 2008
I mean drop shadow. My button is rounded but not the shadow ??
yay
October 31st, 2008
Harry, the drop shadow should shape itself after the layer that is selected when the dropshadow is applied. So make completely sure you select the layer with the button border before you apply the drop shadow. If you still get the same problem then let me know so we can fix it
cookie
November 2nd, 2008
It was really helpful. Thanks for your work on this tutorial and sharing this.
Harry
November 4th, 2008
Hi,
I still keep having that problem with the step 7, drop shadows.
I can’t see the button border in the layer and I don’t get a round corners shadows.
Just don’t know what I do wrong ????
yay
November 4th, 2008
Harry, if you want to you can send me your .xcf file and I’ll have a look at it.
Just send it to yay(at)NOSPAMgtuts(dot)com. (remove the nospam part)
rok
November 9th, 2008
Hej yay!
Thanks for the effort in doing this tutorial, man! I’m a noob with gimp but I was able to make a pretty cool page design using the tricks guys like you explain in such tutorials.
thumbs UP!
yay
November 9th, 2008
I’m glad you found it useful rok, you should post a link to your page design, I would love to see it
mary
February 1st, 2009
thanx a million – this is the best tutorial I’ve ever read
so well written & precise
diego
February 16th, 2009
Thanks man
Great tutorial and easy to do.
ckybam69
February 23rd, 2009
You write the best tutorials yay. very precise. the only ones i have found that i can work all the way through without having a problem.
Mike
March 1st, 2009
its very easy, nice tutorial..
Zach
April 17th, 2009
Hi all, I’m looking for a tutorial on creating rounded caps, for a text area. Preferably with a drop shadow? My rounded corners just are not round enough, e.g. http://zhannes.webfactional.com. Also, when using Select => Rounded rectangle, I’ve tried to make the radius smaller to make the cap’s curve tighter, but that leaves a bunch of extra background before the cap’s curves meet the border of my text area. Thanks for any help!
John
April 17th, 2009
Awesome tutorial Yay, a very informative and simple tutorial awesome job
Ash
May 4th, 2009
Awesome job yay, well done. This is a really big help to me trying to get a software business up and running with next to no resources. Thanks very much.
mem
May 6th, 2009
very well explained even for mac users. Any tips how to do this in illustrator?
faniry
May 20th, 2009
Great tutorial, but it will be better if the there is a way to make a flash button in the sam e design. I think that it is not available in gimp for the moment.
CGABRIEL
June 9th, 2009
Great tut men!!! I’m a total newbe to the Grapchics Desing / Photo Manipulation and from all the Tut’s i’ve have seen, your’s is the best one. Can you create some more like this one’s and with photo’s manipulations (retouching, etc etc etc)!????????? Thank’s in advanced.
Damien
June 16th, 2009
Well done mate, if a dummy like me can get it you must be doing it right!
from the Guy who has Design as a Dump Stat!
Russ
June 18th, 2009
Yay,
The sign of a great web tutorial is how long it will provide useful information for others. At eight months, it is still going strong! I spent 2 hrs working through your examples and teaching myself how to create a button. With NO experience what so ever with GIMP, your guide was MOST EXCELLENT! You Rock! Keep up the great work!
sabari
July 11th, 2009
cool…..i start to love all these simple yet effective tutorials in this site…..
Filipe
July 17th, 2009
Great Tutorial, o followed and got a nice “shiny” button
Raseel
August 25th, 2009
I’m a complete GIMP (or any graphic editing program) noob. So , seeing this kick-ass button at the end of this post was AWESOME !! Great work. Thanks.
enemdy
September 4th, 2009
Nice button, I really like it. Very useful. Thanks a lot mate!
Georg
September 8th, 2009
Nice. Exactly what I was looking for!!
Todd
November 3rd, 2009
Very nice tutorial, makes a beautiful button, thanks! I did have trouble with the save part. Could you go over the steps that it takes to eliminate the white background or to make it transparent? I’m a Gimp newbee, obviously! After I deleted the background layer and saved as .png, I still had a rectangular selection around the button that had color. Cheers!
yay
November 3rd, 2009
Todd, it sounds like you did it right, open the .png you made in gimp and check if the background is transparent, viewing the button like you view other images in windows will probably show a white background, that’s normal windows behaviour.
Michael
December 30th, 2009
Fantastic tutorial. Thank you for the information. I made a button for my wife and she was suitably impressed. Have a wonderful New Years!
MB