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