GIMP Plus

Hello Friends,
In this tutorial you will learn how to create a web 2.0 ready “E-Mail” icon with the GIMP.Here’s the final preview of the icon.This tutorial is, as usual highly detailed and designed so that from beginner to Advanced User , everyone can deploy it well.Although some previous knowledge of working with paths and handling selections will help.

Step 1

Start by creating a new image of the size 256 * 256 px and delete its background layer.Create a rectangular box at near center of the image of width 200px and height 132 px approx.

Step 2

Fill it with the gradient FG to BG with Foreground Color as White (ffffff) and Background as e5e5e5.You should have the following by now.

Step 3

Now we will add a drop shadow to the box created.Ok this is not really necessary but while creating icons , we should add a drop shadow to the main structure , because it helps to blend in multiple backgrounds.Apply the drop shadow with the following settings to the box layer.

Step 4

In the next step we will create the red and blue stripes.Make a selection 9px wide using rectangle select tool or path tool as shown below.

Step 5

Pick the “Bucket Fill” tool and with the option “Pattern Fill” selected , fill the selection with the pattern “Warning!” in a new layer.Deselect all by pressing Ctrl + Shift +a

Step 6

Now pick up the Select by Color Tool and delete the yellow part by selecting it.Now let us think of the remaining black stripes as 3 parts , one of right side , one of bottom side and one of left side.First we will do the blue stripes.Create 3 new layers namely “blue_right” , “blue_left” and “blue_bottom”.Using the selection tools and with options like remove from selection , make alternate selections in one of the side and fill it with the Gradient “FG to BG” and FG color as “#162463″ and BG color as “#5C96C4″.Repeat the same in all 3 sides to imitate the following :

Step 7

Repeat the same steps to obtain the red stripe but with FG color as “#C40B10″ and BG Color as “#EA4444″.By now your stripes should be ready and look like :-

Step 8

Switch on the Grids view by selecting View -> Show Grid . Now create a near trinagular path with curved bottom vertex as shown below.You can zoom in to obtain better shapes.

Step 9

Now in the tool menu ,click on the button “Selection from Path”.

Step 10

Change your foreground color to “#edeeee” and background color to “#cccccc”. Pick the blend/gradient tool and select gradient “FG to BG”.Create a new layer.Name it “top_paper” and apply the gradient as follows.Unselect all by using CTRL + SHIFT + A

Step 11

In simillar way create a path as below and select it.

Step 12

Create a new layer “bottom_paper”.Set your FG color “#e2e2e2″ as and BG Color as “#f6f6f6″ and apply it as following.

Step 13

Time to add some shadows and give it the final look .With the “bottom_paper” selected , go to filters ->light and shadow -> Drop shadow and with the following settings apply it.Also make sure to place the drop shadow layer beneath the “top_paper” layer or better remove the extra part.

Step 14

Now select the “top_layer” again go to drop shadow and apply it with following settings.

Step 15

By now you should have the following.

Step 16

Final step, apply the drop shadow again to “top_paper” layer with the same settings but keeping the radius as 3px.Now bring the drop shadow layer to focus , and go to filters->blur->blur and apply it twice.Your email icon is now ready,just go on showing it off on your website or blog ;).If you want you can use this icon too on your product or website.
Comments , suggestions and doubts are welcome.