5

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.

6
  • macrabbit.com/slicy
    – Joonas
    Sep 23, 2012 at 8:04
  • Thanks Joonas, I tried this slicy tool but still have the same issue
    – Saeed
    Sep 23, 2012 at 20:24
  • Saeed: Right. I didn't really read all of the question before. As far as easy saving of the files go, Slicy is great, but the problem here is element 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 the element and with transparent bg there is nothing to react to, the blend mode is basically normalized.
    – Joonas
    Sep 23, 2012 at 21:08
  • 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). Well, another way would be to include the background, or just the part of the background that is sitting under the element with blend mode.
    – Joonas
    Sep 23, 2012 at 21:09
  • Here's a .psd for you: dropbox.com/s/z384kjxjx7o0n1h/example.psd - 1.png is your original element. 2.png and 3.png are my examples of how you could handle it.
    – Joonas
    Sep 23, 2012 at 21:29

4 Answers 4

2

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.

0
1

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.

1

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.

Sprite sheet exporting with slices from Photoshop

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

4
  • Thank you Marc, I love the (New Layer Based Slice) idea, but I still have one question, in your snapshot you hide your BG, what about the outer shadow ? If I hide my bg and export-> and then apply it to my iphone app I got a very-contrast shadow and it's not blended in my bg.. the BG is patterned bg 256*256 and I exported alone and applied it to the ViewController background image
    – Saeed
    Sep 23, 2012 at 17:04
  • Dear Marc, please check my answer above, I updated it with more details.
    – Saeed
    Sep 23, 2012 at 20:06
  • You're using an overlay blending mode for your drop shadow. PNGs can only use normal alpha transparency for blending. That's the difference you're seeing. Changing the drop shadow to 10% opacity and normal blending yields an almost identical result that can be exported to a PNG. Sep 23, 2012 at 23:34
  • Thanks Marc, you & Joonas suggest the same solution and I works for me
    – Saeed
    Sep 25, 2012 at 16:57
0
  • 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.