How to go about making a rotating image with custom options

Question

I have 8 png images of a shoe; one for every 45 degrees. I want to be able to customize this shoe with different colors, and have the user be able to rotate the shoe 360 degrees displaying whatever custom color the user selected all around the shoe. My question is, does this mean I need a different image for EVERY different color, at every different angle? This seems like a ridiculous amount of images, especially if more customizable options are added aside from color. I'm wondering if there is anything out there that would help simplify this goal to avoid loading and interchanging a million images based on the angle and custom options selected, and I'm pretty much wondering, how someone more experienced might go about this.

Thanks for suggestions.

Answer 1

I'm not entirely sure what colours you are using for your shoes, but the following is something you can do. If you've got a shoe for colour #999 and one for #7B5, you could simply take the 8 different pictures of a certain colour, make the background non-transparent, then remove all parts that are the specific colour and make those transparent, then change the background-colour style of the image.

This demo uses the original image http://www.selectism.com/files/2013/05/wtaps-canvas-sneakers-02.jpg (imgur link in case that one 404s), with the colour #39476A removed from it using Chroma Key (greenscreen) effects, available in any specialised photo editor (photoshop, GIMP). Since the background is non-transparent, placing a colour behind it will fill in just that colour on the image, resulting in the effect you want.

When you've got your Chroma Keyed image, you simply place a background-color style on the <img> tag depending on the colour chosen by the user, and it'll appear as selected.