Raw Vector Images

Audio and Graphics
#1

Hi,

My designer has completed all of his game design work in Illustrator and wants to convert his vectors into photoshop layers.  What resolution should he import his Illustrator files when importing into Photoshop.  We want to be able to make sprite sheets that support multiple device screen sizes from the photoshop import.

Thanks

Scott

#2

Hi Scott,

It depends on your content area size. A fairly typical choice by Corona users is 320x480 (which really shouldn’t be considered “pixel” values, but rather “content area units”).

From there, you’ll probably want to set up “normal” (@1x), “@2x”, and “@4x” image sets across the board. If you imagine somewhat smaller/older devices would fit in the “normal” category, you could pick a screen size like 480x720 and set that as your baseline.

So, for an image that would span the entire content width, your designer would make it 480 pixels across (or 720 tall). For sake of discussion, let’s assume that image is an even ratio, so 480x480. Once you have that, you simply multiply those out for the higher-resolution versions:

myImage.png = 480x480

myImage@2x.png = 960x960

myImage@4x.png = 1920x1920

Hope this helps,

Brent

#3

Brent,

Thanks for the quick reply.  I think the main take away here is to a pick a base screen size and then create a master PSD bitmap file at 4x or higher. I am using TexturePacker and brought in 4x assets and it was able to successfully create 2x 3x and 4x image sheets.  As long as all of my master files are at the same resolution (i.e. 4x) then everything should render correctly on all devices. 

Thanks Again

Scott

#4

Hi Scott,

It depends on your content area size. A fairly typical choice by Corona users is 320x480 (which really shouldn’t be considered “pixel” values, but rather “content area units”).

From there, you’ll probably want to set up “normal” (@1x), “@2x”, and “@4x” image sets across the board. If you imagine somewhat smaller/older devices would fit in the “normal” category, you could pick a screen size like 480x720 and set that as your baseline.

So, for an image that would span the entire content width, your designer would make it 480 pixels across (or 720 tall). For sake of discussion, let’s assume that image is an even ratio, so 480x480. Once you have that, you simply multiply those out for the higher-resolution versions:

myImage.png = 480x480

myImage@2x.png = 960x960

myImage@4x.png = 1920x1920

Hope this helps,

Brent

#5

Brent,

Thanks for the quick reply.  I think the main take away here is to a pick a base screen size and then create a master PSD bitmap file at 4x or higher. I am using TexturePacker and brought in 4x assets and it was able to successfully create 2x 3x and 4x image sheets.  As long as all of my master files are at the same resolution (i.e. 4x) then everything should render correctly on all devices. 

Thanks Again

Scott