Starfish Web Design and E-commerce, Belfast

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

volia

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

  1. Click on the rectangle icon on the left hand pane or press F4
  2. Draw a rectangle on the page
  3. Click on the rectangle to select it
  4. Set the x coordinate value to 5 and the y to 0, again in the top pane.
  5. Resize it to 25x13 by editing the W: and H: values in the top pane.

3. Add a splash of colour

  1. Inkscape will remember your previous settings, so if you'll probably want to change this;
  2. Press ctrl + shift + F to open the colour dialogue box.
  3. Click the Fill tab and set the RGBA value to edd400ff
  4. Also click the Stroke (i.e. outline) tab to make sure that no stroke is set

4. Pencil end (non chewed)

  1. Select the circle tool f3
  2. Draw a circle w: 10, h: 13
  3. Position it at x: 0, y:0
  4. Press ctrl + shift + F and colour it a40000ff
  5. Lower the oval shape under the rectangle

5. Point it out

  1. Now we'll make the pencil tip - select the polygon tool *
  2. Tick the polygon box, set Sides to 3 and both Rounded and Randomized to 0
  3. Draw a triangle on the canvas and resize it to w: 10, h: 13 positioned at x: 30, y: 0
  4. Press ctrl + shift + F and colour it c17d11ff
  5. Draw another triangle w: 3, h: 4 positioned at x:37, y:4.50 and coloured 2e3436ff

6. Give me more rectangles!

  1. Just like we did in step 2
  2. Create another rectangle w: 25 h: 3 x: 5 y:10 and fill it with c4a000ff
  3. Create another rectangle w: 25 h:5 x:5 y:0 and fill it with fce94fff

7. A bit of shine [optional]

  1. select the rectangle from step2 & and oval step3 by holding ctrl and right clicking both
  2. press ctrl c to make a copy and ctrl v to duplicate
  3. now fuse them into one object ctrl +
  4. overlay a big oval like so and subtract objects
  5. select both object, again by right clicking on them
  6. subtract objects ctrl -
  7. fill it white 50% opacity and place it 0:0

8. Look sharp!

  1. Select the bezier tool shift f6
  2. Roughly draw in a shape similar to the one depicted below
  3. Remove the stroke (ctrl shift f) and set the color to c17d11ff
  4. If necessary adjust the points

9. Spinning around

  1. f1 and select the whole pencil
  2. press ctrl g to group all the elements (this makes it easier to manage)
  3. 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
  4. resize it to be 30x30 x:1, y:2

9. Shadow -the final touch

  1. Draw an oval w:32, h:5, position it at x: 0, y: 0 and fill it 2e3436ff
  2. Bring up the fill dialogue box; ctrl shift f
  3. Select a Radial gradient
  4. Adjust as so
  5. Lower it underneath the pencil
  6. 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.

Comments

Oct 10 2007, 10:25
sheffield web design wrote...
found this from your other tutorial, very handy!
Sep 13 2007, 00:32
Website Design wrote...
Nice. Good tutorial
Sep 12 2007, 21:12
romunov wrote...
That's so damn easy!
Sep 12 2007, 05:34
Thomas wrote...
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.

Share your thoughts

Spam and offensive comments will be removed