Уроки Анимации Для Начинающих.

вторник, 18 декабря 2012 г. 2 коммент.
Этот урок для тех, кто только начинает осваивать принципы создания анимированных картинок и пользуется программой Photoshop время от времени.
Никаких особых эффектов к изображению мы применять не будем, урок рассчитан на то, чтобы вы поняли основной алгоритм создания анимации и, следуя советам, смогли создавать свои не сложные картинки. 


Итак, вот итоговая картинка:


Как видите, это совсем простое изображение. Главное - заставить шарик прыгать)))
Начнем.
Создаем новый документ: Файл - Новый
Размер может быть любым

Создаем новый слой, называем его "Заливка фона" и заливаем его цветом, который вам нравится:

Создаем новый слой, называем его "Шарик". Активируем инструмент "Овальная область" и, зажав клавишу "SHIFT", рисуем круг. Заливаем его любым цветом:

Снимаем выделение, у вас должно получиться примерно следующее:

Оставаясь на слое "Шарик", дублируем его:

Берем инструмент "Перемещение" и, оставаясь на дублированном слое (он у вас по умолчанию будет называться "Шарик (копия)", перемещаем дубликат немного выше. Вот так:

Аналогично делаем еще один дубликат слоя и перемещаем его немного выше второго шарика:

Делаем третий дубликат слоя. Но перемещаем мы этот шарик в самый низ, совмещая с первым шариком:


Итого у нас получилось 4 слоя с шариком и располагаются они следующим образом:

Теперь приступим к созданию анимации. Но прежде всего посмотрите, как отключаются и включаются слои, так как это очень важно:

Открываем: Окно-Анимация:


Внизу появляется окошко для создания кадров. Настраиваем первый кадр:
Можно выставить другое время отображения кадра. Например, если вы поставите 0,1 сек., шарик будет прыгать быстрее))

Создаем второй кадр нажатием соответствующей кнопки:


Аналогично создаем следующие кадры. Число кадров равно количеству слоев, которые мы будем анимировать. В нашем случае - это 4:


Нужное количество кадров мы создали. Теперь будем их настраивать. Переходим на первый кадр. Включаем слой "Шарик", остальные слои с шариком отключаем. Вот так:


Переходим на второй кадр. Включаем слой "Шарик (копия)", отключаем слои:
Шарик
Шарик (копия 2)
Шарик (копия 3)

Переходим на третий кадр.Включаем слой "Шарик (копия 2), отключаем слои:
Шарик
Шарик (копия)
Шарик (копия 3)


Переходим на четвертый кадр. Включаем слой "Шарик (копия 3), выключаем слои:
Шарик
Шарик (копия)
Шарик (копия 2)


Нажимаем кнопку воспроизведения и просматриваем, что у нас получилось:


Полученную анимированную картинку теперь необходимо сохранить в формате GIF: Файл - Сохранить для WEB...



Сохраняем на компьютере нашу анимированную картинку:

Желаю удачи!












2 коммент.:

  • Елена комментирует...

    Аллочка,
    я тоже очень люблю анимацию,
    в плане веб-дизайна - это моя слабость)))
    Обожаю анимировать всякие баннеры, открытки, картинки. Пока вот опубликовала всего один урок, времени немножко не хватает, Но я буду стараться)))

 

©Copyright ArtDesign | TNB