: 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

@Ogunnowo857

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.

Vote Up Vote Down

@Ravi4787994

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

Vote Up Vote Down

@Murray976

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.

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down