Grayscale 6 дек 2008 в 18:32

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

2 мин

Веб-разработка *

+142

Комментарии 65

mxc 6 дек 2008 в 18:45

Спасибо большое. Казалось все сложнее.

Tvarb 6 дек 2008 в 18:58

Можно и сложней градиенты подкладывать
делали по такому же принципу :)
молодец, что описал

Grayscale 6 дек 2008 в 18:59

Да конечно можно, но всеголишь пример описал :)

Somebody32 6 дек 2008 в 19:01

Придираюсь, но на странице примера все же надо «выберите цвет»

Grayscale 6 дек 2008 в 19:01

Да, точно, спасибо)))

Devgru 6 дек 2008 в 19:04

Ничего такого, на er.ru висело подобное «выберете партию».

Devgru 6 дек 2008 в 19:04

Кстати, странный топик для человека с таким ником.

Grayscale 6 дек 2008 в 19:05

Первый кто оценил )))

artch 6 дек 2008 в 19:06

А если прикрутить какой-нибдуь колорпикер, то можно сделать выбор произвольного цвета на месте. Так сделано у меня на Клавогонках — юзер может выбирать цвет машинки.

Grayscale 6 дек 2008 в 19:07

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

MKrivosheev 6 дек 2008 в 22:04

habrahabr.ru/blogs/iconoskaz/18805/ — про автокадабру

Grayscale 6 дек 2008 в 22:06

turbomilk.ru/portfolio/icons/autokadabra-icons/
Это вот от самого турбомилка…

KELLiON 6 дек 2008 в 19:17

Ну через колор-пикер картинку на фон нельзя поставить. Можно смешать колор пикер и набор картинок, тогда возможно будет поудобнее, хотя это еще вопрос.

artch 6 дек 2008 в 20:32

Колорпикер будет менять цвет фона.

Londeren 6 дек 2008 в 19:20

[offtop]
так вот кто сделал этот шикарный сайт))
гоняюсь там бывает…
[/offtop]

Londeren 6 дек 2008 в 19:21

автору статьи хотелось бы пожелать использовать текстовый редактор
некоторые ошибки уж больно сильно глаз режут…
сори за занудство))

Grayscale 6 дек 2008 в 19:22

Да ничего страшного))) понимаю, но на сегодня уже сил нет исправлять)

muradali 6 дек 2008 в 19:39

именно так сделано и у нас в авингрупе при выборе цвета автомобиля в каталоге, только там посложнее пришлось рисовать…

Grayscale 6 дек 2008 в 19:40

Devgru уже приводил пример с автомобилями )) да, сложнее…

Devgru 6 дек 2008 в 19:42

Странно, кажется, это был какой-то неправильный Devgru.

Grayscale 6 дек 2008 в 19:43

Извини, промазал))))

Devgru 6 дек 2008 в 19:46

ничего)

Tvarb 6 дек 2008 в 19:41

имеено со сложными моделями — там много от дизайнеров зависит.
Полутени, градиенты в прозрачность :)

harhan 6 дек 2008 в 19:54

ух ты! фотошоп на русском! просто честно — я и так далеко не гуру, но просто подумалось что если мне сейчас подсунут русский фотошоп — буду чувствовать себя ребенком :)

топик один из лучших, скажите пожалуйста, можно ли его перепостить?

Grayscale 6 дек 2008 в 19:55

Да, можно, я не против)

skylix 6 дек 2008 в 19:55

Простите, но явно не «выбирите» х_х

Grayscale 6 дек 2008 в 19:59

Да, на самой странице исправил, а на скриншоте забыл :(

Uratsakidogi 6 дек 2008 в 20:06

Дополнительно можно заморочится с дополнительным элементом, чтобы узоры правильно отражались (сейчас — не очень). Хотя в простых случаях, как в примере, можно просто заморочиться с позиционированием фоновой картинки для одного элемента.

Grayscale 6 дек 2008 в 20:07

Да, так изначально и было))) просто потом забыл поправить)

theKitich 6 дек 2008 в 20:22

Толково :)
Впервые на эту мысль наткнулся тут: www.kulish.ru/websites/works_avingroupsite,process.html
А у Вас описание самой технологии )

homm 6 дек 2008 в 20:52

www.artlebedev.ru/everything/backstage/icon-reflections/
Не хорошо как-то получается.
Нет, я не хочу сказать что кто первый опубликавал статью, тот технику и придумал, но и вы не можете претндавать на авторство техники.
Конечно можно сказать что статья полезна описанием процесса создания айпода, но тогда ей место в уроках фотошопа.

Grayscale 6 дек 2008 в 20:54

ОМГ, да никто и не притендует)) я думаю что это вообще придумали еще задолго до Т.Герасименко )))))

НЛО прилетело и опубликовало эту надпись здесь

Grayscale 6 дек 2008 в 20:57

Вот если честно воообще не приследовал цель идеально отрисовать айпод (который до этого кто-то отрисовал и не факт что привильно)

pseudopanda 6 дек 2008 в 21:00

жаль, в жёлтый нельзя покрасить, э-эх. А еще рядом с цветом можно написать красивое название: «Ультра», «Banano»…

Rengised 6 дек 2008 в 21:13

фуууу, русский фотошоп)

Grayscale 6 дек 2008 в 21:14

Это спецом для всяких скриншотов)))))))))

deerua 6 дек 2008 в 21:24

awesome^{10 тыщ раз}
вот так нужно делать мануалы для фотожопа!

pgg 6 дек 2008 в 21:30

Велосипед изобрели давно

jAx 6 дек 2008 в 21:43

На чуть-чуть моя веб-жизнь стала ярче. Буду вашу реализацию вкладывать в свои работы. Реально спасибо.

Devgru 6 дек 2008 в 22:45

Эта техника кстати довольно стара, и используется, например на "странице-в-клочья", для логотипов — таким образом под логотип можно положить фон нужного цвета и он перекрасится. Удобно на самом деле.

Grayscale 6 дек 2008 в 23:52

Я с огромной радостью прочитаю ваши профессиональные статьи) нет, правда) очень жду) и думаю не я один)

Grayscale 6 дек 2008 в 23:52

Комент к комменту ниже…

glazs 6 дек 2008 в 23:28

Очередная статья в духе «Веб разработка для даунов».
И, разумеется, для удобства jQuery. Жду статью про использования тега IMG.

imps 6 дек 2008 в 23:33

Я для замены картинок, не цвета правда, такой вот когда то скрипт нашёл, если немного подумать то можно и к данному случаю применить

function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() {\
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

А пример использования такой вот:

<img name="somename" src="imagetoswaplink" width="somewidth" height="someheight"

onMouseOver="MM_swapImage('somename','','imagewhichwillswap')"

onMouseOut="MM_swapImgRestore()" />

imps 6 дек 2008 в 23:33

Собственно к последнему коменту как раз получилось :)

pepelsbey 7 дек 2008 в 00:23

Вы из какого бабушкиного сундука достали этот скрипт? Его писала компания, которой уже даже не существует…

Если уж автор использует в статье jQuery, то рекомендовать ему этот антиквариат точно не стоит.

imps 7 дек 2008 в 17:21

Непонятно за что минусуют, наверно за то что поделился вариантом. На самом деле всё зависит от цели. Я использовал скрипт для простого сайта не нагруженого ничем, кроме пары функций.

Может кому то всё же пригодится.

Никому ничего не навязывал, а тем более автору, я всего лишь предложил другой вариант.
Но это ведь не значит что нужно использовать именно его ;)

egoisto 7 дек 2008 в 11:32

похоже на Dreamweaver

imps 7 дек 2008 в 17:22

Да, именно из бесплатного шаблона для него я и взял парочку функций.

almalexa 6 дек 2008 в 23:45

Пользовался таким методом и раньше, но всё равно спасибо, очень детально расписали)

koldarev 6 дек 2008 в 23:58

тут пришлось заюзать прозрачность png'шки для смены цвета (параметру «си» назначается цвет в hex'e, можно поиграться).
просто и почти на любой вкус )
*на правах примера*

WebMast 7 дек 2008 в 12:46

Крутая вещица. Наконец-то я узнал как это делается!

hlomzik 7 дек 2008 в 13:19

Вы про самую суть не написали — как можно из заданной картинки сделать нужный png с нужными полупрозрачностями? iPod — слишком элементарный пример.
Т.е. фактически задача такая — мы имеем картинку, состоящую из «фонового», белого и промежуточных между ними цветов. И нужно создать маску, основанную на яркости белого цвета.

Grayscale 7 дек 2008 в 14:36

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