Каталог




Главная » Статьи » Обучающие статьи » Общая » Делаем анимацию для аватара (на примере)


Делаем анимацию для аватара (на примере)




Ruzz®



Статус: Offline
Автор статьи: Ruzz®



Добавлено: 23 февраля 2014
Просмотров: 4551 | Комментарии: 22

Понравилось: 26 пользователям


Это небольшой урок по созданию анимационного аватара для сайта с помощью программки Easy Gif Animator (её можно найти в интернете, как демку на 30 дней, так и полную версию). Начальное знание Фотошопа очень приветствуется .)





  Итак, для начала нам нужно решить, что мы хотим сделать. Я выбрал для наглядного примера урока простенькое вращение знака радиации. Открываем Фотошоп и создаём файл размерами стандартного аватара сайта (140 на 140) с прозрачным фоном и цветоразрешением 8 бит (меньше будет весить, что при лимитированном весе аватара имеет значение).




Я по быстренькому набросал значок (симметричность необходима, чтобы он вращался на одном месте по центру, а не болтался, как чёрт знает что). Тут то вам и пригодятся знания Фотошопа.




Теперь сохраняем наше творение в формате gif (можно сохранять и в формате png, но я предпочёл в данном случае первый для меньшего веса исходной аватарки). Это будет наш первый кадр анимации и мы назовём его, соответственно, 1.




Далее в разделе Редактирование и Трансформация выбираем Поворот. Из-за особенностей значка нам достаточно повернуть его на треть, чтобы он принял ту же позицию, что и в начальном кадре. То есть, нам нужно повернуть его на 120 градусов (третья часть от 360 - полного оборота). Выберем шаг, равный 12 градусам и у нас получится 10 шагов - 10 кадров по двенадцатиградусному повороту каждый. Вбиваем в окошко наверху (там будет символ угла) значение 12 и подтверждаем поворот.




Теперь снова сохраняем новый получившийся кадр, но уже под именем 2. И так соответственно со всеми кадрами. Поворот на 12 градусов, сохранение под именем следующего кадра. Внимание, так как значения угла указывает не абсолютный угол положения объекта, а именно насколько будет повёрнут объект относительно текущей позиции, то нужно каждый раз вбивать в значение угла поворота именно 12, а не 12, 24, 36 и так далее.




Итак, у нас есть10 кадров в виде файлов gif, которые мы будем задействовать в цикличной анимации.


Открываем Easy Gif Animator.




Кликаем Create New Animation, а затем Add Image




Теперь выбираем приготовленные нами кадры.



Указываем сколько циклов будет проигрываться анимация (или же бесконечное количество раз) и сколько сотых долей секунды будет длиться каждый кадр. Мы поставим 5, но в самой программе можно каждому кадру затем задать своё конкретное значение длительности.




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




Также можно просмотреть, как всё будет выглядеть. Нас всё устраивает и мы сохраняем файл в gif формате. Можно сохранить в виде avi или флэш файла, но нам нужен именно gif.




Заливаем на хостинг картинок, вставляем ссылку и вот, что у нас получилось.




Приятного и успешного аватаромоделирования .)




Всего комментариев: 22

Информация
Для того, чтобы оставлять комментарии к данной публикации необходимо зарегистрироваться .
Набор в команду сайта
Наши конкурсы











Ответ на жалобу смотрите в разделе жалоб