Jul
30
2007
Pencil Icon

Following on from our previous article, we're going to take you through some simple steps to create a nice pencil icon
Couldnt be bothered reading?
Download the finished pencil (SVG format)
1. Fire up inkscape and create a new icon 32x32
File → New → icon_32x32
2. Create a rectangle 25px x 13px rectangle positioned at x:5 y:0
- Click on the rectangle icon on the left hand pane or press F4
- Draw a rectangle on the page
- Click on the rectangle to select it
- Set the x coordinate value to 5 and the y to 0, again in the top pane.
- Resize it to 25x13 by editing the W: and H: values in the top pane.
3. Add a splash of colour
- Inkscape will remember your previous settings, so if you'll probably want to change this;
- Press ctrl + shift + F to open the colour dialogue box.
- Click the Fill tab and set the RGBA value to edd400ff
- Also click the Stroke (i.e. outline) tab to make sure that no stroke is set
4. Pencil end (non chewed)
- Select the circle tool f3
- Draw a circle w: 10, h: 13
- Position it at x: 0, y:0
- Press ctrl + shift + F and colour it a40000ff
- Lower the oval shape under the rectangle
5. Point it out
- Now we'll make the pencil tip - select the polygon tool *
- Tick the polygon box, set Sides to 3 and both Rounded and Randomized to 0
- Draw a triangle on the canvas and resize it to w: 10, h: 13 positioned at x: 30, y: 0
- Press ctrl + shift + F and colour it c17d11ff
- Draw another triangle w: 3, h: 4 positioned at x:37, y:4.50 and coloured 2e3436ff
6. Give me more rectangles!
- Just like we did in step 2
- Create another rectangle w: 25 h: 3 x: 5 y:10 and fill it with c4a000ff
- Create another rectangle w: 25 h:5 x:5 y:0 and fill it with fce94fff
7. A bit of shine [optional]
- select the rectangle from step2 & and oval step3 by holding ctrl and right clicking both
- press ctrl c to make a copy and ctrl v to duplicate
- now fuse them into one object ctrl +
- overlay a big oval like so and subtract objects
- select both object, again by right clicking on them
- subtract objects ctrl -
- fill it white 50% opacity and place it 0:0
8. Look sharp!
- Select the bezier tool shift f6
- Roughly draw in a shape similar to the one depicted below
- Remove the stroke (ctrl shift f) and set the color to c17d11ff
- If necessary adjust the points
9. Spinning around
- f1 and select the whole pencil
- press ctrl g to group all the elements (this makes it easier to manage)
- now double click on the the pencil. Click on the top left arrow holding the left mouse button and ctrl, while dragging the pencil 45 degrees clockwise
- resize it to be 30x30 x:1, y:2
9. Shadow -the final touch
- Draw an oval w:32, h:5, position it at x: 0, y: 0 and fill it 2e3436ff
- Bring up the fill dialogue box; ctrl shift f
- Select a Radial gradient
- Adjust as so
- Lower it underneath the pencil
- Finished
You got this far! Well done!
Your patience shall be rewarded with a joke!
Q. Hear about the constipated Mathematician?
A. He worked it out with a pencil.
Share your thoughts
Spam and offensive comments will be removed
Comments
found this from your other tutorial, very handy!
Nice. Good tutorial
That's so damn easy!
I really enjoyed this tutorial.
I was having trouble with inkscape. Ok, was, is wrong but I'm learning.
Anyway after I made the pencils I kept thinking something was missing. Since I don't know if we can do metalic dradients in inkscape I opened it up in gimp. The dimple selection on the gimp gradients worked nice on the eraser band addition. It doesn't show up well but I remembered to put the highlight over the band on the blue one. http://i196.photobucket.com/albums/aa121/tjustleft/newpencil.png
http://i196.photobucket.com/albums/aa121/tjustleft/pencilb.png
I hope you like it.
Thanks,
Thomas.