< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Веб-дизайн » Цветовой профиль в фотошопе и его настройка

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

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

Пост был обновлен: Июн 10, 2015

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

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

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

Чтобы решить эту задачу, открываем фотошоп и идем в меню Редактирование -> Настройка цветов или нажимаем на комбинацию клавиш 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 и сохраняем.

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

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

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

Пост был обновлен: Июн 10, 2015

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (36 оценок, среднее: 3,78 из 5)
Загрузка...

Проверка орфографии

Система Orphus

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

  • Luceus Окт 26, 2016 в 12:21

    Спасибо. Уже несколько раз настраивал по этой статье 🙂

    • Заур Магомедов
      Заур Магомедов Окт 26, 2016 в 14:08

      Не за что!

  • Екатерина Окт 16, 2016 в 17:49

    Добрый день!

    Спасибо Вам! С форматом jpg вопрос решился. Подскажите, пожалуйста, как быть с уже имеющимся файлом в PSD? Изначально он был сделан в режиме RGB, а для передачи в печать полиграфия требует перевести в CMIK. В этом случае при выборе «сохранить как» цвета становятся яркими. Заранее спасибо!

    • Заур Магомедов
      Заур Магомедов Окт 17, 2016 в 10:15

      Здравствуйте. А при открытии psd вам фотошоп не выдал, что у вас разные цветовые профиля?

  • Татьяна Игнатова Окт 14, 2016 в 23:58

    Спасибо Вам за помощь! Вчерашний день проведён в муках сравнений в браузерах и др.программах цветовых результатов по сохранённым файлам в новом Ph.CC. Теперь всё решено и исправлено) Спасибо!

    • Заур Магомедов
      Заур Магомедов Окт 15, 2016 в 0:15

      Не за что! Рад что моя статья вам помогла.

  • Евгений Авг 30, 2016 в 18:27

    Круто! Огромное спасибо, помогло!!!

  • Александр Авг 29, 2016 в 22:40

    Эти рекомендации актуальны для всех видов макетов: для веб-дизайна и для полиграфической верстки?

    • Заур Магомедов
      Заур Магомедов Авг 29, 2016 в 23:40

      Для полиграфии скорее всего тоже пойдет.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]