Наш канал в

Приложение Sketch – это, прежде всего, приложение для работы с векторными изображениями, и, хотя возможности редактирования растровых изображений ограничены, вы можете быстро создавать крутые duo-tone изображения. Чтобы добиться этого, мы собираемся использовать цвета заливки в комбинации с различными режимами смешивания (blending modes).

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

Сегодня мы разберемся с шестью режимами смешивания: SaturationMultiplyScreenOverlayDarken, and Lighten.

Saturation Blending Mode (Насыщенность)

Saturation blending mode можно использовать для изменения интенсивности цвета на изображении. Цвет рассчитывается путем комбинации яркости и оттенка цвета изображения с насыщенностью цвета заливки.

Multiply Blending Mode (Умножение)

Multiply blending mode работает путем умножения яркости цвета заливки на изображение. Это удаляет все белые участки и заменяет их цветом заливки.

Screen Blending Mode (Осветление)

Screen blending mode противоположен режиму смешивания Multiply. Он удаляет все черные участки и заменяет их цветом заливки.

Overlay Blending Mode (Наложение / Перекрытие)

Overlay blending mode представляет собой смесь режимов смешивания Multiply и Screen. Он использует комбинацию Screen blending mode для светлых пикселей и Multiply для темных пикселей.

Darken Blending Mode (Замена светлого)

Darken blending mode можно использовать для настройки цвета бликов на изображении. Он вычисляет, какие пиксели изображения темнее цвета заливки. Все пиксели, которые светлее цвета заливки, заменяются цветом заливки, тогда как более темные пиксели остаются неизменными.

Lighten Blending Mode (Замена темного)

Lighten blending mode является полной противоположностью Darken blending mode и может использоваться для настройки цвета теней на изображении. Sketch определяет, какие пиксели темнее цвета заливки, и заменяет их им.

Режимы смешивания в действии

Если вы похожи на меня, то вам больше нравится практика, чем теория. Пришло время для веселой части! Давайте попробуем эти режимы смешивания на практике.

Создание черно-белых изображений

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

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Поскольку режим смешивания Saturation объединяет оттенок и яркость с насыщенностью, изображение будет становиться черно-белым всякий раз, когда насыщенность или яркость цвета заливки установлены на 0. Вы можете проверить это в палитре цветов HSB.

Если вы сейчас смотрите на палитру цветов RGB, нажмите на метку RGB, и она переключится на HSB.

Добавление цвета к черно-белым изображениям

Теперь, когда вы преобразовали изображение в черно-белое, попробуйте добавить на него немного цвета. Создайте другую заливку с цветом по своему вкусу и измените режим смешивания на Multiply. Это заменит все белые части вашего изображения на выбранный вами цвет.

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Изменение режима смешивания на Screen удалит все черные участки и заменит их цветом заливки.

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Изменение режима смешивания на Overlay создает смесь режимов наложения Multiply и Screen, когда полутона заменяются цветом заливки.

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Создание duotone изображений

Spotify снова сделал популярными duo-tone изображения. Duo-tone изображения используют два цвета, которые определяют блики и тени изображения. Для достижения наилучшего эффекта важно преобразовать изображение в черно-белое с помощью метода смешивания Saturation, описанного выше, перед добавлением дополнительных цветов.

Затем добавьте еще один слой заливки и замените блики изображения, выбрав нужный цвет. Я собираюсь выбрать #5EDC1A. Теперь измените режим смешивания этого цвета заливки на Multiply, чтобы заменить вашим цветом белые участки на изображении.

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Добавьте еще один слой заливки сверху и выберите цвет, который заменит тени изображения. В моем примере это #041674. Измените режим смешивания этой заливки на Lighten, и вот у вас получилось duo-tone изображение.

Режимы смешивания для создания цветных duo-tone изображений в Sketch

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

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

Режимы смешивания для создания цветных duo-tone изображений в Sketch

Режимы смешивания для создания цветных duo-tone изображений в Sketch

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

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

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

Каллиграфия и леттеринг для начинающих

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

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

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