Почему картинка выглядит по-разному на разных экранах — и что с этим делать

Разбираемся в разных способах решить проблему: от покупки монитора до выставления специальных настроек в Photoshop.

Один и тот же арт художницы <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fvk.com%2Fwall-55044506_9052%3Fz%3Dphoto-55044506_457239613%252Falbum-55044506_00%252Frev&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Emilyena</a>, но на разных дисплеях.
Один и тот же арт художницы Emilyena, но на разных дисплеях.

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

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

Почему цвета картины меняются

Цвета по-разному отображаются из-за разницы в цветопередаче приборов: например, картинки на дисплеях с шестибитной матрицей будут блеклыми, а на устройствах Apple наоборот — излишне насыщенные и яркие. Одна из причин, почему устройства Apple перенасыщают картинку — технология True Tone, которая начала появляться в большинстве устройств компании после 2016.

Идеального решения нет: люди все равно будут смотреть на ваши рисунки и фотографии с разного «железа», цветопередача которого сильно отличается друг от друга.

Но всё же есть некоторые решения, с которыми разница между дисплеями не будет столь велика. Пройдемся по каждому варианту.

Покупка хорошего монитора

Это лучший вариант, хоть и подходит не всем. Можно обойтись и без покупки нового «железа», но об этом чуть позже.

У хорошего монитора высок параметр цветопередачи, из-за чего прибор отображает цвета и оттенки картины более правдоподобно и без излишнего ухода в желтизну, голубой оттенок и другие цветовые искажения.

При выборе монитора ориентируйтесь на 4 главных параметра:

Тип матрицы. Матрица отвечает за качество отображения цвета, контрастность и другие параметры.

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

Почему картинка выглядит по-разному на разных экранах — и что с этим делать

Сравнение матриц под разными углами. Источник

Уровень контрастности. Параметр отвечает за соотношение яркости белого и чёрного.

Чем выше контрастность — тем лучше отображаются полутона и тем естественнее выглядит изображение. Показатель 1000:1 подойдёт для работы с цветом, но если вы ориентируетесь на печать — лучше выбрать модель с показателем 3000:1.

Глубина цвета. От глубины цвета зависит количество цветов, отображаемых монитором.

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

Совет: отказывайтесь от дешёвых шестибитных мониторов, но и не тратьтесь на дорогущий десятибитный вариант. Берите монитор с восьмибитной матрицей и внедренной технологией FRC. С помощью этой технологии восьмибитная матрица при 16 миллионах охватываемых цветов создает иллюзию отображения оттенков, которые есть в десятибитных матрицах.

Сравнение восьмибитной матрицы и восемь бит + FRC. Обычная восьмибитная матрица хуже справляется с водой и небом, нежели FRC. <a href="https://dtf.ru/hard/794556-kak-hudozhniku-vybrat-monitor-dlya-raboty" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Сравнение восьмибитной матрицы и восемь бит + FRC. Обычная восьмибитная матрица хуже справляется с водой и небом, нежели FRC. Источник

Цветовой охват. От цветового охвата зависит, сколько цветов может выдавать монитор, и насколько это количество соответствует мировым стандартам цветового спектра.

Для корректной цветопередачи выбирайте монитор с охватом sRGB в районе 100% и выше. Стремиться к такому же 100% уровню охвата Adobe RGB нежелательно, ибо тогда вы получите перенасыщенную картинку.

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

Подробнее читайте в нашей статье о том, какой монитор стоит выбирать художникам. Там вы найдете ещё больше полезной информации по выбору хорошему монитора.

Калибровка своего монитора

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

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

Cо временем мониторы теряют яркость и их цвета искажаются. Калибровка вернёт неискаженный цветовой профиль и снизит разницу в цвете между разными приборами.

<p>Пример отображения фото до и после калибровки монитора. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fclub.dns-shop.ru%2Fblog%2Ft-114-monitoryi%2F41219-kak-otkalibrovat-monitor%2F%3Futm_referrer%3Dhttps%253A%252F%252Fyandex.ru%252F&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a></p>

Пример отображения фото до и после калибровки монитора. Источник

В среднем калибровка занимает от получаса до часа, в зависимости от исходных настроек и цветопередачи монитора. Чем больше цветов задействовано в процессе калибровки, тем больше времени займёт калибровка и тем точнее будет финальный цветовой профиль.

Калибровка малоэффективна для мониторов с TN-матрицами и устройств с цветовым охватом 70% sRGB из-за некорректной цветопередачи.

Устройства от Apple также практически не калибруются приборами. Все настройки цвета происходят в операционной системе в специальном помощнике по калибровке. Из-за этого любое новое обновление может автоматически изменить параметры цветопередачи без вашего ведома.

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

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

  • Цена: 1800 рублей. Есть пробная версия на 30 дней.
  • Платформы: Windows.

Программа со множеством параметров настройки. Atrise совместима даже со старыми ОС Windows и способна калибровать дисплеи с разрешением экрана от 1024×768.

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

Работает без колориметра и предлагает пользователю самому выстроить настройки на основе показанных картинок. У программы есть русский интерфейс.

Интерфейс Atrise Lutcurve 4. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2F1progs.ru%2Fwp-content%2Fuploads%2F2020%2F11%2FAtrise-Lutcurve-%25D1%2581%25D0%25BA%25D0%25B0%25D1%2587%25D0%25B0%25D1%2582%25D1%258C.jpg&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Интерфейс Atrise Lutcurve 4. Источник
  • Цена: бесплатно.
  • Платформы: Windows, MacOS, Linux.

Программа на основе ArgyllCMS — системы управления цветом с открытым исходным кодом. Работает в связке с колориметром, у неё большое количество настроек, понятный интерфейс и встроенный русский интерфейс.

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

Интерфейс DisplayCAL
Интерфейс DisplayCAL

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

Калибрующее устройство. <a href="https://api.dtf.ru/v2.8/redirect?to=http%3A%2F%2Fimoment24.ru%2F2019%2F12%2F09%2Fkalibrator-dlya-monitora-kolorimetr-datacolor-spyder-5-obzor%2F&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Калибрующее устройство. Источник

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

После этого компьютер определяет, соответствует ли изображение цветовым стандартам. Если нет — вносит поправку для выбранного цвета или оттенка.

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

Калибрующее устройство в работе. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DodPKJidvgdA%26amp%3Bapp%3Ddesktop&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Калибрующее устройство в работе. Источник

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

Если живёте в большом городе, то специалист сможет приехать к вам на дом вместе со своим устройством.

Услуга по калибровке монитора в Москве
Услуга по калибровке монитора в Москве

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

В калибровке каждые полгода нуждаются не все мониторы. Профессиональные экраны удерживают настройки по 9-12 месяцев. Бытовые мониторы и телефоны держат настройки меньше, но встречаются модели, которые сохраняют калибровку по 7-8 месяцев.

Настройка через Photoshop: цветовой профиль, сохранение через Web и не только

Экспортируйте арты с выставленной галочкой sRGB

Ментор в Smirnov School Павел Олейник советует экспортировать картинки из Фотошопа с активированной галочкой sRGB — так мы подводим палитру под общий цветовой стандарт.

Почему картинка выглядит по-разному на разных экранах — и что с этим делать

Не делайте тени слишком черными, а свет — белым

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

В этой табличке должны различаться все сегменты, но некоторые мониторы съедают очень темные и светлые оттенки — они становятся одинаковыми. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmonteon.ru%2F&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
В этой табличке должны различаться все сегменты, но некоторые мониторы съедают очень темные и светлые оттенки — они становятся одинаковыми. Источник

Выставляйте одинаковый цветовой профиль в разных настройках

Преподаватель в Smirnov School Татьяна Загунова советует выставить одинаковый цветовой профиль в настройках холста и на выгрузку jpeg/png.

Проверить это можно в настройках Edit-> Color settings-> окно Working spaces и Edit-> Convert to profile-> пункт Profile.

В обоих настройках должен стоять одинаковый цветовой профиль.

Проверяйте отображение цветов на красном цвете
Проверяйте отображение цветов на красном цвете

Ещё один совет от Татьяны: контролируйте отображение цветов в Фотошопе на красном цвете. Красный цвет не должен быть сильно холодным или сильно смещен в сторону оранжевого оттенка.

Следите за тенями в рисунке

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

Работа Татьяны. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.artstation.com%2Fartwork%2F28ZOAg&postId=1208901" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Работа Татьяны. Источник

Сохраняйте картинки через функцию Save for Web

Ментор в Smirnov School Дмитрий Парчутов советует сохранять картинки через оптимизацию изображений для веб-страниц.

Чтобы это сделать, пройдите по следующему пути: File -> Export -> Save for Web. Дмитрий рекомендует сохранять картинки в таком режиме в формате PNG-24.

Сохранение через оптимизацию изображений для веб-страниц
Сохранение через оптимизацию изображений для веб-страниц

Избегайте перенасыщенных цветов

Вторая рекомендация Дмитрия — избегать использования излишне насыщенных оттенков, которые могут упроститься на более простых дисплеях.

Ориентируйтесь на желаемое устройство

Последний совет: ориентируйтесь на то устройство, где чаще всего смотрят ваши рисунки или фотографии.

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

Только не ориентируйтесь на устройства Apple. В устройства Apple встроены хорошие матрицы, но они делают картинки ярче, чем они есть на самом деле. Это может сыграть с вами злую шутку, если вы, например, будете работать в очень тёмной палитре — чересчур тёмные оттенки на других устройствах будут не видны.

Текст написал Никита Барышников, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

299299
67 комментариев