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

Question

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.

Answer 1

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.

Answer 2

Have you tried to export as 24bit PNG. The alpha transparency in 24bits is soft and doesn't require to take part of the BG, just hide the background and file>save for web and devices…. In the dialog select PNG-24 as the export format.

Answer 3

Go to path pane and convert the path to a selection

That's the step that's cutting the external layer styles from your selection. You're selecting just the shape, then copying the shape itself (and not the layer effects). What you need to do is hide the background layers and use Copy Merged with a rectangular selection to get everything.

—

There's many ways to export image assets from Photoshop. Here's a common method a lot of designers use (Copy Merged) and the one I use (Slices and Sprite Sheets).

—

Method one: Copy Merged.

Ensure the correct layers are shown or hidden (hide background layers), draw a marquee selection around your element, choose Edit → Copy Merged, File → New, hit return, then Paste. The result is a new document with your isolated item, trimmed to the absolute smallest size possible. From here, all that’s needed is to save your image using Save As or Save for Web.

Rinse and repeat for every image needed for your app or website. It’s a simple and quick technique, but requires a lot of repetitive work and if you ever need to export your images again, you’ll have to start from scratch.

—

Method two: Slices and sprite sheets.

Lay out all your artwork assets flat and set up slices with a name for each one. From there, you'll be able to use Save for Web to export everything at once. To export all your Retina assets, scale the document up 200%, and reexport to a different place, run a script to add @2x to all the filenames, and merge the two exports.

Super fast, far less prone to mistakes, gives you complete control over the dimensions of the exported area (a big deal when you factor in Photoshop's bug relating to shadow and glow blurring), easily repeatable and lets you iterate and reexport assets many times as you improve the design of the app.

It's the best way to export iOS assets by far, in my opinion.

The example above shows what I'm taking about. The only difference is that I use larger sprite sheet documents, and less of them, which makes exporting even quicker. I also have set folders I export to and an Automator Workflow that adds @2x to filenames and merges the exports.

It sounds like a pain and a lot of work, but it's worth it. Once you get quick, it's faster than using Copy Merged and repeatable.

I've written up a little more info here: Exporting from Photoshop

Answer 4

• New Layer
• Command-Option-Shift-E (Mac) or Ctrl-Alt-Shift-E (Win). This is the merge visible command. It can also be executed by holding the Option/Alt key and choosing Copy merged from the Layer Panel menu.

This doesn't touch any of the existing layers, but rather makes a duplicate, so it looks exactly like all the other visible layers without any blending modes or other effects.