Управление цветом и дизайн UI

http://bjango.com/articles/photoshop/
  • Перевод
  • Tutorial

Разрабатывая дизайн для веб-сайтов и мобильных приложений в Photoshop, мы сталкиваемся с проблемой при формировании цвета программным кодом, HTML или CSS. Статья призвана покончить с этим раз и навсегда.

Управление цветом на различных устройствах


В полиграфии управление цветом контролируется на протяжении всего рабочего процесса. Начиная от сканера или цифровой камеры, заканчивая выводом изображения на печать. Основная сложность — добиться согласования между RGB и CMYK, если устройства используют различные цветовые пространства.

Когда разрабатывается картинка для TB, применяют специально откалиброванный монитор, одновременно транслируя изображение на экран телевизора. Дизайнер знает какое изображение получит телезритель.

В приведенных сценариях управление цветом дает множество преимуществ.

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

Это может стать проблемой. То, что видите вы и то, что увидит конечный пользователь на экране своего устройства, может выглядеть совсем не одинаково. Так как существует огромное количество источников цвета: изображения (как правило, PNG, GIF и JPEG), стили разметки (CSS) и код (JavaScript, HTML, Objective-C и т.д.), добиться их идентичности — задача далеко не из легких.

Цель


Разрабатывая дизайн веб-сайтов или мобильных приложений, нам бы хотелось, чтобы HEX значения цвета заданные в Photoshop везде отображались одинаково.



Проблема


Photoshop применяет к отображаемым документам собственный ICC — профиль, сохраняя его в файле.

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

При работе с настройками по умолчанию, возникнет проблема: например, цвет #FF0000 может отображаться как ##FB0018, а BB95FF как #BA98FD. Точное значение будет зависеть от ICC- профиля дисплея и настроек Photoshop. В таком случае различия в значениях HEX неизбежны.

В чем отличие в управлении цветом Photoshop от OS X и Windows?



Управление цветом OS X происходит на уровне видеопамяти. Программные утилиты выстраивают цвет определенным образом на весь экран и всегда сообщают точные значения, указанные в файле, либо заданные программно. Windows Vista и Windows 7 работают аналогичным образом.

Photoshop, как было сказано ранее, управляет цветом в пределах программы, как только вы открываете файл. Основная проблема в том, что операционная система сообщаем вам свой ICC- профиль, а программа задает свой, происходит конфликт “наложения”. Поэтому, когда вы подбираете HEX значения, они будут указаны неточно. Однако стоит отметить, ICC-профиль OS X устанавливается поверх Photoshop.

Далее разберем, как отключить управление цветом в Photoshop, работая с RGB документами, настолько, насколько это вообще возможно. Идеальный вариант для работы с веб и мобильными приложениями — использовать монитор, откалиброванный на уровне операционной системы.

Сделать это в версиях Photoshop до CS 2 достаточно легко, для остальных вам потребуется немного сноровки.

Отключение управления цветом RGB в Photoshop.


Инструкции предназначены для Photoshop CS4 и CS5 на Mac и Windows. Настройки CS3 аналогичны.

Шаг 1 — Выберите Edit > Color Setting и установите Working Space для RGB — Monitor RGB.



Шаг 2 — Если вы используете Photoshop CS6, проверьте отключен ли Blend Text Colors Using Gamma. Нажмите More Options > Blend Text Colors Using Gamma. Так как он влияет на режим отображения полупрозрачного текста.



Шаг 3 — Откройте документ и выберите Edit > Assign profile, а затем установите Don’t Color Manage This Document. Это должно быть сделано для каждого отдельного документа, в котором вы работаете.



Шаг 4 – Выключить View > Proof Colors.

Шаг 5 — При сохранении файлов Save for Web, отключите Conver to sRGB. Если вы сохраняете JPEG файл, то отключите Embed Color Profile (может понадобиться, для работы с фотографиями, но в случае дизайна интерфейсов или иконок, рекомендуем отключить).

Различие между «Assign Profile» и «Convert to Profile»


Теперь самое время поговорить о разнице между «Assign Profile» и «Convert to Profile». Каждый документ Photoshop содержит ICC-профиль, с указанными параметрами цвета для каждого пикселя. Назначая «Assign Profile» вы просто меняете профиль в документе, не затрагивая значений цвета. Вы можете менять цветовой профиль столько, сколько нужно, не опасаясь повредить документ. Это непременно повлияет на отображение, но изначальные значения HEX будут сохранены.

«Convert to Profile» — совсем другая опция. Она не только присваивает цветовой профиль документу, но и сохраняет то, как он выглядит на экране. Происходит это путем обработки цветовых данных для каждого пикселя. В этом случае, установленные ранее параметры цвета будут безвозвратно утеряны.

Если вы копируете слои из одного документа Photoshop в другой, это гарантирует файлам единый цветовой профиль.

Illustrator


Если вы хотите перенести изображения Illustrator в Photoshop или импортировать из Illustrator в Photoshop, ничего не испортив, необходимо следующее (эти инструкции предназначены для Illustrator CS4 и CS5 на Mac и Windows. Настройка Illustrator CS3 аналогичны):

Шаг 1 — Выберите Edit Settings> Color и установите Working Space для RGB — Monitor RGB.



Шаг 2 — Откройте документ и выберите Edit > Assign profile, а затем установите Don’t Color Manage This Document. Это должно быть сделано для каждого отдельного документа, в котором вы работаете.



Шаг 3 — Выключить View > Proof Colors.

Шаг 4 — При сохранении файлов Save For Web & Devices, выключите Convert to sRGB. Если вы сохраняете JPEG файл, то отключите Embed Color Profile (может понадобиться, для работы с фотографиями, но в случае дизайна интерфейсов или иконок, рекомендуем отключить).



Гамма


ОС Windows использует гамму со значением 2.2 с момента ее введения. OS X гамму 1,8 для всех версий, до выхода Snow Leopard. В Snow Leopard, Lion и Mountain Lion значение гаммы соответствует Windows.

До выхода Snow Leopard веб-страницы на Mac выглядели темнее нежели в Windows. К счастью, обе операционные системы пришли к единому стандарту. Таким образом, если используем один монитор, гамма в обоих операционных системах должна совпадать.

Информацию о гамме iOS немного трудно найти, но, думаю, что это все-таки гамма 2.2.
(Одна из хороших причин поэкспериментировать с iPhone или iPad).

Устройства тестирования


Очевидно, изображение на экране iPhone, iPod или iPad будут выглядеть немного иначе, чем на дисплее компьютера. Некоторые типы дисплеев, такие как AMOLED, могут быть более насыщенными и более контрастными, чем обычные ЖК-дисплеи компьютеров. Тип экрана, тепло цвета и даже количество пикселей варьируются между типами устройств. Вам бы хотелось всегда наглядно видеть различия?

Есть много способов увидеть макет на мобильном устройстве. Все существующие оставляли желать лучшего, поэтому мы создали собственный — Skala Preview.

Skala Preview предоставляет возможность в режиме реального времени, просмотреть все вносимые в дизайн изменения, не отрываясь от работы с Photoshop. Размеры, текст, цвет, контрастность и эргономику — весь процесс проектирования. Так вы сможете гораздо быстрее добиться конечного результата.

Handy Tools (удобные инструменты) для пользователей Mac


Так же на Mac, сопоставить и перенести цвет из Photoshop в программный код помогут: Developer Picker, Hex Color Picker и Colors (все бесплатны).

Заключение


Теперь вы умеете импортировать растровые и векторные изображения между Photoshop и Illustrator используя любые методы. Благодаря этому вы сможете воспользоваться Color Picker в Photoshop, чтобы захватить цвет, а затем перенести те же HEX-значения в CSS, HTML, Javascript, Flash или Objective-C код без изменений.
Метки:
Поделиться публикацией
Комментарии 18
  • +1
    Хм, спасибо за статью. Очень познавательно.
    А я то думал это у меня параноя, что цвет вроде один, а в разных приложениях выглядит по разному.
    • +1
      Всегда пожалуйста. :)
    • +3
      Цветовые профили это иногда бывает прямо таки бедой, когда фотошоп или же просмотрщик настроен на свой истинно верный профиль.
      Почему бы не придерживаться sRGB, который давно уже стандарт де-факто? Выставлять главным профиль монитора это весьма плохая затея как по мне. Мало того что он может быть откалиброван криво, так и у других он может отображаться вообще не пойми как.
      На фоторесурсах уже тысячи копий сломано по поводу этого — онли sRGB! Для личных экспериментов можно использовать что угодно тут нет ничего зазорного, но если это уходит в паблик, то только sRGB, иначе — жди беду.
      • 0
        плюсую, очень часто профиль монитора может быть фабричный, и очень отличатся от sRGB.

        sRGB давно формат, и если действительно стоит цель отображение правильное везде то и профиль надо использовать правильный.
      • 0
        какие-то вредные советы.
        повключать каждому свой profile и любоваться самыми разними цветами на самых разных мониторах.
        это как-то совсем не серьёзно.
        • 0
          к gamma параметру нет притензий.
        • +2
          Photoshop применяет к отображаемым документам собственный ICC — профиль, сохраняя его в файле.
          Фотошоп интерпретирует цвета в соответствии с указанным для изображения профилем, а воспроизводит их на экране в соответствии с профилем монитора, заданным в настройках ОС.

          Управление цветом OS X происходит на уровне видеопамяти.… Windows Vista и Windows 7 работают аналогичным образом.
          У меня сомнения как минимум по поводу Windows. Вроде там только gamma LUT корректируется, но не происходит автоматического преобразования между разными пространствами цвета, для этого требуется явная поддержка со стороны приложения.

          Основная проблема в том, что операционная система сообщаем вам свой ICC- профиль, а программа задает свой, происходит конфликт “наложения”.
          Что-то путаете. То, как Фотошоп пытается выстроить работу с цветом правильно, воспринимаете, как ошибку, и не даете ему шанса.

          При сохранении файлов Save for Web, отключите Conver to sRGB. Если вы сохраняете JPEG файл, то отключите Embed Color Profile
          Вредные, вредные советы!

          может понадобиться, для работы с фотографиями, но в случае дизайна интерфейсов или иконок, рекомендуем отключить
          Для представления web выбран стандарт sRGB, в каком цветовом пространстве нарисованы интерфейсы и иконки у дизайнера, который не приводит их к sRGB, никому неизвестно, поэтому, воспроизвести их близко к первоисточнику на другом устройстве невозможно в общем случае.

          «Convert to Profile» — совсем другая опция. Она не только присваивает цветовой профиль документу, но и сохраняет то, как он выглядит на экране.
          Не так. Эта функция пересчитывает представление цвета из одного цветового пространства в другое. К внешнему виду на экране это имеет косвенное отношение. Не всегда такая операция может пройти без потери данных, это верно.

          Некоторые типы дисплеев, такие как AMOLED, могут быть более насыщенными и более контрастными, чем обычные ЖК-дисплеи компьютеров.
          Недавно Тим Кук высказался, что OLED дисплеи не подходят Apple с ее высокими требованиями, т.к. из-за расширенного цветового охвата искажают цвета. Слукавил немного, но речь не об этом. В камментах к этой новости мне долго и упорно пытались доказать, что неправильные, но сочные цвета, это такое преимущество, людям якобы так нравится, а всякие стандарты, это все суета для редких техногиков. Рад, что Вы считаете правильную передачу цвета между устройствами важной задачей. Но инструкция требует основательной доработки.
          • 0
            Вот именно это разнообразие мнений/фактов/статей не дает нормально разобраться с цветом.

            В камере свой профиль, в фотошопе свой, в ос свой, у монитора свой, у принтера тоже, а еще есть lut видеокарты и еще профили вшитые в изображения причем половина браузеров умеет их понимать а другая нет.
            Любительски занимаясь фотографией пытался разобраться во всем этом многообразии, но бардак в голове не прибрался.
            • 0
              В камере свой профиль, в фотошопе свой, в ос свой, у монитора свой, у принтера тоже, а еще есть lut видеокарты и еще профили вшитые в изображения
              RGB это относительные координаты цвета, заданные в неком цветовом пространстве. Цветовое пространство описывается в профиле. Профили бывают стандартные, например, sRGB и AdobeRGB, и индивидуальные для устройств захвата и отображения изображения. Индивидуальные профили обычно болтаются где-то вокруг стандартных, но могут отличаться для более полной передачи информации о цвете, характерной именно для этого устройства, что может быть важно для последующей обработки, либо так просто экономят вычислительные ресурсы. Хранить готовые изображения можно либо с их профилем, если используемые программы поддерживают CMS (управление цветом), либо переводить их в стандартное цветовое пространство, среди которых наиболее широко распространено sRGB. Если у изображения нет профиля, то обычно подразумевается именно sRGB. При выводе изображений на устройство отображения цвета из исходного цветового пространства переводятся CMS в цветовое пространство устройства отображения. Если целевое пространство не полностью включает в себя исходное, то такая операция пройдет с потерями, может потребоваться адаптация для сохранения баланса цветов, но результат будет стремиться воспроизвести цветоощущение от оригинала. Если CMS нет, то при выводе цвета просто растянутся на реальное цветовое пространство устройства отображения. Например, если так выводить картину в sRGB на монитор с расширенным охватом, типа AdobeRGB, то все цвета станут более насыщенными, а баланс сдвинется особенно сильно в сторону зеленого. Почему так, можно увидеть на графике (довольно условном) покрытия популярными цветовыми пространствами видимого человеком спектра цветов:


              причем половина браузеров умеет их понимать а другая нет
              Это проблема, но она постепенно решается, сейчас ситуация лучше, чем два года назад или больше, когда была написана эта статья. Универсального решения, вроде исключения всяких профилей, как описывается в статье, нет. Оптимальным сейчас, наверное, было бы приводить все картинки к sRGB, хотя это все равно ничего не гарантирует.
            • 0
              Отличные ссылки, спасибо.
              т.с. вся куча спорных утверждение и заблуждений тока ради рекламы Skala Preview.?
              • 0
                Возможно. :)
                Оригинальная статья лежит на сайте разработчиков Skala Preview.
                Лично я Scala Preview не пользовался но неоднократно слышал теплые отзывы от дизайнеров.
            • 0
              Вообще странный у вас подход с отключением профилей в PS. Они для того и нужны чтобы ваши hex значения везде выглядили одинаково (почти).
              • 0
                Спасибо за статью! Знала о подобной проблеме, но вот с решением всегда возникали сложности.
                • 0
                  с решением всегда возникали сложности
                  Это не решение, это тиражирование мифов без понимания сути происходящего.
              • 0
                Так же на Mac, сопоставить и перенести цвет из Photoshop в программный код помогут: Developer Picker, Hex Color Picker и Colors (все бесплатны).

                Раз уж речь идёт о переносе цвета из Photoshop, хочется добавить, что начиная с версии CS5 эта фича реализована в eyedropper tool из контекстного меню. При той же вёрстке спасает регулярно.

                image
                • 0
                  Верстальщикам и дизайнерам знать обязательно!

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.