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


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


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

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


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


7 декабря 2008  2 2 410   Версия для печати


Похожие публикации

Оптимизируем производительность веб-страницы: CSS

В наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать по 20-30 (а то и больше) секунд, чтобы веб-страница загрузилась и отобразилась... читать далее

Форма быстрой связи с администрацией сайта для клиентов

Великолепная вебпрога позволяющая разместить на вашем сайте панель с чатом для ваших клиентов сообщения которого будут прилетать в ваш джаббер клиент Написать подробную инструкцию меня сподвигнула... читать далее

Web-разработка / Думай о ссылках

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

Блог им. vitaly80 / Перевод Поменяйте вашу вкладку «Главная» для лучшей оптимизации поисковиками

Сейчас я покажу вам небольшой трюк, который я постоянно использую для поисковой оптимизации. Любой сайт имеет навигационное меню, и почти всегда в первой вкладке меню имеется ссылка «Главная» и она... читать далее

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)

На сайте nettuts.com была опубликована статья с примерами и исходниками 20 Ajax эффектов, способных придать вашему сайт современный вид и повысить его юзабилити. Перевод данного обзора выполненый для... читать далее

Как добавить OpenID на сайт

OpenID - несомненно, полезный механизм как для пользователей, так и для владельцев сетевых ресурсов. Пользователям он даёт: Возможность запомнить один логин и один пароль и использовать его везде... читать далее

Комментарии (2)

  1. #1 написал: Denny8940
    Группа: Гости
    21 декабря 2008 17:43


    Полезная информация.
    • 0

       

  2. #2 написал: Маруська
    Группа: Гости
    18 января 2009 23:48

    Тоже интересненько :)
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте