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

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.

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

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.

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

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

Quote:

---

Originally Posted by essorant

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.

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

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!

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

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

Another good tip I haven't seen mentioned yet is to use the New View feature. This allows you to view the drawing at 2 different zoom levels and eliminates the need to zoom in and out. In the attachment below the left view is at 100% zoom whilst the working view is at 2457% zoom. You can also have the left window view quality set to Simple which gives you a better idea of how the resultant output will look. The working right hand window can be set to full Anti-Aliasing.

A line width of .75 Pt relates to 1 pixel width stroke (line) but remember the line is applied half in & half out of the shape, so if you have a 4 pixel square then apply a 1 pixel stroke (0.75 Pt) the over all dimensions become 5 pix square, not 6 pixels and the internal shape is reduced to a 3 pixel square.

Great idea!

Can't remember if Xara can save views with the file. If not, that would be a nice feature to have.

Quote:

---

Originally Posted by essorant

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!

---

They look poor because you scaled them. As I've said in my opening post, I actually draw them at 14x14 size, and make sure that the vertices are placed at integer locations. Floating point locations produces aliasing, integer locations produces crisp lines!

Also, the tip on outlines is exactly the way I do it, but in order for it to work (at least in the old Xara X), you need to draw a certain overlap on your shapes, because otherwise, the black background shape tends to peek through between any lines with anti-aliasing. You might also actually need to distort the perpective a bit if you want an absolutely perfect looking 16x16 icon (aliasing can be tricky to control, but if the output is a pixel based image format, you can always tweak it to work by moving vertices around slightly, or even adding squares the size of a pixel to highlight things).

http://www.eobet.com/temp/xara-wireframe.png

Quote:

---

Originally Posted by Egg Bramhill

A line width of .75 Pt relates to 1 pixel width stroke (line) but remember the line is applied half in & half out of the shape, so if you have a 4 pixel square then apply a 1 pixel stroke (0.75 Pt) the over all dimensions become 5 pix square, not 6 pixels and the internal shape is reduced to a 3 pixel square.

---

It's late here, so forgive me for not understanding a single word of what you were saying. The abbrevation for pixel in Xara X is "pix" (and not the common "px" used today) and you can simply input that in any input box. So for a 1 pixel wide outline placed under an object, you input a "2 pix" line width.

Also, you can somewhat extra fine tune the anti-aliasing by inputting, say, "1.5 pix" or "1.2 pix"... it works sometimes, if you feel you get a too dark looking outline.

Great tips eobet. The most useful thing I've learnt from this is to cater specifically for my smallest icons and scale upwards for my larger requirements! (Doing them from 128x128 and scaling downwards is just too lazy of me.)

Thank you. :)

Hi guys,

some good tips here,

if possible, use png 32bpp inc alpha, that way the antialiasing is taken care of in the alpha channel.

however if you want 'backward compatible' icons, this is the method I have used.

Create Icons/transparent images with a black edges (around 1 pixel wide)
Place on top of a black rectangle before exporting it as a GIF. (This stops the anti-alias to white but of course if you are working with a standard background colour, set the background to that)

http://www.sculptex.co.uk/uploads/ssample.png

As you can see from the image, the left of each pair is rendered against a white background and the right of each pair is rendered against a black background. The black looks best (on all bar the white i'd say)!

Hope this helps and is relevant to the original point!

Thanks for the great tips. These helped me export a transparent favicon for my web site.


Jeff