Оглавление
Введение
GIF-анимация – очень полезная во многих случаях технология. Поэтому она и используется уже насколько десятилетий. Adobe Flash – сильно раскрученная технология. Сколько было сделано Flash – роликов. Безоблачное будущее у Adobe Flash технологии казалось не вызывало сомнений. Но всё рухнуло, можно сказать в одночасье. А GIF-анимация живёт и процветает и находит всё новые и новые области применения.
Основной и “проверенный веками” инструмент для создания анимированных GIF-файлов – это Photoshop. Разберем, как можно создать GIF-анимацию в графическом редакторе Photoshop CC 2018.
Как создать GIF-анимацию в Photoshop
Исходными данными для GIF-анимации могут быть нарисованные картинки, фотографии и даже короткие видео. Любые из этих данных должны быть представлены в виде отдельных фреймов (Frames) и размещены в слоях (Layers). А уже все слои с фреймами нужно разместить на временной шкале (Timeline). После размещения слоёв в виде кадров (Frames) на временной шкале, GIF-анимация, в черновом варианте, готова. Нужно её настроить и экспортировать, то есть создавать GIF-файл и сохранять его на компьютере.
Операция размещения исходного материала в слоях называется – “Импорт”. С рассмотрения этой операции и начнём.
Импорт исходных данных
Импорт серии фотографий
1. Открыть Photoshop и выбрать в меню File -> Scripts -> Load Files into Stack (Загрузить файлы в стек).
2. Щелкнуть Browse (Обзор) и найти фотографии, которые предполагается использовать для создания GIF-анимации. Удерживая нажатой клавишу Shift, выбрать все файлы из стека и нажать OK (Подтвердить).
3. Нажать ОК, чтобы импортировать фотографии в однослойный (single layered) файл.
В панели Layers (Слои) в правой части рабочего пространства (workspace) будет создано несколько новых слоев. Эти отдельные слои станут кадрами анимированного GIF.

Для создания GIF-анимации, можно импортировать короткое видео.
Импорт короткого видео
Если GIF-анимации предполагается создать из короткого видео, то кадры этого видео необходимо преобразовать в отдельные слои (layers). Для чего необходимо выполнить следующие действия:
1. Открыть Photoshop и выбрать в меню File -> Import -> Video Frames to Layers ….
2. Найти и выбрать видеофайл, который предполагается использовать, и нажать Open (Открыть).
3. Нажать OK, чтобы преобразовать видеокадры в однослойный файл (single layered file).
Так как Photoshop не в состоянии полностью импортировать слишком длинное видео, следует использовать параметры в окне Import (Импорт), чтобы ограничить количество импортируемых фреймов. Но можно выбрать импорт не всего видео, а лишь только его фрагмента. Также, можно ограничить количество импортируемых кадров (frames), задав интервал, например каждые 2 кадра (every 2 frames).
Создание GIF-анимации из рисунков
Открыть временную шкалу
1. Выбрать Window -> Timeline (Окно -> Временная шкала), чтобы открыть панель Timeline (Временная шкала).
2. Щелкнуть стрелку на кнопке в центре панели Timeline и выбрать (то есть – подвести курсор и кликнуть левой кнопкой мышки) Create Frame Animation (Создать анимацию кадра).
3. Нажать выбранную кнопку Create Frame Animation, чтобы создать новую покадровую анимацию (new frame animation). На временной шкале появится картинка из первого слоя.

Преобразование слоев (layers) в кадры анимации

1. Кликнуть иконку меню в правом верхнем углу панели Timeline. Откроется меню.
2. Выбрать из меню пункт Make Frames From Layers (Создать кадры из слоев).
Начинается процесс преобразования всех слоёв панели Layers (Слои) в отдельные кадры анимации, размещаемые на временной шкале (Timeline). Временная панель заполняется кадрами будущей GIF-анимации.
Можно нажать кнопку Play (Воспроизвести) в нижней части панели Timeline (или нажать клавишу Spacebar (Пробел) на клавиатуре, чтобы просмотреть анимацию.
Если анимация воспроизводится в обратном порядке, то нужно кликнуть иконку меню, в правом верхнем углу панели Timeline и из открывшегося меню выбрать Reverse Frames (Кадры в обратном порядке).
Зациклить анимацию
Раскрыть меню повтора (repeat), кнопка которого располагается в нижней части временной панели Timeline и выбрать пункт Forever (Навсегда). Это создаст зацикленную анимацию.

Нажать кнопку Play (Воспроизвести) в нижней части панели Timeline (или нажать клавишу Spacebar (Пробел) на клавиатуре, чтобы просмотреть анимацию.

GIF анимации
1. Выбрать в главном меню File > Export > Save for Web (Legacy)… Откроется окно Save for Web.
2. Выбрать GIF 128 Dithered в меню Preset.
3. Выбрать 128 в меню Colors (Цвета).
4. Если используется GIF анимация в Интернете, то желательно ограничить размер файла анимации, изменив значения полей Width (Ширина) и Height (Высота) в параметрах Image Size (Размер изображения).
5. Выберем Forever (Всегда) в меню Looping Options(Параметры зацикливания).

Чтобы увидеть, что получилось, нажмём кнопку Preview… (Предварительный просмотр) в нижнем левом углу окна Save for Web (Экспорт) и просмотрим GIF-файл в веб-браузере. Если нас файл удовлетворяет, сохраним его, нажав кнопку Save… (Сохранить) и выбрав папку, для хранения вновь созданного, анимированного файла GIF.
Давайте посмотрим созданную GIF-анимацию:

Источники
– Create an animated GIF from a series of photos