на
форуме можно задать вопрос, посмотреть ответы на часто задаваемые вопросы
Здравствуйте!
Вы попали на информационно-образовательный сайт посвященный информатике,
информационным технологиям и компьютерным играм. Подробнее о целях и задачах
сайта в разделе Главная. [English
version of this page here...]
Создаем
анимацию хотьбы волка в Photoshop и ImageReady
Анимацию
будем создавать на основе волка нарисованного в предыдущем уроке - рисуем
волка
В
этом уроке мы познакомимся с тем, как выполнить анимирование персонажа
на примере хотьбы волка.
Мы
создадим два варианта анимации - в формате gif для использования в интернет-публикациях
и тестовых целях и в формате tga для использования в компьютерной игре
наборы
слоев Frame0 и Frame4 останутся без изменений. В остальных наборах нужно
выполнить анимацию движения конечностей, как это описывалось.
рассмотрим
эту работу на примере анимации движения левой ноги -
выбираем
инструмент Move Tool и ставим галочку Auto Select Layer
в
панели слоев выбираем набор Frame2 - это будет 3 по счету справа кадр анимационной
цепочки, щелкаем на изображении левой ноги -
при
этом набор Frame2 в панели слоев автоматически развернется и будет выбран
слой LLeg
в
панели свойств инструмента Move Tool нужно установить галочку у пункта Show
Bounding Box, при этом вокруг выбранного элемента появится пунктирная рамка,
которую удобно использовать для выполнения трансформаций.
В
нашем случае в кадре Frame2 ногу нужно повернуть в крайнее левое положение
наводим
курсор на угловые маркеры и выполняем поворот
перемещаем
ногу в правильное положение, если угол поворота достигнет некоторого значения,
то можно будет изменить точку центра вращения (мишень в центре пунктирной
рамки). Обратите также внимание, что если нога оказывается на заднем плане
- за правой ногой и телом, то ее надо перетащить выше этих слоев (см. рисунок
до рисунка выше)
аналогичным
образом выполняем повороты на слоях Frame1 и Frame3, но на меньший угол.
Повторяем анимацию в кадрах Frame5 - Frame7 с движением ноги теперь уже
назад, а не вперед
при
этом анимационная цепочка примет следующий вид -
повторяем
процесс для правой ноги -
левой
руки -
и
правой руки -
можно
также анимировать небольшое смещение тела вверх-вниз
в
конечном итоге готовая анимация в gif-файле будет такой -
пока
анимация находится в виде анимационной цепочки ее недостатки могут быть
неочевидны. увидеть все допущенные ошибки позволяет просмотр анимации в
динамике - как в указанном анимированном gif-файле
Как
его создать?
Сохраняем
анимационную цепочку в формате jpg с максимальным качеством (12).
Открываем
сохраненный файл.
Включаем
режим отображения сетки.
При
помощи рамки прямоугольного выделения выделяем кадр 0 (краний правый)
и копируем в буфер обмена (Edit > Copy)
Создаем
новый файл и вставляем в него скопированный кадр. Остальные кадры анимационной
цепочки вставляем последовательно на отдельные слои, сохраняем файл в формате
psd с именем, например, anim_wolf_for_gif.psd
Запускаем
программу ImageReady и открываем созданный файл из нее.
теперь
нам остается только создать анимационную цепочку для gif и вывести ее в
gif-файл
если
панель анимации не отображается включите ее отображение как показано на
рисунке
панель
слоев отображеется командой Windows > Layers
для
создания нового кадра анимации нажимайте кнопочку Duplicates current layer,
для задания времени показа кадра нажимайте показанное на рисунке поле времени
-
вся
суть анимации сводится к тому, что в каждом кадре анимационной цепочки отображается
нужный слой, т.е. в первом кадре должен быть виден только первый слой, во
втором - только второй и т.д.
для
проигрывания анимации можно нажать кнопочку Play/Stops animation в панели
анимации
сохраните
изменения в формате psd, для вывода в gif-файл используйте пункт меню
File > Save Optimized As
Созданный
gif-файл можно просмотреть обычным средством просмотра изображений Windows
