In this button 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.
Want more tutorials? So do I, but I unfortunately have very little time to write them! Therefore I need to get other skilled Gimp artists to write more tutorials.
To do this I plan to pay artists to write tutorials that you and I can read here on this site!
If you want to, you can help me raise funds to do this by donating. All donations go towards getting more tutorials! More info here.
BigFatty
July 24th, 2010
Thank you again . now , i need to learn how to make navigation .
Mohammad
September 5th, 2010
Thanks a lot, really nice tut!
Shadej
October 16th, 2010
That is really good!
Galdarn
October 19th, 2010
Nice tutorial.
I had a problem with flipping the copy button. When I tried to flip it both buttons would flip. After re-reading your instructions I think I may have missed the image mask creation would that cause them both to flip?
Jake
December 15th, 2010
I honestly have to say that this has been the best tutorial I’ve found on this technique. I’ve looked at 20 tutorials over the past 3 days and none of them took me through the steps so clearly and concisely. Thank you very much for making such a useful piece of content.
Cheers,
Jake
Piers
December 22nd, 2010
Hi there, Brilliant tutorial, thank you so much. Could you do one for creating a circle in a similar manner? Like, a shiny sphere. I need to create five lights, like traffic lights ranging from red through to green. I want them to be really shiny and glossy. Going one step further, I want to then have them in two forms each, one not “lit up” and one “lit up” if that makes sense.
Any help or direction would be brilliant.
Thanks in advance.
Piers
Josh
January 2nd, 2011
Excellent tutorial. I’m looking forward to using this on my site. Thanks for the clear walkthrough!
Ashley Sheridan
January 29th, 2011
Good tutorial, but badly misnamed; Web 2.0 is nothing to do with glossy buttons.
Web 2.0 Button with reflection | Prait my Blog
February 3rd, 2011
[...] Follow the link here.. it’s really a wounderful Tutorial to make Shiny Buttons. Not only for iPhnone. http://mygimptutorial.com/web-20-button-with-reflection [...]
Stor fin knapp til websiden | Jobbe bedre
February 15th, 2011
[...] fant denne siden, og lagde min egen på 20 minutter. Og du trenger bare gratis tegneprogrammet gimp. Dette [...]
Farouk
February 16th, 2011
Excellent!!! Great tutorial with step by step instructions and wonderful screen shots of all required menus and selection options…
Thanks
blumeditravel
March 15th, 2011
Hi,
awesome tutorial. I just created the shiny button. Really easy to follow. I have bookmarked it. thanks a lot
Praveen
March 24th, 2011
This was the most informative and clearly written for GIMP on this topic. Thanks a lot. You rock!
Peach
March 27th, 2011
This tutorial was helpful and, as you can see, inspired me. Thanks!
rocoat82
May 12th, 2011
Very helpful tutorial.
Easy to understand and easy to implement.
Very very compliment for all (web presentation, content).
Also i have bookmarked it.
Thanks alot
Nowi
June 8th, 2011
Mahlzeit!
Very good tutorial and great step by step instructions. Excellent for GIMP beginners.
sbouras
September 19th, 2011
Thank you for this easy step by step tutorial it really help me a lot.
Kat
October 30th, 2011
Excellent tutorial! Not only good results… no wait, perfect results, but the directions were very clear. Not too many steps, not too many trivial details, no important detail omitted. Thank you!
Van Luu
November 22nd, 2011
Thank you very much!
Mickey
January 7th, 2012
perfect, thanks a million!! Never have I seen a tutorial so easy to follow!
Aaron
January 23rd, 2012
Excellent tutorial for a pro looking result.
I can remember everything I did without having to refer back to it too which shows it was well explained and simple.
Mohit Jain
February 24th, 2012
Thanks for this excellent tutorial. It really helped me a lot in designing the website. Please keep up the good work
Kaz Augustin
March 23rd, 2012
Great tutorial and great-looking results. Many thanks for taking the time to explain everything so clearly.
Martyn
March 29th, 2012
Thanks for this. I have read a number of tutorials on achieving a glassy effect and this one is by far the clearest.
Thanks again.
phonebook_
September 19th, 2012
You’re the greatest man.
I learned a lot doing this one.