I’m having problems with the images I’m creating for buttons and the title bar and other UI things. They look fine in Photoshop but when I look at them on the device they are fuzzy/not crisp. The text looks especially fuzzy or blurry.
My images are at 72ppi and saved as 24 bit PNG.
Does Corona compress the images when it builds the app? What am I doing wrong? Help or advice would be appreciated…
[import]uid: 3800 topic_id: 363 reply_id: 300363[/import]
could you send us both the png and the psd file?
corona does not do anything to the images.
There is a plugin for photoshop that we often used called SuperPNG that we find better than the photoshop png exporter.
Carlos
[import]uid: 24 topic_id: 363 reply_id: 639[/import]
Hi Carlos,
Thanks for responding to my message. Here’s a link to the PNG files and the PSD as a zip:
http://gilbertguerrero.com/uploads/20100106/Fuzzy-UI.zip
Or download the files individually, because ya never know what’s in a zip file 
http://gilbertguerrero.com/uploads/20100106/Fuzzy-UI/
I’ve also included some screenshots.
device.png is a screenshot of the app on my device.
emulator.png is a screenshot of the app on the Corona emulator.
example-of-device-native-UI.png is a screenshot of the iPhone photo library app, just for comparison. Take note of the way the characters on the photo library button are much more crisp than on the screenshots above where my button says “Calendar”. The “Calendar” button text is slightly blurry. It’s only slightly, but not unnoticable.
titleBar-background.png is one of the png’s used by the app.
titleBar-button.png is the button png used by the app.
TitleBar-PSD.png is a png of the title bar and button together directly from the PSD.
TitleBar.psd is the original PSD file (in Adobe Photoshop CS4 format).
Thanks!
Gilbert [import]uid: 3800 topic_id: 363 reply_id: 643[/import]
I just tried an experiment. I doubled the pixel sizes of my PNG’s and then in my code I scaled them back down and now they look great! They’re nice and crisp!
One problem is that some images only had to be scaled in half, e.g.
buttonImage = display.newImage( “button.png” )
buttonImage.width = buttonImage.width/2
buttonImage.height = buttonImage.height/2
And other images had to be scaled by 1/6th, e.g.
titleBarImage = display.newImage( “titleBar.png” )
titleBarImage.width = titleBarImage.width/6
titleBarImage.height = titleBarImage.height/6
Without scaling the images appeared gigantic on the emulator screen, almost covering the whole screen. These images were about 640x98 pixels. Also, when I scale and place these images properly in the emulator, they disappear on the device. So this solution on seems to work in the emulator… 
[import]uid: 3800 topic_id: 363 reply_id: 644[/import]
Here’s one more image file which shows the source file and a screen shot from the device side by side:
http://i133.photobucket.com/albums/q43/chiliberto_photos/TitleBar-sidebyside.png
The top title bar image is from Photoshop. The bottom is from a screenshot of my app on the device (iPhone).
The bottom image looks a little fuzzy. The white text is a little grey and there’s areas near the top of the bar where there’s a 1px line in the photoshop image that looks like it’s been anti-aliased, so it appears thicker in the device image.
[import]uid: 3800 topic_id: 363 reply_id: 645[/import]
OK, one last update! I discovered what the issue is!
I think my coordinates for the images were not whole integer values. So I rounded them off using math.floor() and the images look great now!
For example, I had this in my code:
local titleBar = display.newImage( “titleBar.png” )
titleBar.x = titleBar.width/2
titleBar.y = titleBar.height
So I changed it to this:
local titleBar = display.newImage( “titleBar.png” )
titleBar.x = math.floor(titleBar.width/2)
titleBar.y = math.floor(titleBar.height)
[import]uid: 3800 topic_id: 363 reply_id: 646[/import]
This raises an interesting question - can you position graphics to sub-pixel locations? [import]uid: 4366 topic_id: 363 reply_id: 647[/import]
I think this is still broken (I’m using absolute positioning and still having the same problem). Any official word as to what resolution we should build images at?
Cheers,
Marcus [import]uid: 4543 topic_id: 363 reply_id: 757[/import]
send me two png’ files to test and see
carlos [import]uid: 24 topic_id: 363 reply_id: 759[/import]
I have found that you can never have good clean images working at 72 ppi -I usually work real size at 300 ppi in Photoshop and then bump down to 160 ppi to export as pngs, and they are all crystal clear.
My thinking is that its better to work at higher rez since I may want to port all these to the larger iTablet or Android screens later, and you can always go down in resolution, but never up.
-Will [import]uid: 2862 topic_id: 363 reply_id: 762[/import]
I have blurriness problems as well. Related not just to PNG, it seems like like it might be related to setReferencePoint()
When I leave it the default “center” text and images look crisp. When is setReferencePoint to upper left, things get blurry. I have some sample images.
Here are the examples:
crisp Default Center - http://xs.to/image-7F86_4B748B9A.jpg
blurry Top Left http://xs.to/image-046E_4B748B9A.jpg
Maybe we need to snap to pixel? [import]uid: 2997 topic_id: 363 reply_id: 956[/import]
This post made all the difference for me with this issue:
http://developer.anscamobile.com/forum/2010/03/17/png-blurs-edge-when-odd-pixel-height-ie-57px-high
Once I started using even pixel dimensions my images started clearing up… even the standard Photoshop saved 72ppi 24-bit pngs. [import]uid: 4621 topic_id: 363 reply_id: 5137[/import]
72 dpi works fine, just follow my old post, odd pixel sizes for height or width can cause the image to render blurred.
It’s because each pixel in the image is being drawn over 2 half pixels. This can make the png look funny.
I always do even pixel sizes now, if my image can’t resize to the width I need I just leave a 1px transparent row at the bottom
[import]uid: 5354 topic_id: 363 reply_id: 5138[/import]
