Что такое Наложение и смешивание изображений?

Наложение/смешивание изображений объединяет два изображения с помощью режимов наложения: умножение, экран, перекрытие и другие. Создавайте двойные экспозиции, текстурные наложения или художественные эффекты. Вся обработка выполняется конфиденциально на вашем устройстве.

Доступны все 16 режимов смешивания Canvas2D: обычный, умножение, экран, перекрытие, затемнение, осветление, осветление цвета, затемнение цвета, жёсткий свет, мягкий свет, разница, исключение, цветовой тон, насыщенность, цвет и яркость. Непрозрачность регулируется от 0 до 100% с тонким шагом. Перетащите оверлей прямо на превью или прицельте его одним кликом к любой из девяти точек сетки выравнивания, затем измените размер, поверните или зеркально отразите по горизонтали или вертикали. Готовый результат экспортируется в PNG (с сохранением прозрачности), JPEG (с ползунком качества для меньшего веса) или WebP, а отдельная кнопка копирует изображение прямо в буфер обмена.

Как использовать

  1. Загрузите базовое изображение и изображение-наложение. Оба отображаются рядом с живым предварительным просмотром результата смешивания.
  2. Выберите режим наложения (умножение, экран, перекрытие, затемнение, осветление, осветление основы и т. д.) и отрегулируйте непрозрачность наложения с помощью ползунка.
  3. Расположите оверлей с помощью сетки быстрого выравнивания, отразите его, если он развернут не той стороной, и скачайте результат в PNG, JPEG или WebP — либо скопируйте в буфер обмена, чтобы вставить в любом приложении.

Когда использовать

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

Результат

Фотограф загружает портрет в качестве базового изображения и городской пейзаж в качестве наложения, выбирает режим «экран» с непрозрачностью 60% для создания мечтательного эффекта двойной экспозиции, затем скачивает итоговый композит.

Частые вопросы

Что на самом деле делают умножение и экран с пикселями?
Умножение затемняет: перемножает RGB-каналы обеих картинок и делит на 255: чёрное остаётся чёрным, белое становится прозрачным. Экран действует наоборот, осветляет, словно два проектора суммируют картинку: белое остаётся белым, чёрное превращается в прозрачность.
Почему результат обрезается по размеру базового изображения?
Холст берёт размер базового изображения. Если накладываемое изображение больше, лишние пиксели в PNG не попадут. Заранее уменьшите оверлей или увеличьте основу так, чтобы обе картинки покрывали одну и ту же область.
Можно ли двигать, масштабировать или зеркалить оверлей после переноса на базу?
Да. Перетащите оверлей в любое место превью или используйте сетку быстрого выравнивания, чтобы прилипнуть к одной из девяти позиций (углы, грани и центр). Ползунки задают масштаб от 10 до 300% и поворот от -180° до 180°, а пара кнопок отражает его по горизонтали или вертикали. «Сбросить трансформацию» возвращает оверлей в центр с 100% масштабом.
Разница и исключение дают странные неоновые цвета, это баг?
Нет, это корректное поведение. Разница вычитает каналы и берёт абсолютную величину, исключение работает похоже, но с меньшим контрастом. Оба дают инвертированный вид и пригодятся для сравнения двух почти одинаковых картинок или художественных эффектов.
Почему PNG выходит с чёрным фоном вместо прозрачного?
JPEG не сохраняет прозрачность, поэтому при выборе JPEG альфа-канал сводится на белый фон — для прозрачного результата берите PNG или WebP. Режим смешивания тоже важен: умножение делает чисто-белый прозрачным только при 100% непрозрачности, а обычный режим ниже 100% всегда показывает базу за оверлеем.

Похожие инструменты