Hi! I’m planning to add to my site some product which user can interactively rotate and I’d like to add an opportunity for the user to choose paint colours of it. Instead of rendering a huge amount of images for each color, I want to do the same as it has been done on Renault official site. Here is .psd file attached with an image from here. As you can see this transparency got all shadow, reflection and specular information, so if you add some colour under the layer with the car you can change the colour of it and it looks great.
The image was taken from Renault official site. It is used with an interactive web configurator. Does anybody know how to prepare the same thing in Keyshot and Photoshop? Thanks!
Renderers typically output something similar to a physical process. When you project light, you get information about light color (or no light) but no transparency.
I believe Renault did post-processing to convert a certain color key to transparency. This can be done by rendering a magenta or (lime green) car and then turning all magenta transparent. If other regions on the rendered image contain the same color key (number plate, interiors), they need to be masked to preserve their opaqueness.
So the procedure to render would be to do two renders:
First do a physical render of the model by using a material with fully saturated color key and physical properties (glossiness).
Then do a mask render by turning off physical rendering (global illumination, shading) and replacing all materials by purely ambient materials without physical properties. Set all materials that become transparent to ambient black and all others and the background to ambient white.
In post-processing, duplicate the realistic layer:
physical_render (2): apply the rendered mask
physical_render (1): replace the color key by transparency (e.g. like in GIMP “color to transparency”)
Take into account that .png images (for transparency) will have less compression and take more bandwidth than you would have achieved by saving .jpg without transparency. You can explore other formats like webp.
Thanks. I’ve tried a lot of times on getting the same result but with no success. For example, with Renault image, I can add an underlying layer with black or white colours and it looks fine. But in my case it doesn’t work, I only can add any bright saturated colour. That means that I do something wrong. I can’t share my real scene but here is some standard one with lego car I’ve downloaded. So let these green parts will be the parts we want to change the colour.
So as you see as only I’m trying to set an underlying layer with black colour the parts look bad and will become solid black if RGB will be as 0 0 0. So I made so many attempts to this task that even don’t know what else to do and probably the only solution for me will be an explanation on real example if it is convenient for you of course . I made a render in Keyshot with all the passes it supports and uploaded by the link DropMeFiles – free one-click file sharing service
Thanks! and here is separately the lego model in .obj format DropMeFiles – free one-click file sharing service
Right now your alpha layer only creates shadows, since it is going from transparent to black
Putting shadows on something that already is fully black will make it… black.
I would also make a highlights alpha layer, going from transparent to white and put that also over your background color.
. I made a render in Keyshot with all the passes it supports and uploaded by the link 
I supposed such kind of a comment