x
 
Сергей Чикин
23 мая 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

В про­шлом совете я рас­ска­зал про квад­рат Иттена, кото­рый пока­зы­вает, что цвета неоди­на­ковы по ярко­сти. Сегодня мак­си­мально его детализируем.

Почти во всех гра­фи­че­ских редак­то­рах есть режим нало­же­ния слоев color. В этом режиме от слоя оста­ётся цвет, а яркость берётся с нижнего.

Если в ниж­ний слой поло­жить вер­ти­каль­ный ч/б гра­ди­ент, а в верх­нем гори­зон­тально раз­вер­нуть цве­то­вой спектр с таким нало­же­нием, мы уви­дим вол­шеб­ную картину:

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

Раз­ная яркость цве­тов дик­тует прин­ципы их сочетания:

ГОСТ 12.4.026‑2015 опи­сы­вает сиг­наль­ные и кон­траст­ные им цвета. Для крас­ного, синего и зелё­ного, кон­траст­ный цвет — белый. Для жёл­того — чёр­ный.

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

Гра­ди­ент­ные заливки айо­сов­ских ико­нок учи­ты­вают эту осо­бен­ность цве­тов. Эпло­вые ико­ни­сты сме­щают верх­ний цвет гра­ди­ента в сто­рону Линии Силы, чтобы цвет не мут­нел. Крас­ный и зелё­ный жел­теют, а синий голубеет:

P. S. Это был иконочный совет. Пилите пиктограммы в интерфейсах? Заказчик ругается на иконки? Графика не цепляет? В чём сила, брат? Присылайте вопросы

Поделиться
Отправить

Комментарии

Мизраил Космо
вчера

«Линии силы» — это побочный эффект использования RGB/HSL/HSV моделей плюс ограниченность цветового профиля графического редактора (для дисплеев это почти всегда sRGB). Первые нелинейно смешивают и меняют цвета относительно яркости, а вторые обрезают их, чтобы помещались в старый экранный диапазон (современные моники способны показывать гораздо больше цветов). На практике без правильных инструментов люди просто на глаз берут цвета схожей яркости.

Проблема нелинейности фиксится использованием других цветовых моделей, которые работают относительно воспринимаемой яркости. Это знакомая фотографам модель Lab (яркость, синий-жёлтый, зелёный-магента) и его цилиндрическая форма — LCH (яркость, цветастость, оттенок hue). Палитры на основе этой модели получаются гармоничнее и логичнее: без тёмных синих, противопоставленных ярким жёлтым.

Для граф. дизайна в играх запилил генератор цветовых палитр, который работает на LCH и смешивает цвета в XYZ (линейное пространство) и/или Lab:
https://comigo.itch.io/palettes

Прикрепляю аналог квадрата Иттена в LCH.

Результат лучше, но всё равно видимые полосы есть — только уже в насыщенности. Тут приплывает проблема ограниченности цветового спектра в вебе, sRGB и не только, и об этом хорошо рассказывает Lea Verou в своём блоге:
https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Там же есть информация о LCH и введении управляемого цветового пространства для веб-страниц в четвёртом слое стандартов цветов CSS: CSS Color Module, Level 4.

Если вкратце, то LCH и Lab создают цвета, треть которых показать невозможно — из насыщенных цветов sRGB показывает только спектр от тёмных фиолетовых до ярких жёлтых, через красные, минуя синие оттенки. Сочные цвета — что в статье Lea Verou, что в моём генераторе — приглушаются по насыщенности, чтобы попасть в sRGB.

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

1 Как подружить иконки. Сетка Должна ли иконка притворяться глифом Как подружить иконки. Графические рифмы




Недавно всплыло

Как работать в Фигме быстрее. Часть 3 1 1 3 Как разделать папайю 2