Book Icon Tutorial
Tuesday 30th October 2007 at 11:57

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.

Fig1

Fig2

The first thing i am going to do is create the shape for the cover. For this I use the rounded rectangle tool.

Fig3

I want the books edges to be curved, so I change the radius to 4 points.

Fig4

You then need to make this shape editable. To do this, right click on the shape in the Layers Table, and select Rasterize.

Fig5

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).

Fig6

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.

Fig7

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.

Fig8

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.

Fig9

Fig10

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.

Fig11

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.

Fig12

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.

Fig13

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.

Fig14

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.

Fig15

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.

Fig15

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.

Fig16

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.

Fig17

Fig18

Then, under the Blending Options, you need to edit the Opacity under the General Blending. Change this to 50% and click OK.

Fig19

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.

Fig20

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.

Fig21

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.

Fig22

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.

Fig23

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.

+
0 Comments   |   Permalink   |
Add your own comment

Use the form below to add a new comment to the blog entry and other comments above.

Visitor Name:
Visitor Comment:
Email Address:

Your email address will NOT be forwarded to any third parties.

 
Visual CAPTCHA
Captcha Image: