Как сделать анимацию

6 популярных программ для создания анимации

Быстро сменяющиеся кадры создают иллюзию движения, а аниматоры с её помощью — живые продукты. Разбираем инструменты для моушн- и UI‑дизайна.

Иллюстрация: Meery Mary для Skillbox Media

Глеб Летушов
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Анимация помогает дизайнерам улучшить юзабилити сайта или приложения, управлять вниманием пользователя и делать продукты интерактивными.

Универсального инструмента для создания анимации не существует: какие-то лучше всего подходят для создания прототипов, какие-то — для декоративной. В нашей подборке мы собрали программы, которые вам помогут закрыть обе задачи.

Figma

Сайт: figma.com

Известный графический редактор, который дизайнеры используют для проектирования интерфейсов. В нём можно не только рисовать красивые кнопки и чекбоксы, но и сразу превращать их в наглядные прототипы для презентации работы клиенту. А с помощью Figma Mirror — сразу проверить работу на телефоне.

О том, как делать прототипы приложений в Figma, читайте в нашей серии статей:

• Кнопки, прокрутка и поп-апы
• Анимация
• Интерактивные компоненты

Marvel

Сайт: marvelapp.com

Если по каким-то причинам вам не подходит Figma, то Marvel может её заменить. Работает из браузера или как дополнение к графическим редакторам. Позволяет не только создать и настроить переходы, но и изменить макеты при необходимости или посмотреть прототип на смартфоне.

Principle

Сайт: principleformac.com

Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Но эта программа доступна только для macOS.

Программы Adobe

Этими инструментами дизайнеры пользуются для создания презентаций, микровзаимодействий и движущихся баннеров. Простую анимацию можно сделать и в Photoshop, для сложного подойдёт Animate или After Effects.

5 марта 2022 года Adobe приостановила все новые продажи продуктов компании в России. Если у вас нет действующей подписки на программы компании, посмотрите их аналоги в нашей подборке.

Adobe Photoshop

О том, как делать анимацию в Photoshop, читайте в нашей инструкции.

Это самый простой инструмент от Adobe, в котором можно создать несложную анимацию объекта — c помощью инструмента Timeline (шкала времени). Интерфейс более сложных программ построен на основе Photoshop, поэтому знакомство с созданием анимации лучше начать с него.

Adobe Animate

Эта программа похожа на линейный видеоредактор, только для анимаций. Шкала времени помогает одновременно использовать несколько объектов в раскадровке. Идеально подходит для создания интерактивных презентаций и баннеров. Позволяет экспортировать анимацию в формате HTML и CSS для разработчиков.

Adobe After Effects

Продвинутый редактор для создания анимированной графики. Он пригодится и для обработки видеоклипов, оформления рекламных роликов и заставок.

Чтобы комфортно работать в After Effects, вам понадобится мощный компьютер, а изучить этот редактор довольно сложно. Поэтому знакомство с ним лучше начать уже после Photoshop и Animate.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Как сделать эффектную анимацию [подсказки и шаблоны от Visme]

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

Удивительно, насколько изменились наши представления с того времени, потому что сейчас сложно представить жизнь без анимации.

Везде – на сайтах, в социальных сетях, блогах и даже в бизнес-среде – мы встречаем графику для соцсетей, анимированные ролики и элементы.

В то же время создавать красивую и эффектную анимации сложно и долго.

Если вы обратитесь за помощью к профессионалам, то это ещё и дорого. Хотя большинство студий не называют расценки открыто, 2D-анимация может обойтись в сумму от 3 000 до 50 000 долларов США а 3D-анимация – от 10 000 и даже до 200 000 долларов.

На самом деле, анимация – непростое дело, и это видео тому доказательство.

Но не спешите отчаиваться!

Есть и хорошая новость (барабанная дробь) – отличные анимированные иллюстрации можно создать самостоятельно в редакторе Visme. Видите, нет ничего невозможного!

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

Давайте перейдем к сути.

Для чего использовать анимацию в маркетинге

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

Готовы узнать, как использовать анимацию в качестве секретного ингредиента ваших маркетинговых кампаний? Читайте дальше!

1. Анимация рассказывает истории

Наш мозг любит истории. Люди рассказывали истории и слушали их ещё в пещерные времена, сидя вокруг костра.

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

Проще говоря, анимация – это отличный способ установить эмоциональную связь с аудиторией, заинтересовав ее историей, которая им близка и интересна.

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

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

2. Анимация упрощает сложные концепции

Анимированная графика помогает объяснить сложные понятия и концепции. Посмотрите на этот пример:

Создайте анимированное изображение на основе этого шаблона. Редактировать и скачать

Здесь не просто изображены мусорные баки, но и показан процесс сортировки мусора. Так мы получаем намного больше информации, чем удалось бы вместить в статичное изображение.

Использование анимации также помогает повысить окупаемость инвестиций. Например, сервису Crazy Egg удалось увеличить коэффициент конверсии на 64 %, а доход на 21 000 долларов США за месяц после того, как они опубликовали анимированный ролик о преимуществах сервиса. Это вдохновляет, не правда ли?

3. Анимированная графика удерживает внимание.

Важно не только привлечь внимание, но и удержать его.

Посмотрите на этот пример анимации:

Создайте анимированное изображение на основе этого шаблона. Редактировать и скачать

Досмотрели ли вы до того момента, когда появились все анимированные элементы? Готовы поспорить, что это так, потому что анимация сделана отлично! Мы также уверены, что вам стало хотя бы чуточку интересно узнать, что это за новый SEO-инструмент. Такого не удалось бы достичь с помощью статичной картинки.

Это совершенно новый уровень вовлеченности аудитории, которая точно запомнит как саму картинку, так и идею, которую вы в нее вложили.

4. Как сделать анимацию, которая побуждает к действию.

Вот ещё один плюс – анимированная графика помогает подтолкнуть людей к желаемому действию, например покупке.

В соревновании между устной презентацией и презентацией с визуальным материалом, последняя показалась убедительной более чем половине аудитории (67 %), в то время как устная презентация смогла убедить только 50 % слушателей.

Если вас не удивили эти цифры, вот ещё одна – люди воспринимают на 323 % лучше инструкции иллюстрированные , чем текстовые! Вспомните, как на упаковках товаров бывает нарисован способ их открывания.

Анимированная картинка с призывом к действию, такая как на примере ниже, поможет получить больше кликов и конверсий, чем статичная иллюстрация.

Создайте анимированное изображение на основе этого шаблона! Редактировать и скачать

Как сделать эффектную анимацию

Итак, думаем, что мы убедили вас попробовать использовать анимацию в ваших маркетинговых кампаниях. Теперь давайте научимся ее создавать!

С чего начать

Прежде чем начать, вы должны на полную включить ваши творческие способности.

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

Посмотрите, например, на этот дудл от Google:

Обратите внимание на рот карандаша-учителя – он открывается и закрывается, как будто учитель что-то говорит, а не просто ведет своих учеников.

Неудивительно, что именно этот эффект придает всей анимации ее неповторимость и очарование. Итак, достаньте блокнот и запишите: красота в деталях.

Еще одна вещь, которую следует отметить из этого примера — в нем нет беспорядка.

Ещё одна особенность этого примера – на картинке нет ничего лишнего.

Благодаря этому зрителям удается заметить все важные детали.

Какой мы можем сделать из этого вывод? Анимация должна быть лаконичной и с изюминкой.

3 шага для создания анимированной графики

Теперь, когда вы готовы создать анимированное изображение, прочтите это краткое руководство по созданию анимации в Visme.

Шаг 1. Выберите шаблон.

Любой хороший дизайн начинается с плана. Если у вас в голове уже есть готовый образ, вы можете начать работу с чистого листа. Но всё же мы рекомендуем пролистать нашу коллекцию шаблонов – возможно, вы найдете готовый дизайн и просто настроите его под ваш контент и фирменный стиль.

Шаблоны с анимацией можно отличить по значку молнии в правом нижнем углу.

Найдите идеальный шаблон и создайте свою анимацию! Смотреть сейчас

Шаг 2. Добавьте нужные элементы.

В редакторе Visme элементы можно добавлять как в пустой проект, так и в готовый шаблон.

Очень удобно, что любой шаблон можно настроить так, как вам нравится. Можно менять цвета, добавлять фигуры и графические элементы, например линии, кнопки, стрелки и т. д.

Чтобы найти их в редакторе, откройте вкладку Graphics (Графические элементы) на панели слева. Вы увидите множество элементов, разделенных по категориям.

Открыв вкладку Basics (Основное) чуть выше, вы найдете раздел с диаграммами.

Из этого раздела можно добавить в проект схему, а затем настроить поочередное появление ее блоков – так изучать ее будет намного легче и интереснее.

Приятная новость : в обновлении Visme Unleashed мы также добавили иллюстрации, персонажей и жесты.

Помните, что анимация должна соответствовать целям кампании и вашему фирменному стилю – измените цвета, шрифты и другие элементы.

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

Когда вы будете довольны результатом, загрузите анимацию и поделитесь ей с миром. Для этого Visme предлагает несколько вариантов.

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

Во-вторых, можно сгенерировать приватную или публичную ссылку и поделиться ей с аудиторией.

В-третьих, анимацию можно встроить в блог или на веб-страницу, чтобы получить максимум от интерактивных функций.

Советы по созданию анимации

Почитайте наши советы – надеемся, что они помогут вам создать эффектный проект и по-настоящему удивить аудиторию.

1. Используйте фирменный стиль.

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

2. Знайте меру.

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

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

3. Удаляйте лишнее.

Один из главных принципов дизайна в том, что все элементы должны выглядеть гармонично. Любая лишняя деталь может нарушить эту гармонию.

4. Выбирайте цвета с умом.

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

5. Не будьте банальны.

Используйте необычные формы и элементы. Не выбирайте стереотипные объекты, такие как силуэты небоскребов или загорающиеся лампочки.

Кроме всего прочего, ваш дизайн должен быть понятным. Ваша цель – рассказать зрителям историю, а не заставить их ломать голову.

Почитайте нашу статью о типичных ошибках в дизайне, чтобы не допустить их в своем проекте.

Как использовать анимацию в маркетинге

Наконец вы знаете, как создавать анимированную графику – теперь давайте поговорим о том, как использовать ее в вашей маркетинговой стратегии.

Создайте видео или слайдшоу.

Мы уже видели, каких результатов достигли ребята из Crazy Egg с помощью видео. Этот же метод использовал сервис Mint:

Как показывает практика, анимационные ролики могут увеличить конверсию на 20 %.

С Visme этот подход можете попробовать и вы – просто создайте анимированное слайдшоу или презентацию и скачайте проект в видеоформате.

Анимируйте данные.

Цифры не обязательно должны вызывать скуку. Если вы хотите заинтересовать аудиторию, оформите их в видео диаграммы и анимируйте, как в этом примере:

Создайте анимированную диаграмму на основе этого шаблона! Редактировать и скачать

Так интереснее, правда? Узнайте больше о создании анимированных диаграмм.

Прокачайте отчеты и диаграммы.

Анимировать можно и отчеты, например годовой отчет. Ещё отлично смотрится анимация в инфографике. Анимированная инфографика точно не будет похожа на тысячи других, которые мы видим буквально каждый день.

У нас есть подробное руководство о том, как использовать анимацию в инфографике.

Анимируйте персонажей.

Этот совет особенно полезен для компаний, у которых есть фирменный персонаж. Для всех остальный это отличный способ сделать вашу историю ещё более захватывающей.

Посмотрите на персонажа Visme в нашем анимированном видео.

Вы даже можете выбрать персонажа из библиотеки Visme и сделать его персонажем бренда или просто вашим анимированным помощником.

Используйте анимированные иллюстрации.

Анимированные иллюстрации помогут вам донести ваши идеи до аудитории. Их можно использовать в блогах или на сайтах. В библиотеке Visme есть более 500 персонажей, жестов и иллюстраций, которые даже можно настраивать.

Анимированная графика – отличный инструмент маркетинговой стратегии

Обычно пользователь социальной сети уделяет каждому посту не более трех секунд. Но вы можете задержать его внимание. Как? С помощью анимации.

Вот ещё одна идея – поделиться анимированным объявлением о выходе новой статьи в блоге или о начале распродажи. Посмотрите и другие идеи использования визуального контента в социальных сетях.

Создайте анимированное изображение на основе этого шаблона! Редактировать и скачать

Этот процесс также описан в нашем видео:

Готовы сделать крутую анимацию?

Создавать анимированную графику не так сложно, как может показаться. Вы вполне можете сделать это своими силами, без помощи дизайнеров и студий. Зарегистрируйтесь в Visme и попробуйте создать анимацию сегодня!

Секретный инструмент для создания красивых GIF-файлов и коротких видеороликов за считанные минуты.

Регистрация!

Нам доверяют ведущие бренды

Мейкер анимаций

Создавайте анимированные видео, мгновенно добавляя клипы, элементы и эффекты всего за несколько кликов на программе VEED. VEED оснащен широкиим спектром свободных от роялти видеоклипов, которые вы можете собрать вместе, чтобы создать целоее анимированное видео. Вы также можете добавить текст и анимировать его, а также добавить анимированные элементы, такие как формы, наклейки и многое другое. Приложение для редактирования видео VEED очень простое в использовании. Оно позволяет создавать и редактировать видео за считанные минуты! Наши премиум-подписчики получают доступ к нашей полной библиотеке стоковых медиа; включая клипы и аудио, которые вы можете добавить мгновенно. Добавьте текст и анимацию в режиме реального времени. Поделитесь своими анимационными видео в социальных сетях. Удачи!

Как использовать мейкер анимаций:

Выберите из стоковой библиотеки

Найдите «анимации» в стоковой библиотеке VEED. Вы также можете найти конкретные видео, такие как «анимированная собака.» Вы можете добавить столько клипов, сколько вам захочется!

Редактируйте

Редактируйте клипы для создания идеального анимированного видео. Вы можете добавить текст и анимировать его; добавляйте формы, наклейки, анимированные музыкальные визуализаторы, и многое другое.

Делитесь

Нажмите Экспорт. Загрузите видео или поделитесь им в соцсетях!

‘Мейкер анимаций’ Пошаговая инструкция

Мгновенные анимации онлайн

Если у вас нет своих анимационных видео, вы можете легко скомпилировать анимированные клипы, чтобы создать целый анимационный фильм! Будь то 2D анимация или анимированные эффекты, на VEED есть всё. Нет необходимости рисовать вручную, чтобы создать свою собственную анимацию. Просто введите «анимации» в поле поиска при выборе из стоковой библиотеки; вы также можете искать что-то конкретное. Создавайте видео анимации мгновенно!

Персонализируйте, кастомизируйте и другое!

Персонализируйте видео-анимации, добавляя больше анимированных элементов. Вы можете добавить наклейки и анимированные эффекты. Добавляйте анимированный текст и многое другое! Кроме того, вы можете использовать наши разнообразные инструменты, чтобы ваши видео выглядели профессиональнее. Оптимизируйте видео для социальных сетей; вы можете выбрать из наших пресетов, чтобы сделать видео совместимым с Facebook, Instagram и другими платформами.

Делитесь в один клик

Создатель мультфильмов от VEED позволяет вам легко обмениваться видео с миром. Разместите видео на Facebook, YouTube и других платформах всего за один клик! Вы можете напрямую поделиться своей ссылкой на соцсеть или вы можете загрузить видео на устройство и разместить его. VEED — самый простой способ поделиться своими творениями со всеми!

Часто Задаваемые Вопросы

Как создать собственную анимацию?

Выберите анимацию или анимационный клип из нашей стоковой библиотеки. Анимационное программное обеспечение VEED позволяет создавать различные анимации мгновенно! Скачайте видео и поделитесь.

Какой мейкер анимаций лучший?

Существует множество видеоредакторов, которые позволяют создавать собственные анимации. Тем не менее, VEED выделяется бесконечными функциями персонализации. Плюс, вы можете сделать всю работу всего за несколько кликов.

Как анимировать текст на Iphone?

VEED совместим с iPhone, Android и всеми мобильными устройствами. Просто перейдите в VEED в мобильном браузере и начните редактировать видео!

Какой бесплатный аниматор лучший?

Платформа для редактирования видео VEED является бесплатной. Тем не менее, наши премиум-подписчики получают полный доступ к нашим стоковым медиа-где они могут выбрать анимированные видео клипы. Проверьте нашу страницу цен для получения дополнительной информации.

Можно ли добавить и анимировать логотип?

Конечно! Вы можете использовать наш Brand Kit, чтобы добавить логотип, шрифты и многое другое. Добавьте анимацию, кливкнув на эти элементы и затем нажав»анимация.» Выберите из наших супер крутых анимационных эффектов.

Как придать видео крутости?

Добавление фильтров, смешных эмодзи, милых наклеек, и текстов точно помогут вам в создании крутого видео!

Что говорят про VEED

Veed is a great piece of browser software with the best team I’ve ever seen. Veed allows for subtitling, editing, effect/text encoding, and many more advanced features that other editors just can’t compete with. The free version is wonderful, but the Pro version is beyond perfect. Keep in mind that this a browser editor we’re talking about and the level of quality that Veed allows is stunning and a complete game changer at worst.

I love using VEED as the speech to subtitles transcription is the most accurate I’ve seen on the market. It has enabled me to edit my videos in just a few minutes and bring my video content to the next level

Laura Haleydt — Brand Marketing Manager, Carlsberg Importers

The Best & Most Easy to Use Simple Video Editing Software! I had tried tons of other online editors on the market and been disappointed. With VEED I haven’t experienced any issues with the videos I create on there. It has everything I need in one place such as the progress bar for my 1-minute clips, auto transcriptions for all my video content, and custom fonts for consistency in my visual branding.

Diana B — Social Media Strategist, Self Employed

Больше, чем мейкер анимаций

Кастомизируемые инструменты для редактирования видео от VEED позволяют создавать потрясающие крутые видео! Помимо текстовой анимации, вы можете добавить другие персонализированные элементы, такие как логотипы, наклейки, изображения и многое другое. Это также полноценный редактор видео. Вы можете изменить настройки видео, чтобы соответствовать любой соцсети; изменить размер видео, обрезать, развернуть и повернуть его. Попробуйте VEED сегодня и начните создание удивительных видео в считанные минуты!

Простой способ создания изумительных видео, добавляйте субтитры и увеличивайте свою аудиторию.

Русский (Россия)

• English
• Italiano (Italia)
• Norsk bokmål (Norge)
• Polski (Polska)
• Português (Brasil)
• Svenska (Sverige)
• Türkçe (Türkiye)
• Ελληνικά (Ελλάδα)
• עברית (ישראל)

Как анимировать картинку в Photoshop – пошаговая инструкция

Анимация картинок в Фотошопе позволяет создавать интерактивные изображения, которые можно использовать в баннерах и презентациях. Также это один из самых простых способов показать дизайнеру идею своего проекта.

Как сделать анимацию в Фотошопе и что для этого нужно знать – разберемся в сегодняшней статье.

Шаг 1: Создаем проект

В качестве примера я буду использовать Adobe Photoshop 2022, вы же можете использовать и более ранние версии, но учтите, что названия некоторых настроек могут отличаться. Сам функционал анимации был доступен еще в версии CS6.

Анимация работает следующим образом – например, с помощью использования нескольких картинок, когда одна накладывается на другую. Поверх картинок мы можем добавлять собственный текст, который также можно анимировать.

Итак, первым делом запускаем программу и создаем в ней файл, который потребуется нам для последующих действий.

1. В верхней части программы выбираем «Файл» и жмем «Создать…».
2. Теперь нужно выбрать размер файла, можно установить как свои значения, так и выбрать шаблонные. Для примера давайте укажем ширину и высоту в 1080 пикселей – сделать это можно в правой части окна. В завершение нажимаем на «Создать».
3. Теперь перед нами отображается холст – рабочая область, в которой мы будем прорабатывать все элементы для их дальнейшей анимации.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Шаг 2: Включаем временную шкалу

Для анимации в Photoshop используется временная шкала. Чтобы ее включить, выполняем следующее:

1. В верхней части программы открываем вкладку «Окно» и находим пункт «Временная шкала», который по умолчанию не отмечен галочкой. Также обратите внимание на то, чтобы в этой вкладке был отмечен пункт «Слои» – он потребуется нам в дальнейшем.
2. В результате в нижней части окна перед нами отображается временная шкала.

Подробнее о временной шкале мы поговорим на 4 шаге, а пока давайте наполним наш холст для дальнейшей анимации.

Шаг 3: Добавляем контент

На этом этапе вы добавляете свои элементы, которые хотите анимировать. Я же добавлю свои – это будет елка формата PNG и два текстовых слоя «Новый» и «2022 год». Я сделаю что-то вроде новогодней заставки.

Что ж, приступим:

1. Добавляем изображение – для этого просто переносим его в область холста.
2. Для вставки текста используем инструмент «Горизонтальный текст» – найти его можно в левой части программы. Также можно воспользоваться горячей клавишей «T».
3. Для изменения текста используется меню справа – там можно изменить шрифт и задать ему размер. Чтобы появилось это меню, необходимо предварительно выбрать нужный текст. Больше не будем заострять на этом внимание, просто знайте, где и как это можно сделать.

Готово. Мы добавили временную шкалу и вставили весь нужный нам контент. Пора создавать анимацию – о том, как это сделать, поговорим далее.

Шаг 4: Создаем анимацию в Photoshop

Анимация в Фотошопе может создаваться двумя путями:

• В формате видео – это анимация без зацикливания.
• Покадровая анимация – более сложная анимация, можно делать зацикливание и создавать полноценное GIF-изображение.

Давайте рассмотрим оба случая и попытаемся добиться максимальных результатов.

Вариант 1

Данный вариант у нас открыт по умолчанию – это все инструменты временной шкалы, которые появляются при ее активации. Работать с ними крайне просто:

1. Самая базовая анимация, которую мы можем сделать – это появление объектов. Предположим, что нам нужно сделать так, чтобы изначально никаких элементов не было и они появлялись постепенно – сначала елка, затем надпись «Новый» и только в конце «2022 год». Для этого на шкале необходимо сдвинуть каждый из слоев в правую часть с учетом того, что первый будет длиннее второго, а второй – длиннее третьего.
2. Чтобы запустить анимацию, достаточно нажать на кнопку запуска в левой части шкалы времени.
3. Давайте теперь немного усложним анимацию – сделаем так, чтобы елка появлялась снизу, а надписи слева и справа. Первым делом раскрываем на шкале слой с елкой, в моем случае он называется «Без названия», и нажимаем на иконку, расположенную слева от надписи «Перспектива».
4. В результате под слоем с елкой у нас появляется оранжевый ромбик. Важно, чтобы он горел и был расположен в начале слоя – только в этом случае мы можем изменять положение объекта. Если все так, то просто перемещаем елку в нужное положение – в моем случае в самый низ, за границы холста. Убедитесь, что нужный объект выбран в слоях справа. Управлять приближением и отдалением холста можно с помощью клавиши «ALT» и колесика мышки – это поможет вам проще работать с объектами вне холста.
5. Теперь выбираем то время, когда у нас будет появляться елка. В этой точке возвращаем елку в привычное состояние, то есть в центр холста. Таким образом, у нас появится вторая точка, но уже не закрашенная.
6. Можете проверить – теперь елка появляется снизу. Аналогичным образом мы можем поступить с другими объектами.
7. Также мы можем работать и с прозрачностью объекта. Например, можно сделать так, чтобы елка выходила снизу, постепенно проявляясь. Для этого необходимо добавить еще один ромбик, но уже с функцией «Непрозрачность». А в правой части увести в ноль непрозрачность выбранного объекта.
8. Вот таким образом мы можем создавать анимацию в Фотошопе. Чтобы ее экспортировать в формат GIF, необходимо в верхнем левом углу выбрать «Файл» -> «Экспортировать» -> «Сохранить для Web (старая версия)».
9. В отобразившемся окне выбрать «Сохранить…».

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

Как я уже говорил выше, анимация в Photoshop – это один из самых быстрых способов показать дизайнеру свою задумку. Если же нужна полноценная гифка для использования в интернете, стоит использовать покадровую анимацию. Как с ней работать – поговорим далее.

Вариант 2

Покадровая анимация строится так, будто мы создаем мультфильм. В целом, если посидеть подольше, то можно действительно создать небольшой мультик.

Давайте разбираться, как все это работает. Чтобы стало более понятно, я вернусь к изначальному варианту, когда анимация не была настроена.

1. Итак, перед нами отображена временная шкала – чтобы создать покадровую анимацию, необходимо перейти в данный режим, который открывается через кнопку в нижнем левом углу.
2. В отобразившейся вкладке мы видим один слайд – где расположена елка с текстом. Первым делом нам потребуется сделать так, чтобы текст не было видно, а елка располагалась за пределами холста с непрозрачностью 0%. Это необходимо, чтобы воссоздать нашу предыдущую идею, когда плавно появляется елка, а затем текст.
3. Для этого убираем елку за пределы, делаем ей непрозрачность 0%. Аналогичным образом поступаем с текстом, только сдвигаем его влево и вправо.
4. Теперь нам потребуется создать второй кадр, на котором будет появляться елка. Для этого дублируем кадр с помощью кнопки в виде плюсика, расположенной под слайдом.
5. Выдвигаем елку и задаем ей непрозрачность 100%.
6. Также дублируем этот кадр и в нем уже выдвигаем весь текст. Не забываем настроить его непрозрачность на 100%.
7. Анимация сделана, теперь ее можно запустить – для этого под временной шкалой есть соответствующая кнопка.
8. При запуске анимации мы увидим, что она мгновенная: нет плавности, все элементы появляются в одну секунду. Чтобы это исправить, необходимо создать промежуточные кадры. Делается это очень просто – в один клик. Для начала жмем на кнопку, расположенную слева от дубликата кадров на временной шкале.
9. В результате перед нами отображается окно, где необходимо указать количество кадров. Чем больше их будет, тем медленнее будет анимация. Я поставлю значение в 20 кадров – оптимальный для меня вариант.
10. Если мы сейчас запустим анимацию, то увидим, что елка плавно выходит снизу, но вот текст также появляется мгновенно. Связано это с тем, что промежуточные кадры мы сделали между первым и вторым кадром. Поэтому необходимо проделать такую процедуру со вторым и последним кадром. Сделать вы это сможете уже самостоятельно, а я на этом закончу.
11. Осталось сохранить проект в формате GIF, как мы делали в предыдущем варианте. Открываем «Файл» -> «Экспортировать» -> «Сохранить для Web (старая версия), затем в отобразившемся окне нажимаем «Сохранить…».

Вот такими несложными действиями можно создать анимацию в Фотошопе. Да, она не подойдет для каких-то сложных сценариев, которые, например, можно реализовать в Adobe Animate, но для реализации простых гифок или презентации идей – в самый раз.