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

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

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

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

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

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

Здравствуйте дорогие друзья. В эфире автор блога 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). Это нужно для того, чтобы картинкам присваивался профиль вашего дисплея.
Читайте также:  Адаптивный дизайн сайта - так важно ли сегодня? Встречайте адаптивный дизайн блога Zaurmag.Ru

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

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

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

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

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

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

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

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

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

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

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

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

Система Orphus

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

  • Anasteisha Angel Июл 26, 2016 в 8:23

    Спасибо автору за статью) Очень помогло, а главное доступно и просто)

  • Денис Лунгул Июл 13, 2016 в 22:38

    Приблизительно понял. Только почему везде норм, а в Мазиле нет? Настроив профиль, как сказали, уже и в ней норм…

  • Юлия Май 26, 2016 в 23:18

    Спасибо! Очень помогло!

    • Заур Магомедов
      Заур Магомедов Май 26, 2016 в 23:54

      Не за что!

  • Papas Янв 15, 2016 в 6:27

    Изменять цветовой профиль документа требуется в исключительно редких случаях. Это связано с тем, что приложение автоматически назначает документу цветовой профиль на основе параметров в диалоговом окне «Настройка цветов». Изменять цветовой профиль вручную следует только при подготовке документа к выводу на другом устройстве или при изменении стратегии работы с документом. Изменять профиль рекомендуется только опытным пользователям.

  • Игорь Дек 04, 2015 в 1:11

    Спасибо за то что Вы делаете.
    Установил Photoshop CC и в нем такая беда — фон вместо белого цвета — бежевый. Быстро нашел Ваш сайт и быстро и понятно исправил настройки.

    • Заур Магомедов
      Заур Магомедов Дек 04, 2015 в 1:15

      Не за что! 🙂

  • DEN Ноя 03, 2015 в 17:18

    здр Заур

    Поделитесь скриншотом настроек цветового профиля для подготовки снимков к печати
    И еще вопрос:
    Я скачал профиль печатной машины, но не могу его установить в свой ФШ ( у меня iMac IOS )
    Cпособ двух кликов, для установки профиля, почему то работает только на Windows.
    Как мне его установить на iMac IOS — никак не разберусь.

    Может кто подскажет ?

    • Заур Магомедов
      Заур Магомедов Ноя 03, 2015 в 17:24

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

  • Олеся Окт 24, 2015 в 9:57

    Спасибо, большое! Все очень ясно и понятно. Три дня фото переделывала, пока на вашу статью не набрела . Теперь все получилось .

    • Заур Магомедов
      Заур Магомедов Окт 24, 2015 в 10:41

      Не за что! Рад был помочь…

  • Михаил Окт 08, 2015 в 15:20

    Спасибо большое за помощь, все систематизированно, профессионально расписано, очень благодарен))

    • Заур Магомедов
      Заур Магомедов Окт 08, 2015 в 15:58

      Спасибо вам! Приятно слышать..

  • Юлия Сен 30, 2015 в 13:19

    Спасибо! (За то, что есть ВЫ и «ваши» настройки PS!!!)

    • Заур Магомедов
      Заур Магомедов Сен 30, 2015 в 13:41

      Не за что! (За то, что есть вы и «Хорошие отзывы» PS!!!) 🙂

  • Petro Апр 16, 2014 в 17:40

    если монитор откалиброван с помощью устройства. ставить в фотошопе созданый програмой профиль для этого монитора?

    • Заур Магомедов
      Заур Магомедов Апр 16, 2014 в 18:31

      Ну смотрите, если проблем с отображением цветов нет, то можете не ставить.

  • Имран Ильясов
    Имран Янв 12, 2014 в 17:03

    Спасибо. Пошел работать.

  • Имран Янв 12, 2014 в 13:03

    После всех настроек http://s007.radikal.ru/i301/1010/d3/77b892bca382.jpg вот какой выбирать или это окошко не должно было выходить

    • Заур Магомедов
      Заур Магомедов Янв 12, 2014 в 13:37

      “Преобразовать цвета документа в рабочее пространство”. Данное окошко как раз будет выходить, т.к. мы изменили цветовой профиль.

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

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

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

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

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