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

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

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

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

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

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

Здравствуйте дорогие друзья. В эфире автор блога 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 и сохраняем.

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

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

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

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

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

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

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

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

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

Система Orphus

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

  • Ника Мар 03, 2018 в 3:59

    как настроить цветовой профиль в фотошоп, а то мне вот посоветовали этот фотошоп онлайн http://photoshop-online.biz/edit_photo/ думаю здесь поучится , так как я новичек, а тут скачивать не надо..посмотрите..что скажете как профи?) спасибо за детальный урок)

    • Заур Магомедов
      Заур Магомедов Мар 03, 2018 в 14:33

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

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

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

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

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

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