Png export quality

[gwpriester]

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?

[grapeshot]

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.

[grapeshot]

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.

[pauland]

Sounds very odd.

[grapeshot]

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!