Hi guys,
I was wondering about following.
When I am making .png, @2x.png and @4x.png pictures (background, characters, etc…) for a game, what is the minimum ppi value I can do?
Let say if I make 72 ppi png`s, App Store would reject the game due to low ppi value?
I assume greater ppi number produces higher picture size (MB).
Waiting your reply.
Many thanks! 
Ivan
Apple requires 72 dpi for just about every graphic you submit to the App Store.
Thank you aaronkrap.
I have read about dpi / ppi difference on the forums.
Basically people say that “dpi” is an outdated unit used for printing purposes, and that “ppi” should be used.
In Adobe Illustrator I only have 72 ppi option (there is no dpi units), so that is what I will use (72 ppi).
DPI = “Dots Per Inch”. This is relevant in printing since it’s the number of ink dots that get put on paper.
PPI = “Pixels Per Inch”. In digital imaging, this is the number of pixels uses to make up an inch of “Printed” results.
PPI is meaningless for computer screens and websites.
Consider the following:
What is an inch to a computer screen (or web page)?
Let’s say you have a 27" 1920x1080 monitor and I have a 19" 1920x1080 monitor. Both are exactly 1920 pixels wide. A 1000 pixel x 500 pixel image on my screen would take up 1000 pixels. But if you put a ruler to that, it would be right at 10" wide, roughly 100 pixels per inch. But on your monitor, the image would still just be 1000 pixels wide, but those 1000 pixels are spread out over a larger monitor. The 27" version is 71 ppi which works out to 14" of your screen.
At the end of the day, both screens are 1920 pixels wide. The image still takes up a little over 50% of the width of the screen. So only pixel measurements are important to web based images.
A 300 x 300 image at 300 PPI is a 1" by 1" image and a 300 x 300 image at 1 PPI are the exact same image. They take up 300 x 300 pixels. Period. The PPI is a print reference. The 300 dpi version of a 300x300 image will be 1" x 1" when printed. The 300x300 @ 1DPI will be 300" x 300" and each dot will be 1" x 1".
Since we don’t use inches when measuring images in our apps or on web pages, we only care about the pixel dimensions. DPI and PPI are meaningless.
So why does Apple care and want 72 dpi/72 ppi images?
The reason Apple asks for 72dpi is many artists are used to working in print sizes. To them a graphic that would be needed to put a 3" advertisement in a magazine would be a 3" image @ 300 dpi. They don’t think in pixel dimensions. They think in inches and DPI. They have all been trained to take their high resolution image and when converting to web images, to simply resize by changing the PPI from 300 to 72 and it will take care of the problem.
I’m not sure if Apple looks at the DPI/PPI setting when uploading images or if they are just looking at the pixel dimensions (the only ones that matter) or not. This is a simple case in Photoshop of creating your image at their requested size (such as 640 x 960) and then in Photoshop, do an Image->Resize, uncheck “Resample” and then set the DPI to 72 and save the image. I don’t have much experience with Illustrator, but it’s likely when you export the image that you choose the desired DPI, but you have to make sure to match the pixels dimensions first.
Rob
Thank you Rob for outstanding explanation!
I will have to sleep it over and read it tomorrow again
One thing I surely know at this moment:
I exported from vector file 1.png using Adobe Illustrator and setting 72 ppi resolution.
I checked using Adobe Photoshop resolution of an exported 1.png, and Photoshop showed 72 Pixels/Inch resolution.
I did not see anywhere “dpi” units (in PhotoShop or Illustrator).
So on first, it looks like Adobe Illustrator takes care to keep selected 72 ppi no matter what you do with image size (resize it as you wish - and ppi stays always 72).
But I will sleep it over… maybe I am wrong :rolleyes:
Thank you!
Ivan
Right, most modern software will say PPI. We’re not dealing with ink dots we are dealing with pixels, so technically speaking PPI is more accurate, but many people still use DPI for the same meaning.
Apple says to upload screen shots and such at resolutions that match the screens in use, like 640x1136 for the iPhone 5 and that is the most important value to set. Making sure its 72ppi certainly won’t hurt and may avoid problems.
But all of that matters for images you put in the iTunes Connect store (Screen shots and icons).
For your actual game, Apple will never look at the ppi of your game. But don’t make a 40x40 pixels button and expect to use that as your @4x graphic on a retina device, it will look terrible.
The size of your images really depends on your config.lua settings. If you’re width and height are 320 and 480, the base many people use to support the older iPhone 3gs screens and cheaper Android devices, then following Apple’s Human Interface Guidelines, the minimum touch target should be 40x40 pixels. The @2x version would be 80x80 and the @4x version would be 160x160. DPI or PPI never factors in. We are just dealing with a rectangle of pixels.
Your backgrounds (if you’re providing a generic size to fit most all screens) at 1x would be 360x570 (portrait or 570x360 landscape) and the defined 320 x 480 (config.lua is always specified in portrait mode!!! and Corona rotates those numbers for you) is taken out of the center of the image. Ergo, your @2x background would be 720x1140 and your @4x background should be 1440x2280.
It’s always best to start with the high resolution image (@4x versions) and resize down for sharpness, so make your other game objects the right size to fit on the screen, then downsize them at 50% and 25% of the original and save out the @2x and base image.
Repeating for the game, don’t worry about the PPI. But it doesn’t hurt to use 72 as the PPI, but you’re going to build the images based on how big the image needs to be in pixel dimensions.
Rob
Apple requires 72 dpi for just about every graphic you submit to the App Store.
Thank you aaronkrap.
I have read about dpi / ppi difference on the forums.
Basically people say that “dpi” is an outdated unit used for printing purposes, and that “ppi” should be used.
In Adobe Illustrator I only have 72 ppi option (there is no dpi units), so that is what I will use (72 ppi).
DPI = “Dots Per Inch”. This is relevant in printing since it’s the number of ink dots that get put on paper.
PPI = “Pixels Per Inch”. In digital imaging, this is the number of pixels uses to make up an inch of “Printed” results.
PPI is meaningless for computer screens and websites.
Consider the following:
What is an inch to a computer screen (or web page)?
Let’s say you have a 27" 1920x1080 monitor and I have a 19" 1920x1080 monitor. Both are exactly 1920 pixels wide. A 1000 pixel x 500 pixel image on my screen would take up 1000 pixels. But if you put a ruler to that, it would be right at 10" wide, roughly 100 pixels per inch. But on your monitor, the image would still just be 1000 pixels wide, but those 1000 pixels are spread out over a larger monitor. The 27" version is 71 ppi which works out to 14" of your screen.
At the end of the day, both screens are 1920 pixels wide. The image still takes up a little over 50% of the width of the screen. So only pixel measurements are important to web based images.
A 300 x 300 image at 300 PPI is a 1" by 1" image and a 300 x 300 image at 1 PPI are the exact same image. They take up 300 x 300 pixels. Period. The PPI is a print reference. The 300 dpi version of a 300x300 image will be 1" x 1" when printed. The 300x300 @ 1DPI will be 300" x 300" and each dot will be 1" x 1".
Since we don’t use inches when measuring images in our apps or on web pages, we only care about the pixel dimensions. DPI and PPI are meaningless.
So why does Apple care and want 72 dpi/72 ppi images?
The reason Apple asks for 72dpi is many artists are used to working in print sizes. To them a graphic that would be needed to put a 3" advertisement in a magazine would be a 3" image @ 300 dpi. They don’t think in pixel dimensions. They think in inches and DPI. They have all been trained to take their high resolution image and when converting to web images, to simply resize by changing the PPI from 300 to 72 and it will take care of the problem.
I’m not sure if Apple looks at the DPI/PPI setting when uploading images or if they are just looking at the pixel dimensions (the only ones that matter) or not. This is a simple case in Photoshop of creating your image at their requested size (such as 640 x 960) and then in Photoshop, do an Image->Resize, uncheck “Resample” and then set the DPI to 72 and save the image. I don’t have much experience with Illustrator, but it’s likely when you export the image that you choose the desired DPI, but you have to make sure to match the pixels dimensions first.
Rob
Thank you Rob for outstanding explanation!
I will have to sleep it over and read it tomorrow again
One thing I surely know at this moment:
I exported from vector file 1.png using Adobe Illustrator and setting 72 ppi resolution.
I checked using Adobe Photoshop resolution of an exported 1.png, and Photoshop showed 72 Pixels/Inch resolution.
I did not see anywhere “dpi” units (in PhotoShop or Illustrator).
So on first, it looks like Adobe Illustrator takes care to keep selected 72 ppi no matter what you do with image size (resize it as you wish - and ppi stays always 72).
But I will sleep it over… maybe I am wrong :rolleyes:
Thank you!
Ivan
Right, most modern software will say PPI. We’re not dealing with ink dots we are dealing with pixels, so technically speaking PPI is more accurate, but many people still use DPI for the same meaning.
Apple says to upload screen shots and such at resolutions that match the screens in use, like 640x1136 for the iPhone 5 and that is the most important value to set. Making sure its 72ppi certainly won’t hurt and may avoid problems.
But all of that matters for images you put in the iTunes Connect store (Screen shots and icons).
For your actual game, Apple will never look at the ppi of your game. But don’t make a 40x40 pixels button and expect to use that as your @4x graphic on a retina device, it will look terrible.
The size of your images really depends on your config.lua settings. If you’re width and height are 320 and 480, the base many people use to support the older iPhone 3gs screens and cheaper Android devices, then following Apple’s Human Interface Guidelines, the minimum touch target should be 40x40 pixels. The @2x version would be 80x80 and the @4x version would be 160x160. DPI or PPI never factors in. We are just dealing with a rectangle of pixels.
Your backgrounds (if you’re providing a generic size to fit most all screens) at 1x would be 360x570 (portrait or 570x360 landscape) and the defined 320 x 480 (config.lua is always specified in portrait mode!!! and Corona rotates those numbers for you) is taken out of the center of the image. Ergo, your @2x background would be 720x1140 and your @4x background should be 1440x2280.
It’s always best to start with the high resolution image (@4x versions) and resize down for sharpness, so make your other game objects the right size to fit on the screen, then downsize them at 50% and 25% of the original and save out the @2x and base image.
Repeating for the game, don’t worry about the PPI. But it doesn’t hurt to use 72 as the PPI, but you’re going to build the images based on how big the image needs to be in pixel dimensions.
Rob