Preserve blend mode effect when underneath layers are disabled? (Photoshop)

Question

So I'm working with this image:

And I'm hoping to achieve an effect with it similar to what was done on this website http://www.digitalhands.net/, where independent image layers respond to mouse movements creating a sense of depth to the overall picture.

To do that I would have to break my image into several different layers. I'm not just not sure if that would be possible whilst still maintaining the original look of it, because a number of layers, particularly the music notes and their auras, heavily rely on blending modes like screen and color dodge, to achieve their glow. On top of that I make use of the "blend if"/"underlying layer" slider on many layers as well. If I try to disable the layers below them the blend modes lose their effect, but that's the only way I would be able to break the image down into the appropriate individual pieces.

Is there any possible way to break this image down in the way I'm aiming for? Most of the examples I've seen don't really work for what I'm ultimately trying to achieve with the depth effect. It may just be that the image is too complex for that.

Thanks

Answer 1

If this is for a website, why dont you use blend modes in CSS?

Since CSS3 this is possible.

I'd suggest get the png on normal mode and give it the following line of CSS:

mix-blend-mode: multiply;

this could be screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity as well.

If its a background use background-blend-mode: multiply;

More about this: http://css-tricks.com/basics-css-blend-modes/

Answer 2

Blend modes require a second (underlying) layer to calculate the pixel values. Without an underlying layer, blend modes simply don't work.
It does not matter what type of layer you use. Therefore Smart Objects or external files will not help in this case.
Unfortunately, you need to find an alternative way to produce your desired style.

Answer 3

Sorry but the comment didn't have enough chars to answer this. ^^

You have 2 solutions for that! don't give up:

1 · Try making the auras in a different file (using your blending effects), save it as a png, and bringing them to the source file. The only bad thing is that you will be unable to edit...

2 · But even that as a solution. If you save them in a TIFF file you can bring the "aura.tiff" to your document (it will transform into a smart object) and if you need to edit them just go ahead and right click in the layer and go to edit content (that will open the "aura.tiff" and enable you to edit in real time that layer). That away you can edit the aura very time, maintaining your blending effects as you want ;)

Doing that the only con is that you will have to work with multiple files. Your .psd and multiple .tiff files.

Answer 4

Another option would be to merge the layers involved to preserve the blend. Knock out what isn't needed from the underlying layers by using a selection formed from the intended shape/layer. You only need what is directly underneath the top layers. Merge to preserve the blend. Should work in theory