Creating really small icons

Share your Inkscape tricks and tutorials here.
User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Creating really small icons

Postby microUgly » Sat Jun 09, 2007 4:46 pm

Having just today created a 16 x 16 pixel icon for this forum, I thought I might share some tips I learnt from my experiance.

An icon tutorial for Inkscape already exists, but I can't find it now. I believe my guide uses a similar method with the guides, but my example involves working on more of a pixel by pixel basis.

Take a look a look at the three following icons, created using three different methods and pick which one looks best.
Image Image Image

If you picked either of the first two, this guide is no good for you :) It's the method for the third icon I will be selling.

But before I show you my technique for the third one, I'll show how the first two were created.

The Blurry Icon
The blury icon has a 16 x 16 pixel canvas and the original Inkscape logo is scaled to fit in it. The resulting 16 x 16 pixel image is far to blurry to be recognisable.
Image ImageImage

The Pixelated Icon
The same 16 x 16 canvas except instead of using the original Inkscape logo, I redraw it using horizontal lines with a 1 pixel width stroke. Now the icon is far to sharp.
Image ImageImage

The Perfect Icon
You'll notice the background for all these icons works quite well in the icon. This is because we use a grid set at 1 pixel intervals and a 1 pixel width stroke. It's a simple technique decribed in the tutorial I can't find.

But because the Inkscape icon is a very irregular shape, you can't get a nice sharp version of the logo when it's made so small. The previous example shows how you can recreate the icon using discrete pixel sizes, but it's too sharp. What we have below is a compromise.
Image ImageImage
Using the same method to create the pixelated icons, I changed the stroke style for each horizontal line to have a rounded cap. In some places I also make the stroke 0.5 pixels thick instead of a whole pixel. When the image is saved as a bitmap, each pixel is made up of a combination of colours which helps create a nice anti-aliased effect. This is much easier than attempting to do the same in a raster program where you would draw the icon pixel by pixel have to select each pixel colour to make it softer.

TIP: When creating an icon, use the 1 and 4 keys to quickly view the icon at 100% and at zoomed in. And use # to toggle the guides on and off. When recreating a picture at a smaller size, scale the original down to the size you want and use the grid as a reference for ensuring you keep the proportions correct.

User avatar
prokoudine
Posts: 186
Joined: Sat Jun 09, 2007 4:32 am
Contact:

Re: Creating really small icons

Postby prokoudine » Sun Jun 10, 2007 3:14 am

The original tutorial you are referring to is mostly likely the one linked from Tango Icon Theme Guidelines and it used to be available at http://video.google.com/videoplay?docid ... 9905170779
http://libregraphicsworld.org — news and tutorials on free design software

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Creating really small icons

Postby microUgly » Sun Jun 10, 2007 7:59 am

Nah, it wasn't that one. It was a very simple tutorial showing how to setup a grid with a 0.5 pixel offset and how you could use it to create sharp icons. I'm sure it was linked from a promonent area of Inkscape.org or the Wiki because I stumbled across it a few times but I can't find it now.

eHe

Re: Creating really small icons

Postby eHe » Thu Jun 21, 2007 1:56 am

There is a paragraph about using a grid when drawing icons in Tutorials->Tips and Tricks in Inkscape.

User avatar
ryanlerch
Posts: 107
Joined: Thu Jun 07, 2007 8:36 am
Location: Brisbane, Australia
Contact:

Re: Creating really small icons

Postby ryanlerch » Thu Jun 21, 2007 8:52 am

do you use view>icon preview much?

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Creating really small icons

Postby microUgly » Thu Jun 21, 2007 9:19 am

ryanlerch wrote:do you use view>icon preview much?

No I didn't, because I forgot the feature existed :) It wasn't until afterwards that I was reminded of it. I haven't actually tried it before to see how it works.

hi all

Re: Creating really small icons

Postby hi all » Mon Oct 08, 2007 11:20 pm

hi all im despereate for some help, i need to create a logo 16x16 pixels starting and finished in bitmap format..... i know nothing about computers let alone designing logos as small as 16x16 (switching the comp on and off is hard enough for me) erm i need a golf logo name TPC_C any help or idea's or logos would be welcomed greatly. thanks in advance :)

User avatar
capnhud
Posts: 435
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

Re: Creating really small icons

Postby capnhud » Fri Dec 14, 2007 11:13 am

Is grid snapping enabled for this process?

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Creating really small icons

Postby microUgly » Fri Dec 14, 2007 2:22 pm

capnhud wrote:Is grid snapping enabled for this process?

Yes. Kinda makes the grids useless otherwise :)

User avatar
capnhud
Posts: 435
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

Re: Creating really small icons

Postby capnhud » Fri Dec 14, 2007 10:54 pm

Yes. Kinda makes the grids useless otherwise
LOl

No what I meant was did you rescale the object (inkscape icon) with grid snapping enabled and then proceed to redraw the icon?

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Creating really small icons

Postby microUgly » Mon Dec 17, 2007 9:41 am

capnhud wrote:No what I meant was did you rescale the object (inkscape icon) with grid snapping enabled and then proceed to redraw the icon?

Ah, no. Because i'm redrawing the icon the original is only used as a reference so grid snapping isn't required when scaling it down. Close enough is good enough when it's only a reference - plus snapping might restrict you from achieving the preferred size for the reference.

Guest

Re: Creating really small icons

Postby Guest » Sat Apr 19, 2008 9:32 pm

Hi,

I see this topic is rather old, but here is what I found about drawing icons in Inkscape. A small icon must be prepared for scaling in the design phase. Reduce color transitions, adjust proportions, create contrast.


Example:
Image
Image

User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: Creating really small icons

Postby prkos » Sun Apr 20, 2008 2:49 am

Guest wrote:Reduce color transitions, adjust proportions, create contrast.

Thats a good list to remember when creating small icons
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download

Carrozza
Posts: 29
Joined: Thu Jul 10, 2008 2:18 am

Re: Creating really small icons

Postby Carrozza » Tue Jul 29, 2008 4:12 pm

Just saw this post and wanted to thank MicroUgly and all for the great help!
I'm designing interfaces for Windows Mobile and having pixel-perfect graphics is a must.
Go for it, Inkscapers! :P

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Creating really small icons

Postby microUgly » Tue Jul 29, 2008 4:16 pm

I'm glad you've found it useful :)


Return to “Tricks & Tutorials”