button

How to create an icon or logo from an existing drawing using Inkscape


A while ago my brother came up to me and handed me a scratch piece of paper. It was something that he had drawn years ago and he just found it as he was cleaning up some things. He mentioned that he always thought it was an interesting looking creature(?) and that he wondered what it would look like as a logo.

I thought that would be fun idea to see what necessary steps one would need to take using Inkscape to create an icon or logo from an existing drawing.

To start, I snapped a couple of pictures of the piece of paper to make things a bit easier in Inkscape. Once you have your jpg file, you can simply drag and drop into Inkscape.


Once the images are in Inkscape, I like to use the Bezier tool. You can also draw freehand lines, but I feel this is a bit easier.


With the bezier tool I make an outline of the back of the head area. You will notice that it looks very sharp and rigid. If you want to smooth out the nodes, you can press Ctrl+L.



After repeatedly pressing Ctrl+L you can see that the lines are much less rigid.


We now have the basic shape but obviously it could look a lot nicer; smoother. Select the node tool and start highlighting then deleting unnecessary nodes.


A basic rule of thumb is that you will only need a node where you have a significant change in direction. Since the top of the head is one large curve, I am able to delete, then adjust the nodes so I only have nodes where the direction starts changing.


After I finish doing this for the back of the head, I can create a new shape for the face.


Do the same thing to smooth out the face. Continue on to the other elements.


You can see that is basically all you need to do to copy a drawing. At this point making adjustments to the new image is relatively simple.


At this point, to go further with the drawing is very simple. You can add fill and stroke colors.
 Here I added a bit of shading to make it more like the original drawing.

 Um...  Perhaps this is a lizard?
 A blue lizard?

With a nose...


Here is the before and after. Making a simple graphic like this can take less than 15 minutes in Inkscape.
I am not totally digging the blue lizard dude right now (sorry brother), but I think it might look a bit cooler as a button or something like that. I will turn it into a button you would see on an iPhone or something like that.

Start with a square and curve the corners.


Now to remove sections of the creature from the square. To do this move the object on top of the square and select both. Pressing Ctrl+- will remove the object from the square.
 Continue to do this will all the elements.

In some cases, you may need to add some elements as well.

After you have everything in place, select everything and press Ctrl+K to combine the paths.

With the paths combined, you can add a radial gradient to the object to give it more dimension. I also added a border (I did this by created a new square of the same shape and size. If you just use stroke on the object, all the elements will have a stroke because the paths are combined).


I also added some drop shadow and highlights for more dimension (I did this by copying elements and took the fill out. I blurred the stroke and that is what I used for the shadows and highlights).

iPod apps tend to have a highlight on the upper half of the icon. Use a copy of the original square and then draw and ellipse over it (as seen below).


After you select both items, select Intersection (Ctrl+*)


This leaves you with only the highlight section of the icon. Add a gradient to the fill.
 Now you can place it over your icon.

That is it!



So I still don't know what this thing is... if you have any clever names or ideas for what to call this thing, feel free to leave a comment!

About McKay

9 comments:

  1. this is cool, i always wanted to create a set a icons for ubuntu like this

    ReplyDelete
  2. Very good demonstration, simple and effective

    ReplyDelete
  3. Very clear and practical instructions. Will be using this method for android icons and game assets. Cool beans :D

    ReplyDelete
    Replies
    1. Thanks for your comment! Good luck with all your designs.

      Delete
  4. Excellent tutorial! It clears up a thing or two for me.

    ReplyDelete

Powered by Blogger.