Создание GIF анимации дело нехитрое. На примере разберём весь процесс изготовления анимированной картинки в растровом формате GIF.

Приготовил съестной подарок к дню рождения Deburger‘а — самого активного участника в нашем сообществе.

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

Процесс рисования

Рисовал на отдельных слоях составные компоненты этого пирожка, используя референсы:

Наделав кучу слоёв, приступил к анимации.

GIF Анимация в Adobe ImageReady

Image Ready входит в стандартную поставку вместе с Photoshop. Очень удобно, что не нужно ничего дополнительно устанавливать, для того, чтобы сделать анимацию в формате GIF.

Как анимировать

Понадобятся две панели:

• Layers (Слои)
• Animation (Анимация)

На каждом кадре в панели Animation можно сделать видимым любое нужное количество слоёв.

Создайте несколько кадров кнопкой, помеченной цифрой 2 на скрине выше и сделайте, чтобы на каждом кадре были видимы разные слои. В общем-то, весь процесс анимации состоит в том, чтобы нужные слои сделать видимыми в нужном кадре.

Я на каждый следующий кадр просто делал видимым очередной слой (отмечено на рисунке цифрой 3).

Время задержки между кадрами высталяется у каждого кадра отдельно в панели Animation. (отмечено цифрой 1 на рисунке выше). Время можно выбрать в промежутке:  от без задержки до 10 сек.).

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

После того, как все кадры обработаны, можно сохранять анимация в GIF. Это делается в меню:

File — Save Optimized As…

На этом всё.

Гиф анимация конечно более объёмна в весе в отличие от векторного аналога Flash, но более распространена в Интернете за счёт простоты её изготовления.

С праздником! С первым днём Весны!)