Как делается Auto Tint? Инверсия иконок и текста в зависимости от фона

Кстати, кто-нибудь знает как такое делается? Auto Tint. Инверсия иконок и текста в зависимости от фона.

Скорее всего, использован режим наложения Exclusion или Difference.

Тоже так подумал, но нет.

Внутри Fill тоже нет?

image

Нету )

Давай проще сделаем – https://www.figma.com/file/xJCvbW3woyrXDaUnHZ9xKo/Untitled?node-id=0%3A1

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

Если коротко, то в порядке снизу вверх:

  1. сначала происходит максимальная насыщенность (100% красный цвет в режиме Saturation, не совсем понятно для чего, на финальном результате роли не играет, но делалось наверняка для контраста);
  2. инверсия (белый в Difference, то есть 100% инверсия);
  3. минимальная насыщенность (белый цвет, то есть лишённый оттенков цвет, в режиме Saturation — так мы превращаем элемент в чб);
  4. затем перекрытие х4 (б/ч/б/ч) для максимума контрастности (как я поняла, таким образом регулируется оттенок серого, на котором начинается видимая инверсия).

Зачем сделана маска + сильный background blur — тоже не понятно. Того же результата можно добиться, просто применив все эти настройки Fill на нужный нам элемент. Сохранил в библиотеку и применяй в один клик, так быстрее. Иначе придётся еб*цца с масками каждый раз, затрачивая на один элемент намного больше времени, чем если бы мы просто поменяли чёрный на белый :smile:

Резюмируя: идея интересная, но очень уж громоздкая и может быть полезна только в макете. Сверстать это будет сложно.

UPD: Поняла, зачем сделан блюр: на случай, если на фоне будет картинка. Детали под текстом/иконками будут сильно размыты, что улучшит читаемость. Разумно, но опять же — куууча манипуляций.
UPD2: Размытия фона под элементом, к слову, можно добиться простым применением соответствующего эффекта на том же элементе (Effects → Background Blur). Будут минимальные отличия от способа автора (слегка меняется поведение элемента на пограничных областях, которые типа ни в белый ни в чёрный), но я не вижу в этом ничего критичного.

1 симпатия

Жееесть )) Тоже как раз докопался до цветов. Спасибо огромное за информацию и время! Кто-то действительно заморочился по полной )

Блюр - да, если на фоне картинка. Так они “поймают” нужный цвет для фона бара.

Для вёрстки, конечно, такое рисовать не надо! Буквально недавно работал над дизайном продукта - у них самописный скрипт, который соотносит цвета фона и объектов на нём.

Круто, спасибо ещё раз!

1 симпатия