Creating really small icons
Creating really small icons
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- prokoudine
- Posts: 186
- Joined: Sat Jun 09, 2007 4:32 am
- Contact:
Re: Creating really small icons
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
Re: Creating really small icons
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.
Re: Creating really small icons
There is a paragraph about using a grid when drawing icons in Tutorials->Tips and Tricks in Inkscape.
Re: Creating really small icons
do you use view>icon preview much?
Re: Creating really small icons
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.
Re: Creating really small icons
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
Re: Creating really small icons
Is grid snapping enabled for this process?
Re: Creating really small icons
capnhud wrote:Is grid snapping enabled for this process?
Yes. Kinda makes the grids useless otherwise
Re: Creating really small icons
LOlYes. Kinda makes the grids useless otherwise
No what I meant was did you rescale the object (inkscape icon) with grid snapping enabled and then proceed to redraw the icon?
Re: Creating really small icons
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.
Re: Creating really small icons
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:
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:
Re: Creating really small icons
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
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
Re: Creating really small icons
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!
I'm designing interfaces for Windows Mobile and having pixel-perfect graphics is a must.
Go for it, Inkscapers!
Re: Creating really small icons
I'm glad you've found it useful