Quick repainting of things on the site

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

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

Immediately give a link to what should be the result: link

The brief meaning is as follows:
The necessary thing is drawn in Photoshop using translucent gradients on a monophonic background. After that, everything is saved in png and the background just changes the background by js. Who knows everything can not continue to read;)
')

So let's start with drawing our iPod as an example to the idea.

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


In the beginning we break it down into basic elements. Since it is rectangular it 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 icons and in this case everything is proper. With other things, things can be much more complicated, but the meaning is clear. The most important thing is to ensure that if you turn off all layers except the layer with the background square, it would be one solid (in the future, the color to be replaced).
And then remove the green square leaving a transparent place. The result should be something like this:

Now revive it with the help of unpretentious js, applying jQuery for convenience.

Next, make a list with our color icons. For example, two. The background can be both a color and a picture.

<ul class="ChangeColor">
<li>
<a style="background: #5db9b7;" onmouseover='change(this);'><img src="box.png" alt="" /></a>
</li>
<li>
<a style=" background: url('t1.png'); " onmouseover='change(this);'><img src="box.png" alt="" /></a>
</li>
</ul>

The very thing repainted will be this:

<img src="form.png" id="color" alt="" style="background: #000;" />

Let's make everything with the help of css. For example, I quickly did 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 nezabuddte about taming png in IE6;) But too many people have already written their own ways about it.

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

A little thought, you can come up with a bunch of variations on the subject of painting things and why it is needed;)

thanks for helping kellion

UPD: Tvarb usage example