Quick repainting of things on the site

There are times when you need to give users the choice of color of a thing. There are several ways to get out of this situation.

Here I show a very simple and straightforward way to quickly repaint, using the iPod Shuffle as an example.

I’ll immediately give a link to what should result: the link

A brief meaning is known to everyone: The
necessary thing is drawn in Photoshop using translucent gradients on a plain background. After that, everything is saved in png and on the site the background simply changes using js. Who knows everything may not read further;)

And so, let's start by drawing our iPod as an example of an idea.

This is our original image. By the way, for this it is more convenient to draw already drawn pictures;) than photographs.


At the beginning we break it into the main elements. Since it is rectangular, this simplifies the task.


Next, we try to add the same shadows and highlights as on the original and make a normal reflection in the floor.


Next, draw a circle with buttons. Set the parameters for the layer with a circle approximately as shown in the screenshot.


We add pictograms and actually in this case everything. With other objects, everything can be much more complicated, but the meaning is clear. Most importantly, make sure that when you turn off all layers except the layer with the background square, it would be one solid (in the future, replaceable color).
And then we remove the green square leaving a transparent place. The result should be something like this:

Now we revive it with a simple js, using jQuery for convenience.

Next, we will make a list with our color icons. For example, two. The background can be either a color or a picture.

• 
  
  


• 
  
  

The repainted thing itself will be like this:

Let's make out everything with css. For example, I whipped up like this:

#color {margin: 15px 0 0 0;}

ul.ChangeColor {margin: 0; width: 336px; background: #f3f3f3; border: 1px solid #efefef; padding: 25px 25px 40px 25px; display: table;}
ul.ChangeColor li {float: left; list-style: none; margin: 15px; width: 50px; height: 50px;}

.ChangeColor a, .ChangeColor a:hover {border: 8px solid #e3e3e3; cursor: pointer; display: block; width: 50px; height: 50px;}

.ChangeColor a.act, .ChangeColor a.act:hover {border: 8px solid #cdcdcd;}

That's all. And don't forget about taming png in IE6;) But everyone has already written their own ways about this.

Also, you may need more lessons on drawing things. The magazine www.smashingmagazine.com has a selection of articles on this subject.

With a little thought you can come up with a bunch of variations on the topic of painting things and why you need it;)

thanks for the help kellion

UPD: An example of use from Tvarb