QR-код адреса статьи


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

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


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

Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере 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

Grayscale


Из всех способов сетевой коммуникации мы предпочитаем работу по электронной почте. Это позволяет отслеживать все этапы деловой переписки.
Пишите нам по адресу mail@tcse-cms.com

Мы в социальных сетях

Твиттер: twitter.com/tcsecms
Фейсбук: facebook.com/pages/TCSE-cms
Вконтакте: vk.com/public34349369


Вернуться назад