Creating really small icons

Share your Inkscape tricks and tutorials here.
Click here to lend your support to: Libre Graphics Meeting 2010 and make a donation at www.pledgie.com !

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
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm

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
prokoudine
 
Posts: 81
Joined: Sat Jun 09, 2007 4:32 am

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.
User avatar
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm

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.
eHe
 

Re: Creating really small icons

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

do you use view>icon preview much?
User avatar
ryanlerch
 
Posts: 102
Joined: Thu Jun 07, 2007 8:36 am
Location: Brisbane, Australia

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.
User avatar
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm

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 :)
hi all
 

Re: Creating really small icons

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

Is grid snapping enabled for this process?
User avatar
capnhud
 
Posts: 434
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

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
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm

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
capnhud
 
Posts: 434
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

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.
User avatar
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm

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
Guest
 

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
User avatar
prkos
 
Posts: 1057
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

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
Carrozza
 
Posts: 25
Joined: Thu Jul 10, 2008 2:18 am

Re: Creating really small icons

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

I'm glad you've found it useful :)
User avatar
microUgly
Site Admin
 
Posts: 2693
Joined: Sat Jun 02, 2007 3:13 pm


Return to Tricks & Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest