Colors on iPad/iPhone not the same as on computer

iPhoneDevForMe

So I have been doing my graphics in Adobe Photoshop, RGB 16 bit at 72 ppi.

When using these graphics on my device's, my purple is blue, grays are very black, and so on. This happens on both the iPhone and the iPad.

Anything I can do in photoshop to change this? Thanks in advance!

-Kyle

gyroscope

Hi Kyle, I found out the other day that all iPhones except the iPhone4 accepts/shows only 8 bit, i.e 256 colours, as you know. So any gradients need to be dithered. i'm surprised that the iPad is only 8 bit though, and wondering how video shows so well...

:-)

firemaplegames

@gyroscope: It's not 256 colors total for the whole image... It's 8 bits per channel - so 256 shades of red, 256 shades of blue, and 256 shades of green...

256 x 256 x 256 = 16.8 million possible colors per image...

Most everything that you make on a computer will be 8 bit. JPEGs for example are 8bit.

16bit is mainly for high level photo editing. Normal scanners and digital cameras are just starting to be able to support it. 16bit images have 65,536 shades of red, 65,536 shades of green, and 65,536 shades of blue... 65,536 x 65,536 x 65,536 = 281 trillion possible colors per image!!

Photoshop can export both PNG24 and PNG8 file formats.

PNG24 means 8 bits per channel, so 16.8 million colors. In addition, PNG24 allows an 8 bit full alpha transparency layer.

PNG8 does mean only 256 colors per image. And only one color transparency, not a full one. Using PNG8 is where you will see banding in gradients that gyroscope mentions...

PNGs can actually handle 16 bits per channel, or 48 bits, but the iPhone (and GameSalad) do not support this. Plus, you wouldn't be able to tell the difference anyway.

@iPhoneDevForMe: Set your image profile in Photoshop to be 8 bit. Your images should match between Photoshop and the iPhone.

---

Fireworks actually has many more PNG options than Photoshop. I am just starting to mess around with it. But it allows you to save PNG8 files with full alpha transparency. I'll let you know how it goes!

iPhoneDevForMe

Thanks for the replies everyone!

So I have tried only a couple things.

I changed the image to 8 bit.
Result: Graphics were very choppy and color was still off

Created a brand new background with the same color scheme only the setting from the start were at 8 bit, 72 ppi. Result:
Very choppy and colors still incorrect.

I then created a brand new background with the same specs as above, only I used a solid color fill instead of a gradient fill. Result:
No longer choppy; however, the color is still off!

This is very frustrating, and I prefer to not have to redo ALL of my graphics! I have tried searching for a forum post I read a while back explaining in GREAT detail all of the EXACT specifications graphics needed to be but the search is not finding anything related to my search keywords at all (I have this problem often).

Anyone have their 2 cents to spare? Thanks in advance!

-Kyle

gyroscope

Excellent explanation as always, Joe. :-)

firemaplegames said:

Photoshop can export both PNG24 and PNG8 file formats.

Unless you've an older version of Photoshop, like I have; CS2 does only plain old png, which must be the 8 bit then...

iPhoneDevForMe said:

......Result: Graphics were very choppy and color was still off

.......Very choppy and colors still incorrect.

I then created a brand new background with the same specs as above, only I used a solid color fill instead of a gradient fill. Result:
No longer choppy; however, the color is still off!

-Kyle

Have you tried dithering the gradients? It's better than not, even though it looks like something on a Commodore 64, 25 years ago...how we've progressed... ;-)

When you say that the colours are off, you're referring to comparison between computer screen and iPhone screen? I guess there would be a difference, although perhaps there's a "safe range" like there used to be with the web, i.e safe web colours. (Or was it web-safe colours; though don't think that's so important nowadays?). Perhaps there's "safe iPhone colours"; don't know...

firemaplegames

@gyroscope: When you save images from Photoshop, use "Save for Web..." under the File menu. You should have options for both PNG24 or PNG8. I have CS3, CS4, and CS5 - but CS3 is still my favorite and the one I use all the time. CS2 should have those PNG options as well...

Gradients will look banded on the iPhone. It is a known issue with openGL on the iPhone. There are fixes, but we don't have access to them in GameSalad.

You can fix the banding by placing a barely noticeable layer of noise over the gradient, say at 5% opacity.

If you want to send me one of the images that you are having trouble with, I can take a look and see if I can see anything wrong: joe at firemaplegames dot com.

EDIT: You also might have a color profile in your Photoshop files that don't look good on the device. Here is a good article on how to turn them off: http://bjango.com/articles/photoshop/

gyroscope

Thank you again Joe; appreciated. :-)

iPhoneDevForMe

Mail Sent!

So I did exactly as you said and saved as a PNG24 and im still having the same problem.

I ran the game on the device, and it was showing up blue instead of purple, so I took a screen shot using the built in screen capture on the iPad/iPhone, and emailed it to myself. Sure enough, I opened the email on my computer and it looks EXACTLY the way it should!

Feeling curious, I tried a solid fill of a different color, in this case, bright green. When I loaded it on my iPad, it looked exactly like I would have expected it to!

Maybe its just the shade of purple I'm using, otherwise I just don't understand!

Thanks again everyone, good info has been given here!

-Kyle

Bunny

My guess is that your monitor isn't calibrated properly, or not calibrated in the same way as your iphone/ipod touch. For a start, if your monitor has a plastic front instead of glass like your iPad/iPhone, colours will already look a little different. Your monitor could just be having issues with blues/purples.