[Gimp] Glossy Button Tutorial

Subject: [Gimp] Glossy Button Tutorial Tue Oct 12, 2010 7:29 pm

Glossy Button Tutorial

Overview

Level: [Gimp] Glossy Button Tutorial Stars-2

Estimated Completion Time: 5 minutes

What We Are Making

[Gimp] Glossy Button Tutorial JustinButton-2

The Instructions

1. Start by making a new document thats 300 x 300 pixels with a transparent background.
2. Make a circle with the Ellipse Selection Tool on a new layer (make sure there is a fixed aspect ratio at 1x1 pixels)
3. Use the FG to BG gradient with black and white as your foreground and background colors to fill the circle.
[Gimp] Glossy Button Tutorial Picture1

4. Right click on that circle layer and press Alpha To Selection.
5. Go to Select -> Shrink and shrink it by 20 pixels.
6. Make a new layer and fill that circle with the FG to BG gradient, but do the gradient upside down this time.
[Gimp] Glossy Button Tutorial Picture2

7. Make a new layer and go to Select -> Shrink and shrink the circle by 5 pixels.
8. Fill it with a solid color of your choice. I used #006ba9.
9. Go to Filter -> Light & Shadow -> Drop Shadow and make the settings this:

Spoiler:

[Gimp] Glossy Button Tutorial Picture5-1

10. Go to the layer with the circle that is filled with the solid color, right click, and press Alpha To Selection.
11. Make a new layer, and using white as your foreground color, use the FG To Transparent gradient on Radial to make a nice white gradient from the button up.
[Gimp] Glossy Button Tutorial Picture6-1

[Gimp] Glossy Button Tutorial Picture6-1

12. Make a new layer and use the Ellipse Selection Tool (uncheck the fixed aspect ratio) to make a circle on the top.
13. Use the Fg To Transparent gradient with white again to fill this circle.
[Gimp] Glossy Button Tutorial Picture7-1

[Gimp] Glossy Button Tutorial Picture7-1

14. Add decorations! I added text with a drop shadow, merged the layers, and used the Perspective Tool to give it that rotated angle. I also gave the bottom circle layer a drop shadow.
[Gimp] Glossy Button Tutorial Picture8-1

[Gimp] Glossy Button Tutorial Picture8-1

The Finished Result

[Gimp] Glossy Button Tutorial JustinButton-2

Notice: This tutorial is copyrighted to Fuji Planet.
It may not be published with permission from an administrator.

Subject: Re: [Gimp] Glossy Button Tutorial Wed Oct 13, 2010 3:23 am

Nice tut.

Subject: Re: [Gimp] Glossy Button Tutorial Wed Oct 13, 2010 10:09 am

Very nice, you make it?

Subject: Re: [Gimp] Glossy Button Tutorial Fri Oct 22, 2010 5:50 pm