Текст за изображением

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

Что делает этот инструмент «текст за изображением»

Инструмент собирает популярный эффект «текст за объектом» из трёх слоёв, наложенных на один холст. Первый слой — ваша исходная фотография, нетронутая. Второй слой — ваш текст. Третий слой — вырезанный главный объект, сохранённый как прозрачный PNG и нарисованный пиксель в пиксель по тем же координатам, что и первый слой. Поскольку верхний слой несёт ровно те же пиксели, что были на фото, везде, где он что-то сохраняет, объект будто стоит перед словами, а остальная сцена остаётся за ними. Ничего не стирается и не маскируется — вся иллюзия рождается исключительно из порядка отрисовки. Вырезание выполняет модель сегментации значимых объектов ISNet, работающая через onnxruntime-web на вашей машине. Веса модели весят примерно 40 МБ и скачиваются один раз, после чего браузер отдаёт их из кэша. Здесь нет ни загрузки на сервер, ни аккаунта, ни очереди, ни платы за изображение — именно поэтому на странице нет водяных знаков и лимитов. После того как модель вернёт маску, второй проход сужает её границу на один пиксель и вычищает остаточный цвет фона из полупрозрачных краевых пикселей. Здесь этот шаг важнее, чем в обычном удалении фона: объект лежит поверх вашего текста, поэтому краевой пиксель, всё ещё окрашенный старым фоном, читался бы как цветная кайма поперёк букв. Сужение на один пиксель ничего не стоит в такой композиции, потому что под ним находится тот же самый пиксель нетронутой фотографии с первого слоя. Изображения длиннее 2560 пикселей по большей стороне сначала уменьшаются до этого предела, потому что очистка краёв — попиксельный проход с опросом соседей, и 24-мегапиксельное фото с телефона застопорило бы браузер на много секунд. Экспорт всегда в PNG, чтобы частичная прозрачность текста и мягкие края объекта сохранились в целости.

Когда нужен текст за объектом

Эффект окупается всякий раз, когда заголовку приходится делить пространство с фотографией и вам не хочется жертвовать ни тем, ни другим. Заголовок, плоско наложенный на изображение, всегда выглядит наклеенным. Когда объект перекрывает надпись, появляется ощущение глубины, которое читается как осознанная работа дизайнера, а не как запоздалая мысль, — и при этом не нужны ни дизайнер, ни подписка. Чаще всего это портретный постер или баннер профиля, где имя или одно слово располагается за плечами и головой человека. Не хуже эффект работает и на предметной съёмке, где название бренда или цена уходит за товар, чтобы товар оставался главным героем. Массово этот приём разошёлся в соцсетях: он хорошо смотрится на превью видео, на обложках сторис и рилсов, на оформлении канала, потому что при уменьшении до небольшой плитки держится лучше, чем полоса с подписью. Обложки подкастов, афиши мероприятий, графика для фитнеса и спорта, макеты в стиле обложек альбомов — везде используется тот же трюк. Это ещё и практичный ответ на верстальную проблему. Когда у фотографии пёстрый фон и нет чистого места под текст, спрятанная за объектом часть надписи даёт глазу опору и превращает визуальный шум в элемент композиции. А поскольку всё работает локально, эффект безопасен для фотографий, которые вы в принципе не отдали бы стороннему сервису: снимков детей, клиентов или ещё не вышедших продуктов.

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

Как разместить текст за изображением

Четыре шага, и реальное время занимает только первый. После вырезания всё перерисовывается мгновенно, поэтому с формулировкой и расположением можно экспериментировать сколько угодно до экспорта.

1

Загрузите фотографию с одним отчётливым объектом переднего плана — человеком, питомцем или отдельным товаром. Оставьте вокруг объекта свободное место, чтобы тексту было где разместиться.

2

Нажмите «Вырезать объект». Первый запуск скачивает модель сегментации примерно на 40 МБ, последующие сразу переходят к вычислению.

3

Введите текст, затем задайте шрифт, насыщенность, цвет, размер, поворот, интервалы и непрозрачность. Перетаскивайте прямо по предпросмотру, чтобы двигать текст, или используйте ползунки позиции для точной подстройки.

4

Нажмите «Собрать и экспортировать PNG». Три слоя сводятся в одно изображение в полном рабочем разрешении, и ссылка на скачивание появляется под предпросмотром.

Часто задаваемые вопросы

Нет. Модель сегментации скачивается в ваш браузер и выполняется там через onnxruntime-web, а три слоя сводятся на холсте на этой же странице. Фотография не покидает устройство — именно поэтому первый запуск делает паузу, чтобы получить около 40 МБ весов модели, вместо того чтобы быстрее отправить изображение куда-то ещё.
Перед первым запуском нужно скачать модель ISNet весом примерно 40 МБ. На обычном соединении это обычно от 10 до 30 секунд. Затем браузер кэширует файл, поэтому каждое следующее изображение сразу переходит к вычислению, которое обычно занимает несколько секунд в зависимости от вашего железа.
Модель обучена находить один значимый объект переднего плана. После её работы инструмент измеряет, какую долю кадра реально сохранило вырезание. Ниже одного процента результат считается неудачей, и инструмент отказывается работать, вместо того чтобы выдать вам изображение, где текст просто плоско лежит на всей фотографии, и делать вид, что всё получилось. У пейзажей, толп, раскладок flat lay и скриншотов нет единственного доминирующего объекта, и эту проверку они обычно не проходят.
Если вырезание сохраняет больше 97 процентов кадра, слой объекта полностью перекрыл бы текст, и экспорт выглядел бы точно так же, как исходник. Это второй случай тихого провала, поэтому инструмент останавливается и просит фотографию, где вокруг объекта есть свободное место.
Сегментация значимых объектов даёт мягкую альфа-маску, а у тонких прядей, меха, смаза движения, вуали и прозрачных предметов вроде стекла или воды просто нет чёткой границы, которую можно найти. Инструмент сужает маску на один пиксель и вычищает остаточный цвет фона из полупрозрачных краевых пикселей — это убирает большую часть цветной каймы, которая иначе легла бы поверх букв, — но придумать детали, которых маска не захватила, он не может. Лучший результат дают объекты с чётким контуром.
Всё, что длиннее 2560 пикселей по большей стороне, уменьшается до этого предела перед обработкой. Очистка краёв — попиксельный проход, который вдобавок опрашивает соседей каждого пикселя, поэтому на 24-мегапиксельном фото он надолго заморозил бы вкладку и занял бы несколько полнокадровых буферов. В таких случаях предпросмотр сообщает исходный и рабочий размеры. 2560 пикселей более чем достаточно для превью, постов в соцсетях и постеров экранного размера.
Пока нет. Список шрифтов ограничен гарнитурами, которые есть в распространённых операционных системах, потому что экспорт рисуется через текстовый API холста, а веб-шрифт, не успевший загрузиться, молча подменился бы другой гарнитурой — и скачанный PNG не совпал бы с тем, что вы видели в предпросмотре. Если нужна конкретная гарнитура, экспортируйте собранный PNG здесь и наберите текст в своём редакторе.
Слой текста поддерживает частичную непрозрачность, а у вырезанного объекта мягкие полупрозрачные края. JPEG пришлось бы сплющить и то, и другое, а заодно он добавил бы артефакты сжатия ровно вдоль контрастной границы между буквами и объектом — то есть именно там, на чём и держится весь эффект. PNG оставляет это перекрытие чистым.

Другие инструменты для изображений

Откройте другие мощные инструменты для редактирования изображений

Сжать Изображение

Уменьшить размер

Изменить Размер

Изменить размеры

Обрезать Изображение

Вырезать область

Конвертировать Формат

Изменить формат

Фоторедактор

Редактировать фото

Повернуть Изображение

Повернуть

Отразить Изображение

По горизонтали/вертикали

Добавить Водяной Знак

Водяной знак

Добавить Рамку

Добавить рамку изображения

Закругленные Углы

Добавить закругленные углы

Фильтры

Яркость/Контраст

Размыть Лицо

Скрыть лица

Мозаика

Размыть области

Удалить Фон

Удалить фон

Улучшить Изображение

ИИ апскейл

Добавить Текст

Добавить текст на изображение

Коллаж

Объединить несколько изображений

HTML в Изображение

Веб в изображение

GIF в Последовательность

Извлечь кадры

Удалить пустые поля

Удалить пустые края

Пакетное переименование изображений

Безопасное массовое переименование файлов

Круговая обрезка

Обрезка изображений в круг

Чёрно-белое

Конвертация изображений в оттенки серого

Разделить изображение

Разрезать изображение на сетку

Объединить изображения

Объединить изображения в одно

Изменить DPI

Установить метаданные DPI изображения

Изображение в Base64

Кодирование изображений в Base64

Изображения в PDF

Объедините изображения в один PDF

Конвертер HEIC в JPG

Конвертируйте фото iPhone из HEIC в JPG

Удаление EXIF

Просмотр и удаление скрытых метаданных фото, включая геолокацию GPS

Генератор фавиконок

Полный набор иконок и HTML-код

Цветовая палитра

Извлечь цвета из изображения

Base64 в изображение

Декодировать Base64 обратно в изображение

HEIC в PNG

Конвертировать фото HEIC с iPhone в PNG без потерь

Пипетка

Узнать HEX, RGB и HSL любого пикселя

Создание подписи

Нарисуйте подпись и скачайте её прозрачным PNG

Удаление фона подписи

Чернила с бумаги на прозрачном фоне

Прозрачный фон

Сделать фон прозрачным