Anyone else creating 16x16 icons in Xara X? Tips?

[eobet]

I've enountered people who claim it is impossible to use vector based icons at the size of 16x16 pixels, but I don't think that is the case at all. Sure, it can be frustrating, but at times, it's also liberating.

I tore my hair, switching back and forth between different scales, until I found out that not only should (and could I draw the icons at 100% size in Xara X, but if I placed the vertices at integer/decimal positions, I could control the anti-aliasing! I think that is my most important tip to share.

Does anyone else create icons like this, and have any tips or images to share?

Here's a recent one of mine (from a selection of about 150 buttons, I think):

http://www.eobet.com/temp/work-detail.png

These were especially tricky since the legacy of the application look & feel dictated black outlines around every object, meaning that in essence, these are really 14x14 pixel sized icons. In the future, say with SVG icons, it would be great to be able to set an outline to be exactly 1 pixel thick no matter the scale, because these really need to be tweaked for different sizes now in order to not get out of proportion.

[MEB]

Hi eobet,

I´ve tried to draw some icons with Xara some time ago, but i´ve given up.
It´s really hard to control the antialias specially in small sizes as those you are working on. A pixel based editor is much better suited for that type of work. Anyway i never managed to get decent icons at small sizes... As almost all things, there´s much more depth and knowledge involved in creating those little icons than it looks at first.

Even today, sometimes i found some troubles with the antialias when exporting line work only in normal illustrations. Photoshop always get a more smoothed line when stroking (depending on the brush) something i can´t get from the Xara export.

I really enjoyed your icons. They really look sharp and detailed at 16x16. Maybe i should pick the icons drawing "subject" again and see if i can improve with your tip. Thank you for sharing. And please keep posting them.



http://mboto.planetaclix.pt/sample_icons.jpg


Regards,
Miguel

[Egg Bramhill]

Hi Eobet,

I sometimes create them for fun. It's very challenging. I use them as icons for my web site files (I always like hunting through the file system using 'details' setting). As well as this I use BMP2ICO to convert them into favicons.

[essorant]

I'm nearly at the point where I'll be creating a set of windows desktop icons using Xara Xtreme. My experiment with the first one seem to have worked ok (the only one I've turned into and 'ico' format yet). I put the icon on a "no fill, no outline" 128x128 square, then exported the grouped icon and square as a "true colour + alpha" PNG with transparency. In Xara I scaled the icon/background down to the next lower size (96x96) and did the same, continuing until I'd got to 16x16. I had "scale line widths" unchecked until the size dropped below 64x64, thereafter scaling the lines. Once I had a set of PNGs I used IconWorkshop to build the ICO file made up of these different resolutions.

It remains to be seen how they look as far as anitaliasing goes. I'm going to do a comparison with scaling down from the original 128x128 PNG using Photoshop and see what difference that makes.

These are the Xara versions:

http://www.essorant.com/temp/snap_my_icons_small.jpg

[jclements]

Once you folks have got this worked-out to a "best method", perhaps you could collaborate and do a graphical-tutorial for the XaraXone or for here.

Regards, John

[eobet]

I had "scale line widths" unchecked until the size dropped below 64x64, thereafter scaling the lines.

Ah, so you can stop the scaling of the line widths? Is that a setting new to X1 or Xtreme, because I cannot find it in the old Xara X that I'm using. Also, can you set the property per line, or is it across the entire document only?

Also, though the icons some of you have posted so far are very nice, they're not 16x16 (as my topic title suggests), and there's no challenge in creating 128x128 icons, right?

EDIT: Ok, so I was really joking in my last statement, but there's a serious backside to it... that's not proper English probably, but it's a literal translation of a Swedish saying. Anyway, here's a side project I'm doing as a favour to an acquaintance of mine, but I haven't touched it in a month or two, so that's why I didn't think of it. These icons are only 18 pixels high and a bit wider, but already that grants me a huge amount of more freedom to put detail in than 16x16:

http://www.eobet.com/temp/gossip-test.png http://www.eobet.com/temp/gossip-detail.png

Now that I look back at my body of work on small icons, I realize that nearly all of them have black outlines! I guess since I was forced to do them for my first job, they've kinda stuck with me. Anyway, since I've converted to OS X now, I really need to practise doing more photorealistic icons, so that will hopefully be a nice break away from this style I've seem to have developed.

[jamesmc]

Here's a 9x7 icon you might find familar.

[essorant]

Hi eobet: You are quite correct - it's easy to get icons to work at 128x128 and much harder to get them to work at 16x16! Sorry to wander a little off topic. I'm certainly no expert - these are my fist attempt at icons, so I've a long way to go.

In Xara, when using the 'Selector' tool, the "scale line widths" button is a diagonal line with an arrow pointing to it - next to the last on the 'select' toolbar - and it toggles on or off.

One thing it might be worth trying for the outline is to scale the icon to 14x14 without any stroke, then group everything, duplicate, add all the shapes in the new duplicate group together, fill with black and a black stroke, and set the stroke to the size you need your outline to be (2 pixels? 1 pix wider than the original icon on either side) then put it to the back, centred behind the original icon image. It's just a black background really, but you can easily control the size of the border.

(Well - just tried that, and mine still look pretty poor!)

And I love your icons! Don't feel you have to go the photorealistic way!

[PhilM]

Hi eobet,

Here are some suggestions:

Draw icons at 100%, as you suggest, and use zoom to see the design in detail.

Set up a pixel grid (the default document already has one) so that you can see where elements of your drawing fall onto the pixels. You don't need to turn on grid snapping, just make the grid visible when you're zoomed in.

Draw a 16*16 rectangle snapped to the grid, make it have no line colour and no fill colour and draw your icon on top of it. Use outline mode to find that rectangle again and make sure that none of your drawing falls outside the 16*16 size before you export - especially things like line widths and shadows.

When zoomed-in, tweak the sizes and positions of elements by scaling and fine-nudging (Alt + cursor keys) to position important bits, such as outlines, in the centres of pixels.

That's what I do anyway.

Phil

[dvector]

Hi eobet - I did a set of transparent background icons a while back in Xara, some are 16x16 most 20x20. They were for an online GIS (Geographical Information System?)

the 16x16 were transparent with no antialiasing
so these were my findings to get near pixel perfect output:

1) Major grid spacing: 1 pix
2) Page units: pixels
3) Snap to grid on
4) place your objects at actual size (but obviously work zoomed in)
5) draw as much as possible using boxes with no lines
6) If do draw lines eg circles use 1pix line width
7) export as gif