Что такое srgb: Цветовые пространства sRGB и Adobe RGB: что это, зачем нужны и какое выбрать | Статьи | Фото, видео, оптика
Цветовые пространства sRGB и Adobe RGB: что это, зачем нужны и какое выбрать | Статьи | Фото, видео, оптика
Почему после загрузки в интернет цвета на фотографии искажаются? Как получить красивые снимки при печати, создании фотокниги? Что делать, если на вашем профессиональном мониторе цвета выглядят сочно и ярко, а на гаджете клиента — тускло и грязно? Все эти проблемы можно решить, если во время съёмки или на постобработке правильно настроить цветовое пространство.
Для фотографов самые важные цветовые пространства — sRGB и Adobe RGB. Рассказываем, что это такое, чем они отличаются и какое из них выбрать.
Правильное цветовое пространство обеспечит лучший цвет при печати или загрузке фотографий в интернет / Источник: unsplash.com
Что такое цветовое пространство и цветовая модель
Цветовое пространство — это встроенный в мониторы, принтеры, камеры и телефоны «переводчик», который позволяет устройствам правильно читать и показывать цвета.
Если упрощать, например, в цветовом пространстве RGB есть три цифры: R — 255, G — 0, B — 0. Для вас это просто набор букв и цифр, а графический редактор или телефон переведёт эти значения в цвет и покажет вам насыщенный красный. Каждый пиксель на фотографии имеет свой набор таких цифр и, соответственно, свой цвет, который цветовой профиль декодирует.
Фотография, увеличенная до 3200%. Изображение складывается из квадратиков — пикселей, каждый из которых окрашен в свой цвет. В пространстве RGB выделенный пиксель складывает цвета из трёх значений R, G и B / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Получается, цвет как будто является точкой в системе координат. Тыкаешь сюда — там находится синий, в другое место — розовый, в третье — зелёный. Но не всё так просто. Тогда на всех устройствах были бы одинаковые настройки и цвета выглядели абсолютно идентично. Звучит прекрасно, но нереально.
К сожалению, у нас есть разные системы координат со слегка различающимися наборами цветов.
Их называют цветовыми моделями или цветовыми профилями.
Цветовая модель — это математическое описание цветов. В них заложен принцип, какой именно цвет, с какой яркостью, насыщенностью и как именно будет отображаться. Это нужно, чтобы цвет на разных носителях выглядел максимально одинаково.
Самые известные цветовые модели:
- RGB. Наиболее распространённый цветовой профиль. В нём цвета формируются из сочетания трёх цветов: красного (R), зелёного (G) и синего (B). Полное отсутствие этих цветов даёт чёрный цвет, а сумма всех трёх — белый. Эта цветовая модель в том или ином виде встроена во все телефоны, мониторы, фотоаппараты.
- CMYK. Модель строится на смешении четырёх цветов (типографских красок): C (Cyan) — голубой, M (Magenta) — пурпурный, Y (Yellow) — жёлтый, K (Black) — чёрный. Используется в типографиях и при допечатной подготовке, когда вы точно знаете, что будете печатать эту фотографию.
Цветовые модели RGB и CMYK / Источник: freesvg.
org
- HSB, или HSL. Цветовая модель, которая препарирует каждый цвет на три составляющих: H (Hue) — цветовой тон или оттенок, S (Saturation) — насыщенность и L или B ( Lightness или Brightness) — яркость, а в некоторых переводах светимость. Эту модель встраивают в инструменты для работы с цветом в графических редакторах Lightroom, Capture One, Photoshop и Adobe Camera Raw.
Цветовая модель HSB, интегрированная в инструменты Photoshop / Иллюстрация Елизавета Чечевица, Фотосклад.Эксперт
- Цветовая модель Lab. Эта модель имеет наибольший цветовой охват — отображает больше всего цветов в их максимальной яркости. Цветовой профиль популярен в профессиональных кругах, когда изображение готовят к печати.
Отличие Lab от CMYK в том, что цветопередача CMYK привязана к физическим параметрам материалов и техники. Например, цвет будет разным из-за разных типов и цвета бумаги, краски, фирмы-производителей печатных машин. Lab же однозначно определяет цвет, это универсальная модель.
Система координат из трёх осей: L (lightness) — яркость; a — цвета от красного к зелёному; b — цвета от жёлтого к синему. В итоге каждый цвет описывается тремя цифрами для каждой оси / Источник: openclipart.org
Adobe RGB или sRGB: виды цветовых пространств RGB
Цветовая модель RGB включает в себя несколько цветовых пространств. Это нужно потому, что у разных мониторов, принтеров, телефонов отличается цветопередача — производители не договорились о едином стандарте, у всех разные технологии и видение продукта. Введение общих цветовых пространств — попытка привести всё к единому знаменателю. Благодаря этому в большинстве случаев фотография на вашем ноутбуке и в телефоне клиента будет одинаковой по цвету.
Чаще всего фотограф сталкивается с двумя цветовыми пространствами:
- Adobe RGB. Цветовое пространство с широким охватом цветов. Если сравнивать с sRGB, цвета получаются более яркими и насыщенными. Кроме того, оно дает больше оттенков тёмно-зелёного.
Чаще всего его используют при печати и допечатной подготовке.
Чаще всего его используют при печати и допечатной подготовке. Чтобы полностью раскрыть потенциал этого пространства, нужен дорогой монитор, который поддерживает Adobe RGB. Получается, ваш клиент едва ли сможет увидеть всё богатство цвета. Но это возможно, если вы работаете только с другими профи, типографиями и в сегменте b2b. Минус пространства в том, что при выгрузке фотографий в интернет цвета получаются блёклые, тусклые, грязные.
- sRGB. Цветовое пространство с более узким цветовым охватом, чем Adobe RGB, зато очень распространённое. sRGB поддерживается всеми мониторами, телефонами, планшетами, телевизорами, проекторами. Более того, именно в этим цветовом пространстве нужно работать, если ваши фотографии обитают лишь в виртуальных пространствах — соцсетях, сайтах, облачных дисках.
Цветовой охват Adobe RGB (чёрный треугольник) и sRGB (белый треугольник) / Источник: wikimedia.org
Важно: именно работа в неправильном цветовом пространстве может сильно исказить цвета при выводе фотографии в печать или публикации в интернете.
Но иногда даже правильное цветовое пространство не спасает.
Например, телефоны Xiaomi славятся тем, что сильно увеличивают насыщенность цветов. Получается, у вас и вашего клиента на мониторах цвета снимка будут одни, а в телефоне этой марки -— гораздо ярче. Что из этого следует? Неутешительный вывод: идеальной цветопередачи не бывает. Если клиент жалуется на цвет, но ваше цветовое пространство правильное, попросите его посмотреть фотографию на разных устройствах — телефонах, ноутбуке, стационарном ПК, — а лучше самостоятельно проверяйте снимки перед отправкой. Если проблема не решилась, стоит задуматься о калибровке монитора специалистом.
Как поменять цветовое пространство
Выбрать, в каком цветовом пространстве работать — Adobe RGB или sRGB,— можно как перед съёмкой на фотоаппарате, так и во время постобработки. Рассказываем, как выбрать нужное цветовое пространство в камере, а также Lightroom и Adobe Photoshop.
Цветовое пространство фотоаппарата
Чтобы выбрать цветовое пространство перед съёмкой, зайдите в меню фотоаппарата.
Например, в Canon это значок с иконкой в виде фотоаппарата с двумя точкам, а в Nikon — просто пиктограмма фотоаппарата.
Если настройки вашей камеры на английском языке, то ищите в списке строчку Color Space / Источник: wikimedia.org
Как поменять цветовое пространство в Photoshop и Adobe Camera Raw
Чтобы после обработки фотографии в Photoshop её цвет не менялся, откройте программу и зайдите в меню Редактирование/Edit – Настройки цвета/Color Setting.
В Настройках/Settings выберите профиль Универсальные настройки для Европы 3/Euro General Purpose 3 и нажмите Ок / Иллюстрация Елизавета Чечевица, Фотосклад.Эксперт
Если вы снимаете в RAW и перед Photoshop обязательно проходите через Adobe Camera Raw, там поменять цветовое пространство можно, если нажать на подчёркнутую строку в нижней части окна.
Как изменить цветовое пространство в Adobe Camera RAW / Иллюстрация Елизавета Чечевица, Фотосклад.
Эксперт
Как поменять цветовое пространство в Lightroom
– Зайдите в Редактирование/Edit – Настройки/Preferences – Внешнее редактирование /External Editing.
Поставьте Adobe RGB или sRGB в выпадающем списке Цветовое пространство/Color Space / Иллюстрация Елизавета Чечевица, Фотосклад.Эксперт
– Если вы обнаружили, что работали в неправильном для вас цветовом пространстве, то изменить его можно перед сохранением обработанных фотографий. Для этого нажмите на вкладку Библиотека/Library и найдите кнопку Экспорт/Export.
В открывшемся меню найдите Настройки файла/File Settings и выберите Цветовое пространство/Color space / Иллюстрация Елизавета Чечевица, Фотосклад.Эксперт
Читайте также:
Как откалибровать монитор и какой калибратор для этого выбрать
Мониторы для фотографа: модели с точной цветопередачей
Цвет кожи в Lightroom: как сделать идеальный
что это и как настроить инструменты — Оди
Если вас просят сделать журнальный столик с ножками высотой 50, что это значит? 50 километров? Футов? Дюймов? Миллиметров?
Наверное, 50 сантиметров.
Никто об этом не сказал, но можно догадаться: 50 километров, футов или дюймов — слишком много для журнального столика, а 50 миллиметров — слишком мало.
Лучше бы вам указали систему измерения. Значение «50» само по себе бессмысленно, тогда как «50 см» раскрывает абсолютные физические характеристики ножек стола.
Эта статья об управлении цветом для дизайнеров и разработчиков программного обеспечения. Если вы поняли приведённый выше пример, то понимаете самую важную вещь в управлении цветом — одних значений недостаточно для описания цвета. Вам нужно значение цвета и описание пространства, в котором оно существует.
Полностью красный непрозрачный цвет без примесей синего и зелёного можно записать в разных форматах. В сети это может быть #ff0000 или rgb(255, 0, 0), на iOS может быть UIColor(red:1, green:0, blue:0, alpha:1), а на Android — Color.valueOf(0xffff0000). Это всё разные формы одного и того же — полностью красного цвета, без зелёного и синего.
Эти значения похожи на цифру «50» выше — у них нет единиц измерения.
Характеристика «полностью красный» не имеет смысла. Какой красный считать «полным»? Разные дисплеи имеют разную максимальную интенсивность для красного. Некоторые могут давать более яркие и глубокие оттенки, чем другие.
Если вы хотите, чтобы красный цвет выглядел одинаково на разных дисплеях, нужно указать единицы измерения. Нам нужен эквивалент сантиметров для цвета, чтобы знать, чему соответствует этот «красный» в видимом спектре света.
Цветовые пространстваЦветовые пространства позволяют нам отображать абсолютные цвета физического мира в системе измерений, подходящей для дисплеев. Вы слышали о «sRGB», «Adobe RGB», «Display P3» или «DCI-P3»? Это и есть цветовые пространства.
Они похожи на «см» из первого абзаца. sRGB — это стандартное цветовое пространство для многих устройств. Adobe RGB, Display P3 и DCI-P3 — это пространства с более широким цветовым охватом, которые можно найти на более новых или дорогих устройствах.
Значение слева, цветовое пространство справа
Цветовые пространства сложнее, чем единицы измерения.
Они не просто определяют масштаб, они устанавливают белую точку, диапазон, масштаб и другие свойства для красного, зелёного и синего в видимом спектре.
Есть много способов визуально отразить цветовые профили, но самый удобный и распространённый — с помощью цветовой модели в 3D.
Цветное поле — sRGB, белёсое — Display P3
Перед вами разница между sRGB и Display P3. sRGB отображает меньше цветов, чем Display P3, поэтому на картинке его цветовой охват находится внутри охвата Display P3.
Любой цвет, описанный в пространстве sRGB, также можно описать в Display P3. #ff0000 в sRGB — это #ea3323 в Display P3 (значение может немного отличаться в зависимости от метода преобразования).
Однако в Display P3 есть цвета, которых нет в пространстве sRGB. Display P3 имеет более широкий цветовой охват и может отображать больше, особенно это касается глубоких красных и зелёных оттенков. #ff0000 в Display P3 нельзя превратить в значение HEX для sRGB , поскольку оно выходит за пределы диапазона sRGB.
Я надеюсь, что трёхмерная модель понятно демонстрирует важный момент — когда вы назначаете значению цвета цветовой профиль, оно становится абсолютным и более полезным. Такое значение предоставляет всю необходимую информацию устройству, отображающему картинку, чтобы воспроизвести цвет максимально точно.
sRGB как стандартЯ написал, что у значений, указанных выше, нет единиц измерения или цветового пространства. Это не совсем верно. Во многих случаях есть цветовое пространство по умолчанию, которое предполагается, если изначально данных о цветовом пространстве нет.
В сети sRGB — стандартное цветовое пространство для CSS и SVG, хотя, скорее всего, в будущем получится использовать другие пространства. Например, в CSS цвета пространства Display P3 можно прописать как color(p3 1.0 0 0).
На iOS и Android также по умолчанию используется sRGB, но обе ОС поддерживают более широкий цветовой охват.
Изображения и видеоТот же концепт работает для изображений и видео.
Во многих ситуациях изображения и видео должны иметь встроенные цветовые профили. Если их нет, программа считает, что цветовое пространство — sRGB. По этой причине изображения в пользовательском интерфейсе часто идут без встроенных цветовых профилей: это экономит место на диске, а цвета всё равно будут восприняты как существующие в sRGB.
Будущее широкого цветового охватаРаньше дизайнеры и разработчики могли хорошо работать, не имея знаний об управлении цветом, но скоро без них будет не обойтись.
Распространение дисплеев с широким цветовым охватом означает, что ошибок, связанных с управлением цветом, станет больше и они будут серьёзнее. Хороший пример — на экране новых MacBook Pro и iMac в некоторых приложениях цвета выглядят перенасыщенными.
Если вы работаете с интернет-страницами и приложениями для iOS и Android, важно понимать цветовое пространство, в котором находится проект, и настроить дизайн и среду разработки в соответствии с ним. Скорее всего, вы работаете в sRGB, но важно, чтобы это был осознанный выбор.
Важно, чтобы вы знали, при каких условиях происходит преобразование цветов.
Если цвета выбраны в одном цветовом пространстве, а затем не преобразованы, а назначены из другого пространства, они будут выглядеть неправильно. Так часто бывает, когда программа не настроена на широкий цветовой охват и на протяжении всего проекта цвета несут значения для sRGB. Они будут выглядеть ярко в инструменте дизайна и тускло в работающем приложении.
Разница между цветовыми пространствамиВместо того чтобы сравнивать цветовые пространства с единицами измерения, давайте представим их как линейку.
Цветовой охватЦветовой охват — это диапазон цветов, которые могут быть представлены цветовым пространством. Он определяет границы того, насколько насыщенными и чистыми могут быть цвета.
В нашей аналогии охват похож на длину линейки. Предположим, у нас есть две линейки, которые представляют два разных цветовых пространства — одна длиной 1 фут (английская система мер), другая длиной 1 метр (метрическая система мер).
Линейки имеют разную длину. У них одинаковое количество делений от 0 до 1, но физическое расстояние между делениями отличается. Значения 1 у метрической и английской линейки находятся совсем в разных точках пространства.
Широкий цветовой охват — это метрическая линейка.
Их относительные масштабы не верны, но условно можно считать, что футовая линейка — это sRGB (цветовое пространство со стандартным цветовым охватом), а метровая линейка — Display P3 (цветовое пространство с широким цветовым охватом).
Фут составляет лишь часть метра. То же самое можно сказать о цветах: #ff0000 в sRGB — это только #ea3323 в Display P3. Наиболее насыщенный красный в sRGB будет лишь одним из цветов линейки «ярко-красного» в Display P3.
При одинаковом количестве делений более длинная линейка имеет меньшую физическую точность. Это верно и для цветовых пространств — пространства с более широким цветовым охватом растягивают значения цвета по большему пространству, поэтому они более склонны к вещам вроде градиентных полосок.
Избежать этого поможет увеличение глубины цвета.
Когда значение цвета сохраняется компьютером, у него есть определённая глубина, которая зависит от метода хранения информации.
В нашей аналогии с линейкой глубину можно представить в виде делений, тогда каждое значение цвета будет стоять на своём делении. Чем больше делений, тем больше возможная глубина.
Если вы знакомы с HEX-цветами в CSS, то знаете, что #ff0000 — самый яркий чистый красный цвет, а #fe0000 — второй самый яркий чистый красный. Между #ff0000 и #fe0000 нет ничего.
Красный компонент HEX-цвета в CSS изменяется в пределах от 00 до ff в шестнадцатеричном формате или от 0 до 255 в десятичном. Есть только 256 вариантов. Если вам нужно значение 254,5, вам не повезло — оно должно быть 254 или 255. Значение должно быть округлено в большую или меньшую сторону.
Может показаться, что 256 оттенков — это много, но, когда дело доходит до рисования плавных градиентов, преобразования цветового пространства и другой обработки, легко допустить ошибки в округлении, которые можно будет заметить невооруженным глазом.
Когда есть несколько этапов обработки, это ведёт к накоплению ошибок и разнице гораздо большей, чем в пол оттенка.
Ошибки округления обычно заканчиваются полосами, постеризацией или выраженным шумом. Дисплеи с широким цветовым охватом обостряют необходимость в большей глубине цвета — если линейка становится длиннее, количество делений, необходимых для создания плавных градиентов, увеличивается.
Вероятно, в будущем мы не будем использовать для цветов значения HEX как основные — они изначально имеют малую глубину, допуская только 8 бит на канал (256 оттенков для каждого цветового канала).
Лучше использовать более «глубокие» значения с плавающей точкой. Числа с плавающей точкой могут выходить за пределы охвата цветового пространства. Самый яркий красный цвет в sRGB можно записать как «1.0 0 0», а красный цвет за пределами охвата sRGB — как «1.2 0 0», если цветовое пространство это позволяет.
Глубина цвета — не часть цветового пространства. Это деталь реализации, оставленная на усмотрение движка рендеринга или инструмента дизайна.
Разные инструменты требуют разного подхода, и вероятность возникновения проблем зависит от того, чем и как вы пользуетесь.
Гамму цветового пространства можно рассматривать как расстояние между делениями вдоль линейки. Равномерно расположенные деления называются линейной гаммой.
В отличие от обычных линеек, деления на линейке гаммы чаще всего расположены неравномерно. sRGB использует нелинейную гамма-кривую, как на рисунке ниже. Другие популярные цветовые пространства также используют нелинейные гамма-кривые. Гамма-кривая Display P3 идентична гамма-кривой sRGB.
Сверху линейная гамма-кривая, снизу нелинейная
Обратите внимание, на левой стороне линейки больше делений. Это увеличивает глубину в более тёмных цветах, где человеческое восприятие более чувствительно.
Гамму обычно описывают как экспоненциальную кривую, где значение 1,0 является линейным (равномерно расположенные деления), а цифры выше 1 означают, что для более тёмных цветов точность цвета больше, а для более светлых — меньше.
Гамма-кривая sRGB немного сложнее: на ней есть короткая линейная секция, а затем идёт экспоненциальная кривая. Про sRGB обычно говорят, что его гамма равна 2,2, но экспоненциальный участок фактически равен 2,4 (2,2 — это значение средней гаммы).
Вам не нужно много знать про гамма-кривую sRGB, чтобы понимать сферу управления цветом. Это просто интересная вещь, которую стоит рассмотреть, если вы будете копаться в цветовых профилях с помощью Apple ColorSync Utility. Важно помнить, что гамма — это расстояние между делениями на линейке, и что расстояние обычно является нелинейным.
Преобразование цветовМы рассмотрели достаточно основ, чтобы перейти к преобразованию цветового пространства, используя нашу аналогию с линейкой.
Если у нас есть исходные цвет и цветовое пространство и конечное цветовое пространство, каким должно быть конечное значение цвета? Иными словами, если положить рядом две линейки и выбрать значение на одной из них, как узнать, чему оно соответствует на другой?
Значение с исходной линейки переносится на ближайшее деление на конечной, как показано выше.
Если значение на исходной линейке находится за пределами значений конечной, его просто «отсечёт», как на рисунке ниже.
Упрощённая аналогия с линейками отлично иллюстрирует, как работает преобразование цветового пространства.
Преобразование цветов с помощью инструментов дизайнаПлатформы, для которых вы разрабатываете, и ресурсы, скорее всего, сами диктуют подход к управлению цветом и цветовое пространство.
Когда вы разрабатываете веб-сайт, CSS и SVG работают в sRGB, поэтому ваши документы должны быть настроены под sRGB. CSS level 4, скорее всего, будет поддерживать больше цветовых пространств, SVG тоже наверняка будет улучшен в будущем. Но сейчас, если вы создаете приложение, использующее веб-технологии, пока оставайтесь верны sRGB.
Если вы разрабатываете приложение для iOS, Android или Mac, вам тоже лучше работать в sRGB. Есть ситуации, когда вы можете или должны использовать цветовой профиль с более широким охватом вроде Display P3, но это бывает довольно редко.
Если вы решите работать в Display P3, вам всё равно понадобится полный набор ресурсов в sRGB, что сильно увеличит бинарный файл вашего приложения (да, Xcode может сгенерировать их для iOS и macOS, и да, помогает App Thinning). Если вы используете определённые элементы кода, Android, iOS и macOS будут поддерживать профили с широким цветовым охватом (всё зависит только от версии ОС).
Display P3 и другие цветовые пространства становятся всё более распространёнными, но есть простое правило: если вы не уверены, работайте в sRGB. Проблемы управления цветом могут быть невероятно трудными для отладки, поэтому важно принять решение на ранней стадии и убедиться, что все члены команды используют одинаковые настройки для своих инструментов и документов.
Назначить или преобразовать?При изменении цветового профиля документа можно использовать два подхода: назначить профиль или преобразовать в него. Какой выбрать, зависит от ситуации.
Назначение профиля документу сохраняет исходные значения цвета прежними (#ff0000 останется #ff0000), но внешний вид изменится.
Назначение просто даёт документу тег с новым цветовым профилем. Это всё равно что сказать «этот документ в sRGB», не меняя содержимое самого документа.
Преобразование в профиль делает противоположное — исходные значения цвета будут изменены, но внешний вид останется прежним, если это возможно. Может произойти округление и отсечение некоторых значений, это зависит от исходного и конечного профилей.
Преобразование считывает старое значение, преобразует его и записывает новое для каждого цвета в документе. Прежде чем начать его, лучше сохранить резервную копию документа, потому что это необратимо.
Настройки системыНа Mac в панели «Display preference» в «System Preferences» можно изменить цветовой профиль в зависимости от вашего дисплея.
Настройка не может изменить ваш дисплей, она меняет то, каким система будет считать ваш дисплей. Лучше оставить значение по умолчанию («Color LCD» или «iMac», либо аналогичное, вверху списка) или использовать калибровочное устройство.
Возиться с этими настройками не рекомендуется.
Я рекомендую отключить «Automatically Adjust Brightness», «Night Shift» и «f.lux», поскольку все они могут повлиять на точность отображения цветов во время вашей работы. Обязательно отключите «True Tone».
SketchДо сорок восьмой версии в Sketch не было функции управления цветом. Если вы используете старую версию, пожалуйста, обновитесь.
Текущую версию Sketch можно настроить для работы в sRGB или Display P3. По умолчанию в настройках Sketch новые документы создаются как «Unmanaged». Установите значение на sRGB или Display P3 в зависимости от того, какое из пространств вам подходит.
Я порекомендовал бы использовать sRGB по умолчанию, даже если вы планируете с некоторыми документами работать в Display P3.
Чтобы назначить цветовой профиль существующему документу, выберите «Change Color Profile» в меню «File».
Если документ уже настроен на sRGB или Display P3, программа спросит вас, хотите вы назначить или преобразовать цвета в документе.
Важно понимать, что делает опция «Save For Web», её описание в Sketch немного неточно. EXIF данные никогда сохраняются, даже если «Save For Web» отключена, в экспортируемое изображение может быть включён только профиль ICC.
Описание опции «Save For Web» в Sketch: «Для уменьшения размера файла цветовой профиль и EXIF метаданные будут удалены».
При экспорте PNG из документа в пространстве sRGB, если включена функция «Save For Web», то результат будет содержать фрагмент гаммы. Если функция «Save For Web» отключена, он будет содержать блок sRGB.
Я бы порекомендовал отключить функцию «Save For Web» при экспорте PNG-файлов в sRGB из Sketch, поскольку фрагмент sRGB является лучшим описанием содержимого файла. Фрагмент sRGB на 3 байта меньше фрагмента гаммы, поэтому отключение функции «Save For Web» поможет уменьшить размер итогового файла.
Если при экспорте PNG из документа в Display P3 включен параметр «Save For Web», результат будет содержать фрагмент гаммы.
Если параметр «Save For Web» отключён, он будет содержать фрагмент профиля ICC.
Я бы порекомендовал отключить функцию «Save For Web» при экспорте PNG-файлов в Display P3 из Sketch, поскольку для файлов в Display P3 очень важен профиль ICC (большинство браузеров и платформ считают, что изображение существует в sRGB, если нет профиля ICC).
Photoshop
В Photoshop есть функция управления цветом, и его можно настроить для работы в sRGB или Display P3. Даже если вы хотите создавать документы в Display P3, разумно по-прежнему устанавливать sRGB по умолчанию. Для этого выберите «Color Settings» в меню «Edit» и убедитесь, что для рабочего пространства установлено значение sRGB, а для документов RGB выбран параметр «Preserve Embedded Profiles». Также неплохо бы отключить параметр «Blend Text Colors Using Gamma».
Чтобы назначить цветовой профиль существующему документу, выберите «Assign Profile» в меню «Edit». Чтобы преобразовать в цветовой профиль, выберите «Convert to Profile» в меню «Edit».
При экспорте PNG-файлов в Display P3 с помощью Photoshop через «Save For Web» или «Export As» убедитесь, что параметр «Embed ICC profile» включен, а «Convert to sRGB» отключен.
Я также попробовал экспорт через «Generator», и не думаю, что он сохраняет изображения с профилями ICC, независимо от того, какие настройки используются. Так что« Generator» нельзя использовать для ресурсов Display P3.
Настройки для «Save For Web» и «Export As» показаны ниже.
IllustratorВ Illustrator есть функция управления цветом, и его можно настроить для работы в sRGB или Display P3. Даже вы хотите создавать документы в Display P3, разумно установить пространство sRGB по умолчанию. Для этого выберите «Color Settings» в меню «Edit» и убедитесь, что для рабочего пространства установлено значение sRGB, а для документов RGB выбран параметр «Preserve Embedded Profiles».
Чтобы назначить цветовой профиль существующему документу, выберите «Assign Profile» в меню «Edit».
Чтобы преобразовать в цветовой профиль, выберите «Convert to Profile» в меню «Edit».
Я не думаю, что можно сохранить PNG-файл из Illustrator с профилями ICC, поэтому эта программа не подходит для экспорта ресурсов Display P3. В «Export For Screens» нет настроек, связанных с управлением цветом, поэтому здесь нечего менять, если вы сохраняете PNG в sRGB. В «Save For Web» есть опция «Convert to sRGB», но это не возымеет эффекта, если ваш документ уже в sRGB.
XDВ Adobe XD нет функции управления цветом и нет никаких подходящих для этого настроек.
Adobe написали больше приложений для управления цветом и имеют больше опыта в этом, чем любая другая компания. К сожалению, в главном инструменте Adobe для дизайна интерфейса отсутствует эта функция. Надеюсь, что скоро она появится.
Affinity DesignerВ Affinity Designer есть функция управления цветом и можно задать настройки для работы в sRGB или Display P3. Можно по умолчанию установить цветовой профиль RGB в «Preferences» в разделе цветов.
Чтобы назначить документу цветовой профиль или преобразовать существующий, выберите «Document Setup» в меню «File». Цветовой профиль документа можно найти во вкладке «Color».
В Affinity Designer исключительные параметры экспорта, они дают полный контроль над тем, что сохраняется. Для PNG в sRGB я бы рекомендовал 8 бит на канал, без метаданных и без профиля ICC. Для PNG в Display P3 я бы рекомендовал 16 бит на канал, без метаданных и включить в файл профиль ICC.
Affinity Designer делает именно то, что указано в настройках экспорта. Было бы неплохо иметь возможность включать в файл фрагмент sRGB для изображений в sRGB, но это не обязательно.
FigmaВ Figma нет функции управления цветом и нет никаких настроек для этого.
Приложение Figma для рабочего стола отображает цвета в профиле дисплея — если вы ориентируетесь на sRGB, документы будут выглядеть слишком яркими на экране Display P3 (протестировано с помощью Figma Desktop 3.
5.3). При использовании Figma через Chrome (протестировано с использованием версии 64.0.3282.186) или через Safari (протестировано с 11.0.3) все цвета отображаются правильно, но только если вы ориентируетесь на sRGB.
Если вы ориентируетесь на Display P3, не думаю, что получится правильно отобразить цвета. При запуске Figma через Firefox нет управления цветом. Возможно, какие-то настройки самого браузера способны исправить ситуацию.
Обновление от февраля 2019 года: в Electron 2.0.6 добавили флаг «ColorCorrectRendering», который означает, что все цвета будут обрабатываться как sRGB и корректно преобразовываться в цветовое пространство дисплея. Чтобы включить эту функцию в Figma, выполните команду:
Следует отметить, что это только частичное решение, а не полное управление цветом.
InVision StudioВ InVision Studio нет функции управления цветом, и нет никаких настроек для этого.
Обновление от февраля 2019: InVision Studio теперь поставляется с выставленным флагом Electron «ColorCorrectRendering».
Это ставит его в один ряд с Figma с точки зрения управления цветом.
В настоящее время только три из протестированных инструментов дизайна могут полно работать с sRGB и Display P3.
В таблице ниже «sRGB canvas» (холст sRGB) означает, что приложение может правильно отображать цвета sRGB на холсте. «Display P3 canvas» (холст Display P3) означает то же самое, но в отношении Display P3.
«sRGB PNGs» (PNG в sRGB) означает, что приложение может экспортировать изображения PNG с правильными цветами и фрагментом sRGB или вообще без включенного профиля ICC, поскольку обычно предполагается, что PNG без данных цветового профиля — это изображение в sRGB.
«Display P3 PNGs» (PNG в Display P3) означает, что приложение может экспортировать изображения PNG с правильными цветами и встроенным ICC профилем Display P3.
Столбцы слева направо: холст sRGB, холст Display P3, PNG в sRGB, PNG в Display P3
Сравнение получилось довольно поверхностным — экспорт WebP, импорт изображений, битовая глубина и многие другие факторы также стоило бы протестировать и включить в таблицу.
Стоит отметить, что управление цветом идёт по принципу «всё или ничего» и решение частных моментов не помогает. Нужен отлаженный процесс от начала и до конца. В целом индустрия довольно плохо справляется с предоставлением функции управления цветом для наших инструментов.
Что такое sRGB? Объяснение специалиста по дисплею
Если вы покупаете монитор или другое техническое устройство с экраном, возможно, вы уже встречали термин sRGB. Вот что это значит.
Существует множество различных способов измерения качества экрана, и одним из потенциальных показателей, часто упоминаемых производителями, является процент sRGB, который может предложить продукт. Но что это на самом деле означает?
sRGB, что означает «Стандартный красный, зеленый, синий», представляет собой «цветовое пространство», означающее, что это стандартизированный диапазон определенных цветов, которые создаются комбинациями трех аддитивных основных цветов, перечисленных в его названии.
Конкретные значения координат, принадлежащие этому цветовому пространству, публикуются Международным консорциумом по цвету.
В приведенном ниже видео вы можете посмотреть, как ученый Карл Ланг объясняет концепцию его стандартизации для различных отраслей и продуктов: тщательно измеряется колориметром.
Это число относится к пропорции цветового пространства, которое он может воспроизвести, причем более высокий процент указывает на более широкий диапазон. Если продукт имеет относительно низкий балл, это означает, что он предлагает меньше цветов в пространстве sRGB, тогда как, если продукт имеет более высокий балл, он имеет больше цветов в этом пространстве и потенциально может воспроизводить изображения более точно.
Существуют ли альтернативы sRGB?
Несмотря на то, что sRGB очень широко используется и цитируется в отрасли, это не единственное используемое цветовое пространство; альтернативы включают Adobe RGB и DCI-P3, и оба они содержат больше цветов, чем sRGB (примерно на 25%), причем последний из них также используется контентом HDR.
На самом деле, когда мы проводим тесты на экранах смартфонов или ноутбуков, многие из лучших устройств обеспечивают 100-процентное покрытие цветового спектра sRGB, но, вероятно, имеют более низкие баллы для DCI-P3 или Adobe RGB.
Вам может понравиться…
Питер Фелпс Связаться через Твиттер Связаться через LinkinIn
Питер — автор мобильных технологий, освещающий новейшие смартфоны, планшеты и носимые устройства в новостях, обзорах и материалах.
Ранее он работал бизнес-исследователем в компании Which?, анализируя м…
Зачем доверять нашей журналистике?
Основанная в 2003 году, Trusted Reviews существует для того, чтобы давать нашим читателям подробные, непредвзятые и независимые советы о том, что покупать.
Сегодня у нас есть миллионы пользователей в месяц со всего мира, и мы оцениваем более 1000 продуктов в год.
Редакционная независимость
Редакционная независимость означает возможность вынести непредвзятое мнение о продукте или компании, избегая конфликта интересов. Чтобы это было возможно, каждый член редакции следует четкому кодексу поведения.
Профессиональное поведение
Мы также ожидаем от наших журналистов соблюдения четких этических норм в своей работе. Наши сотрудники должны стремиться к честности и точности во всем, что они делают. Мы следуем своду правил редакторов IPSO, чтобы поддерживать эти стандарты.
Что такое SRGB? | Хорошо ли использовать на экране компьютера?
Best →
Автор:
Christen da Costa
Обновлено 27 июня 2022 г.
Наши посты содержат партнерские ссылки. Иногда, но не всегда, мы можем заработать $$, когда вы совершаете покупку по этим ссылкам. Без рекламы. Всегда. Узнать больше
Содержание_
- Когда следует использовать sRGB?
- В чем разница между sRGB и RGB?
- sRGB Android
- Часто задаваемые вопросы
Что такое sRGB? Это аббревиатура стандартных красных, зеленых и синих цветов. sRGB — это особое цветовое пространство, которое все потребители используют на большинстве мобильных устройств и лучших компьютерных игровых мониторах. Вы можете найти sRGB в камерах, цифровых принтерах, сканерах, проекторах и даже ноутбуках. Кроме того, W3C определяет цветовое пространство Интернета как sRGB.
ОСНОВНЫЕ ВЫВОДЫ:
- Каждый цвет в цветовом пространстве sRGB может давать разные вариации других цветов.
- sRGB превыше всего: большинство потребительских устройств, приложений и веб-браузеров по умолчанию используют sRGB.
- Цветовые пространства, такие как Adobe RGB, содержат более насыщенные цвета, чем sRGB.
Когда следует использовать sRGB?
Во-первых, это зависит от того, имеет ли тип монитора, который вы хотите приобрести, широкий цветовой охват. Во-вторых, имеет значение и то, какую работу вы хотите выполнять с монитором. Так что, если вы не часто печатаете или вам нужна широкая гамма, sRGB подойдет для этой цели. С другой стороны, если у вас нет монитора с широким цветовым охватом, просто используйте параметр sRGB для своей работы от начала до конца. Это лучший способ предоставить согласованные изображения в печати или в Интернете. Мы также думаем, что вам может быть интересно узнать, как мониторы QHD обеспечивают четкое изображение.
В чем разница между sRGB и RGB?
sRGB покрывает только 35% цветового пространства; он не самый широкий. Но sRGB поддерживается любым типом монитора на рынке. В 1998 году Adobe создала цветовое пространство Adobe RGB.
Это почти похоже на sRGB. Adobe RGB занимает примерно 50% цветового пространства CIE. Как правило, разницы между sRGB и RGB практически нет.
Adobe RGB не содержит больше цветов, чем sRGB. Тем не менее, они оба имеют 16,7 миллиона (256x256x256) цветов. Это число является максимальным, которое могут создать оба цветовых пространства. Разница лишь в том, что Adobe RGB занимает больше места.
sRGB Android
Управление цветом в sRGB Android позволяет сделать цвета одинаковыми на разных устройствах. Начиная с версии Android 8.0 цвета растягиваются, что означает, что любой цвет кажется интенсивным. Конечный результат — насыщенные цвета. VSync важен для игр, но, к сожалению, не влияет на уровни яркости и цвета, включая глубину цвета. Теперь, если вы посмотрите на большинство приложений на Android, они компенсируют насыщенность.
Insider Tip
Управление цветом в sRGB Android позволяет использовать одинаковые цвета на разных устройствах.
Часто задаваемые вопросыПочему мои изображения становятся скучными, когда я загружаю их в Интернет?
Когда вы редактируете изображение в GIMP или Photoshop, в него встраивается цветовой профиль.
Однако ваше изображение будет выглядеть скучно, поскольку браузеры заставляют изображения использовать цветовой профиль sRGB. Итак, предположим, что вы не конвертируете изображение в своем программном обеспечении для редактирования фотографий, чтобы иметь цветовой профиль sRGB. В этом случае браузер его сконвертирует, и результат будет выглядеть некрасиво. Теперь, чтобы ваши изображения выглядели так, как они должны, всегда конвертируйте изображение в sRGB перед загрузкой в Интернет.
Какое цветовое пространство лучше использовать?
Это зависит от того, что вы хотите сделать. Если вы работаете с цифровыми изображениями, правильно всегда предоставлять изображения с цветовым профилем sRGB. С другой стороны, большинство потребительских лабораторий не используют Adobe RGB, и вы не хотите отправлять своим клиентам некачественные фотографии. Как правило, никогда не забывайте преобразовывать изображения в формат sRGB перед их загрузкой в Интернет.
Монитор какого типа следует приобрести с поддержкой sRGB?
Вам необходимо приобрести экран с цветовым охватом 99-100% sRGB. Некоторые дешевые мониторы могут отображать от 92% до 95%. С этой опцией вам будет не хватать некоторых оттенков цветов. Крайне важно использовать монитор с правильным цветовым пространством SRGB, если вы хотите предоставлять качественный онлайн-контент. Если вы можете купить качественный экран, выбирайте монитор с sRGB и 80-100% цветового пространства DCI-P3. Для получения дополнительной информации прочитайте нашу статью о ресурсах DCI P3 и sRGB. DCI-P3 — это гораздо более обширное цветовое пространство, чем sRGB. Поэтому вы можете калибровать его в зависимости от проекта.
STAT: Многие представленные на рынке экраны имеют охват более 100% sRGB. Таким образом, создатели контента, работающие в цветовом пространстве sRGB, имеют более насыщенные цвета для работы в своих проектах. (источник)
ССЫЛКИ:
- https://en.
