Такая вот ситуация: дизайнер присылает макет, а у верстальщика открывается какая то лабуда светлая, или темная (если верстальщик испольует МасOS, а дизайнер Win.). Или же верстальщик сохраняет картинку, а там цвета другие стали.

Разберемся почему так и как с этим жить.

Небольшой экскурс в теорию. Для отображения цвета на наших мониторах используется цветовая модель RGB, но поскольку но, поскольку, мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых пространств, соответствующих «усредненному» монитору. Нам интересно пространство sRGB.

sRGB – это цветовая модель использование которой будет одинаково отображать графику как на навороченном так и на допотопном ноутбуке.

sRGB это пространство используемое по умолчанию  для отображение графики в интернете.

Различие в профилях.

У правильного верстальщика профиль стоит North America Web/Internet. Проследите чтобы в Working Spaces было именно sRGB.

У правильного дизайнера тоже должен стоять такой профиль при создание макета сайта. Тогда ни у кого не будет проблем.

Помимо этого ваш Photoshop должен не только работать с нужным профилем, но и отображать вам истинный вид макета. А поскольку навороченные мониторы вряд ли используют усредненный sRGB, то необходимо чтобы стояла галочка на Proof Colors.  Этим вы заставляете Photoshop отображать изображения согласно профилю.

Различия в OS

В Win по умолчанию на картинки накладывается профиль sRGB, то есть даже если вы не выбрали вышеуказанный профиль, у вас все равно будет sRGB. Однако в MacOs на картинки по умолчанию накладывается профиль монитора, что плохо. Однако решающее значение будет играть тот факт, какой профиль вы используете в граф. редакторе.

Есть еще одно различие: в Win гамма по умолчанию 2.2, а в Мас 1.8 (по крайней мере в последней ОС). Из за этого картинки с Мака выглядят темнее в Винде, и наоборот. Если дизайнер хочет постичь Дао, то нужно на Маке поднять гамму до 2.2 (кто скажет как это сделать, тому спасибо и ссылка Настройки -> Мониторы -> Цвет -> Калибровать -> Продолжить -> 2.2 Телевизионная гамма… Прокликать дальше, как-нибудь назвать и использовать.
Спасибо Вадиму Макееву). Почему поднять на Маке, а не опустить на Вин? Потому что в Linux тоже 2.2, да и новая версия МаcOS выйдет с гаммой 2.2 (слухи ходят).

Мне прислали макет в профиле отличном от sRGB

Это самое интересное.

Так бывает. Стоит у дизайнера какой-нибудь “Cinema HD_BQB01072007” и дизайнер знать об этом не знает. Мол, наше дело нарисовать, художника всякий обидеть может и тэдэ.

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

Для начала необходимо убедится, что у нас стоят вот эти галки.

Теперь при получении некошерного профиля нам будет выдаваться вот такое окошко.

Что мы тут можем сделать.

1. Мы можем применить профиль который идет с изображение
2. Мы можем конвертировать профиль в наше рабочее пространство.
3. Мы можем продолжить использовать свой профиль.

Многие начинающие верстальщики перебирают все три способа, пока картинка не будет идентична той что отображается в просмотрщик(ACDSee или Irfan и примеру). И останавливаются на третем. Это НЕ ПРАВИЛЬНО, потому что вас просмотрщик тоже отображает не правильно.

И так допустим вы выбрали первый вариант. В этом случае при сохранении картинок нужно обязательно при сохранении картинки через Save for Web & Devices… убрать галку с Convert sRGB. Иначе у нас сохранится совсем не то что нам надо.

Внимание. В Photoshop CS3 она прячется здесь.

Я же настоятельно рекомендую выбирать второй пункт — конвертацию. Но перед этим зайдите в Convert to Profile и снимите вот эту галочку

Потому что в случае если в присланном вам профиле используется большее кол-во цветов чем в sRGB, то Photoshop будет пытаться заменить отсутствующие цвета комбинацией своих. Правда я не знаю как это будет выглядеть, ибо не сталкивался никогда. Скорее всего будет частичное цветовое несоответствие.

На этом все. Жду ваших вопросов.

Взглянем на пример. Так по мнению дизайнера должен выглядеть макет.

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

Что вызывает негодование в дизайнерской душе. Однако у сеошников и других “противников эстетики” своя работа, а у вас своя. И жертвовать кол-вом текста, высотой картинки и лишним баннером они не будут.

Посему выход для вас один — не привязывать горизонтали к динамическому контенту.  Это как правило перечни товаров, менюшки, всевозможные текста. Другой вариант — это посветить в ваши сомнения верстальщика, возможно в ходе беседы вы сможете найти компромисс между возможностями браузеров и изысками дизайна.

Разумеется если вы хорошо верстаете или верстали когда-то, подобные проблемы отпадают за несостоятельностью.

Во-первых, так мало кто делает, что автоматом дает вам бонусную изюминку.

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

— Точно! На скотче остается отпечаток пальца!

Наше мнение совпадает с мнением наблюдателя, и это очень круто.

В-третьих, следователь дал бы вам краба, за этот отпечаток, ведь спецы точно знают, что он там есть. Учитовать взгляд специалистов, очень помогает в тематических рисунках. Попробуйте, как-нибудь, для сайта клана по Quake, вместо от**доренной клавы, поместить клаву с затертыми буквами “W”‘, “S”, “A”, “D”.

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

Как по вашему, почему это лист смят?

• Разработать баннер под дизайн площадки (сайт, где висит баннер)
  Это очень круто. Процесс сводится к использованию в баннере цветовой гаммы сайта, типографических элементов и отступов. Встречает редко, ибо дорого, сложно и как правило один баннер висит на нескольких сайтах, а под все сразу не нарисуешь.
• Использование подложки.
  Отличный способ сделать из самого уродского банера гармоничный элемент сайта.
  Наиболее распространенные варианты подложек: стикеры, листочки с кнопками, и всякие другие штучки на которых в офлайне можно написать напоминание.

  Более сложный (но изысканней) вариант с использованием изображений сайта. Например, если у вас нарисовано дерево на сайте, то на листьях можно разместить рекламу (ну или на коре вырезать). Тут вообще вариантов масса и все зависит от воображения, но стикеры влезут везде.

• Как есть.
  Самый распространенный вариант. Дитя лени и кривых рук. Берется любой банер и просто пихается в свободное место. Гармонии никакой, сайту носителю один только вред.

Думайте башкой, в общем, когда ставите баннер. И не ленитесь, чтобы не превращать свой сайт в кусок говна. Самую простую подложку сделать — дело одной минуты, а стикеров везде готовых полно.

Представьте, что абсолютно типичный покупатель зашел в Евросеть купить телефон. Он подзывает типичного продавца и сумбурно объясняет, что хотел бы телефон в пределах такой-то суммы.

Знакомая картина? Продавец начинает суетится, он предлагает одну модель и смотрит на посетителя пытаясь угадать его желания, предлагает другую и снова пытливо заглядывает ему в рот. Предлагает подороже, подешевле, понавороченее, попроще, резиновый, имиджевый…. И при этом постоянно посматривает на покупателя, ожидая, что он, наконец, скажет, что это именно то, что он хотел

Что происходит? Происходит конфликт желаний. Продавец хочет, чтобы покупатель высказал ему свое желание, а покупатель, зайди в магазин, ждет, что ему скажут, покажут и дадут понять, что ему нужна именно эта модель.

Отсюда следует вывод: Большинству людей нужен выбор лишь как данность, им достаточно лишь осознавать, что он есть.

Покупатель хочет (как правило не осознавая), что специалист сам решит что ему надо, а если здесь ему не дадут желаемого, он обратится к другому продавцу или уйдет в другой магазин

А теперь о дизайне.

Большинство дизайнеров или попросту перегружают сайт ненужной информацией или неверно расставляют акценты (Например, вездесущая ссылка «О нас» имеет место быть ярко обыгранной только на сайте-визитке, а на сервисах ее лучше убрать в подвал).

Вы взгляните на дизайн Google. Он не перегружает наш мозг не нужной информацией, он четко дает нам понять, зачем мы сюда пришли – найти нужную информацию. А вот если вы относитесь к тому типу людей, которые понимают зачем им выбор, то к вашим услугам широкий спектр расширения функциональности (igoogle).

Нет. Сделать лучше – это просто выкинуть то что сейчас плохо. И все. А, заливая в испорченный дегтем мед, еще меда, ты его не исправишь.

Вывод — надо делать, так, как кажется правильным, а не так как нам говорят всякие пипетки

Лично мне данная ситуация напоминает мартышку с пистолетом. Я нисколько не беспокоюсь за судьбу этого инструмента, попади он в руки технического директора или какого-нибудь специалиста по верстке. Но я вижу и других людей. Вижу директоров всяких закусочных, юр.фирм, магазинов шин, строительных компаний и прочих людей по неизвестным мне причинам возжелавшим себе сайт, которые «сам себе Бог и судья». Вижу, как они довольно хмыкая, тыкают носом бедного верстальщика в двухпиксельный отступ. Вижу менеджеров студий, испытывающие чувство самоудовлетворения от сознания собственного профессионализма. Они тоже сейчас «сам себе Бог и судья».

Мои постоянные заказчики делятся в основном на тех, кто разбирается в теме и тех, кто предоставляет разбираться мне. Но как быть с остальным сомном? И я не хочу объявить Pixel Perfect вне закона. Из технологии расщепления атома было создано много хороших открытий, а не только атомная бомба.

Суть данного зла строиться в непонимании разницы между изображением макета и его идеей. Как правильно понять задумку дизайнера?

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

Надеюсь, данный пример поможет вам, будь вы заказчиком, менеджером или верстальщиком.

P.S.
На примере мой макет, поэтому гневные филиппики «откуда тебе знать как думал дизайнер» можно оставить при себе.

Многие пали жертвой шаблона. Например, устоявшееся понятие «веб-дизайнер» — особь (как правило, мужская) делающая HTML-странички. Уныло как-то.

Порой дизайнеры даже стесняются назвать свою профессию — знают ведь, что не поймут их. Вернее поймут, но так, что хоть в морду давай.

Кстати, шаблон веб-дизайна, именно тот редкий случай, когда обратная сторона медали выглядит еще хуже. Любая особь (как правило, мужская) сделавшая пару страничек и выложившая их в сеть, считает себя веб-дизайнером (некоторые, к счастью начинающими). Совсем недавно моя знакомая гордо заявила, что ее мама тоже (!!!) делает сайты. А ведь еще вчера не умела. Вона какой талант!

А ведь в моем понимании это такая профессия, освоив которую человек уже может не опасаться за кусок хлеба. Ну, сами посудите.

— Графика. Я не веду речь о таких гуру как феррарист или фригер. Они иллюстраторы – люди умеющие рисовать красивые картинки. Однако веб-дизайнер рисовать тоже должен уметь в рамках способностей любого человека. Должен уметь видеть баланс композиции, чувствовать пространственные отношения, и понимать, что типографика тоже может быть красивой.

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

— Юзабилити. Ты можешь совершенно не знать, как рисовать тени и отражения, но знать, где лучше расположить форму регистрации просто обязан. К сожалению, многие подходят к вопросу юзабилити, основываясь на обычном житейском опыте и интуиции. А ведь за этой наукой стоит огромное кол-во исследований и опытов. Тем не менее, это неотъемлемая характеристика дизайнера. Если у нас, в рунете, люди готовы пускать слюни на сайт с красивой картинкой, то в стране «забугряндии», человек не нашедший в течение 20 секунд кнопку «оплатить» или «регистрация», уходит и больше не возвращается.

— Кодинг. Не, я не призываю засесть всем за учебники по php. Просто таже самая верстка, сильно связана с программированием. Если вы работали в офисе, то не раз и не два слышали матюки программистов в сторону верстальщика. То есть веб-дизайнер может и не уметь кодировать, но уж точно программинг для него не пустой звук.

Итого неслабый наборчик скилов выходит. Согласитесь, что, потратив на освоение всего этого добра не один год, обидно услышать, что вас сравнивают, с человеком только что научившемся создавать home-pages.

Весьма примечателен комментарий моего знакомого ролевика:
— Мегамачкинский персонаж получается — играть сложно, развивать долго, но уж если раскачаешь…

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

Так, например, дизайнерам стоит вставить соответствующую рыбу, вместо LoremIpsum и удалить из макета еще не готовые блоки. Верстальщикам необходимо проставить кегль, цвета, шрифты, подготовить стилевое оформление ссылок, и так же, как и дизайнеру, убрать еще не готовые блоки. Программистам – избавиться от варнингов и отладочного кода (вы же не хотите потом потратить час на объяснения, что все это никоим образом не влияет на функционал)

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