Trouble with layer blending options -> PSD to HTML Question


I am pretty good at coding PSD files to xHTML and CSS, but there is one area that is constantly giving me trouble: Slicing out parts of the image with crazy blend modes like “Hard Light”, “Multiply” and what not!

When I crop the image, I usually blank out all the other layers, and save it as a transparent .png. Sometimes, a crucial element is set over the website/container background, and has a blend mode like Multiply applied to it.

There’s only two ways of slicing this kind of image:

  1. Cut it out along with the background, and then painstakingly slog till it it aligns perfectly with the background.

An example of this would be if there’s a glassy button on a striped diagonal background, I can slice it out with Ctrl+Shift+C, and do it.

The major headache with this approach is browser compatibility. IE 6, 7, and 8 all behave differently with positioning, even with some of the best resets in place. Just a 2 or 3 pixel difference in positioning breaks the seamless effect required by some backgrounds.

  1. Revert the blend mode to normal, experiment with the right colors and gradients to match the original effect as closely as possible, and go back to cutting it as a png.

Even this method is very time consuming and inaccurate.

Is there no shortcut out of this? I searched and researched a lot on this subject, but hardly any site has even a tiny bit of info on this problem, they all concentrate on the basics of PSD to xHTML conversion!

Sorry for the long question, but I think this post will help the answer of many many people like me searching for a solution to the same problem in times to come… :slight_smile:

Okay guys, just wanted to notify that I got an answer here: