Инструкция Canva: как создать анимацию и мини-фильмы
Видео, сторис, гифки побеждают по охватам обычные фото и тексты. Анимация привлекает внимание и задерживает взгляд. Еще одна причина разобраться в том, как создать анимацию, — вы сможете рассказывать истории, а это еще один тренд в маркетинге и социальных медиа. Сделать ее можно с помощью Canva, сервиса, который к тому же предоставляет НКО бесплатный доступ к бизнес-функциям и продвинутой версии графического онлайн-редактора. Эксперты Canva рассказали , как создать анимацию для презентации, соцсетей, блогов.
Как сделать анимацию для презентации
Анимация в презентации может выполнять сразу несколько функций. Анимированные объекты привлекают внимание к самым важным фактам и цифрам, переходы между слайдами помогают обозначить смену темы и «возвращают» к презентации тех, кто заскучал или отвлёкся.
Главное правило в подборе анимации — содержание важнее красоты. Если анимация мешает воспринимать смысл презентации, то она лишняя. Долгие полеты каждой буквы никак не помогут зрителям запомнить мысль. Другое дело — когда самые важные элементы привлекают к себе внимание, особенно если презентация сама по себе логична и хорошо структурирована
Как сделать анимацию в презентации полезной? Используйте каждый эффект осмысленно: пункты вылетают один за другим — зрители видят последовательность, логическую цепочку, этапы процесса; объекты «выцветают» и исчезают — зритель понимает, что речь идёт о потерях, убытках. Сделайте каждый слайд говорящим.
В Canva предусмотрен специальный режим для создания и показа презентаций. Чтобы создать анимацию в презентации Canva, нужно использовать компьютерную версию сервиса. Выберите шаблон «Презентация» в списке или введите это слово в поиск.
Выберите понравившийся дизайн или создайте свой с нуля: добавьте текст, картинки и декоративные элементы на каждый слайд презентации.
Затем в меню «Презентация» выберите эффекты для своей презентации. Слайды могут плавно перетекать друг в друга или динамично сменяться на экране.
Чтобы просмотреть, что получилось, начните показ в режиме «Стандарт». Для выступления подойдет режим «Автовоспроизведение»: он будет менять слайды через заданное время.
Если вы хотите сами переключать слайды во время презентации, выбирайте «Режим докладчика». Canva создаст второй экран, который можно демонстрировать зрителям на проекторе. А первый, только для докладчика, будет отображать ещё и таймер, заметки спикера и порядок слайдов — это поможет говорить по делу и уложиться в отведенное время.
Показывать презентацию с анимированными эффектами можно с любого компьютера с доступом в интернет — нужно только войти в свой аккаунт в Canva. Поэтому вы не забудете дома флешку с презентацией или не столкнетесь со старой версией PowerPoint, которая неправильно отображает ваши шрифты или эффекты анимации.
Как сделать gif-анимацию для статьи, сайта или соцсетей
Гифки быстро грузятся, легко встраиваются в любое окружение — и в ленту «Вконтакте», и в научную статью. С помощью анимированных картинок удобно объяснять сложные понятия, рассказывать забавные истории или просто вызывать эмоции у читателя.
Гифки часто используют в рекламных баннерах. Баннеры обычно стоят в боковых колонках сайта, и маркетологам нужно сделать их яркими, чтобы привлечь внимание. Гифка как раз решает эту задачу: движение притягивает взгляд пользователя.
Баннеры обычно небольшие, писать на них много текста мелким кеглем нельзя — в итоге все преимущества продукта просто не умещаются на одной картинке. Гифка позволяет рассказать о продукте в картинках: на каждом кадре рассказать об отдельном свойстве продукта или показать предмет из каталога.
У гифок есть еще одно свойство — они помогают донести сложные эмоции, объяснить нестандартные явления. Подойдут такие гифки для презентаций, сайтов и СМИ. Благодаря ним в онлайновых медиа существует целый жанр «Объясняем на гифках», когда научные, технические темы раскрывают с помощью гифок.
В Canva можно собрать гифку из фотографий и картинок с элементами анимации. Выберите шаблон с нужными размерами. Мы будем делать публикацию в Instagram. Разместите на нем нужные объекты и текст. Во вкладке «Скачать» выберите тип файла «Анимация».
Затем выберите, как сделать анимацию текста и картинок (мы выбрали плавную), и сохраните композицию в формате gif-анимации.
Как сделать из анимации мини-фильм
В русскоязчынях социальных медиа каждый день публикуется 2 миллиона видеороликов. Смотреть видео удобнее, чем читать, и обычно интереснее, чем слушать подкасты. К тому же видео вызывают больше эмоций, а значит — реакций. Например, в Инстаграме на один пост без видео приходится 1,61 комментариев, а на ролик с видео — 2,7.
Помните, что анимация помогает объяснять сложное? Это касается не только простых гифок, но и текстовых мини-фильмов. Такой формат хорошо прижился в YouTube и Instagram. Он делает обычный рассказ с картинками динамичным и интересным видео. Формат очень популярен и прост, нужно только изучить, что интересно аудитории и как сделать анимацию текста.
В Сanva легко повторить такой прием. Давайте разберемся, как создать анимацию, смонтировав небольшой фильм из фотографий. Например, отчет о мероприятии или каталог для сториз. За счет движения анимированный альбом смотрится интереснее, чем обычный, поэтому его охотнее посмотрит ваша аудитория.
Для того чтобы сделать фильм, соберём фотографии на нескольких слайдах. Мы взяли простой и минималистичный шаблон, чтобы декоративные элементы не отвлекали от центра кадра — красивых снимков.
Во вкладке «Сохранить» выберите пункт «Анимация» и настройте эффекты. Мы используем анимацию «Подъем», чтобы фотографии как будто поднимались снизу.
Последний шаг — выбор формата. Выберите, как создать анимацию — как .mp4 или .gif — в зависимости от того, где вы собираетесь размещать готовый мини-фильм. Для Instagram подойдет видеоформат, для сайта или блога обычно используют гифки.
Итак, рецепт простой: используйте режим презентации или функцию «Анимация», чтобы сделать дизайн динамичнее и привлечь внимание аудитории к вашим идеям. Добавляйте видео и гифки в социальные сети и на свой сайт, чтобы повышать охват и вовлеченность. И, наконец, рассказывайте истории и сохраняйте любимые снимки в мини-фильмах.
У Canva есть десктопная версия , версии для iOS и Android.
Canva также дает НКО бесплатный доступ к бизнес-функциям и продвинутой версии графического онлайн-редактора. В библиотеке — более 70 тысяч шаблонов для дизайна. Среди них множество образцов на социально значимые темы: плакаты и баннеры о защите окружающей среды , здоровом образе жизни и гендерном равенстве , Для получения доступа необходимо отправить заявку на английском или русском языке по ссылке .
Как в канве сделать анимацию по очереди
Добрались руки мои до Canvas. Посматривал я на него давненько, очень уж он мне в качестве инструмента для графиков приглянулся. Да и неделя Canvas на Хабре поддержала интерес.
Но вместо скучных графиков стал я копать в сторону анимации. Получилось, что отрисовываем сцену каждый раз по-новой, соответственно всю информацию о текущих кадрах храним в JS. И решил я попробовать составить простой алгоритм, который позволял бы хранить анимации для объекта, их состояние и выбор по желанию пользователя.
Канва
Под холстом добавлен Select со списком анимаций для объекта. Объект у меня будет один, хотя алгоритм не подразумевает каких либо ограничений.
Глобальные переменные
//Сократим запись для потомков
function $(id)
var сtx = $( ‘cnv’ ).getContext( ‘2d’ ); //Наша канва
var childs = <>; //Массив объектов сцены
var animate = <>; //Массив анимаций для объектов
* This source code was highlighted with Source Code Highlighter .
В childs будут храниться все объекты сцены с базовыми параметрами. Мы будем пробегаться по массиву и отрисовывать один за другим.
В animate храним для объекта его анимации. Тут можно сделать и по-другому, к примеру в animate храним анимации только для объектов которым они нужны, а для прочих храним информацию по отрисовке в самом массиве childs. В моем варианте каждый объект должен иметь по меньшей мере одну анимацию, если хочет быть отображенным на холсте.
Заполняем массивы
Сначала добавим наш объект. Я не стал росписывать параметры, т.к. считаю что для краткости кода можно на этой пойти, да и имена все интуитивно понятные.
//Идем по всем объектам
for ( var o in childs)
* This source code was highlighted with Source Code Highlighter .
Немного поясню. Каждая анимация представляет собой файл со всеми кадрами. На холст я вывожу только часть изображения, соответствующую текущему кадру. Для этого я храню step и steps (количество кадров).
Изображение представляет собой следующее:
Это самое большое изображение, ответственное за самую длинную анимацию «Bum» в 8 кадров.
Speed и curr отвечают за скорость переключения кадров. Я перерисовываю холст каждые 16мс и чтобы кадры сменялись с требуемой скоростью я считаю curr и по достижении speed меняю кадр.
Onend я вызываю по окончании анимации. Здесь мы можем сменить тип анимации — со взрыва на отображение останков или удалить объект из массива. Для этого чуть выше у меня есть функция:
//Меняем тип анимации на мертый шарик
childs[ ‘ball’ ].at = ‘dead’ ;
//Сбрасываем счетчик
animate[ ‘ball’ ][childs[ ‘ball’ ].at].curr = 0;
* This source code was highlighted with Source Code Highlighter .
Анимации
- Стоит:
- Прыгает:
- Взрывается:
- Мертв:
Функция для смены анимации
//Меняем анимацю на выбранную
childs[ ‘ball’ ].at = value;
//Сбрасываем счетчик
animate[ ‘ball’ ][childs[ ‘ball’ ].at].curr = 0;
* This source code was highlighted with Source Code Highlighter .
Запускаем
//Запускаем единый таймер
setInterval( function () = animate[o][childs[o].at].speed) = animate[o][childs[o].at].steps)
В принципе, я думаю из комментариев понятно что за чем идет и как работает. В результате я получил возможность сохранять объекты сцены, динамически задавать анимацию и реагировать на ее окончание.
Поскольку часто объекты в анимации повторяются, то есть смысл использовать childs как массив объектов, по принципу библиотеки.
Конечно есть что улучшить, но на текущий момент я не нашел хорошей статьи на тему анимации и предлагаю свой вариант.
Как быстро создать Gif-анимацию (динамические картинки) для соцсетей
Как быстро создать Gif-анимацию (динамические картинки) для соцсетей
В 2019 году никого не нужно убеждать в важности визуального контента. По оценке агентства Reuters, 84% всего интернет-трафика в этом году будет приходиться на видеоконтент.
Тот же тренд давно прослеживается и в социальных сетях: количество коротких видео и смешанных форматов, включающих фото, текст, видео и анимацию растет на глазах. На сегодняшний день пользователи Facebook расшаривают GIF-анимацию в 2 раза чаще, чем статичные изображения.
Но если рисовать баннеры и макеты email-рассылок для штатных дизайнеров — привычное дело, то поточное производство видео или анимированных гифок, как кажется, требует иной квалификации, а также дополнительных временных и финансовых затрат.
Если, конечно, вы хотите использовать уникальную графику, продвигающую ваш продукт, а не иллюстрировать посты трендовыми гифками из огромного архива Giphy и других подобных ресурсов.
Как создавать анимированную графику на примере конструктора Canva, который позволяет конвертировать статические изображения в видео или GIF.
Создаем анимацию
Первое, с чем нужно определиться — для какой платформы и каких целей нужна анимация. Каждый из видов графики создается с заданным размером картинки, например:
- пост в Facebook: 940x788px;
- пост для Instagram: 1080x1080px;
- пост для социальных сетей (можно использовать для ВКонтакте): 800x800px;
- Веб-баннер: 560x315px;
- Рекламный баннер «небоскреб»: 160x600px.
Для удобства возьмем квадратный формат поста для Инстаграма.
Поскольку создание графики происходит на основе редактируемых макетов, нужно определиться с конкретным образцом. Если у вас уже сформировался определенный фирменный стиль, подберите макет максимально близкий к тому, что вы использовали в маркетинге ранее.
Условно их можно разделить на несколько стилей:
- Макеты с использованием фотографий — подойдут для заведений, туристических компаний, недвижимости и других сфер, предлагающих нечто осязаемое. Среди таких макетов тоже встречаются более или строгие — черно-белые или цветные, с одним фоновым фото или коллажом.
- «Мультяшные» макеты — для тех, кому по душе «домашний» стиль. Подойдет для детских товаров, сфера образования, рукоделия, различных бытовых сервисов.
- Абстракция / орнамент — ни к чему не обязывающие дизайны, которые можно использовать для иллюстрации разовых акций или скидок. Весь акцент с самой графики переносится на сообщение.
При выборе макета не обязательно зацикливаться на конкретной фотографии или цветах, поскольку любой элемент можно заменить на другой из встроенного каталога или загрузить собственную графику.
Однако учитывайте размер дизайна: фотография с меньшим разрешением, чем размеры вашей иллюстрации, будет смотреться плохо. Чем лучше качество фото — тем лучше.
Кроме того, исходя из опыта, рекомендую не редактировать выбранный макет слишком радикально, иначе есть риск, что программа не справится с конвертацией картинки в видео:
- Не вставляйте три или четыре фотографии, если в макете использована одна.
- Не добавляйте слишком много дополнительных иконок и фигур, сверх изначального количества.
- Не используйте фотофильтры и кастомные шрифты — они не будут отображены в итоговой анимации.
Брендируем картинку
Расположите логотип в одном из углов дизайна, чтобы он не перекрывал другие детали или надписи, а стоял особняком и занимал примерно ⅕ высоты и ширины, в зависимости от горизонтальной или вертикальной ориентации дизайна.
Хотя Canva позволяет сделать логотип или любую другую деталь макета полупрозрачной, рекомендуем сохранять лого в полном цвете и подбирать контрастный фон — вряд ли ваш бренд настолько узнаваем, чтобы скромничать в этом вопросе.
Учебное пособие по анимации изображений в Canva
С быстрым ростом социальных сетей во всем мире анимированные посты (например, GIF-файлы) становятся известными. Они стали заменой другим режимам, таким как JPEG и PNG.
Известные инструменты дизайна, такие как Canva, представили функцию анимации в свете своей популярности. Эта функция позволяет вам активизировать свою игру в социальных сетях и создавать анимированные визуальные эффекты в мгновение ока! Он также эффективен как для профессиональных пользователей, так и для любителей.
Помимо контента для социальных сетей, Canva также полезна для создания поздравительных открыток, приглашений на мероприятия, вдохновляющих цитат и многого другого! Давайте подробно узнаем, как анимировать картинки в Canva.
В этой статье
Часть 1: Для чего можно использовать изображения Canva?
Будь то маркетинговые кампании или проекты, Canva — лучший инструмент для всех дизайнерских работ. Это надежная платформа, на которой вам не нужен предварительный опыт проектирования. Canva полезна для:
Сообщения в социальных сетях / Instagram: Вы можете создать свое присутствие в Instagram, создавая посты через Canva. Он имеет несколько шаблонов и функций для создания заманчивых постов в Instagram. Он также имеет изображения без перетаскивания для добавления индивидуального дизайна в шаблон.
Обложки Facebook: Вы можете сделать обложки Facebook на Canva, выбрав макет и добавив другие элементы. Вы можете включить цвета, шрифты и рисунки на обложку. Canva имеет шаблоны для всех тем, настроений и стилей!
Приглашения на мероприятия: Canva имеет сотни бесплатных макетов и библиотек для создания приглашений на мероприятия. Вы можете выбрать подходящий шаблон и включить фотографии, значки, наклейки, иллюстрации и графику, ориентированные на вечеринки. Он также имеет возможность персонализации для добавления личных изображений и иллюстраций в редакторе.
Вдохновляющие цитаты: Canva позволяет создавать вдохновляющие цитаты и мотивировать людей. В нем есть шаблоны для изменения таких элементов, как размер шрифта, размер текста, границы, изображения и многое другое!
Коллажи: Это помогает создать коллаж, в котором вы можете объединить несколько изображений в одном кадре. Canva предлагает различные сетки вместимостью 12 изображений и разных размеров.
Часть 2: Как анимировать картинки в Canva?
Canva помогает добавлять мгновенную анимацию в презентации, сообщения в социальных сетях и многое другое. Чтобы узнать, как анимировать изображения в Canva, выполните следующие действия:
Шаг 1: Добавление статических элементов
Начните с создания изображения с помощью статических элементов. Чтобы сделать дизайн привлекательным, вы можете добавить образцы текстов, иллюстрации, каракули и другие объекты.
Постарайтесь стимулировать свое творчество и заранее придумайте планировку. Если возможно, набросайте на бумаге и повторите то же самое.
Шаг 2: Анимируйте свой дизайн
Взгляните на макет в последний раз. Убедитесь, что он идеален. После того, как все элементы размещены в соответствии с вашим дизайном, пришло время анимировать их. Для этого:
- Нажмите на страницу с белым фоном
- Перейдите в раздел «Панель инструментов»
- Нажмите кнопку «Анимировать»
Шаг 3: Выбор стиля анимации страницы
Canva предлагает шесть стилей анимации, пять из которых предназначены для бесплатных пользователей, а один — для профессиональных пользователей. Чтобы получить доступ к пяти стилям анимации, выполните следующие действия.
- Нажмите кнопку «Анимировать»
- Выберите «Анимация страницы»
- Там вы найдете такие опции, как «Блокировка», «Панорамирование», «Затухание», «Подъем» и «Кувыркание»
- Выберите стиль в соответствии с вашим дизайном
Шаг 4: Предварительный просмотр и загрузка
После выбора стиля анимации страницы будет выполнен предварительный просмотр эффекта. Если вы считаете это хорошим, переходите к загрузке GIF. Вот как это сделать
- Перейдите в опцию «Панель инструментов» (присутствует в правом верхнем углу)
- Выберите GIF в качестве типа файла
- Проверьте номер страницы и убедитесь в его правильности
- Нажмите кнопку «Готово»
Шаг 5: Окончательный GIF
После нажатия на кнопку «Готово» ваш GIF будет загружен. Вы сможете видеть дисплей в течение пяти секунд. Если вы хотите отредактировать изображение после этого, нажмите на кнопку времени (рядом с кнопкой «Анимировать»).
Итак, все дело было в том, как анимировать фотографию в Canva.
Недостатки Canva
Несмотря на эффективные функции и простой интерфейс, есть определенные области, где Canva не хватает. Это включает в себя
- У него нет локального хранилища файлов.
- Поскольку слишком много людей используют Canva, ваш шаблон может выглядеть так же, как и другие.
- Некоторые из его лучших функций не являются бесплатными.
- В версии мобильного приложения отсутствуют определенные элементы и функции.
Из всех этих недостатков повторение шаблонов является большой проблемой. Это потому, что все хотят, чтобы их посты выглядели уникальными и незаменимыми. Однако распространенные шаблоны Canva могут предотвратить это.
К счастью, есть способы борьбы с такими проблемами. Давайте узнаем о них в следующем разделе.
Советы: Анимация изображений в видео
Вы также можете анимировать изображения в видео, чтобы сделать их более живыми. Для этого вы можете использовать Wondershare Filmora — Видеоредактор. Это также эффективно, если вы не знаете, как анимировать изображение в Canva:
Wondershare Filmora — Видеоредактор
Filmora от Wondershare — это программное обеспечение для редактирования видео, которое поможет вам легко создавать собственные анимации. Он имеет автоматические функции для создания эпических историй и постов.
Его эффект перетаскивания делает проектирование простым и быстрым. Благодаря своим выдающимся атрибутам, опциям и стилям, у Filmora 77+ миллионов счастливых пользователей!
Это мощная интеграция функциональности, производительности и многого другого! Фактически, это решает повторяющуюся проблему шаблона Canva. Программное обеспечение имеет первоклассные функции и инновационные фильтры, которые добавляют аутентичности дизайну.
До сих пор вы узнали о том, как анимировать изображение в Canva. Теперь давайте разберемся, как правильно использовать Filmora для анимации и добавления изображений в видео.
Анимация в Канве: как добавить и как удалить
BY
Анимация в канве доступна как для отдельных элементов, так и для текста и слайдов в целом. Чтобы применить эффект к странице, кликните на неё — она выделится голубой рамкой. Над слайдом в левой части нажмите кнопку «Анимация» и выберите из предложенных. Чтобы применить анимацию к элементу или тексту, так же выделите его и нажмите на указанную кнопку. Для удаления эффекта в окне выбора внизу нажмите «Удалить» . Ниже даём подробные инструкции!
Как работать
Как мы сказали выше, анимация в Канве доступна для холстов и для отдельных элементов — картинок, текста, диаграмм и прочего. Кнопка для добавления эффекта находится над рабочим полем. Как сделать анимацию в Канве по щелчку?
Для страницы
Для холста доступны двадцать три вида анимации в шести блоках:
- комбинации: простые, элегантный, забавные, вечеринка, диско, корпоративные, непринуждённые;
- простые: подъём, сдвиг, появление, сближение, дрифт, пульс;
- масштабирование: вытеснение, вылет, увеличение;
- растягивание: вращение, блок, неон, скрапбук,
- движение на фото: фотопоток, подъём;
- скольжение внутрь и обратно: линия.
Некоторые виды повторяются в разных блоках. Вот как применить эффект:
- Кликните по пустому месту холста. Убедиться, что вы попали по нему, поможет голубая рамка.
- Над слайдом слева кликните по кнопке «Анимация» .
- Слева вместо панели инструментов откроется панель с эффектами.
- Наводите мышью на каждую плашку, чтобы увидеть, как работает дополнение.
- Кликните по тому, который понравился, и он установится для страницы.
Внимание! После того, как сохранили презентацию в Канве с анимацией, всегда проверяйте, работает ли она. Особенно, если вы конвертировали документ в другой формат.
Для элемента
Теперь посмотрим, как сделать то же самое для элемента — картинки, диаграммы, фигуры, таблицы, стикера. Здесь доступны те же блоки, кроме комбинаций.
- Кликните по картинке — она выделится голубой рамкой.
- Нажмите на уже известную кнопку над рабочим полем.
- На появившейся панели слева выберите эффект. Чтобы посмотреть, как они работают, наводите мышью на плашки.
- Кликните по той, которая понравилась, и она применится к картинке.
Для текста
Для того, чтобы установить анимацию для текста, также кликните по нему, он выделится всё той же голубой рамкой. Нужная нам кнопка находится над слайдом слева. Дальше всё, как в инструкциях выше. Три блока анимации в Canva для текста совпадают с эффектами для холста и картинки — простые, масштабирование, растягивание, скольжение внутрь и обратно.
Но есть ещё два других блока:
- простые надписи: печать, подъём смещение;
- яркие надписи: блок, всплывание, выскакивание, смена кадров, коньки.
А как скачать с презентацию с Канвы с анимацией? Сервис советует делать это исключительно в формате MP4.
Как удалить
Как убрать анимацию в Канве? Это можно сделать двумя способами.
- Вызовите панель с эффектами — выделите элемент, текст или страницу и нажмите на кнопку с названием эффекта справа или слева над холстом.
- Прокутите список до конца и кликните «Удалить» .
И второй способ — с помощью действия «Отменить» . Кнопка находится на верхней голубой панели инструментов и имеет вид стрелки. При нажатии на неё отменяется последнее действие. Если нажать повторно, отменится предпоследнее и так далее. Воспользуйтесь кнопкой для отмены эффекта!
Напоследок расскажем о настройках для эффектов. В частности, как в Канве настроить время анимации. После выбора эффекта плашка подсветится тёмным цветом, и на ней появится значок фильтров. Кликните по этому значку и настройте время выхода, скорость и направление эффекта.