Стрелки и подписи на обучающих скриншотах
Добавьте на скриншот стрелку, указывающую на конкретную кнопку, и короткую текстовую подпись с описанием шага — так обучающий материал или справка становятся понятнее.
Нажмите на элемент на изображении, чтобы изменить его стиль, или сначала добавьте новый элемент
Загрузите изображение, нажмите, чтобы добавить текст, эмодзи-стикер, стрелку, прямоугольную или круглую рамку, перетаскивайте для изменения положения, масштабирования и поворота, меняйте содержимое текста и цвет — подходит для подписей к обучающим скриншотам, постов в соцсетях и разметки карточек товаров. Всё происходит в браузере на устройстве, без загрузки на сервер.
Редактирование и объединение элементов происходят полностью в браузере, изображение не проходит через какой-либо сервер
Текст, эмодзи-стикеры, стрелки, прямоугольники, круги — покрывают большинство потребностей в пояснениях
Перетаскивайте для изменения положения, тяните за точки для масштабирования и поворота, меняйте в любой момент без риска ошибиться
Не нужна регистрация или оплата, на экспортированном результате нет никаких водяных знаков
Типичные сценарии
Пояснение к обучающему материалу, оформление поста в соцсети или разметка карточки товара — добавьте нужный элемент и перетащите его на место.
Добавьте на скриншот стрелку, указывающую на конкретную кнопку, и короткую текстовую подпись с описанием шага — так обучающий материал или справка становятся понятнее.
Добавьте заголовок или эмодзи-стикер на фото для публикации в соцсетях — это придаёт изображению индивидуальный стиль и лучше привлекает внимание.
Обведите прямоугольной или круглой рамкой ключевые преимущества или детали на фото товара, добавив текстовое пояснение — так информация на рекламном изображении становится нагляднее.
Типы элементов
Разные типы элементов подходят для разных задач, все добавленные элементы можно свободно перетаскивать, масштабировать и поворачивать.
| Тип элемента | Настраиваемые свойства | Подходит для |
|---|---|---|
| Текст | содержимое, цвет, жирность, размер, положение, угол поворота | заголовки, подсказки, короткие пояснения |
| Эмодзи-стикер | размер, положение, угол поворота (цвет встроен в сам эмодзи) | декоративное оформление, выражение эмоций, акценты |
| Стрелка | цвет, толщина линии, размер, положение, угол поворота | указание на конкретную кнопку, область или деталь на скриншоте |
| Прямоугольная рамка | цвет, толщина линии, размер, положение, угол поворота | выделение прямоугольной области на изображении |
| Круглая рамка | цвет, толщина линии, размер, положение, угол поворота | выделение точки или круглой области на изображении |
Способ работы со всеми элементами единый: перетащите сам элемент для изменения положения, тяните за точку в правом нижнем углу для масштабирования, за точку в правом верхнем углу — для поворота, нажмите на точку в левом верхнем углу для удаления; при выборе элемента панель ниже покажет доступные для этого типа свойства.
Как использовать
Не нужно устанавливать никаких программ — всё происходит прямо в браузере, результат виден сразу.
Нажмите, чтобы выбрать файл, или перетащите изображение на страницу — поддерживаются JPG, PNG, WebP, GIF, до 20 МБ, обработка одного изображения за раз.
Нажмите, чтобы добавить текст, стрелку, прямоугольник, круг, или нажмите на кнопку эмодзи-стикера — новый элемент появится в центре изображения.
Перетащите элемент для изменения положения, тяните за точку в правом нижнем углу для масштабирования, за точку в правом верхнем углу — для поворота, в панели ниже измените содержимое текста и цвет.
Убедившись, что результат нравится, нажмите «Скачать» — все элементы будут объединены с изображением с текущим стилем и сохранены на устройство.
Техническое пояснение
Положение и размер каждого элемента сохраняются в процентах от ширины и высоты изображения, а не в фиксированных пикселях — поэтому независимо от того, насколько крупно или мелко отображается изображение, результат в редакторе полностью соответствует итоговому объединению на изображении с исходным разрешением после нажатия «Скачать». При скачивании изображение перерисовывается через Canvas браузера, всё происходит на вашем устройстве, без обращения к какому-либо серверу.
Содержание текста, точка, на которую указывает стрелка, область, которую обводит рамка — всё это определяется вручную под конкретную композицию и содержание каждого изображения; композиция и ключевые моменты, которые нужно подчеркнуть, у разных изображений совершенно разные, и один и тот же набор координат и текста нельзя применить к другим изображениям. Поэтому инструмент создан для точной ручной разметки одного изображения — для нескольких изображений открывайте и обрабатывайте их по очереди.
Частые вопросы
Нет. Положение текста, стрелок и стикеров нужно определять вручную под конкретную композицию каждого изображения — например, точка, на которую указывает стрелка, у разных изображений совершенно разная, и один и тот же набор координат нельзя применить к другим изображениям, поэтому инструмент создан для точной ручной разметки одного изображения. Если нужно нанести одинаковый текст или водяной знак на несколько изображений с похожей композицией, используйте пакетный режим инструмента «Водяной знак».
Да. До скачивания в любой момент можно кликнуть по уже добавленному элементу на изображении, чтобы снова его выбрать, перетащить сам элемент для изменения положения, потянуть за точку в правом нижнем углу для изменения размера, за точку в правом верхнем углу — для поворота; в панели ниже также можно изменить содержимое текста и цвет. Реальное объединение с изображением происходит только при нажатии «Скачать» — правки до этого момента не влияют на оригинал.
Стикеры используют системные эмодзи, и внешний вид конкретного стиля отрисовки может немного отличаться в разных операционных системах и браузерах (например, один и тот же эмодзи выглядит по-разному на iOS и Android), но смысл и общий вид сохраняются одинаковыми; экспортированное изображение будет содержать эмодзи в том виде, в котором его отрисовало устройство на момент скачивания, и при дальнейшем открытии на других устройствах вид уже не изменится.
В текущей версии текст использует системный шрифт по умолчанию, поддерживается переключение жирного начертания и настройка своего цвета и размера, но смена шрифта и многострочный текст (переносы строк игнорируются) пока не поддерживаются — подходит для добавления коротких заголовков, подсказок или пометок. Для более сложного оформления добавьте несколько текстовых элементов и расположите их отдельно.
Полностью происходит в браузере на вашем текущем устройстве — во время редактирования предпросмотр рендерится напрямую на странице, а при скачивании все элементы перерисовываются и объединяются с изображением через Canvas браузера с учётом текущего положения, размера и угла поворота; оригинал никогда не загружается на какой-либо сервер.
Разметка по сути — это перерисовка и перекодирование: прозрачный канал PNG сохранится; но если у оригинала есть прозрачные области и он распознан как требующий кодирования в JPG, прозрачные участки будут заполнены белым фоном. Параметры съёмки EXIF, геометки и другие метаданные оригинала не сохраняются после перекодирования — если нужно отдельно просмотреть или удалить EXIF, используйте инструмент «Просмотр/удаление EXIF».
Без регистрации, без ожидания — обработали и сразу скачали.