Создание GIF анимации

Создание GIF анимации

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

Создание GIF анимации

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

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

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

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

Создание GIF анимации

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

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

Создание GIF анимации

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

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

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

  • Layers (Слои)
  • Animation (Анимация)
Лучше всего подготовить все слои в фотошопе.

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

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

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

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

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

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

File — Save Optimized As…

На этом всё.

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

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




Комментарии (11)

  1. deburger

    хах, спасибо не ожидал! 😀
    …аж прослезился 😉

  2. Александр

    Присоединяюсь к поздравлению!!!
    Зачетный бургер такой вышел)))

  3. deburger

    по сути добавлю ещё….
    сейчас Image Ready уже не входит в поставку фотошоп, это актуально только до версии CS2(кажется). На данный момент весь приведённый в уроке функционал(палитра анимации) нтегрирован прямо в фотошоп

  4. Macroart

    Да, я бы тоже не отказался)

  5. Macroart

    Так наверное и есть. У меня КС2 тоже установлен)

  6. ixley

    Классно!

  7. Аня

    а где можно скачать такую программу?

  8. deburger

    Аня, это ImageReady, раньше она шла в комплекте с фотошопом, теперь фотошоп тоже так умеет и надобность в программе отпала…

    Запустите фотошоп, откройте меню Window (окно), и включите палитру Animation(анимация)

  9. Almirus

    По работе приходилось часто делать банеры в GIF

  10. Macroart

    Посмотрел панель Анимация в PS CS5. Чего-то они так намудрили, что я даже и не разобрался. в Image Ready гораздо проще всё делается, ну по крайней мере покадровая анимация. В CS5 как вижу есть плавные переходы прозрачности и перемещение.

  11. Deburger

    это такой новый таймлайн… удобный если чё )) но старый покадровый тоже оставили… на палитре анимации справа внизу переключатель между режимами… иконка такая типа три кадра такие )

Оставить комментарий