Как вы встраиваете анимации в проект на behance?

Всем привет!

Столкнулся с проблемой оптимизации встраивания гифки в проект на behance. Заметил во многих проектах, что дизайнеры вставляют гифки/видео в макет без потери визуала, то есть сплошной экран проекта, получается очень эстетично, макет не делится.

В какой программе вообще можно встроить в проект анимацию и что лучше использовать, видео или гифки?

И еще один вопрос, в каком качестве сохранять, чтобы на behance он смотрелся органично с остальным макетом?

(Заранее извиняюсь, если выбрал не тот раздел обсуждений)

2 симпатии

В какой программе вообще можно встроить в проект анимацию…

В фигме

Не находил в ней возможности выгрузить макет в видео/гиф формате

Figmotion. Плагин такой

3 симпатии

“Чистота” гифки зависит от количества исходных растровых элементов. Иными словами, делая гифку только шейпами и текстом, она будет иметь минимум шума.
Если хочется чтоб было совсем хорошо, то покупается аккаунт на Вимео и в презентацию заливаются видео без отображения интерфейса плеера.

4 симпатии

Спасибо за ответ.

Заметил во многих проектах, что дизайнеры вставляют гифки/видео в макет без потери визуала, то есть сплошной экран проекта, получается очень эстетично, макет не делится.

Тут нужно изначально выставлять размер холста, который будешь анимировать, равным по ширине основному проекту. Например, биханс кушает картинки до 1400px, дальше ужимает, поэтому логично пилить весь проект по ширине 1400px.

Дальше два варианта, чтобы без сжатия качества:

  • Платный аккаунт vimeo. На бесплатном ограничение во вставке — 720p.

  • Плагин для After Effects — gifgun, который лучше всех экспортит гифки.

Главное что когда делаешь размер 1400 для основного проекта, в афтере размер холста по ширине тоже должен быть 1400. По высоте — как получится.

7 симпатий

Я немного сложнее делал наверное, но работало хорошо. Прототип делал в принципл и экспортировал гифку. Потом эту гифку закидывал в фотошоп с заготовленным фоном и уже все вместе экспортировал как гифку :slight_smile:

1 симпатия

Всем спасибо за ответы, все вышло! Сделал через костыли, конечно, в следующий раз последую советам.

В фигме собираю анимированный прототип → в режиме просмотра делаю запись с экрана через OBS → через ffmpeg генерирую палитру → по этой палитре конвертирую видео в гиф. При необходимости задействую sony vegas, если надо, например, наложить часть видео на какую-то подложку. Муторно, но качество гифки очень хорошее.

7 симпатий

Интересный подход, попробую, спасибо!

Привет)
Если это анимированный прототип - то делаю запись с экрана, навожу красоту в Adobe Premiere, затем конвертирую видео в онлайн сервисе. Конкретно я пользуюсь aconvert.com, там нет сжатия и gif того-же размера, что и исходник.
А на Биханс в проект загружаю как встроенное изображение image

3 симпатии

можно на примере биханс странички посмотреть какое качество у гифки внутри проекта выходит?

Там можно загрузить медиа и открыть превью проекта без публикации.

Можно делать анимации с помощью этой программы https://mokup.app/ там даже есть встраиваемая запись анимации и можно уже выводить под нужный формат

3 симпатии

Слышал что скоро выйдет веб аппа где можно будет на фон мокапа ложить и позиционировать любую гифку или видос, + гифки можно выливать в 60fps, и до 500MB размером а видос без ограничений вообще и типа это все спецом для выгрузки для behance

1 симпатия

Да. Вот мой кейс. Анимация с сумоистом это встроенная гифка.

behance.net/gallery/98201381/vkusnye-sushi-Mobile-App-Concept

я в своих макетах совмещаю гифки и видео.
при этом гифки стараюсь делать зацикленные и небольшие по размеру в пикселях.
Бихенс позволяет встроить гифку не только на всю ширину или по центру - ее можно встроить в таблицу - например, слева будет стоять гифки, а справа - статичная картинка - к примеру с пояснением к этой анимированной гифке. Иногда вообще пустой квадрат, залитый фоновым цветом вставляю в такие таблицы, чтобы гифки встала в нужное мне место.

чтобы гифка весила минимально - ее размер стараюсь ужать как только можно, вырезаю из нее все фоновые элементы, а потом с помощью таблиц из картинок собираю все в один объект из гифки и статичных картинок.

ну и про видео не забываю. пользуюсь для этого Vimeo - там минимальная потеря качества.

Примеры можно посмотреть тут: https://www.behance.net/tat_fom