Proper image settings for creating graphics

Getting Started Newbie Questions
#1

Hey everyone, just wanting to get some general info on graphics with corona.

I have a project that I have been working on as a test, but it does not display on my device. I think it has something to do with the settings and optimization of my graphics, so I figured I would ask what settings are required!

I am using Photoshop CS4, and when I save my images, what type should I save it as? What DPI? Exactly how can I make sure I have the best optimized graphics?

Any information will be great! Thank you in advance! [import]uid: 9968 topic_id: 3952 reply_id: 303952[/import]

#2

The DPI does not really come into play as that is mostly just for printing purposes.
You should leave all of your DPI settings at 72dpi, which is the standard for monitors.

What you should be concerned with are the pixel dimensions of your images.

The iPhone4 retina display pixel dimensions are 960x640
The iPad screen dimensions are 1024x768
Older iOS devices are 480x320
Android devices all vary.

(those dimensions are for width x height for landscape, switch them for portrait mode)

In Photoshop, or whatever image editing program you are using, make your graphics match the target device you are working for.

Corona has some nice features for content scaling, and there is a recent blog post discussing designing for different screen sizes.

It is definitely a bit of a challenge to design for multiple devices. The iPad for example, has roughly the same amount of pixels as the iPhone4 - but the sizes of the devices are vastly different. The iPhone4 packs all those pixels really tightly.

So in that case, you cannot simply make your graphics for the iPad and directly port them over to the iPhone4. All of your buttons that are the correct size on the iPad, would be too tiny to interact with on the iPhone4. [import]uid: 8444 topic_id: 3952 reply_id: 12004[/import]

#3

In my App, I use letterboxing, and then some Draw functions to overlay/pad/mask the extra areas for compatibility. Doesn’t bother me that much considering it was too late to change the design, but in the future, I guess it helps to be mindful of overflow. [import]uid: 11024 topic_id: 3952 reply_id: 12006[/import]

#4

I do the same exact thing!

My game was originally for older iOS devices.
My game is set to letterbox and I placed some black rectangles on the sides to hide the offscreen display objects on larger screens [import]uid: 8444 topic_id: 3952 reply_id: 12007[/import]

#5

Let’s assume that I am creating my game for only the iPhone (both old and the iPhone 4)

In my build setting I have added the scaling suffix, and I will be using imageRect

Just so we are clear, do I create 2 version of my images, one at the iPhone 4 resolution, and one for the iphone 3G/3GS:

background.png - 320 x 480
background@2.png - 640 x 960

And in my imageRect I set the parameters to 320 x 480?

Just making sure to do it the right way for iPhone 4 scaling! Thanks a lot guys! [import]uid: 9968 topic_id: 3952 reply_id: 12010[/import]

#6

You don’t have to add lower res versions, but for performance issues on older models, you might want to. For my App, it’s not really performance intense, so I just used iPhone4 sized assets and let Corona do the scaling (sometimes toggling True for images greater than the forced resize dimensions).

Likewise, you could be happy with pixelated low res images and not accomodate the retina display. You just have the option if you want to. Alternatively, you could work with vector graphics and not have to worry about this stuff at all. [import]uid: 11024 topic_id: 3952 reply_id: 12012[/import]