I’ve been a long time user of Xara products for creating graphics for my websites and recently upgraded to Xara Photo & Graphic Designer v9 (PGD).
For many of my sites, I create a single large sprite image and use CSS positioning to show the various navigation related images on the site. This speeds up browser loading, since the browser only needs to make one request and download one file rather than dozens of requests for small image files.
I generally need these sprite images to have a transparent background so that they blend in to whatever background they are positioned over. This is usually no problem – I simply export the sprite image as a True Color + Alpha PNG file.
However, after the upgrade to Xara PGD 9 I noticed that the exported PNG file had a non-transparent background.
Fortunately I still had the previous version of PGD (2013) installed, so I opened my .xar file in the old program and attempted to export it as a PNG file. It worked – I got my transparent PNG file as expected. Looks like a bug in the new version!
After discussing the issue on the TalkGraphics site without resolution, I submitted a support ticket describing the issue.
Support finally got back to me saying they had been able to reproduce the problem and had reported it to the developers. Even better, they suggested a work around which would allow me to continue using PGD 9 and still get my transparent background PNG files.
Normally I would simply choose “File > Export PNG …” with nothing selected on the page and it would automatically export all objects as a single image.
The workaround is to make sure I have all images selected before exporting, so Ctrl-A to select all and then choose “File > Export PNG…” – this generates the PNG image with the correct transparency.
Hi Simon, Thanks. I use Xara as well, and your work-around is what I’ve been using as my default mechanism!
btw, can you tell me more about your Sprite methodology? What tool do you use to make your big sprite image? Does that tool generate the css for you for the placements of various icons within the large sprite?
Thx.
Hi Techpath – my sprite methodology is fairly simplistic, no automated tools, sorry (one day, I’ll do some research into that and find a tool that works!).
My sprite is simply a Xara image with layers used to manage the different images contained within it.
I edit some of the images directly in the master sprite file, while others are copied-and-pasted in from their respective Xara files.
I simply use pixel positioning to place the images next to each other – I use a 1px nudge size so I can position images easily using the cursor keys. It’s important to make sure images are correctly aligned, Xara lets you use fractions of a pixel, which may lead to unexpected results.
The CSS is written by hand – I simply select the object in Xara to find the starting coordinates and the dimensions of the object. You need to have the coordinate system set to X increases to the right and Y increases downwards, which is what CSS uses.
I should write a blog post about this I guess!