Png export quality

Hi all. First post here, though I've been using Xara professionally for year!

I'm working on some iPad 3 development and I'm really struggling to achieve the crispness that the retina display demands. I'm exporting PNG files from pure vector images, at the correct resolution, and playing with the dpi settings makes little difference. The image is not as sharp as it should be, especially with text. Annoyingly, Illustrator is able to export very crisp PNG images.

Is this a Xara issue of am I missing something obvious?

Thanks in advance for any help.

Are you referring to sharp edges?
Perhaps your images are not whole pixles and/or not on whole integer grid lines?

Try it and see if it helps :)

Welcome to TalkGraphics

What resolution are you working to? And what is the size of your screen that you are exporting to?

A few years ago, I did three iPad apps using InDesign and Adobe Digital Publishing Suite. The screen resolution on the iPad 1 is not as high as the retina display but we were very happy with the results. All images were created in and exported from Extreme 6 and Designer Pro 7 as 24-bit PNG files. You can see the apps here http://www.eyeball-3d.com/

Quote:

---

Originally Posted by sledger

Are you referring to sharp edges?
Perhaps your images are not whole pixles and/or not on whole integer grid lines?

Try it and see if it helps :)

---

That looks like it could be the issue. Small text in particular lacks sharpness. It's not something I've taken into account before. Is it a case of setting up a 1 to1 pixel grid and snapping the shapes to it?

What sledger is saying will not help with text.

All bitmap text is anti-aliased. Intermediate pixels are created to produce the illusion of crisp, sharp text. But if you blow the text up large, you can see the anti-aliasing. This is what you are seeing an interpreting as soft.

The text in this screen looks sharp on my monitor. But magnified you can see the alti-aliasing.

Setting your grid and ruler settings to pixels and snap to grid should work.

Right, that seems to have got me heading in the right direction. I'll let you know how I get on.

Thanks to all of you for your advice!

fwiw, I find that beginning with File | New | Blank Photo for all pixel-dimensioned graphics aids in the best results. However, small text can be a problem at times.

Take care, Mike

See discussion on small text here: http://www.talkgraphics.com/showthre...-anti-aliasing

"Yes the Photoshop 'none', uses fully hinted truetype monochrome rendering - and suffers from the size / spacing inaccuracies - e.g. that 12pt text is a LOT larger than, like 20 or 30% larger, than the 11pt text which is obviously wrong. It has to be 'one whole' pixel larger in all directions.

But yes it's useful feature and something we can look at for future versions. For now I'd recommend simply using pixel fonts to get that same effect." - Charles Moir

Perhaps a Dear Xara request is in order...

That's a great link. Fascinating!

This link, taken from the article, seems to answer my original question:

http://www.xara.com/news/july06/tutorial.asp

My issue is not with the iPad 2 resolution ( the images look great). The problem arises when the resolution is doubled for retina displays. That's when the crispness is lost.

I'll report back tomorrow with the results...

Quote:

---

Originally Posted by grapeshot

The problem arises when the resolution is doubled for retina displays. That's when the crispness is lost.

---

If you are referring to the iPad3 doubling up standard (iPad 1 and iPad 2) resolution images for the retina display, then that shouldn't be necessary. Applications should be able to switch the images they use according to the platform and use native resolution images as required.

Quote:

---

Originally Posted by pauland

If you are referring to the iPad3 doubling up standard (iPad 1 and iPad 2) resolution images for the retina display, then that shouldn't be necessary. Applications should be able to switch the images they use according to the platform and use native resolution images as required.

---

I know exactly what you mean, but thats that's not what my problem is. I'm talking about vector images being exported from Xara as PNGs, producing slightly unsharp images and text when displayed on a retina screen. I need the PNGs to be as sharp and crisp as anything on the iPad 3's toolbar (for example), but as it stands at the moment, I can't get the Xara created PNG images sharp enough.

Are you ensuring that the PNG you export is the same width and height in pixels as the image needs to be on the retina display?

Phil

It may just be that Apple have spent time working at the pixel level to really hone the quality of those images. The variants in line width and text size becomes critical at small sizes.

Could we see an example?

The OP states that Adobe Illustrator exports 'crisp' PNGs.

Perhaps it's the old 72dpi v 96dpi chestnut?

I always think of artwork in terms of specific sizes, rather than DPI, however you're right that looking at the artwork on a different device is going to make the image look different in terms of size and quality. If AI is better, it may well be that AI is better at anti-aliasing than Xara. A specific example would certainly help.

Thanks for the feedback lads.

Today's experiments have got nowhere. It's an interesting problem.

I can't post any examples right now as it's commercially sensitive work, but I'll run up an example sheet at the weekend. I've got to crack on though as work's not getting done here due to the head scratching! Our tests today with Illustrator have also failed to replicate the clean images created last week in the same program. It's bizarre.

Anyway, some example to come...

Quote:

---

Perhaps it's the old 72dpi v 96dpi chestnut?

---

This should not matter because what is important is the pixel dimensions of the image. If the image is 2400 x 3600 pixels, it does not matter what the dpi of the monitor is. The image will still be comprised of 2400 pixels of width and 3600 pixels of depth or vice versa.

What is important is that you create your images to the recommend pixels dimensions.

I went through this drill when I did our iPad apps and I kept asking what dpi should I export my images at? Finally, I got it, its the pixel dimensions of the image.

Grapeshot - What are you using to build the apps? And what is the Apple specified screen size in pixels?

The screen size of the Retina display is 2048 x 1536 @264 DPI.

We're using Xcode to create the app, but right now we're saving images to Dropbox and then viewing them in the photo gallery.

The quality of the PNG on desktop monitors is very good (superb in fact), it only falls down on the iPad. Taking a 300DPI version into Photoshop and resizing it to 72 DPI (2048 x 1536) @24 bit colour depth DOES produce a sharper image.

I think I have the answer. We've been able to get really crisp results in Photoshop, but not Xara or Illustrator ( I incorrectly said that Illustrator gave good results in an earlier post. In fact the results match Xara). After much searching, I found this article that helps to clear thing up. The relevant section is in part 2:

Part 1:

http://bjango.com/articles/designingforretina/

Part 2:

http://bjango.com/articles/designingforretina2/

Xcode is an Mac only product, isn't it?

The article said more or less what I found (except the article goes into a lot more of the details and processes). You design to the pixel dimensions at your applications native ppi and don't worry about the images ppi, because the ppi will become correct when the image scales to the iPad screen. Is that correct?

Hi again. I was able to replicate sharp images time and again using Photoshop. but not at all using Xara or Illustrator CS5. I've yet to try Illy CS6 with it's new pixel handling routine. I'll report back when I've tried that.

Anyway, it's a pain to have to drop Xara for this element of the project. I wonder if there's a solution to this in future updates? Seems to be a major missed trick.

Okay, it's resolved to our satisfaction. We can now get the low file sizes and crisp output that iPad 3 demands. This is how we did it:

Create what you want in Xara, and export as a .psd at 300dpi. Open in Photoshop and save as a compressed, non-interlaced.png. Job done!

For whatever reason, Phtoshop's .png images maintain a superb level of detail when viewed on the retina display. Yet, when a Xara .png and PS .png are viewed side by side, there's almost no difference: both are superb.

Sounds very odd.

Sigh. Now I'm confused. Last week we were able to replicate the soft png images in Xara and Illustrator cs6, and were able to create sharp images in Photoshop CS6. Looking online, it seemed that we weren't alone with this issue either.

Today, having created sharp images via an exported .psd file from Xara into PS, we consistently maintained a sharp effect. So, thinking the job was done, and the with the app on it's way to a incremental build, I thought I'd try to hunt down the cause of the soft images in Xara.

A few people had suggested an exact pixel grid as a solution, and this made a lot of sense. Confusingly it didn't create the sharpness we needed. With a colleague unable to create sharp png images for the retina display with Illy as well, we put it down to vector rendered .png files. We could still use the grid though, as we needed to psd files to be as exact as possible. As a side by side comparison, we examined the raw Xara png, exported from the exact pixel grid settings, with the PS png. Both were as sharp as each other.

So, it seems the answer is to make sure your icons, buttons and text conform to an exact pixel ration, rather than have fractions of pixels. It's good practice for all digital UI work of course, but with the retina, it's all the more important it seems.

For a minute there, I thought I was going to have to go full-Adobe. Scary!