GIMP Tutorial: How to make a Web 2.0 logo or button – part 3

Written by Marc Roberge | 05 February 2011

In this final part of our 3 part Web 2.0 Button tutorial, we add the finishing touches to our button or logo. If you haven’t read parts 1 and 2, I recommend you start with: GIMP Tutorial: How to make a Web 2.0 logo or button – part 1. There are 3 elements left to add to our Web 2.0 button: color, gloss and shadow.

We will begin with adding our accent color behind our button shield. This is simply a circular selection filled with a color gradient of your choice.

In order to do this, we want to create a new transparent layer. You can create a new layer by pressing “Ctrl+Shift+N” on your keyboard or clicking the “New Layer” button on your Layers Panel.

From the “New Layer” dialog, make sure “Transparency” is selected and click “OK”.

From the Toolbox, select the “Ellipse Select Tool” and make sure that you check the “Fixed: Aspect ratio” from the properties panel.

Trace a circular selection only slightly larger than your button shield.

Back in your Toolbox, select the Gradient Fill tool. Select foreground and background colors in the same color range. I’m using red – but you can use any gradient value you prefer. Finally, make sure that Gradient option selected is the “FG to BG”.

Fill in your circular selection with your gradient.

Deactivate your selection by pressing “Ctrl+Shift+A”. We’ll give our accent color disc a bevel by selecting “Filters>Decor>Add Bevel” from the menu. We will set our bevel width to 10 pixels, make sure that “Work on copy” and “Keep bump layer” are unchecked and click “OK”.

We now move our accent color disc layer behind our button shield by clicking the move layer down button on our Layers Panel.

Make sure your button shield layer is selected clicking on it in the Layers Panel. From the menu, select “Filters> Light and Shadow> Drop Shadow”.

Set your X and Y Offset values down to 5 pixels. You can leave the blur radius at 15 or adjust it depending on whether or not you want are crisp or soft shadow edge. Also, you can choose a different color although black works well.

At this point, your button or logo should be looking pretty good.

One last thing we want to do is add a gloss effect. While this simple entails filling an offset circular selection with a white to transparent gradient, I find it works better if you follow these steps. Start by creating a circular selection using the “Ellipse Selection Tool”. You want this selection to be a bit smaller than your button shield and offset to the upper left where theoretically our light source is hitting it.

While the selection is still active, select the “Fuzzy Selection Tool” (blue wand) from your Toolbox. Hold down the Ctrl key and click once in the transparent border area around the “T”.

Still holding down the Ctrl key, click once more in the transparent area inside the “T”. This will allow us to apply the gloss to the button shield while skipping over arguably “transparent” areas. The point being that there shouldn’t be any light (gloss) reflecting off areas of are shield that have been cut out.

Next, we select the “Gradient Fill Tool” from the Toolbox. Select white for foreground color, set opacity to 50% and “FG to Transparent” from the Gradient drop down in the properties panel.