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

[Egg Bramhill]

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.

[jclements]

Great idea!

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

[eobet]

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

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.

[essorant]

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.

[sculptex]

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!

[idesignhaus]

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


Jeff