Анимация в 2022. полный разбор (тренды c примерами)

Дополнительные вопросы и ответы

Как скачивать гифки с Giphy?

Giphy может быть наиболее популярной базой данных гифок. Интерфейс сайта разделён на категории вроде «Животные», «Тренды» и т.д., в результате чего поиск упрощается.

Можно скачивать гифки с этого сайта:

1. Откройте браузер и перейдите на giphy.com.

1. Ознакомьтесь с доступными категориями гифок.

1. Найдя понравившуюся гифку, нажмите на её миниатюру для открытия.

1. Нажмите правой кнопкой мыши и выберите команду «Сохранить изображение как» или «Скачать изображение», в зависимости от браузера.

1. Дайте файлу название, но не меняйте расширение .gif.

1. Нажмите «Сохранить».

Если вы хотите сохранять гифки в формате MP4, Giphy обладает встроенным инструментом преобразования в видео. Вот как его использовать:

1. Нажмите на гифку для преобразования.

1. На панели слева откройте вкладку «Медиа».

1. Найдите поле MP4 и нажмите «Копировать».

1. Откройте новую вкладку в браузере и вставьте скопированный адрес в адресную строку.

1. Правой кнопкой мыши нажмите на видео.

1. Нажмите «Сохранить видео как».

Если вы хотите пользоваться Giphy на смартфоне, приложение есть в магазинах Android и iOS.

Как создавать гифки онлайн

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

GIFMaker является одним из наиболее популярных онлайн-генераторов гифок. Он позволяет загружать изображения и видео для их преобразования в GIF. На сайте не нужна регистрация и имеется множество опций для настроек. Вот как сделать гифку при помощи GIFMaker:

1. Откройте браузер и перейдите по адресу gifmaker.me.
2. Нажмите Upload Images или Video to GIF, в зависимости от вашего источника.
3. Выберите файл для загрузки. Можно выбирать больше одного файла, удерживая Ctrl или ⌘и нажимая на эти файлы.
4. Получившийся файл должен быть в формате .jpg, .png или .gif.
5. С левой стороны есть панель управления. Можно менять скорость воспроизведения, количество повторений, другие настройки.
6. После установки параметров гифки нажмите Create GIF Animation.
7. Можно нажать View the GIF, прежде чем скачивать гифку. Если результат вам не понравится, можно вернуться в панель управления и поменять настройки.
8. Для сохранения файла нажмите Download the GIF.

Как создать анимационное изображение?

Есть обширный выбор инструментов для создания анимационных изображений в формате GIF. В зависимости от вашей операционной системы можно выбирать соответствующую программу. Большинство редакторов изображений, вроде Adobe Photoshop https://www.adobe.com/products/photoshop.html, умеют создавать гифки.

Ниже приведены некоторые другие приложения:

Gif Brewery (только iOS)

Gif Toaster (есть и в Google Play)

Sketch Me! (только Windows)

Создание GIF анимации онлайн теперь проще.

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

Благодаря использованию технологиги ajax, создание гиф анимации происходит без обновления страницы. Это ускоряет достижение поставленной перед приложением задачи и устраняет ненужное мелькание страниц, медленную загрузку и т.д. По сути, Gifius.ru  — это полноценная программа для создания gif анимации онлайн, ничем не уступающая своим декстопным аналогам.

Прозрачность

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

В демо берём блок под номером 12, которого трясёт как бешеного, и опять же только не много изменится скрипт вызова:

$(function(){ $(‘#demo12’).jrumble({ x: 6, y: 6, rotation: 6, speed: 5, opacity: true, opacityMin: .05 }); $(‘#demo12’).hover(function(){ $(this).trigger(‘startRumble’); }, function(){ $(this).trigger(‘stopRumble’); }); });

В данном примере задано значение 6 по обеим осям. Параметр rotation равен 6, скорость 5. Прозрачность в скрипте вызывается — opacity со значением true — это обязательная строчка. А так же сила прозрачности — opacityMin: стоит 05. Чем больше будет это значение тем прозрачнее будет блок при наведении.

Типы анимации

Рассмотрим, какие существуют типы анимации.

Гиф анимация

GIF (с расширением файла, .gif) — это формат файла изображения, который анимируется путем объединения нескольких других изображений или кадров в один.  

Пример GIF. (сконвертирован в mp4 для меньшего размера)

В отличие от формата  JPEG (.jpg), GIF обычно используют алгоритм сжатия, называемый кодировкой LZW, который не ухудшает качество изображения и позволяет легко хранить файл в байтах.

Более подробно о том, что такое GIF можно прочитать на Википедии.

Как сделать GIF самостоятельно?

• Ранее мы уже писали о самом быстром способе создания гифок.
• А вот еще один полезный урок по созданию гифок в Adobe After Effects.

Cinemagraphy

Если вы еще не слышали о cinemagraphy, то 100% сталкивались с ней в Интернете.

Пример Cinemagraphy анимации

Синемаграфия — это «живые картинки», но более сложные, чем анимированные GIF (у хорошо сделанной cinemagraphy не видно стыка начала и конца). Другими словами — это изящное сочетание статики и динамики.

Посмотрите эту видео подборку для лучшего понимания:

Подборка cinemagraphy

Изюминка сinemagraphy заключается в том, что на таких картинках есть одно, согласованное и сосредоточенное движение, которое рисует картину или рассказывает историю. 

Где используется Сinemagraphy?

Синемаграфия хорошо работает в рекламе, она моментально привлекает внимание и собирает много переходов на сайт. Для Instagram нужно экспортировать синемаграфию в формате видео

Ролик должен быть не менее 3 секунд. Пролистывая ленту сработает автопуск и Instagram автоматом зациклит видео

Для Instagram нужно экспортировать синемаграфию в формате видео. Ролик должен быть не менее 3 секунд. Пролистывая ленту сработает автопуск и Instagram автоматом зациклит видео.

Для Facebook и ВКонтакте тоже нужно делать экспорт в видео.

Вот хороший пример cinemagraphy товара:

Анимации юбки привлекает взгляд

Если хотите сделать живые фото товаров в своем магазине:

1. Используйте софт по типу этого или Photoshop.
2. Разместите видео или GIFку в карточку товара, как простую фотографию.

Как сделать синемаграфию

Несколько базовых уроков создания cinemagraphy.

Как создать Cinemagraph в Photoshop

Создание синемаграфии с помощью приложения на мобильном (iOS)

Как создать Cinemagraph на Iphone

Анимэ

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

Что такое анимэ

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

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

Смотрите Лучшие Аниме 2018 года.

Анимэ сегодня — это процветающая индустрия в Японии, которая включает такие жанры как:

• детские мультфильмы;
• комедия и драма;
• фантастика;
• научная фантастика;
• экшн;
• спорт и история.

 …. и много других. Все это под разные целевые аудитории. Больше можно посмотреть здесь.

Так же ознакомитесь с мнением может ли Анимэ стать мейнстримом (на анг языке).

Примеры японской анимации

Prison School Anime

Flavors of Youth

Как создается анимэ?

Процесс создания аниме состоит из нескольких этапов:

• поиск идеи анимации и персонажа;
• придумывание концепта (продумываются персонажи, основная сюжетная линия, делаются какие-то первые наброски);
• написание подробного сценария;
• рисование персонажей и фонов;
• примерная раскадровка;
• зарисовки или скетчи приводятся в цифровой вид.

Видео — Как создается анимэ

Тряска

Теперь мы будем вызывать сам скрипт тряски.

Принцип работы скрипта очень прост. Он осуществляет беспорядочные движения по осям x и y, с определённой скоростью. Данные параметры мы можем настраивать сами.

Например, в демо у нас есть самый первый блок под номером один. Он при наведении двигается по заданным осям: x: 2 и y: 2, так же задан параметр rotation с значением 1. Этот параметр определяет сильнее будет тряска или нет, другими словами, он не даёт далеко выходить блоку за его границы. Таким образом визуально получается малый или сильный эффект.

Теперь давайте посмотри как это всё будет выглядеть в коде:

Тенденции (тренды) в анимации

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

Смотрите Моушн Дизайн в 2022.

Вот самые популярные из них:

3D в стиле ретро и винтаж

Cтиль 3D-анимации, который снова становится популярным — это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так.

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

Высококонтрасная Cel Animation

Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X.

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

Результат — забавная последовательность от которой трудно отвести взгляд.

Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне.

Микс 2D и 3D

Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D.

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

Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию

Сверхсюрреализм

Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм.

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

Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам. 

Динамическая анимация функций в приложениях

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

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

Возрождение 2D-анимации в маркетинге

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

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

Пример видеоинфографики

Как скачивать анимацию GIF на Android

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

1. Откройте браузер и зайдите на сайт с гифкой.

1. Нажмите на анимацию для её запуска. Удерживайте до появления меню.

1. Выберите «Сохранить изображение» или «Скачать изображение» из списка.

1. Закройте браузер и откройте галерею фотографий, чтобы найти там скачанный файл GIF. Иногда он автоматические сохраняется в папку «Загрузки». Ищите его там, если не видите в приложении «Галерея».

Имеются сторонние приложения, позволяющие встраивать GIF в сообщения. Одним из самых популярных на Android приложений подобного рода является GIF Keyboard by Tenor . Вот как им пользоваться:

1. Откройте магазин Google Play и наберите в поиске «клавиатура GIF». Убедитесь, что производителем является Tenor.

1. Нажмите «Установить».

1. Когда установка завершена, откройте приложение.

1. Разрешите приложению доступ к контактам и хранилищу.

1. Теперь можно использовать GIF Keyboard для обмена файлами GIF в других приложениях, вроде Telegram или WhatsApp.

Другие примеры

Здесь будут представлены примеры скриптов блоков в демо под своим номером и классом:

Блок 14 (Клик)

$(function(){ $(‘#demo14’).jrumble(); $(‘#demo14’).toggle(function(){ $(this).trigger(‘startRumble’); }, function(){ $(this).trigger(‘stopRumble’); }); });

Блок 15 (Клик (удерживать))

$(function(){ $(‘#demo15’).jrumble(); $(‘#demo15’).bind({ ‘mousedown’: function(){ $(this).trigger(‘startRumble’); }, ‘mouseup’: function(){ $(this).trigger(‘stopRumble’); } }); });

Блок 16 (Без остановки)

$(function(){ $(‘#demo16’).jrumble(); $(‘#demo16’).trigger(‘startRumble’); });

Блок 17 и 18 (Удалённо)

Это интересный эффект, когда при наведении на правый блок двигается левый и наоборот.

$(function(){ $(‘#demo17’, ‘#demo18’).jrumble(); $(‘#demo17’).hover(function(){ $(‘#demo18’).trigger(‘startRumble’); }, function(){ $(‘#demo18’).trigger(‘stopRumble’); }); $(‘#demo18’).hover(function(){ $(‘#demo17’).trigger(‘startRumble’); }, function(){ $(‘#demo17’).trigger(‘stopRumble’); }); });

Блок 19 (Несколько сек. (Клик))

$(function(){ $(‘#demo19’).jrumble(); var demoTimeout; $(‘#demo19’).click(function(){ $this = $(this); clearTimeout(demoTimeout); $this.trigger(‘startRumble’); demoTimeout = setTimeout(function(){$this.trigger(‘stopRumble’);}, 1500) }); });

Блок 20 (Пульсирующий)

$(function(){ $(‘#demo12’).jrumble(); var demoStart = function(){ $(‘#demo20’).trigger(‘startRumble’); setTimeout(demoStop, 300); }; var demoStop = function(){ $(‘#demo20’).trigger(‘stopRumble’); setTimeout(demoStart, 300); }; demoStart(); });

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24—72-кадровой анимации.

Что ж, начнём!

1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.

2. Теперь, если у вас нет внизу слева окна «Анимация», смотрим наверх, открываем вкладку «Окно» — «Анимация».*

* — В примерах используется русифицированная версия Photoshop CS2.

Примечание: в новых версиях анимация создается в панели Window — Timeline (Окно — Шкала времени). Процесс создания анимации на примере Photoshop CC вы можете посмотреть в уроке — «Создание анимации в Photoshop CC».

На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:

Всегда/однажды — выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная — где показан принцип ДПД, воспроизводимая один раз — где показана смена сцен).

Выберите первый кадр — возвращает нас к самому началу.

Выбирает предыдущий кадр — не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию — Play/Stop.

Выбирает следующие кадры — следующий кадр. Ваш Кэп!

Tweens кадры анимации — с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.

Дублирует выбранные кадры — не совсем верное название… Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры — корзина.

3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).

4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.

Создаём новый кадр, и… Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).

Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.

Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.

5. Сидим, рисуем кадров 10—15…

6. И смотрим, что получилось.

Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.

Смотрите сами:

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

Эволюция синемаграфии

Сложно точно сказать, когда впервые появились в интернете «живые» фотографии, но определенно известно, что Apple сделала их популярными, когда стала использовать их в iPhone 6S. Но синемаграф – это все же немногим большее по продолжительности и чуть более насыщенное, чем изображение звездного неба. Позже анимационные картинки стали появляться в рекламе на билбордах, представляя образы, которые подмигивают или моргают.

Разумеется, веб-дизайн не остался в стороне, ибо анимационная техника позволяет удержать внимание посетителя на странице и делает сайт чуть интересней, занятней для изучения. По данным компании Flixel (в их блоге на сайте), занимающейся созданием синемаграфов: пользователь дольше на 6-8 секунд находится на странице с «ожившей» фотографией, чем со статичной картинкой

Создание GIF на iPhone

Пользователи iPhone могут использовать Giphy для создания гиф-файлов на ходу. Однако в App Store есть альтернативы. Сначала вы можете использовать бесплатное сопутствующее приложение Giphy Cam, которое упрощает интерфейс Giphy для простого создания гиф.

С этого момента хорошие приложения для создания GIF-файлов на вашем iPhone будут стоить вам несколько долларов. GIF Maker — Video to GIF Maker — популярная программа, хотя она будет стоить вам 1,99$, если вы хотите удалить водяные знаки и разблокировать все его функции.

GIF Maker от Momento также поможет вам сделать забавные гифки с остановкой движения. Это будет стоить вам 9,99$ за премиум-версию программы, но некоторые пользователи говорят, что ее набор функций стоит того.

Редактирование существующего GIF в GIMP

GIMP — еще одна программа для редактирования фотографий, похожая на фотошоп. Тем не менее, GIMP — это бесплатная программа с открытым исходным кодом, которую вы можете легко загрузить с официального сайта. Он также покажет кадры GIF в виде слоев. Сложность редактирования GIF зависит от количества кадров в GIF. В фотошопе вы можете поместить текстовый (отредактированный) слой поверх слоев, чтобы применить его ко всем другим слоям, однако в GIMP этот слой нужно поместить между каждым слоем. В любом случае, редактирование GIF все еще возможно в GIMP, выполните следующие действия, чтобы попробовать его:

1. Откройте программу GIMP, дважды щелкнув по ярлыку или выполнив поиск с помощью функции поиска Windows. Нажмите на меню «Файл» в строке меню и выберите опцию «Открыть», чтобы открыть файл GIF в GIMP.Открытие GIF-файла в GIMP
2. Нажмите «Фильтры», выберите «Анимация», а затем выберите опцию «Неоптимизировать». Это откроет неоптимизированное изображение в новом документе, и будет легче редактировать каждый кадр.Неоптимизация GIF
3. Вы можете выбрать и отредактировать каждый слой (фрейм) по-разному или создать новый слой и поместить этот слой между каждым слоем.Примечание. Вы можете создать текстовый слой и добавить его между каждым слоем, чтобы иметь текст в GIF. Вы можете нажать Ctrl + Shift + D, чтобы дублировать текстовый слой, а затем добавить их между каждым слоем.Создание нового текстового слоя и размещение между всеми слоями
4. Вы можете объединить новые слои редактирования с оригинальными слоями GIF. Щелкните правой кнопкой мыши на текстовом или редактирующем слое и выберите параметр «Объединить вниз», чтобы объединить его.Слияние нового текстового слоя с каждым фреймом
5. После редактирования вы также можете проверить предварительный просмотр GIF, щелкнув меню «Фильтры», выбрав «Анимация», а затем выбрав «Воспроизведение».
6. Закончив редактирование, щелкните меню «Фильтры», выберите «Анимация», а затем выберите параметр «Оптимизировать для GIF». Он снова оптимизирует GIF и откроет новый документ.Проверка изменений в воспроизведении
7. Наконец, нажмите на меню «Файл» в строке меню, выберите «Экспортировать как». Укажите имя и расширение GIF. Нажмите кнопку «Экспорт», чтобы сохранить файл GIF.

Post Views:
54

Каким аккаунтам подходят «живые» фото

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

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

Зарегистрируйтесь в SMMplanner и запланируйте посты в Инстаграм и Инстаграм Истории.

Как самому сделать «живые» фото

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

Cinemagraph Pro

Самое мощное приложение в этой области. Не из дешевых: годовая подписка стоит $199, бессрочная лицензия — $299. Компания Flixel, создатель приложения, здорово ведет свой Инстаграм: можно подписаться и черпать там идеи.

Приложение подойдет только для тех, кто сидит в iOS:

Cinegraph

Приложение попроще и подоступнее: 149 рублей, .

И приложение для тех, кто сидит на Андроиде: Cinemagraph.

Сохранение GIF анимации в Фотошоп

В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью горячая клавиша Alt + Shift + Ctrl + S все еще работает.

В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.

Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.

В открывшемся окне будут разные настройки видео, но ничего дополнительно менять не нужно, просто кликаете по кнопке Render. В итоге получите mp4 файл со слайдшоу фотографий/изображений.

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

Программы для создания анимации

Cinema 4D — универсальная комплексная программа для создания и редактирования трехмерных эффектов и объектов. 

Adobe After Effects —  программное обеспечение компании Adobe Systems для редактирования видео и динамических изображений, разработки композиций, анимации и создания разнообразных эффектов. 

Adobe Illustrator — редактор векторной графики и других дизайнерских решений.

Adobe Photoshop — многофункциональная программа графический редактор для создания 2D, 3D анимации, расовой графики и набором функций для создания векторных изображений. Большо о программе Adobe Photoshop можно прочитать в Википедии

Тебе также может быть интересно:

Анимация vs Мультипликация: в чём разница?