Sketch: подробно о режимах смешивания

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

В Sketch есть множество режимов смешивания, но я расскажу о тех, которые я использую чаще всего: Multiply, Screen, Lighten и Overlay.

Надеюсь, вам понравится!

Multiply (эффект умножения)

Данный режим получил свою популярность благодаря эффекту двухцветных фото в новом брендинге Spotify. Как предполагает название инструмента, его работа заключается в усилении цветовых свойств каждого слоя. Мы прекрасно знаем, что у каждого пикселя есть свой цвет, который определяется заданным значением красного, зеленого и синего, в диапазоне от 0 до 255. Для любителей математики, в Sketch реализована возможность конвертировать это в шкалы со значением от 0 до 1 таким образом, чтобы в результате такого умножения, результат не превышал 255.

Итак, как это выглядит на практике:

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

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

Обычный режим смешивания (слева) и умножение (справа)
Обычный режим смешивания (слева) и умножение (справа)

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

Применение умножения для слоя с цветом #FF465D
Применение умножения для слоя с цветом #FF465D

Screen (экранирование)

Этот функционал, обратный умножению, что означает:

  • Черные пиксели становятся прозрачными
  • Белые пиксели становятся абсолютно непрозрачными.

В следующем примере, я хотел применить объект с черным фоном поверх изображения:

Screen
Обычный режим смешивания (слева) и экранирование (справа)

Lighten (осветление)

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

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

Lighten
Применение слоя с  #103661 используя осветление.

Overlay (наложение)

Режим наложения – это комбинация режимов умножения и экранирования. Он включает в себя более сложную математику. Основное, что необходимо понимать о данном режиме то, что он применяет умножение для более темных пикселей, а эранирование к более ярких. Визуально, это создает эффекта увеличения контраста изображения:

Overlay
Применение эффекта наложения увеличит контраст

В Sketch есть 15 режимов смешивания, мы рассмотрели только часть из них. Надеюсь, эта статья вдохновит вас на работу с другими режимами. Вот несколько полезных ссылок по теме:

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5