«Наложить одну картинку на другую» — это простое описание работы со слоями. Одна картинка задаёт холст, а вторая становится подвижным слоем поверх неё. Верхнее изображение можно растянуть на весь холст, уменьшить до размера логотипа или сделать полупрозрачным, чтобы были видны обе фотографии.
У этой задачи много бытовых названий: вставить фото в фото, добавить картинку на картинку, совместить фотографии, сделать наложение или эффект «картинка в картинке». Но набор нужных инструментов всегда один: порядок слоёв, положение, размер, непрозрачность и формат экспорта.
Самый короткий путь — открыть OverlayImage.app, загрузить основную картинку, добавить вторую и расположить её прямо на холсте. Ниже разберём этот процесс и подберём настройки для самых частых вариантов.
Чем «поверх» отличается от «рядом»
До начала работы решите, должны ли изображения занимать общее пространство.
Когда одна картинка находится поверх другой, области их холста пересекаются. Верхняя может закрывать часть нижней, а прозрачность позволяет оставить видимыми обе. Такая структура нужна для логотипа, водяного знака, текстуры, стикера, фотографии-вставки или двойной экспозиции.
Когда две картинки стоят рядом, ни одна не перекрывает другую. Их полная ширина или высота сохраняется на новом, более крупном холсте. Это уже не наложение, а объединение — удобный вариант для сравнений «до и после», вариантов товара, инструкций и фотографий процесса.
OverlayImage.app умеет и то и другое. Выберите Наложение, если одна картинка должна лежать поверх другой. Используйте Рядом, Друг под другом или Сеточный коллаж, если каждый исходник нужно показать целиком.
Как поместить одну картинку поверх другой
Шаг 1. Выберите картинку, которая задаст холст
Загрузите изображение, размеры и композицию которого важнее всего. Если добавляете логотип к фотографии товара, основной должна стать фотография товара. Если помещаете портрет в декоративную рамку, основным изображением может быть рамка или фон — ориентируйтесь на размеры, которые нужно сохранить.
Представьте основную картинку листом бумаги. Все остальные изображения будут располагаться относительно её краёв.
Шаг 2. Добавьте картинку, которая должна быть сверху
Нажмите Добавить слой и откройте второй файл. Он появится как выбранный слой. Особенно удобны прозрачные PNG и WebP: невидимая область вокруг объекта не закрывает нижнюю фотографию.
Если у верхней картинки виден лишний белый или цветной прямоугольник, он уже является частью файла. Уменьшение непрозрачности сделает весь прямоугольник полупрозрачным, но не удалит его. Для аккуратного логотипа или вырезанного объекта берите исходник с прозрачным фоном.
Шаг 3. Переместите и измените размер верхней картинки
Перетащите выбранный слой в нужное место. Потяните за угловой маркер, чтобы изменить размер без искажения пропорций. Если изображение должно стоять точно посередине, воспользуйтесь кнопкой выравнивания по центру.
Для небольшой фотографии-вставки оставьте намеренный отступ от внешнего края. Рамка, которая почти касается границы, часто выглядит случайной. Логотип или подпись лучше размещать на относительно спокойном участке, чтобы они оставались читаемыми. Полноразмерный слой увеличьте до краёв холста, если разрешение исходника позволяет. Если верхняя картинка не покрывает холст при максимальном масштабе, возьмите более крупный файл, а не пытайтесь превысить ограничение редактора в 300%.
Точные поля X и Y пригодятся для одинакового размещения в серии композиций. Запишите координаты и масштаб первой картинки, а затем повторите значения для файлов с такими же размерами.
Шаг 4. Решите, какая часть каждого изображения должна быть видна
При непрозрачности 100% в обычном режиме все непрозрачные пиксели верхнего файла полностью перекрывают слой под ним. Прозрачные пиксели исходника остаются прозрачными. Снижение непрозрачности открывает нижнее изображение, не меняя сам способ смешивания цветов.
Для обычного водяного знака чаще всего достаточно режима Обычный и сниженной непрозрачности. Для художественного совмещения фотографий попробуйте Умножение, Экран, Перекрытие или Мягкий свет. Всегда сравнивайте результат с обычным режимом: эффектное смешивание иногда маскирует ошибки цвета или ухудшает читаемость текста.
Для выбранного слоя также доступны яркость, контраст, насыщенность и размытие. Они помогают вписать небольшую фотографию в окружающую сцену или сделать текстуру поддерживающей, а не доминирующей.
Шаг 5. Скачайте один готовый файл
Выберите PNG, JPEG или WebP и скачайте результат. Два исходника будут отрисованы как один выходной файл, а оригиналы останутся отдельными и неизменёнными.
PNG нужен, когда готовый холст должен сохранять прозрачность или содержит чёткие графические края. JPEG подходит для законченной фотографии на непрозрачном фоне. WebP выбирайте для компактного изображения на сайте с хорошей поддержкой в современных браузерах.
Четыре распространённых варианта «картинки на картинке»
Логотип в углу
Оставьте логотип небольшим, сохраните свободное пространство вокруг и используйте обычный режим. Если у основной фотографии высокий контраст, снижайте непрозрачность умеренно: слишком бледный знак исчезнет на маленьком экране.
Водяной знак по центру
Крупный центральный знак защищает пробный материал, но не должен мешать оценить объект. Начните со средней непрозрачности и проверьте светлые и тёмные участки снимка. Знак, хорошо читаемый на небе, может пропасть на фоне тёмной одежды.
Фотография-вставка
Это небольшая прямоугольная картинка внутри более крупной сцены. Такой приём подходит для реакций, деталей, фрагментов карты, инструкций и наглядных сравнений. Соблюдайте одинаковый отступ. Если вставке нужна декоративная рамка, добавьте её в исходный файл заранее: текущий редактор размещает изображения, но не создаёт рамки автоматически.
Смешивание фотографий на весь кадр
Увеличьте верхнее фото так, чтобы оно покрывало почти весь холст, если размеры исходника это позволяют; иначе возьмите более крупный файл. Снизьте непрозрачность или выберите режим наложения. Положение не менее важно, чем эффект: найдите связь между лицами, горизонтом, источниками света и направляющими линиями. Даже небольшое смещение сильно меняет видимые детали.
Как устроен порядок трёх и более слоёв
Каждый новый верхний объект попадает в стопку. Основное изображение остаётся внизу, а добавленные слои можно перемещать вперёд и назад относительно друг друга. Передний слой способен закрыть все нижние. Задний будет виден только в тех местах, где изображения сверху прозрачны.
Например, графика для социальной сети может состоять из:
- Фотографии товара как основного изображения.
- Лёгкой цветной заливки поверх фото.
- Ценника поверх заливки.
- Логотипа на самом переднем плане.
Перед изменением положения или вида слоя выбирайте его миниатюру. Если картинку нельзя нажать на холсте из-за перекрывающего объекта, выберите миниатюру и переместите слой вперёд.
Когда лучше выбрать объединение
Используйте Рядом или Друг под другом, если оба исходника должны быть видны целиком. Для трёх и более полных изображений подойдёт Сеточный коллаж. В этих макетах редактор выводит изображения без настроек положения, непрозрачности, смешивания и фильтров, которые действуют только при наложении. При переключении макета загруженные файлы сохраняются.
Ошибки, которых стоит избегать
Верхнее изображение слишком маленькое
«Маленький» не всегда означает «ненавязчивый». Миниатюрный логотип с тонким текстом после экспорта или сжатия в социальной сети может превратиться в неразборчивое пятно. Проверяйте его при обычном размере просмотра.
Случайно закрыт главный объект
Не перекрывайте лица, названия товаров, инструкции и важные края, если это не часть замысла. Непрозрачность — способ довести композицию, а не единственное средство исправить неудачное расположение.
Слишком раннее объединение слоёв
Оставляйте слои независимыми до завершения композиции. После сведения нескольких элементов в один исходник изменить только один из них сложнее. В браузерном редакторе верхние файлы остаются раздельными до скачивания; можно добавить до пяти таких слоёв.
Ожидание прозрачности от JPEG
JPEG не поддерживает прозрачные пиксели. Для верхнего изображения с невидимым окружением используйте PNG, прозрачный WebP или SVG.
Часто задаваемые вопросы
Как называется размещение одной картинки на другой?
Обычно это называют наложением изображений, фотоналожением, совмещением или композицией «картинка в картинке». Иногда говорят «объединение изображений», хотя объединение чаще означает размещение целых картинок без перекрытия.
Можно ли наложить фото на фото без Photoshop?
Да. Браузерный редактор слоёв даёт все необходимые для статичной композиции настройки: положение, размер, непрозрачность, режим наложения и экспорт. Устанавливать настольную программу не потребуется.
Может ли верхняя картинка быть прозрачной?
Да. Используйте исходник с прозрачностью — PNG, WebP или SVG. Кроме того, можно уменьшить непрозрачность любого выбранного верхнего слоя.
Как поместить картинку позади другого верхнего слоя?
Выберите её миниатюру и нажмите кнопку перемещения слоя назад. Основная картинка остаётся фоном холста, а добавленные верхние слои можно менять местами между собой.
Загружаются ли фотографии в интернет при объединении?
OverlayImage.app обрабатывает рабочие файлы в текущем браузере. Они не отправляются на сервер обработки изображений и не сохраняются в облачном проекте.
Наложите одну картинку на другую прямо сейчас. Если нужно подробнее разобраться в форматах и режимах смешивания, перейдите к полному руководству по наложению изображений.