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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Система Orphus

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

  • Георгий Окт 04, 2017 в 23:09

    РГБ монитора — это иммитация в окне ФШ конкретного монитора, при этом вообще отключается управление цветом. Рабочим пространством РГБ монитора не используется вообще ни когда. Автор, Вы дилетант!

    • Заур Магомедов
      Заур Магомедов Окт 05, 2017 в 1:08

      Много заумных слов. Вы либо решение дайте, либо проходите мимо молча.

    • Вовочка из интернету Окт 06, 2017 в 13:42

      Утверждение спорное ибо правильно только в 25% случаев.
      Так что добро пожаловать в наши дилетантские ряды

  • Блиц-инфо информационный портал
    Блиц-инфо информационный портал Июл 21, 2017 в 22:48

    Привет. Я правильно понял, что вы занимаетесь только сайтами на основе CMS Joomla? С другими CMS работаете, например, WordPress?

    • Заур Магомедов
      Заур Магомедов Июл 21, 2017 в 22:52

      Здравствуйте! Да, с WordPress тоже работаю.

      • Блиц-инфо информационный портал
        Блиц-инфо информационный портал Июл 22, 2017 в 0:09

        Заур, отредактируйте текст письма, которое приходит на почту комментаторам с этого почтового ящика noreply@unverified.beget.ru , некорректно отображаются ссылки. И где я мог бы посмотреть ваши работы с вордпресс?

        • Заур Магомедов
          Заур Магомедов Июл 22, 2017 в 2:12

          На счет потового ящика в курсе. Никак руки не доходят исправить. На счет работ — больше конечно работ на Joomla. На WordPress работа, как минимум данный блог, на котором сейчас находитесь. Вот еще один из моих сайтов — https://ourkoshki.ru/
          В данное время есть клиентский сайт на WordPress, как раз осталось пару мелочей доделать и выгрузить. Мог бы его показать из последних работ. А вас что именно интересует в WordPress? По сути ведь не важно на чем работает сайт. Я имею ввиду вы больше обращаете внимания на функциональную часть?

          • Блиц-инфо информационный портал
            Блиц-инфо информационный портал Июл 22, 2017 в 4:20

            А вот этот сайт про кошек (ourkoshki) это ваш личный сайт или вы занимались его дизайном? Это какая-то тема переделанная наверное? С функционалом вы работаете или нет? В вордпрессе меня интересует оформление главной страницы, но не только работа с css, но и работа с кодом, то есть, чтобы вывести на главную то что мне нужно. К примеру, вывести на Главную последние статьи из определённой рубрики и т.д.

            P.S. Я под заказ бывает делаю тоже сайты но исключительно на вордпрессе. Но я больше с css играюсь, а вот в php не силён. И про сайт ourkoshki ответьте пожалуйста, я сейчас занимаюсь продвижением питомника кошек и хотел бы переговорить с администратором этого сайта. Кстати, красивый сайт получился.

            • Заур Магомедов
              Заур Магомедов Июл 22, 2017 в 10:50

              Ответил на вашу почту

  • Игорь Бондарь мая 25, 2017 в 20:59

    Очень советую разобраться в вопросе управления цветом, здесь дети бывают и они разносят то, что Вами написано по сети. Ваш совет ставить в качестве рабочего пространства редактирования профиль монитора приводит к тому, что ни один монитор в мире не покажет так же.
    Подробнее здесь http://igor-bon.narod.ru/index/www_cvet_cvet_po_seti/0-24
    С Уважением цветокорректор Государственного, ордена Ленина, Императорского Эрмитажа Игорь Бондарь

    • Заур Магомедов
      Заур Магомедов мая 25, 2017 в 21:17

      Из ваших слов следует, что вышеизложенное полная чушь?

      • Игорь Бондарь Июн 20, 2017 в 12:39

        Я бы назвал написанное — заблуждением. Предложенное Вами решение просто прячет проблему — «Во всех браузерах отображается одинаково» — но, плата за это — полная непредсказуемость того, как эта картинка будет отображена на других компьютерах в сети. Каждый монитор уникален в той или иной степени, плюс к этому современный монитор абсолютно «кроет» sRGB по всем параметрам — отключив управление цвета, т.е. отправив на монитор значения RGB без каких либо изменений (пересчетов) картинка отображается насыщенней — таким образом при предложенных установках автор видит картинку заведомо не «правильно», хоть и однообразно.

        • Заур Магомедов
          Заур Магомедов Июн 20, 2017 в 21:07

          Я здесь выкладываю свой опыт. Я его не продаю и никому не навязываю. У меня принцип — узнал сам, скажи другому… Так что, можете критиковать сколько угодно…

          • Вовочка из интернету Июн 20, 2017 в 21:16

            Посылать таких надо открытым текстом.
            Чел не знает что «современный монитор абсолютно «кроет»» в среднем не более 90% srgb при средней глубине цвета 6,8 бит.

            • Игорь Бондарь Июн 21, 2017 в 12:13

              откровения троля-делитанта поражают своей «глубиной» познания, особенно доставили десятые доли бита :))

              • Вовочка из интернету Июн 21, 2017 в 13:43

                Задача для сотрудника ордена ленина, рецензируемого и неповторимого.
                Основу рынка составляют 6 битные устройства
                8 битные устройства начинаются во второй половине ценового диапазона.
                10 битные устройства — профессиональные модели
                12,14,16 бит устройства — штучные
                Задача — взять мурзилку по типу idc и посчитать среднюю битность устройства воспроизведения.

          • Игорь Бондарь Июн 21, 2017 в 12:27

            У меня тот же принцип и поэтому с 2001 года я делюсь своими знаниями в сети на своём сайте, но только я перед тем, как выложить я отправляю почитать рецензентам (один из них — до сих пор «рулит» в HP управлением цветом, другой сотрудник Манселовской лаборатории, третий — кандидат технических наук в области колориметрии).
            Вообщем-то мне всё равно, как у Вас построена работа, пришёл я сюда, только по тому, что встретил ссылку на эту страницу, как на авторитет и призывом безоговорочно следовать Вашим рекомендациям — молодое поколение не склонно анализировать и проверять информацию, разбираться в вопросе — оно бездумно потребляет найденное в сети.

    • Вовочка из интернету Июн 19, 2017 в 1:32

      Уважаемый сэр, вы настоящий, ордена ленина пи****л.
      В вашем «материале» нет ни слова о работе с профилями/цветовыми пространствами.
      А за фразу «показать на своем мониторе» вас надо гнать ссанными тряпками с любой работы связанной с цветокоррекцией.
      С Уважением Вовочка из интернету.

      • Игорь Бондарь Июн 20, 2017 в 12:24

        Месье, а у меня на сайте достаточно статей по теории и практике работы CMS, цифровых моделей представления цвета, профилей, а так же: описания основных рабочих пространств редактирования и их предназначение, профилей устройств (в том числе устройств вывода, а так же подробный разбор всех пунктов диалога управления цветом фотошоп и рекомендуемые значения в зависимости от задачи. К сожалению Вы, вместо того что бы почитать, поучиться предпочли хамство.

        • Вовочка из интернету Июн 20, 2017 в 13:22

          Все же не сэр, таки пейзанин…
          Если человек в любом обсуждении конкретного материала дает ссылку в виде wikipedia.org не забывая добавить «там все есть», то он еще и однозначный мудак.
          Не мудак он дает конкретные ссылки.

          Так что мешает работать в рабочем пространстве монитора если показывать результат только на этом мониторе?
          Правильный ответ — да это ваще будет оптимально.
          Ну и самое веселое. Ваше представление о том, как работает с цветом фотошоп это представление о сферическом коне в идеальном вакууме. Реальность сильно отлична от вашей писанины.

          • Игорь Бондарь Июн 21, 2017 в 12:37

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

            • Вовочка из интернету Июн 21, 2017 в 14:30

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

    • Виталик Хао Козак Июн 21, 2017 в 14:28

      Игорь, подскажите, как лучше настроить цветовой профиль в фотошоп что бы не возникло проблемы о которой вы предупреждаете.

  • Кир Зятьков Апр 23, 2017 в 19:20

    Полезная статья. Спасибо

  • 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

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

      • Дмитрий Галацевич Июн 16, 2017 в 14:42

        Полнее не бывает.

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

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

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

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

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