Ben Williams
Ben Williams

Reputation: 4695

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 http://www.aspyre.com.au/stackoverflow/photoshop.png On Device http://www.aspyre.com.au/stackoverflow/device.png

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

Upvotes: 1

Views: 3222

Answers (5)

v01d
v01d

Reputation: 1566

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

Upvotes: 1

studiotentpole
studiotentpole

Reputation: 41

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

Upvotes: 0

Shubo
Shubo

Reputation: 267

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

Upvotes: 0

Meltemi
Meltemi

Reputation: 38359

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

Upvotes: 0

Yann Ramin
Yann Ramin

Reputation: 33177

Common mistakes:

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

Upvotes: 0

Related Questions