Hi,
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:
- 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.
- 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… 