Icon Tutorial

Post Reply
User avatar
Kyran
Posts: 499
Joined: Sat Dec 31, 2011 5:19 pm
Location: Australia
Contact:

Icon Tutorial

Post by Kyran »

FcGP howto gimp
By Aubanel Monnier

I will try to give you some tips to realise nice icons.
First of all, I'll assume that you have the gimp proerply installed. In order to keep some coherency, the most used ressources (gradients and brushes) can be found here.
Untar it with the command tar -xvzf gimp_ressources.tgz , then move the brushes directory in your ~/.gimp-1.2/brushes/ directory and the gradient directory into ~/.gimp-1.2/gradients/
I apologize for the approximate name of the gimp tools, but my version is localized in french ...

If you have a graphic tablet (if you don't have one, you should consider buying one, it's really easier with, and it's quite cheap [about 100 euros for one with pressure]), the parts you should use it are written in italics.

Step 1 :
Think about to what will your icon represent and imagine a simple way to give the information.

Step 2 :

Create a new 92x76 image with a white backgound
Add a transparent layer
Realize a quick sketch in the gimp with the ink tool [adjust size : 0.9, zoom level 400% or more]
Image

Step 3 :

Add a transparent layer under the sketch layer
With the paint tool, colorize the full shape
Image

Step 4 :

Hide the sketch layer
With the magic wand [sensibility 70], select all the painted zones, maintaining the shift key
In the layer dialog, choose the path tab, and transform your selection into a bezier path
Image

Step 5 :

With the remove point button [still in the layer dialog, path tab], remove all the unneeded points. The resulting figure must be really simple
With the edit point button, make the bezier curve stick as much as possible to the shape [maintain ctrl to move a point, shift to move only one control of the point]
Image

Step 6 :

Now, transform you path to a selection
Hide the shape layer, and create a new transparent one
Use the bucket fill to fill the selection
Image

Step 7 :

Choose a gradient form the ones startin by fcgp_
Choose one of the following brushes :
Image
Unselect all [ctrl shift A] and toggle keep transparency on
select the paint brush, toggle gradient on
paint your shape !
Image

Step 8 :

Choose a small round shaped brush
select the paint brush, toggle gradient off and set the transparency to 15 - 20 %
select the white color and add some light at the left top of the shape
same thing in black for shadows
Image

Step 9 :

Duplicate the current layer
Hide one of the clones, and toggle keep transparency on
select all [ctrl A]
fill in black with the bucket.
Image

Step 10 :

Toggle keep transparency off
Call an IIR Gaussian blur filter with a radius of 5
Unhide the original and shift it into the top/eft direction
Image

Step 11 :

Hide the white backgound layer
Save you icon in both png and xcf format
Image
04:27 jim4 why haven't you added wc1 support? this project sucks. i'm only going to use freecraft
05:06 jim4 finished wc1 support yet? i've been waiting for 6 years
05:10 jim4 new things scare me
Post Reply