Question

Do you know how this website achieves the customization effect in the gallery? When you change the color, the stones or other attributes of the ring, it looks like a new image is generated.

http://www.gemvara.com/Round-Blue-Topaz-Sterling-Silver-Ring-by-Gemvara-Essentials/jewelry/v/342899/

(click Customize)

Do you think they have thousands of images for every possible combination? Or maybe they use something to generate them?

Answer 1

Without examining their source code, I would say it’s a near certainty that they’re just loading a separate image for each ring. It’s possible that the images themselves may have been processed from a single source graphic (they do look very similar), but as far as the site is concerned they’re separate images.

But one technique I’ve used in the past to get a graphic in any colour I want is to use a greyscale overlay with transparency, and a solid background colour behind it in the colour I want.

This can work even for a full colour image with a spot-effect colour (as with the images in the example site), if you use a PNG image with an alpha channel transparency section in the area you want to colour.

Due to the grey foreground, this technique tends to produce shades that look like pastel colours, and it’s only suitable for images where you don’t need complex colour changes, but it can work.

On the other hand, for images like the ones on that site, it’s probably better just to use a separate graphic for each product. Simpler, easier, and more honest (if you’re selling a product with an photo of that product, people will trust you more if that image is actually a real photo rather than computer generated)