2

So I'm working with this image: enter image description here

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

  • What i would recommend is to transform layers into smart objects or smart filters. If that don't work what i would do is to create the auras without blending modes, you can do that by painting or making that aura on a different file ".png it" and move to the original final. – João Santos Jan 3 '15 at 23:00
  • Thanks for the reply. It was a no-go with the smart filter option, so I guess trying to repaint the effect would be my only other choice. I wasn't hoping that wouldn't be the case, because that seems a bit too tedious for my taste given how much already work went into the image as is. I may just opt to keep the static image. – isk Jan 4 '15 at 1:03
  • I didn't even notice that the glows were music notes until I looked at it for a long time. Might make it more obvious – Zach Saucier Jan 28 '15 at 22:43
3

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/

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.

1

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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