Стратегии цветового профиля для разработки веб-сайтов с фотографиями sRGB и мониторами RGB comps - PullRequest
Новая
       59

Стратегии цветового профиля для разработки веб-сайтов с фотографиями sRGB и мониторами RGB comps

5 голосов
/ 11 января 2012

Обзор

Я ищу советы / решения по стандартизации цветовых профилей для композиций, чтобы цвета, соответствующие градиентам / смесям HTML / CSS, соответствовали эффектам, достигнутым в композиции.Я часто получаю PSD, используя sRGB цветовой профиль , поэтому, когда я выбираю цвет для воссоздания градиента / значка / или фона, цвет HEX и результирующий градиент CSS / HTML не соответствуют исходному градиенту sRGB, предоставленному в,Как правило, я просто отбрасываю встроенный цветовой профиль для цветового профиля Monitor RGB , который лучше соответствует цветам PSD для получения конечных цветов CSS.Вот пример , показывающий различия между цветовыми профилями.

Подробности

Итак, вот что затруднительно: дизайнер хочет стандартизировать PSD для использования встроенного цветового профиля sRGB, поскольку экспортированные изображения (JPEG / PNG) сохраняют этот цветовой профиль sRGBправильно отображаться при загрузке в браузере.Поэтому фотографии / текстуры / вещи, которые я не могу воссоздать в CSS, будут экспортированы в формате JPEG / PNG с лучшим профилем sRGB (что вполне понятно).

Как фронтенд-разработчик, я часто воссоздаю элементы, отображаемые в компе с использованием CSS и HTML (без изображений), и это требует от меня правильного соответствия цветов HEX между тем, что в PSD и тем, чтоотображается на сайте.Поэтому я бы предпочел стандартизировать с помощью цветового профиля Monitor RGB , чтобы каждый использовал что-то ближе к тому, что фактически отображается в браузере.

Просто любопытно, как все остальные подходят к этой проблеме?Часто бывают случаи, когда я использую смесь CSS и PNG для достижения эффекта (особенно эффектов, которые должны динамически меняться (размер / оттенок / затенение ...), поэтому экспорт изображения с использованием sRGB и наложение его на градиенты / тени CSS заканчиваютсябудучи смесью sRGB / Monitor RBG и, следовательно, немного отличается от комп.

Формат ответа

Надеюсь, я правильно задал этот вопрос - подходящие ответы просто дадутобзор того, как вы справляетесь с этой проблемой - ИЛИ (лучше), если есть функция SCSS sRGB () или какой-то другой алгоритм для преобразования цвета RGB / HEX в sRGB, тогда я добавлю его в микшер SASS.

1 Ответ

1 голос
/ 05 апреля 2012

Вот как мы гарантируем согласованность цветов в Photoshop: правильное выделение цветов и согласованность в изображениях, сохраненных для веб-сайтов.

Настройка Photoshop Color Space

Первое, что мы все должны сделать, - убедиться, что мы работаем с правильными цветовыми профилями. Для этого выполните следующие действия:

  • Перейдите на Edit > Color Settings или Shift + Command + K или Shift + Control + K в Windows.
  • Из выпадающего списка Settings выберите North America Web/Internet
  • Подтвердите свои изменения, нажав OK.
  • Перейдите на View > Proof Setup и выберите Internet Standard RGB (sRGB)
  • Нажмите Command + Y или Control + Y в Windows, чтобы включить Proof Colors, или вы можете просто перейти к View > Proof Colors

Экспорт (Сохранить для Интернета)

  • При экспорте через Save for Web убедитесь, что установлен флажок Convert to sRGB.

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

...