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 IconThe 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 IconThe 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 IconYou'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.
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.
[img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-blurry.png[/img] [img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-pixelated.png[/img] [img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-perfect.png[/img]
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.
[b]The Blurry Icon[/b]
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.
[img]http://www.microugly.com/images/tutorials/inkscape-small-icon/ink-blurry.png[/img] [img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-blurry.png[/img][img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-blurry.png[/img]
[b]The Pixelated Icon[/b]
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.
[img]http://www.microugly.com/images/tutorials/inkscape-small-icon/ink-pixelated.png[/img] [img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png[/img][img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-pixelated.png[/img]
[b]The Perfect Icon[/b]
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.
[img]http://www.microugly.com/images/tutorials/inkscape-small-icon/ink-perfect.png[/img] [img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-perfect.png[/img][img]http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-perfect.png[/img]
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.
[b]TIP:[/b] 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.
