Таинственный сдвиг цвета «Save For Web»

  1. Тестирование для Perfect Color Translation
  2. Предупреждение
  3. Шаг 1: Цветовые профили
  4. Шаг 2. Настройка проверки
  5. Шаг 3:
  6. Поздравляю
  7. Обновить! 9 апреля
  8. Обновить! Июнь $ @% & 16-е

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

Работая над повторным запуском Odeo, мы продолжали сталкиваться с неприятной проблемой: когда мы сохраняли ломтики, удивительный розовый Odeo превратился в тоскливое " светлый коралл «Я видел эту проблему раньше, но никогда не был так явен: цвет, не по своей вине , явно менялся, и мы не могли найти способ предотвратить это».

Рис Рис. 1: Подлый!

В этом вопросе обычные подозреваемые довольно быстро сбиваются с толку: это не Mac / PC, не монитор, не потому, что цветовой профиль как-то настроен как «неправильный». Коллеги-дизайнеры: где-то между PSD и JPG, Photoshop истощает наши цвета жизни, как какой-то ужасный, крадущий RGB вампир.

В Интернете много путаницы по поводу того, почему это так, и множество предлагаемых решений. Все, что я нашел, не проходит кислотный тест, хотя:

Тестирование для Perfect Color Translation

Если я "Сохранить для Web" изображение из Photoshop, открою это изображение в браузере рядом с оригиналом, я должен увидеть идентичные цвета. Затем я могу сделать снимок экрана, открыть его в Photoshop и проверить точность цветопередачи с нашим другом пипеткой, чтобы показать, что ничто не сместилось даже немного от исходного изображения.

Рис Рис. 2: Проверка цветовых сдвигов.

Я приложил JPG с некоторыми более подробными инструкциями в конце поста. Процесс тестирования немного болезненный, но конечный результат того стоит:

Возможность прекрасно видеть, как цвета в Photoshop будут появляться в вашем браузере.

Предупреждение

То, что мы делаем здесь , не сделает ваши цвета одинаковыми на всех мониторах или машинах. Mac будет отображаться светлее (по умолчанию, по крайней мере), а сами мониторы будут испытывать сумасшедшие изменения цвета в зависимости от возраста и настроек. Успокойся: это не твоя вина. Ключ заключается в том, чтобы откалибровать ваш монитор как можно ближе к центру, использовать Proof Colours (мы доберемся до этого), чтобы удостовериться, что детали не сносятся на других платформах, и быть готовым мягко объяснить клиентам, почему зеленый выглядит как вода на тринитроне их друга 1992 года.

Итак, мы идем: три шага к совершенству цвета.

Шаг 1: Цветовые профили

Цветовые профили определяют, как Photoshop интерпретирует необработанные цветовые данные в ваших файлах. Это верно: это означает, что они меняют то, как вы видите цвета. Такая точность отлично подходит для фотографии и полиграфического дизайна, но ее нужно использовать, если мы создаем веб-сайт. Если изображения не открыты, перейдите в «Редактирование / Настройки цвета».

Рис Рис. 3: Изменение цвета монитора.

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

Шаг 2. Настройка проверки

Теперь перейдем к View / Proof Setup / Monitor RGB. Это сделано для того, чтобы убедиться, что Photoshop не будет отображать искаженные цвета на ваших красивых новых изображениях без профиля. Примечание: если вы работаете на Mac / PC и хотите посмотреть, как изображение будет выглядеть при настройке гаммы другого по умолчанию, вы можете вернуться сюда и проверить с помощью «Windows RGB» или «Macintosh RGB». Просто не забудьте переключить его обратно, или вы можете случайно проектировать в (дрожащем) режиме ПК.

Рис Рис. 4: Убедитесь, что вы не видите неправильные цвета доказательства.

Шаг 3:

После всей этой тяжелой работы Photoshop все еще хочет внедрить цветовые профили в ваши изображения. Большинство веб-браузеров игнорируют их, но новые Safari и Firefox не поддерживают их, и IE также может быть настроен для работы с ними. Это может привести к самой странной головной боли между браузерами, поэтому мы должны убедиться, что цвета, которые мы сохраняем, не имеют профиля.

Рис Рис. 5: Конвертировать в sRGB - плохая настройка.

К счастью, это легко исправить: откройте любое изображение на вашем компьютере и выберите Файл / Сохранить для Web. Рядом с параметром «Предустановка» есть небольшая хитрая стрелка ... щелкните ее и снимите флажок «Преобразовать в sRGB». (Примечание: из того, что я могу сказать, это только настройка по умолчанию в CS3)

Поздравляю

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

Скачайте цветовой тест jpg: ColorPerfectotron.jpg

Международная версия: ColourPerfectotron.jpg

Обновить! 9 апреля

Для получения более подробной информации о том, как и почему цветовых профилей, проверьте отличная дискуссия MacMojo начал в комментариях.

Обновить! Июнь $ @% & 16-е

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