Быстрая перекраска вещей на сайте

Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации.

Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.

Сразу дам ссылку на то, что должно получиться в результате: ссылка

Краткий смысл таков и всем известен:
Нужная вещь отрисовывается в фотошопе с использованием полупрозрачных градиентов на однотонном фоне. После этого все сохраняется в png и на сайте просто меняется фон посредством js. Кто все знает может дальше не читать ;)

И так начнем с отрисовки нашего iPodа как примера к идеи.

Это наше исходное изображение. Кстати для этого удобнее отрисовывать уже отрисованные картинки ;) нежели фотографии.



В начале разбиваем его на основные элементы. Так как он прямоугольный это упрощает задачу.



Далее пытаемся добавить такие же тени и блики как на оригинале и сделаем нормальное отражение в полу.



Далее нарисуем кружок с кнопками. Выставляем параметры для слоя с кругом примерно как показано на скриншоте.



Добавляем пиктограммы и собственно в данном случае все. С другими предметами все может быть куда сложнее, но смысл понятен. Самое главное следите за тем, что бы при отключении всех слоев кроме слоя с фоновым квадратом он был одного сплошного (в будущем заменяемого цвета).
А потом удаляем зеленый квадрат оставляя прозрачное место. В результате должно получиться примерно так:



Теперь оживим это с помощью простенького js, применив для удобства jQuery.

<script type="text/javascript">function change(obj){$("ul.ChangeColor a").removeClass("act");$(obj).toggleClass("act");$("img#color").css("background",jQuery(obj).css("background"));}</script>

Далее сделаем список с нашими иконками цветов. Для примера двумя. Фон может быть как цветом так и картинкой.

<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>

Сама же перекрашиваемая вещь будет такой:

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

Оформим все с помощью css. Например у меня на скорую руку вышло так:

#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;}

Вот собственно и все. И незабуддте про укрощение png в IE6 ;) Но про это уже слишком много писали у каждого свои способы.

Так же вам могут понадобится еще уроки по отрисовке вещей. В журнале www.smashingmagazine.com есть подборка статей на эту тематику.

Немного поразмыслив вы сможете придумать кучу вариаций на тему покраски вещей и зачем это нужно ;)

спасибо за помощь kellion
UPD: Пример использования от Tvarb