Web 2.0 Calendar icon in Gimp [Tutorial]

Today I will show you how to create a Web 2.0 calendar icon in Gimp. I use the latest version of Gimp, which is 2.6.1, I recommend you to download this version but it's just an advice, an older version won't limit you in this tutorial. Let's start.

First create an image in Gimp, it's OK to have a large one, I chose 640x480 to have a large canvas around the image. Fill it with white (if it's not already).

Go to selection tool (R) and make a selection which will be the "inside" of your icon (so make it aptly large). Go to Layers and create a new layer. Call it "Icon inside". Fill it with white (it won't make any change now)

Go to Layers and make a new layer called "Black outer border". Go to Select - Grow (3px). Go to Select - Rounded rectangle (3% Radius). Fill it with black and move it under the "Icon inside" layer. Here is what you should get:



Now right click on the "Icon inside" layer and select Alpha to selection. Create a new layer called "Red heading". You will need to select the top of the white layer called "Icon inside" so go to selection tool (R) hold the Control button on your keyboard and select something more than the lower half. Than fill it (B) with red (#db1b1b). Unselect all (Ctrl+Shift+A)



At this point, we we'll try to make a lighting which will add a realistic appearance. I will use the Path tool. Stay calm, there is nothing to worry about. Make two points, than add the third one (by holding Control button) between them and move it. When you finish and you are happy with the result, the first step is done. You should have a curve, make some more points to make a fluent "selection".



Right click the "Red header" layer and select Alpha to selection. Make a new layer called "Lighting". Go to Path dialog, there should be something like "path to selection". Hold Control+Shift buttons and click on that icon. Fill the selection with white and set the opacity to 15%.



I will do something very similar on the bottom of the image. Select Alpha to selection of the "Icon inside" layer and make a new layer called "Shadow". This new "Shadow" layer should lay above the "Icon inside" layer and under "Red header" layer. Make a curve using the path tool, go to Path dialog, click on the "Path to selection" icon (while holding Control and Shift buttons) and fill it with black, than adjust the opacity.



You can also stroke the path and add a border of the shadow but: you will have to make another layer for it (because of the very low opacity used on the "Shadow" layer) and you will need to erase those parts of the stroked line which aren't included in the "Icon inside" layer.

To make it more realistic, you can add a shadow. Select the "Black outer border" layer. Go to Filters - Light and Shadow - Drop shadow (0px, 0px, 8, black, 80%). Here is my final result: