Цветовой профиль в фотошопе и его настройка

Здравствуйте дорогие друзья. В эфире автор блога zaurmag.ru — Заур Магомедов, верстальщик с четырех летним опытом работы на момент написания статьи. Почему я это выделил? Да потому, что все это время я тесно работал с популярным графическим редактором фотошоп.

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

Так вот, если у вас возникла схожая ситуация, то в данной статье я объясню как настроить цветовой профиль в фотошопе, чтобы наша картинка не отличалась от оригинала дизайнера. Я уже как то писал правила для верстальщика, где в одном из пунктов говорилось, что верстка должна строго соответствовать дизайну. Как уже было сказано выше, виной тому было неправильный настроенный цветовой профиль в фотошопе, т.е. у дизайнера один цветовой профиль, а у вас другой.

Чтобы решить эту задачу, открываем фотошоп и идем в меню Редактирование -> Настройка цветов или нажимаем на комбинацию клавиш Shift + Ctrl + K. В открывшемся окне настроек цветов устанавливаем следующие параметры:

• RGB: RGB монитора (Monitor RGB) — «тут профиль вашего монитора» (в кавычках должен быть ваш профиль монитора)
• CMYK: U.S. Web Coated (SWOP) v2
• Градации серого (Gray): Dot Gain 20%
• Плашка (Spot): Dot Gain 20%
• Выставляем все три галочки на пунктах: Несовпадение профилей (Profile Mismatches), Отсутствие профилей (Missing Profiles). Это нужно для того, чтобы картинкам присваивался профиль вашего дисплея.

Если что то непонятно смотрим скриншот.

Теперь если вы хотите оптимизировав сохранить картинку для сайта, то идем в меню Файл -> Сохранить для Web… В открывшемся окне находим пункт «Преобразовать в sRGB» и снимаем с него галочку. Это делается для того, чтобы картинке вообще не присваивался никакой профиль. Далее, выбираем нужный формат — jpg, gif или png и сохраняем.

Теперь наши картинки будут соответствовать макету дизайнера и смотреться одинаково во всех браузерах.

На этом статью завершаю. Надеюсь кому то она поможет решить проблему. Мне вот помогло. До скорых встреч. Пока!