Grayscale Dec 6 2008 at 21:32

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

2 min

Website development*

+142

Comments 65

mxc Dec 6 2008 at 21:45

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

Tvarb Dec 6 2008 at 21:58

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

Grayscale Dec 6 2008 at 21:59

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

Somebody32 Dec 6 2008 at 22:01

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

Grayscale Dec 6 2008 at 22:01

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

Devgru Dec 6 2008 at 22:04

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

Devgru Dec 6 2008 at 22:04

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

+23

Grayscale Dec 6 2008 at 22:05

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

artch Dec 6 2008 at 22:06

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

Grayscale Dec 6 2008 at 22:07

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

MKrivosheev Dec 7 2008 at 01:04

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

Grayscale Dec 7 2008 at 01:06

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

KELLiON Dec 6 2008 at 22:17

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

artch Dec 6 2008 at 23:32

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

Londeren Dec 6 2008 at 22:20

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

Londeren Dec 6 2008 at 22:21

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

Grayscale Dec 6 2008 at 22:22

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

muradali Dec 6 2008 at 22:39

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

Grayscale Dec 6 2008 at 22:40

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

Devgru Dec 6 2008 at 22:42

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

Grayscale Dec 6 2008 at 22:43

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

Devgru Dec 6 2008 at 22:46

ничего)

Tvarb Dec 6 2008 at 22:41

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

harhan Dec 6 2008 at 22:54

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

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

Grayscale Dec 6 2008 at 22:55

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

skylix Dec 6 2008 at 22:55

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

Grayscale Dec 6 2008 at 22:59

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

Uratsakidogi Dec 6 2008 at 23:06

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

Grayscale Dec 6 2008 at 23:07

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

theKitich Dec 6 2008 at 23:22

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

homm Dec 6 2008 at 23:52

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

-6

Grayscale Dec 6 2008 at 23:54

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

UFO just landed and posted this here

Grayscale Dec 6 2008 at 23:57

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

pseudopanda Dec 7 2008 at 00:00

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

Rengised Dec 7 2008 at 00:13

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

Grayscale Dec 7 2008 at 00:14

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

deerua Dec 7 2008 at 00:24

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

pgg Dec 7 2008 at 00:30

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

jAx Dec 7 2008 at 00:43

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

Devgru Dec 7 2008 at 01:45

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

Grayscale Dec 7 2008 at 02:52

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

Grayscale Dec 7 2008 at 02:52

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

glazs Dec 7 2008 at 02:28

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

-1

imps Dec 7 2008 at 02: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()" />

-3

imps Dec 7 2008 at 02:33

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

-1

pepelsbey Dec 7 2008 at 03:23

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

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

imps Dec 7 2008 at 20:21

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

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

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

egoisto Dec 7 2008 at 14:32

похоже на Dreamweaver

imps Dec 7 2008 at 20:22

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

almalexa Dec 7 2008 at 02:45

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

koldarev Dec 7 2008 at 02:58

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

WebMast Dec 7 2008 at 15:46

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

hlomzik Dec 7 2008 at 16:19

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

Grayscale Dec 7 2008 at 17:36

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