iPhone transparent images rendering poorly

views:

537

answers:

iPhone transparent images rendering poorly

I'm developing an iPad application. I have been provided with a PNG image that contains some transparency - basically a drop shadow. The problem I'm having is that this is rendering poorly within the application, both on the device and in the sim.

I've made up some samples to illustrate. The first is how the image appears in the PSD (correctly that is). The second is how it appears on the device. You can see that the strip of shadow in the middle of the image is distinctly more yellow and poorly looking.

PDF On Device

Any ideas what I'm doing wrong?

Edit: Links to files: - PNG - PSD

Edit 2: I've also tried pngcrush to remove the gamma, in case that was causing a problem, but no luck. Directions I followed were here: pngcrush

Common mistakes:

Your color space is non-standard. Either use no color space, or specify sRGB (strongly preferred).
You didn't save the PNG with gamma information included.

Yann Ramin 2010-06-09 05:45:05

I'm not quite sure where to set color space. Is this something in Xcode, or Photoshop when saving the PNG?

alku83 2010-06-09 05:56:57

It is part of the image manipulation portion in Photoshop, and can be specified when saving. The actual manipulation is done by the (IIRC) "Convert to Profile" or "Assign profile" menu items.

Yann Ramin 2010-06-09 05:58:44

I think from what I can tell my PSDs are in Adobe RGB (1998). That doesn't sound so good. Am I in trouble? Converting them to sRGB seemed to alter the colors quite a bit. I've attached a PSD to the question, in case it helps.

alku83 2010-06-09 06:23:45

@alku83: Adobe RGB is a very wide gamut, and represents colors which most monitors and especially handheld devices cannot display. If the visual representation is "ok" on your monitor, you can try to "Assign profile" instead, which will pretend all the information was in sRGB to begin with.

Yann Ramin 2010-06-09 16:10:46

@theatrus: I still don't seem to be having any luck. I tried coverting to both sRGB profile, and Monitor RGB profile. For both profiles I've tried saving as a PNG-24 with conversion to sRGB and without. Any other ideas? I'm really lost!

alku83 2010-06-09 21:52:53

Without access to the actual files we're grasping at straws.. Maybe you have an 8-bit instead of 24-bit png?

Meltemi 2010-06-09 05:52:26

If I put up a link to the PNG and the PSD, that will help I take it?

alku83 2010-06-09 05:56:16

@alku83: yes, it will help

Yann Ramin 2010-06-09 05:59:54

Appreciate you taking a look - files now attached.

alku83 2010-06-09 06:21:07

For your shadow, use black instead of gray. Then adjust the transparency. That should fix it.

Yong 2010-06-11 00:25:42

I'm not quite sure what you mean. The shadow is in the Photoshop file and renders ok in there. Where should I adjust it?

alku83 2010-06-11 02:35:16

I had a similar issue that I resolved by disabling compression for an image. This is done in XCode by removing the .png extension. You can disable png compression for an entire project by editing the 'Compress PNG Files' project setting, but it is not recommended.

More details about Xcode PNG compression: http://iphonedevelopment.blogspot.com/2008/10/iphone-optimized-pngs.html

studiotentpole 2010-06-16 05:32:05

I was really hoping this would work, but unfortunately no dice. I tried both the project setting and removing the .png extension for a single file. Thanks anyway...

alku83 2010-06-16 23:55:38

+1 A:

The reason you're getting a colour in your shadow is because the PSD's shadow layer is set to Multiply and has a colour in it. When you export it without a background, Photoshop is unable to multiply it to anything and just uses the layer as is. You need to grab the selection of the shadow layer, create a new layer, and fill that selection with black. Then set that new layer's opacity to something that mimics the old shadow.

Also I recommend you use Save-For-Web if you don't already. The colour-profile you use isn't much of an issue then as it will be stripped. However the point is valid that you want to be in sRGB when making iPhone/iPad graphics.

Link to your PSD adjusted: PSD

v01d 2010-06-19 05:31:10

Wow, thank you SO much! Please enjoy your well deserved bounty.

alku83 2010-06-21 00:17:33

Cheers! Glad to help.

v01d 2010-06-21 00:57:11

ansaurus

tags:

views:

answers:

iPhone transparent images rendering poorly

related questions