Создание 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, но более распространена в Интернете за счёт простоты её изготовления.
С праздником! С первым днём Весны!)
хах, спасибо не ожидал! 😀
…аж прослезился 😉
Присоединяюсь к поздравлению!!!
Зачетный бургер такой вышел)))
по сути добавлю ещё….
сейчас Image Ready уже не входит в поставку фотошоп, это актуально только до версии CS2(кажется). На данный момент весь приведённый в уроке функционал(палитра анимации) нтегрирован прямо в фотошоп
Да, я бы тоже не отказался)
Так наверное и есть. У меня КС2 тоже установлен)
Классно!
а где можно скачать такую программу?
Аня, это ImageReady, раньше она шла в комплекте с фотошопом, теперь фотошоп тоже так умеет и надобность в программе отпала…
Запустите фотошоп, откройте меню Window (окно), и включите палитру Animation(анимация)
По работе приходилось часто делать банеры в GIF
Посмотрел панель Анимация в PS CS5. Чего-то они так намудрили, что я даже и не разобрался. в Image Ready гораздо проще всё делается, ну по крайней мере покадровая анимация. В CS5 как вижу есть плавные переходы прозрачности и перемещение.
это такой новый таймлайн… удобный если чё )) но старый покадровый тоже оставили… на палитре анимации справа внизу переключатель между режимами… иконка такая типа три кадра такие )
Thanks for sharing!