export layers with bleding options and shadow to PNG format using photoshop

I have iphone/ipad app design as PSD file, Most of layers in this file are linked with shapes in order to support retina display. Each shaped layer has blending option like outer glow or external shadow, to export each layer as a separated PNG file I did the following:

  • Select the shape.
  • Go to path pane and convert the path to a selection
  • Press Ctrl + Shift + C : to copy flatten version of the selection.

By following these steps I lose the outer glow and the external shadows.

The first thing I tried is to expand the selection to cover the outer glow or the shadow and export my PNGs following the previous steps, but as you know the shadow blended with the background as multiply and by expanding the selection by 2 px for example these 2 px are exported from the BG (which is a patterned BG) and when I applied the exported PNG to my ipad app the BG in my app and the 2px of the BG comes with the PNG image don’t match.


UPDATE : 23-09-2012

Please check this psd file and this png file :

In the psd file : I added a shaped layer with outer shadow, the shadow looks blended within the bg.

I create a (New Layer Based Slice) over the shaped layer and the shadow is taken in the consideration, then I exported for web, I got a folder with pngs inside it, I took the png file, which represents the slice I created, I imported the png file into the psd file as a new layer, the shadow now looks very-white and not blended within the bg… this is what I have in my Iphone app exactly, so please help me.


The problem here is object ( or rather a layer style ) with a special blend mode and transparent bg. That just wont happen. Think about it: Because the blend modes generally react to what ever is behind them, with transparent bg there is nothing to react to, the blend mode is basically normalized.

The solution for your problem would be just to use normal blend mode and lower the opacity of your drop shadow (This would give you nearly identical final result).

Another way would be to include the background, or just the part of the background that is sitting under the element with blend mode.

For other similar situations, you could set blend mode to normal, lower the opacity and try to create the same effect without any blend modes.

Source : Link , Question Author : Saeed , Answer Author : Joonas

Leave a Comment