Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!
Проблемы
При подготовке презентации своего нового проекта для Behance я столкнулась с такими проблемами:
- Идея моей анимации слишком сложная, и ни один тьюториал не смог мне подсказать, как воплотить её в реальность;
- Видеохостинг Vimeo изменился и перестал делать, как я хочу;
- На Behance видео постится с дефолтным плеером и выглядит некрасиво.
Моя анимация
Я делала лендинг в рамках учебного проекта Логомашины. Тема «мужская парфюмерная вода Feromon 47». На Behance уже, как минимум, больше сотни концептов на эту тему! Поэтому мне необходимо было сделать что-то необычное и, конечно же, создать качественную интересную анимацию. Вот самая сложная из них:
Как сделать
Конечно, мне проще было сделать её в After Effects, но у меня была идея-фикс научиться, наконец, анимации именно в Figma!
КАК СДЕЛАТЬ МУЛЬТИК или НАУЧИТЬСЯ АНИМИРОВАТЬ
Шаг 1. Придумываем крутую идею для нашей анимации. Если в голову ничего крутого не приходит, то смотрим референсы на https://www.awwwards.com/, например. Я подсмотрела там идею для анимации заголовков, но, в итоге, от неё отказалась.
Моя идея была такова: пользователь видит, что это блок с описанием нот аромата, наводит мышку на любую из картинок, и видит гифку в треугольнике по центру, и более-менее понимает, что это за растения, и как может пахнуть Feromon 47, т.е. идея сделать визуализацию аромата.
Шаг 2. Делаем макет будущей анимации в Figma.
Шаг 3. Далее смотрим на Youtube тьюториалы по анимации в Figma в зависимости от того, что и как именно хотим заанимировать, например:
Шаг 4. Получаем просветление и понимание того, как нам надо дорисовать макет для анимации, чтобы он работал, и делаем это.
Шаг 5. Заходим в режим прототипа и проводим стрелочки для соединения нужных фреймов и настраиваем параметры нашей анимации. Я очень долго тыкалась в настройках, пробуя различные варианты, потому что результаты получались очень неожиданными, а тьюториалы я не смотрела.
Шаг 6. Добиваемся того, чтобы наша основная анимация работала, как было задумано. Например, в своей анимации я выбрала мгновенную (instant) анимацию по наведению (while hovering), чтобы при наведении мышки на каждую из фотографий гифка в треугольнике сменялась мгновенно. Приятным и неожиданным сюрпризом для меня стало то, что гифки реально проигрываются.
Шаг 7. Ни в коем случае не пытаемся проделать то же самое с заголовками — ничего не получится, проверено! Если у вас такая же многоуровневая анимация, как в моём проекте, то для заголовков необходимо использовать уже другой вид анимации в Figma — анимацию через компоненты. Спасибо кураторам Логомашины за то, что подсказали мне поискать тьюториалы именно на эту тему:
Шаг 8. Получаем новое просветление, в моём случае готовим 2 варианта заголовков: невидимые (0% непрозрачности) и видимые (100% непрозрачности), потому что заголовки должны мягко проявляться. Выделяем их вместе и оборачиваем в компоненты (create multiple components). Затем создаём наши варианты (create as variants). Я назвала варианты «Default» и «Normal» соответственно.
Шаг 9. Настраиваем несложную анимацию в режиме прототипа.
Шаг 10. Кликаем на варианты «Default» и с зажатым Alt дублируем их в нужные места нашего макета с основной анимацией. Лично я сперва продублировала их на отдельный фрейм для удобства и потом уже с него перетащила эти невидимые заголовки на места макета, где должна была проявиться моя анимация заголовков. Фото не прикладываю, потому что они, всё равно, невидимые.
Шаг 11. Готово! Вы прекрасны! В режиме прототипа проигрываем нашу анимацию, наслаждаемся и пожинаем лавры.
Подготовка видео
Шаг 1. В режиме full screen делаем запись экрана, например, с помощью Loom (расширение для Google) и загружаем видео на компьютер.
Шаг 2. Далее в Photoshop обрезаем наше видео, а также кадрируем. Это можно сделать и в онлайн-редакторах, но не все они кадрируют или показывают изображение покадрово, поэтому теперь я делаю это в Photoshop.
Шаг3. Лично у меня в моей анимации возник неприятный момент: при переносе курсора мыши с одной фотографии на другую при попадании курсора на пустую область экрана в треугольнике стало на миг появляться дефолтное изображение треугольника. Поэтому я вырезала эти кадры из видео, и проблема решилась!
Шаг 4. Также я ускорила своё видео до 250% и экспортировала в mp4.
Выгрузка видео на видеохостинг
В этот раз именно выгрузка на видеохостинг затормозила мой процесс и повергла в уныние, потому что всё на Vimeo изменилось, и на бесплатном тарифе у меня ничего не получалось. Перед сном я почитала «Размышления» Марка Аврелия и смирилась с тем, что в моей презентации не будет анимации, ведь, всё равно, «все мы скоро распадёмся на первостихии, и память о нас сотрётся». Однако наутро всё волшебным образом получилось!
Для того, чтобы на Behance наше видео было нужного размера и стало зацикленным, необходимо сперва выгрузить его на какой-нибудь видеохостинг. Я использую Vimeo, потому что там можно бесплатно выставить свои опции для видео.
Хочу предупредить, что интерфейс Vimeo изменился плюс теперь из России им можно полноценно пользоваться только с VPN!
Для того, чтобы выставить нужные опции, заходим справа в расширенные настройки (advanced settings).
Далее, слева, в разделе General убираем галочку «People can add to collections».
Идём в раздел Embed и убираем галочки «Like», «Watch later», «Share». Там же убираем галочки с «Profile picture», «Title», «Byline».
Это нужно для того, чтобы на Behance мы не видели дефолтный плеер с нашей аватаркой, названием видео, нашим именем, т.е., чтобы было красиво. Сохраняемся. Если найдём кнопку Save. Потому что, лично у меня, она постоянно куда-то мигрирует. Например, она может проявиться в разделе General.
Главное, без паники, как учит нас Марк Аврелий!
Выгрузка видео на Behance
Шаг 1. Копируем ID нашего видео (номер видео виден в ссылке прямо над видео). Вставляем ID в следующий embed-код перед знаком вопроса:
Шаг 2. Шагаем на Behance и в нашей презентации выбираем Embed и вставляем туда наш код.
Готово! Вы восхитительны! Любуемся нашим зацикленным видео без разноцветного плеера, аватарки ит.д. и пожинаем лавры!
Мою итоговую презентацию со всеми анимациями можно посмотреть здесь.
Благодарю за внимание и желаю вдохновения и качественных анимашек!
- Figma
- анимация
- анимация в Figma
- обработка видео
- выгрузить видео
- загрузить видео на Behance
- embed
- презентация проекта
- презентация проекта на Behance
- Behance
Источник: habr.com
Создаем анимированное изображения без установки специальных утилит
Создание анимированных изображений позволяет выделить и поставить на цикличное воспроизведение некий фрагмент видео, продемонстрировать подборку изображений или действия, совершенные на рабочем столе компьютера. В материале дана инструкция, как сделать гифку из фото или видеозаписи. Все представленные сервисы и программы доступны для бесплатного использования.
Как сделать GIF из фото
Если на компьютере уже имеются фотографии для создания анимированного изображения, то следует воспользоваться сервисом Ezgif. Это многофункциональный онлайн-инструмент для создания GIF. Примечательно, что итоговый результат не портят надписи с адресом сайта или его названием. Инструкция по использованию:
- Перейти по представленной выше ссылке. Откроется страница для добавления файлов.
- Нажать кнопку «Выбрать файлы». В окне проводника выделить изображения, которые будут использоваться в анимации. Размер одной картинки не должен превышать 6 Мб, а общий вес – 100 Мб.
Под готовым гиф есть дополнительные инструменты, позволяющие выполнить обрезку, изменение размера, поворот, добавить эффекты, изменить скорость и т.д.
Сервис Gifovina.ru
Как создавать анимацию
Является первым шагом в разработке конечного продукта. Сначала генерируется общая идея, которая должна быть выражена в готовой анимации. Как правило, составляется несколько базовых концепций, после чего выбирается наиболее подходящая. Выбранная идея подробно расписывается автором. Здесь необходимо детально описать общий сюжет, характер персонажей (если их несколько), а также их действия.
Разработка персонажей
В задачу иллюстратора входит создание визуальной модели каждого описанного в сценарии объекта. Исходя из описаний характеров и действий персонажей на бумаге, концепт артист (так еще называют художника) прорисовывает их так, как они будут отображаться на экране.
Раскадровка
Под данным термином скрывается отрисовка ключевых кадров в статической форме. Хоть она и не входит в список обязательных этапов, тем не менее обеспечивает ясность и последовательность процесса создания анимации. Формирует общее представление видимости результата. Имеет особенно большое значение при создании продолжительной анимации.
Аниматик
Дает возможность предварительно оценить, как будет выглядеть готовый продукт. Это уже не раскадровка, но еще и не анимация. Это некое слайд шоу главных сцен в хронологическом порядке. Как правило, кадры остаются на экране столько времени, сколько будет происходить анимированная сцена в финальной версии.
Готовый мультфильм
Когда сценарий написан, персонажи прорисованы, а результаты раскадровки и аниматики устраивают творческую группу, на основе последней создается итоговая анимация. Она представляет собой последовательное изменение картинок, благодаря чему создается видимость движения нарисованных объектов на экране.
Чем чаще изображения сменяют друг друга, тем более реалистично выглядит ролик. В то же время, большое количество кадров в секунду увеличивает размер готового файла на жестком диске компьютера.
В большинстве случаев кадры сменяются 12-30 раз на протяжении секунды. Иными словами, на самом деле человек видит не движущиеся объекты, а 12-30 картинок, которые успевают быстро сменить друг друга незаметно для глаза. Для большего количества кадров характеры:
Создание сервера TeamSpeak 3 – установка, настройка и создание канала
Сравнительно небольшое количество кадров чаще всего используется в сети, а также для каких-то инструкций, где упор делается на информационную составляющую. Что касается, например, телевидения, то здесь стандартом является использование 24-30 в секунду для достижения максимального качества получаемого контента.
Программы для создания анимации
Animate от Adobe
