GIF и видео в рамах. Запись анимации

В конструкторе «Багетка» в рамы можно вставлять не только неподвижные фотографии, но и анимированные GIF-картинки и видео — они играют прямо внутри рамы. А готовую композицию можно записать в файл (GIF или видео) и разместить на сайте, в соцсетях или отправить в мессенджере. Эта страница объясняет всё по шагам, как для человека, который делает это впервые.

Примечание

Проще говоря: вы кладёте в раму живую картинку (GIF или ролик), нажимаете «Записать анимацию» — и получаете маленький файл, который можно выложить или отправить друзьям и клиентам. Он показывает ваши рамы с движением.

Что вы можете сделать — коротко

Что	Зачем это нужно	Где в программе
GIF в раму	Рама с «оживающей» картинкой: огонь, волны, мигающая надпись.	Кнопка «Фото» (или «Файл → Загрузить изображение»)
Видео в раму (с устройства)	Короткий ролик внутри рамы — как в цифровой фоторамке.	Та же кнопка «Фото»
Видео в раму по ссылке	Если ролик уже лежит в интернете как файл .mp4.	«Файл → Видео по ссылке (MP4)…»
Сохранить проект с видео	Чтобы ролики не потерялись и всё открылось снова.	Кнопка «Сохранить»
Записать анимацию в файл	Получить GIF или видео для сайта, соцсетей, мессенджеров.	«Файл → Записать анимацию (GIF / видео)…»
Красивые эффекты записи	Рамы появляются по очереди, камера наезжает или облетает рамы.	В окне записи, список «Анимация»

Что понадобится

Компьютер, планшет или смартфон с браузером (лучше Chrome, Edge или Safari последних версий).
Для GIF в раме — любой файл с расширением .gif. Для видео — файл .mp4 (подойдут также .webm и .mov с iPhone).
Помните про размеры: GIF — не больше 15 МБ и не больше 300 кадров; видео — не больше 50 МБ и не дольше 60 секунд.
Интернет нужен только для работы самой программы и для видео «по ссылке».

Часть 1. GIF в раме

Шаг 1. Нажмите кнопку «Фото»

В левом верхнем углу конструктора найдите чёрную кнопку «Фото» (на картинке — номер 1). Нажмите её: откроется окно выбора файла на вашем компьютере или телефоне.

Кнопка «Фото» в левой панели конструктора — Рис. 1. Кнопка «Фото» — цифра 1.

Шаг 2. Выберите GIF-файл

В открывшемся окне найдите нужный файл с расширением .gif и нажмите «Открыть». Если рам несколько, GIF попадёт в ту, которая сейчас выбрана (на ней рамка выделения). Чтобы выбрать другую раму — просто нажмите на неё до загрузки.

Шаг 3. Смотрите — картинка живая

Через секунду-две в раме появится ваша картинка, и она сразу начнёт двигаться. Внизу, в строке «Инфо», будет написано «Фото загружено: имя-файла.gif». Двигать, увеличивать и подгонять картинку внутри рамы можно так же, как обычное фото (панель «ФОТОГРАФИЯ»).

Рама с проигрывающимся GIF — Рис. 2. GIF играет внутри рамы (цифра 1 — область сцены).

Частая ошибка

GIF не двигается? Причины бывают три: (1) файл тяжелее 15 МБ или длиннее 300 кадров — тогда показывается только первый кадр; (2) на старых iPhone (до iOS 26) браузер Safari не умеет разбирать GIF по кадрам — картинка будет неподвижной, попробуйте видео в формате MP4; (3) вы загрузили не GIF, а обычную картинку.

Часть 2. Видео в раме

Способ А. Видео с вашего устройства (самый простой)

Делается точно так же, как с GIF: нажмите кнопку «Фото» (Рис. 1) и выберите на компьютере или телефоне файл видео — .mp4 (или .webm, .mov). Через пару секунд ролик заиграет внутри рамы. Звука не будет — это сделано специально (в браузерах видео без звука запускается само). Ролик идёт по кругу.

Рама с проигрывающимся видео — Рис. 3. Видео играет в раме. В строке «Инфо» внизу — название файла.

На телефоне: нажмите «Фото» в нижней панели, выберите «Видеотека» или «Галерея» и выберите ролик.

Примечание

Чтобы не ждать, лучше использовать короткие ролики — 5–20 секунд. Большое видео тормозит телефон и раздувает сохранённый проект.

Способ Б. Видео по ссылке

Подходит, если ролик уже лежит в интернете как отдельный файл. Ссылка должна вести прямо на файл и заканчиваться на .mp4 или .webm, например: https://example.com/videos/my-video.mp4.

Шаг 1. Откройте «Файл» → «Видео по ссылке (MP4)…»

Меню «Файл» — самое левое слово в строке меню вверху. Нажмите на него и выберите пункт «Видео по ссылке (MP4)…» (цифра 1).

Меню «Файл» с пунктом «Видео по ссылке (MP4)…» — Рис. 4. Меню «Файл» → «Видео по ссылке (MP4)…».

Шаг 2. Вставьте ссылку и нажмите «Вставить в раму»

В открывшемся окне вставьте ссылку в белое поле (цифра 1) и нажмите кнопку «Вставить в раму» (цифра 2). Появится надпись «Загружаю видео…», а через несколько секунд окно закроется и ролик заиграет в выбранной раме.

Рис. 5. Окно «Видео по ссылке»: 1 — поле для ссылки, 2 — кнопка «Вставить в раму».

Частая ошибка

Не сработало? Обычные ссылки на страницы YouTube, ВКонтакте, RuTube и т. п. не подходят — это ссылки на плеер, а не на файл. Программа сразу об этом скажет (Рис. 6). Скачайте видео себе на устройство и используйте способ А. Кроме того, сервер, на котором лежит файл, должен разрешать показывать его на других сайтах — если нет, вы увидите сообщение «Не удалось загрузить видео».

Сообщение о неподходящей ссылке — Рис. 6. Ссылка на страницу YouTube не подходит — цифра 1 показывает сообщение.

Часть 3. Как сохранить проект, если в нём есть видео

Обычный проект сохраняется в один файл .json. Если в рамах есть видео с вашего устройства, то при сохранении программа сама соберёт один архив .zip: в нём лежат и сам проект, и ваши ролики (в папке videos). Так ничего не потеряется.

Как сохранить

Нажмите кнопку «Сохранить» в левой панели (или сочетание клавиш Ctrl + S, на Mac — ⌘ + S), либо пункт «Файл → Сохранить» (цифра 1 на рисунке). Если браузер спросит, куда сохранить, выберите папку и нажмите «Сохранить». Файл будет называться примерно ArtsNet_20260923_1.zip. Если браузер не спрашивает и просто скачивает файл — он окажется в папке «Загрузки».

Меню «Файл» с пунктом «Сохранить» — Рис. 7. «Файл» → «Сохранить».

Как открыть сохранённый проект

Меню «Файл» → «Открыть проект» (цифра 1) или сочетание Ctrl + O. Выберите файл .zip (или .json, если видео в проекте не было). Проект откроется, и ролики заиграют снова — прямо из архива.

Меню «Файл» с пунктом «Открыть проект» — Рис. 8. «Файл» → «Открыть проект».

Примечание

Хорошо знать: (1) не распаковывайте .zip и не переименовывайте внутри него файлы — открывайте архив целиком; (2) видео, добавленное «по ссылке», хранится в проекте только как ссылка — если файл по ссылке удалят, ролик пропадёт; (3) если открыть проект без видеофайла (например, только .json), в раме останется неподвижная картинка-заставка из этого видео; (4) кнопка «Поделиться» отправляет получателю только эту неподвижную заставку, а не само видео — чтобы показать движение, используйте запись анимации (Часть 4).

Часть 4. Запись анимации: делаем GIF или видео

Программа умеет «снять» вашу композицию на камеру и сохранить её как файл. Внутрь попадёт всё, что видно на сцене, — в том числе GIF и видео, играющие в рамах. Запись идёт в реальном времени: ролик на 10 секунд записывается 10 секунд.

Шаг 1. Соберите композицию

Добавьте рамы, загрузите фотографии (и при желании GIF или видео), при необходимости поставьте рамы на стену. Запись снимает то, что вы видите на сцене.

Шаг 2. Откройте «Файл» → «Записать анимацию (GIF / видео)…»

Нажмите «Файл» и выберите пункт «Записать анимацию (GIF / видео)…» (цифра 1).

Меню «Файл» с пунктом «Записать анимацию» — Рис. 9. «Файл» → «Записать анимацию (GIF / видео)…».

Шаг 3. Выберите формат, анимацию и длительность

Откроется окно с четырьмя важными местами (см. Рис. 10):

1 — Формат. «GIF» — универсальная картинка, которая двигается сама (ширина до 900 пикселей). «Видео» — файл MP4 (или WebM), он чётче и легче для соцсетей (ширина до 1920 пикселей, Full HD). Программа записывает сцену в высоком разрешении независимо от размера окна браузера, поэтому наезд и облёт камерой остаются чёткими, а не «мыльными».
2 — Анимация. Выберите красивый эффект (подробно — в Части 5) или оставьте «Без анимации — как сейчас».
3 — Длительность. Выберите от 3 до 15 секунд. Чем длиннее — тем больше файл.
4 — «Начать запись». Нажмите, когда всё выбрано.

Рис. 10. Окно «Запись анимации»: 1 — формат, 2 — анимация, 3 — длительность, 4 — кнопка «Начать запись».

Частая ошибка

Если пункт «Видео» недоступен и рядом написано «браузер не поддерживает» — ваш браузер не умеет записывать видео. Выберите GIF или откройте конструктор в Chrome, Edge или Safari.

Шаг 4. Не трогайте сцену, пока идёт запись

Появится полоска, которая заполняется оранжевым (цифра 1 на Рис. 11). Не закрывайте вкладку, не переключайтесь на другие программы и не двигайте рамы — иначе запись получится с ошибками. Если передумали — нажмите «Отмена» (цифра 2). Когда полоска дойдёт до конца, программа ещё несколько секунд «Собирает файл» — это нормально.

Окно с полоской записи — Рис. 11. Идёт запись: 1 — полоска, 2 — кнопка «Отмена».

Шаг 5. Посмотрите результат

Через несколько секунд в окне появится ваш ролик — он уже играет (цифра 1 на Рис. 12). Под ним написано имя файла и его размер, например «ArtsNet_20260923_1.gif · 173 KB». Посмотрите, всё ли вас устраивает. Если нет — нажмите «Записать ещё раз» (цифра 4) и подберите другие настройки.

Готовый результат записи — Рис. 12. Результат: 1 — предпросмотр, 2 — «Скачать», 3 — «Поделиться файлом…», 4 — «Записать ещё раз».

Шаг 6. Сохраните или отправьте

«Скачать» (цифра 2) — файл сохранится на ваш компьютер или телефон (обычно в папку «Загрузки», на телефоне — в «Файлы» или «Галерею»). Дальше вы можете использовать его как любой другой файл.
«Поделиться файлом…» (цифра 3) — откроется системное окно вашего телефона или компьютера со списком приложений (Telegram, WhatsApp, ВКонтакте, почта и другие). Выберите нужное — файл уйдёт вместе с сообщением. Эта кнопка есть не везде: она появляется на телефонах, планшетах и в некоторых браузерах на компьютере. Если её нет — используйте «Скачать» и отправьте файл вручную.

Часть 5. Красивые эффекты для записи

Список «Анимация» (цифра 2 на Рис. 10) добавляет в ролик движение сцены. Что выбрать и что получится:

Эффект	Что вы увидите	Для чего хорош	Длительность
Без анимации — как сейчас	Сцена такая, как на экране. Двигаются только GIF и видео в рамах.	Показать рамы с живыми картинками.	3–5 с
Рамы появляются по очереди	Стена пустая, потом рамы одна за другой плавно появляются на своих местах, в конце — пауза на готовой экспозиции.	Эффектная подача выставки, рекламный ролик.	5–10 с
Плавный наезд камеры	Камера медленно приближается к группе рам.	Обратить внимание на композицию.	5–8 с
Облёт: камера идёт от рамы к раме	Сначала общий вид, потом камера по очереди «подлетает» к каждой раме, задерживается и возвращается к общему виду.	Показать каждую работу отдельно.	10–15 с (чем больше рам, тем дольше)

Эффект «Рамы появляются по очереди» — Рис. 13. «Рамы появляются по очереди»: пусто → первая рама → ещё → все рамы.

Эффект «Облёт» — Рис. 14. «Облёт»: общий вид → к первой раме → рама крупно → дальше по рамам.

Эффект «Плавный наезд» — Рис. 15. «Плавный наезд»: камера постепенно приближается.

Примечание

Совет: для «Облёта» ставьте 15 секунд — иначе камера будет двигаться слишком быстро. Для «Рамы появляются» на 3–5 рам хватает 5 секунд.

Часть 6. То же самое на телефоне

Всё работает и в мобильной версии конструктора — только меню открывается иначе.

Шаг 1. Откройте меню

Нажмите значок ≡ (три полоски) в правом верхнем углу. В открывшемся меню есть два новых пункта: «Видео по ссылке (MP4)» (цифра 1) и «Записать анимацию (GIF / видео)» (цифра 2).

Мобильное меню с пунктами «Видео по ссылке» и «Записать анимацию» — Рис. 16. Мобильное меню: 1 — видео по ссылке, 2 — запись анимации.

Шаг 2. Настройте запись

Окно записи на телефоне выглядит так же, как на компьютере: 1 — формат, 2 — анимация, 3 — длительность, 4 — «Начать запись».

Окно записи анимации на телефоне — Рис. 17. Окно записи на телефоне.

Шаг 3. Скачайте или поделитесь

Когда файл готов, нажмите «Скачать» (цифра 1) или «Поделиться файлом…» (цифра 2). Во втором случае откроется системное окно телефона — выберите Telegram, WhatsApp, ВКонтакте или другое приложение, и файл отправится вместе с сообщением.

Готовая запись на телефоне — Рис. 18. Результат на телефоне: 1 — «Скачать», 2 — «Поделиться файлом…».

Частая ошибка

На телефоне не сворачивайте браузер и не блокируйте экран, пока идёт запись. Для длинных записей (10–15 секунд) держите телефон в руках и не пользуйтесь другими приложениями.

Часть 7. Куда можно использовать готовый файл

Что выбрать: GIF или видео

Куда	Лучше	Примечание
Свой сайт	GIF или MP4	GIF вставляется как обычная картинка. MP4 весит меньше и выглядит чётче (см. код ниже).
Telegram	MP4 (видео) или GIF	Telegram сам превращает GIF в лёгкое видео без звука.
WhatsApp	MP4 или GIF	GIF отправляется как короткое видео без звука.
ВКонтакте	MP4 как видео; GIF — как документ	Видео добавляйте в «Видео» или в пост; GIF — как документ.
Instagram (посты, Reels, истории)	Только MP4	GIF-файлы Instagram не принимает. Записывайте формат «Видео»; если получился WebM — конвертируйте в MP4 или запишите в Chrome/Edge/Safari.
Электронная почта	GIF (до 5 МБ)	Видео в письмо обычно не вставляют — лучше ссылка. Большой GIF письмо утяжеляет.
Презентация (PowerPoint и др.)	GIF или MP4	Оба формата можно вставить прямо на слайд.

Как вставить на свой сайт

Сначала загрузите файл на хостинг (в панели сайта или через «Медиафайлы»), а потом вставьте на страницу. Если у вас сайт на конструкторе (Tilda, Wix и т. п.), проще всего добавить блок «Картинка» (для GIF) или «Видео / HTML» (для MP4).

GIF вставляется как картинка:

<img src="https://ваш-сайт.ru/files/moya-ekspoziciya.gif" alt="Моя экспозиция" style="max-width:100%">

MP4 — чтобы он играл сам, без звука, по кругу, вставьте так:

<video src="https://ваш-сайт.ru/files/moya-ekspoziciya.mp4" autoplay muted loop playsinline style="max-width:100%"></video>

Примечание

Замените адрес в кавычках на настоящий адрес вашего файла. Слова autoplay muted loop playsinline оставьте как есть — они нужны, чтобы видео само запускалось на телефонах.

Частые вопросы и что делать, если что-то не так

Что случилось	Что делать
Выбрал GIF, а он стоит на месте	Проверьте размер (не больше 15 МБ и 300 кадров). На iPhone с iOS ниже 26 GIF не двигается — используйте MP4.
Видео не загружается	Проверьте размер (не больше 50 МБ) и длину (не больше 60 секунд). Файлы других типов (avi, mkv) не подходят — преобразуйте в MP4.
Видео не играет на телефоне само	Нажмите на раму или заново загрузите ролик. Некоторые браузеры блокируют автозапуск — картинка при этом остаётся неподвижной заставкой.
Ссылка на видео не принимается	Нужна прямая ссылка на файл .mp4 / .webm. Страницы YouTube, ВК, RuTube не подходят.
Запись получилась рывками	Закройте лишние вкладки и программы, выберите GIF вместо видео или сократите длительность. Во время записи не трогайте сцену.
Файл слишком большой	Выберите GIF с длительностью 3–5 секунд или формат «Видео». Видео обычно весит в несколько раз меньше GIF.
Не вижу кнопку «Поделиться файлом…»	Ваш браузер не умеет отправлять файлы. Нажмите «Скачать» и отправьте файл вручную.
Записался WebM, а нужен MP4	Запишите в Chrome, Edge или Safari — они сохраняют MP4. Либо конвертируйте WebM в MP4 любым онлайн-конвертером.
Открыл проект, а видео нет	Открывайте именно архив .zip, который создала программа. Если файла с видео нет рядом, в раме останется неподвижная картинка.

Примечание

Если что-то не получается, напишите нам — контакты в разделе «Контакты» этого руководства. Приложите название браузера и, если можно, скриншот.