Pull to refresh

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

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

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

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

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

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


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

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

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

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

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

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




Далее сделаем список с нашими иконками цветов. Для примера двумя. Фон может быть как цветом так и картинкой.
<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
Tags:
Hubs:
Total votes 164: ↑153 and ↓11 +142
Views 1.8K
Comments Comments 65