
This is my first Icon Tutorial. Below is details on how I created a book icon for my programs. I created this Icon using Photoshop, but you should be able to create it in Gimp, although I have not tried it.
First I open up Photoshop, and create a new image. We need to design this Icon at 64x64 pixels. We do this so that when it is scaled down to 32x32 and 16x16, it looks better and is easier to create.
You will also need a transparent background. I left the Resolution at the default of 72.
The first thing i am going to do is create the shape for the cover. For this I use the rounded rectangle tool.
I want the books edges to be curved, so I change the radius to 4 points.
You then need to make this shape editable. To do this, right click on the shape in the Layers Table, and select Rasterize.
I then want to add a gradient to the book cover. In the Layers Tool Tab, click on the new shape if it is not already selected.
Then, click on it again while holding down the CTRL key. Doing this will select the shape and display a selected border round it. Then select the Gradient Tool (which might be hidden behind the Paint Bucket tool).
Next you must select the gradient you would like. To do this, click on the drop down box at the top, this will bring up the Gradient Window.
You can colour you book to your requirements. I chose red for this particular book. The light shade of red is #FF3300 and the darker shade is #990000.
Then drag and click over the shape to create your gradient. You should try to get the lighter shade to area at the bottom. You will also need to make sure that you have Radial Gradient selected to get the right effect.
Then right click on the Shape in the Layer Tab and select duplicate layer. Position this Layer lower down the list in the Layer Tab because we want it to appear at the back.
Move this layer pp and right in the window, so that it appears like in the figure below.
Then you want to duplicate this layer. Make sure it is above the back cover, but below the front cover in the Layer Tab, because this is going to represent the pages inside the book.
Then select the shape and fill it with a white style gradient just as you did the cover earlier. I used #DEFFFF for the light shade and #B4E2FF for the dark shade.
We are now going to create the binder rings that hold this book together. To do this we are going to use the select Tool, but first we need to add a new layer. Hold down CTRL, SHIFT and the N key, and name the layer 'binder', and click ok.
Now using the select tool, draw a shape that looks like the one below, and fill it with a grey/white gradient of your choice.
The next thing to do is duplicate this shape and position it further down, repeat this action until you reach the bottom.
Play around with the positions until you find one that pleases you. Once you have done this, hide all the other shapes apart from the binder shapes by clicking on the eye of the layers in the Layer Tab. Then with the binders visible only press CTRL, SHIFT and E to merge them together as one object.
Now create another new layer and make sure this is above everything else in the Layer Tab.
Use the Pencil tool to draw a box over the cover, this will represent the title area of the book, and just to give it a little more detail.
Create another new layer and name this title.
Use the Pencil tool to draw a box over the cover, this will represent the title area of the book, and just to give it a little more detail.
We are now going to create the gloss. Use the circular select tool to create an oval shape to cover half of the book cover.
Now use the Paint Tool to fill the shape white. Then double click on this layer in the Layer Tab to bring up the Layer Style window.
Then, under the Blending Options, you need to edit the Opacity under the General Blending. Change this to 50% and click OK.
We now need to remove the excess gloss from the view. With the Gloss Layer still selected, hold down CTRL while clicking on the Front Cover Layer. This will select the a region the same as the front cover.
Next, right click on the window over the Graphics, making sure that you are using the select tool. Chose the Select Inverse option on the menu that appears. After that, press the DELETE key to remove the rest of the shape.
The last thing to do is to define the Icon, and giving it a border will do this. Create a new Layer, and move it to the bottom in the Layer Tab.
While Holding the CTRL key again, just like in the last step, press every other Layer in the Layer Tab.
Then go to Select -> Modify -> Expand... and enter 2 into the window that appears.
Now fill in the selected area using the Paint tool with a Black colour. You Icon should be complete. Use the same style of design for other Icon's to give a nice theme feel for your Icons.
You have now created your icon....nearly. You now need to convert these to Icons.
Save your icon so that you can come back later if you want to change something.
Now flatten your layer by pressing CTRL, SHIFT and E.
No go to Image -> Image Size... and change the image to the size of your required Icon, e.g. 32x32.
Save this as a .png file and use the Icon Software provided by Axialis Software to import the .png file and create an ICO file from it.




