Покадровая анимация. Покадровая анимация в фотошопе Покадровый рисунок

Вы узнаете:

• Как открыть и закрыть и настроить панель анимации.
• Как добавлять, удалять и редактировать ключевые и кадры анимации.
• Для чего нужна кнопка Tween (Создание промежуточных кадров).
• Как сделать простую анимацию рисования звезды.
• Как настроить интервалы времени для каждого кадра анимации.
• Как оптимизировать анимацию для уменьшения размера Gif файла.
• Как импортировать Gif файлы в программу.
• Как переключаться с покадровой анимации на временную шкалу.

Урок состоит из следующих разделов:

1. Обучающее видео.
2. Что такое анимация.
3. Часть 1. Покадровая анимация.
4. Настройка интервалов.
5. Настройка периодичности повторов.

7. Оптимизация анимации.
8. Сохранение анимации.

10. Открытие GIF-файлов.
11. Кнопки унификации слоев анимации.
12. Закрытие панели анимации.
13. Вопросы.
14. Домашнее задание.

Что такое анимация

Анимация – это последовательная смена изображений, в результате которой нам кажется что объект движется, изменяет форму, появляется и исчезает, а так же с ним могут происходить другие динамичные действия.

При помощи анимации в программе Photoshop можно создавать слайд-шоу из фотографий или картинок, делать аватарки, баннеры, заставки для веб-страниц, динамичные открытки и различные презентации. Следует иметь в виду, что Photoshop все-таки графический редактор, и не рассчитан на сложные анимационные процессы. В программе есть два способа создания анимации – это покадровая анимация и анимация в режиме временной шкалы. Мы последовательно рассмотрим оба вида анимации. Весь 36 урок мы посвятим изучению покадровой анимации. А в 37 уроке займемся временной шкалой. Некоторые простые задачи удобнее выполнять именно в режиме покадровой анимации. Даже если вы умеете работать с временной шкалой из других программ, все равно, я вам советую попробовать выполнить задания из этого урока. Исходя из полученных знаний вы сможете принять решение о том какой метод вы будете использовать в каждом конкретном случае.

Часть 1. Покадровая анимация

Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.

Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значку внизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.

На панели инструментов выберите инструмент кисть черного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию (поставьте точку, нажмите Shift и поставьте следующую точку - линия получится прямой).

Создайте второй слой. Начертите следующую линию . Затем третий слой
и еще одну линию и т. д. У вас должно получиться шесть слоев, включая фоновый слой.

Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку в правой нижней части панели анимации.

Отключите видимость всех слоев кроме фонового слоя в палитре Layers (Слои), нажав на значок слева от миниатюры слоя. Это будет первый кадр нашей анимации.

Нажмите значок внизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значок и включите видимость второго слоя.

Продолжайте создавать новые кадры и включать видимость следующих слоев до тех пор, пока в последнем кадре не появится вся звездочка.

В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.

- преобразование в анимацию по временной шкале.

- Tween (Создание промежуточных кадров).

- Duplicate сurrent frame (Создание копии выделенных кадров).

- Кнопки воспроизведения (Как на любом магнитофоне).

Selects First Frame (Выбрать первый кадр ); Selects Previews Frame (Выбрать предыдущий кадр );

Play (Запуск анимации);

Selects Next Frame (Выбрать следующий кадр).

- Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).

Настройка интервалов.

Теперь настроим интервалы времени, в течении которых будут видны кадры анимации.

Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).

Настройка периодичности повторов.

Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.

Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.

Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.

При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).

Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.

Перейдите в панель анимации. Нажмите на значок Duplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя.
Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.

Дважды щелкните по слою для перехода в настройки стиля. Задайте тень и наложение цвета. Цвет выберите по своему желанию.

Вернитесь к первому кадру анимации
и снимите видимость слоя со звездой
в палитре Layers (Слои).

Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.

Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значок Duplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.

Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.

Снова скопируйте слой и еще немного увеличьте масштаб, а также поменяйте стиль. И добавьте кадр анимации. У вас должна получиться примерно такая раскадровка:

Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.

Оптимизация анимации.

Нажмите на значок в правой верхней части панели анимации. Появится дополнительное меню.

После завершения работы следует оптимизировать анимацию для уменьшения размера Gif файла и лучшей загрузки веб-браузером. Уменьшение происходит за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

Выберите Optimize Animation…(Оптимизировать анимацию) . Отметьте галочками оба пункта.
Bounding Box (Ограничительная рамка) - обрезает кадры по измененной области по сравнению с предыдущим кадром.

Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.

Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр «Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:

Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,

Do not dispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,

Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.

Сохранение анимации.

Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).

Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер. Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах. Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).

Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.

В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментов или меню File (Файл)- Edit in ImageReady (Перейти в ImageReady).

Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web ) .

Рассмотрим еще один маленький пример создания покадровой анимации, в котором разберем для чего нужна кнопка Tween (Создание промежуточных кадров) .

Создайте новый документ размером 500 на 250 пикселей. Выберите инструмент Type (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформацию текста также можно анимировать. В панели анимации задайте интервал 0,2 сек. Нажмите кнопку , чтобы скопировать первый кадр. Перейдите в палитру Layers (Слои) и уменьшите непрозрачность до 0. Поменяйте стиль слоя (например, вместо наложения градиента добавьте наложение цвета). Переключаясь между кадрами, вы сможете наблюдать, как меняется изображение.

Добавим перемещение. Выберите инструмент Move (Перемещение) и передвиньте текст вниз, за пределы листа. Перейдите в панель анимация и нажмите кнопку

В появившемся окне можно настроить количество добавляемых кадров. Чем их больше, тем равномернее будет переход. В графе Tween With (Промежуточные кадры) можно выбрать из списка, куда будут вставлены кадры:

Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.

Оставьте все настройки по умолчанию. Нажмите ОК.

Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.

Открытие GIF-файлов.

В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:

Обязательно установите QuickTime Pro 7.1 или выше.

В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.

Выберите в меню File (Файл) –Import (Импортировать) - Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.gif и вставить его в поле имя файла или вручную набрать наименование в этом поле. Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда
наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).

Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.

Кнопки унификации слоев анимации.

Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).

Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. Нажмите Play (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопку Unify layer visibility (Унифицировать видимость слоя). Появится окно: .

Нажмите Match (Синхронизировать) и снова запустите анимацию . Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.

В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).

Закрытие панели анимации.

Закрыть панель анимации можно разными способами:

Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).

Вопросы:

1. Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?

Выделенный кадр будет удален.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.

Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.

1. У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
   5 промежуточных кадров между последним и первым кадрами?

Выбрать первый кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).

Выбрать последний кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).

Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).

1. Для чего нужна оптимизация анимации?

Для преобразования в анимацию по временной шкале.

Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

Для настройки периодичности повторов анимации.

Домашнее задание:

1)Выполнить покадровую анимацию рисования звезды (по уроку).

2) Выполнить покадровую анимацию текста.

Программа Anime Studio Pro, строго говоря, не предназначена для создания покадровой анимации, поскольку у нее есть значительно более мощные анимационные инструменты. Но, тем не менее, возможность для покадровой анимации в программе имеется.

Покадровая анимация является традиционным способом анимирования, когда рисуются фазы движения персонажей. Эффект непрерывного движения получается, когда эти рисунки, выстроенные последовательно в ряд, прокручиваются достаточно быстро, чтобы глаз не успел различить отдельные фазы. Программа Anime Studio Pro работает по иному принципу. Создается объект, затем создаются ключевые кадры с данным объектом, а все промежуточные кадры программа рассчитывает и дорисовывает сама. То есть всю черновую работу по рисованию отдельных фаз движения программа берет на себя. Аниматор задает только опорные (ключевые) кадры.

Рассмотрим пример создания покадровой анимации движения сферы. Отметим 2 важных момента, о которых следует помнить. Во-первых, если каждая фаза движения сферы рисуется вами на отдельном векторном слое, то, если ничего не предпринять, слои (вернее, то, что нарисовано на них) будут видны один изпод другого. Другими словами, все фазы движения будут видны сразу. Нам же надо, чтобы в данный момент был виден рисунок только одной фазы.

Вспомним, что есть специальный переключающий слой типа Switch , который делает видимым только один из множества слоев, входящих в его состав. Поэтому все создаваемые векторные слои следует объединить в один переключающий слой. Если вы рисуете на одном слое, то, конечно, никаких переключающих слоев применять не надо. Во-вторых, рисуя следующий кадр, надо иметь перед собой рисунок или хотя бы контур рисунка, показанного на предыдущем кадре. Это нужно для того, чтобы было на что ориентироваться в процессе рисования. Ведь последующий кадр не должен сильно отличаться от предыдущего, иначе анимация получится не плавной, а скачкообразной. Для этой цели предусмотрен специальный инструмент воспроизведения контура предыдущих и последующих кадров, называемый Onionskins (Полупрозрачная бумага). Настройки этого инструмента показаны на рис. 6.89. Они расположены в верхней строке окна временной шкалы.

Рис. 6.89. Настройки инструмента Onionskins

Начнем рисовать кадры нашей анимации. Откройте новый проект. По умолчанию в нем уже имеется один векторный слой Layer 1. Чтобы лучше понять механизм покадровой анимации, в начале поработаем с одним векторным слоем. Проверьте, чтобы вертикальный указатель текущего кадра указывал на кадр 0. Инструментом Oval (Овал) нарисуйте овал (рис. 6.90). Откройте настройки инструмента Onionskins Relative frames (Относительные кадры) (рис. 6.90). Это даст вам возможность создавать маркеры предыдущих и последующих кадров. Закройте настройки Onionskins Onionskins .

Переместите вертикальный указатель текущего кадра на кадр 3 и щелкните левой кнопкой мыши под номером кадра 1 оцифрованной линейки номеров кадров. Появится серый прямоугольник маркера кадров. Маркер показывает на кадр 1, а вертикальный указатель - на кадр 3 (рис. 6.91). Это важно. С помощью инструмента Translate Points (Переместить узлы) немного передвинем вправо наш овал. Станет заметен контур овала, оставшийся от предыдущей позиции овала, позиции, в которой он был на кадре 1 и на которую указывает маркер (рис. 6.91). Такой контур рисунка, играющий вспомогательную роль, называют призраком или (если переводить дословно) луковой кожурой.

Передвинем вертикальный указатель текущего кадра на кадр 5 (рис. 6.92). Вы увидите, что призрак овала догнал реальный овал, то есть их позиции совместились, как и должно быть, потому что мы перемещаемся с шагом 2 кадра. Инструментом Translate Points (Переместить узлы) передвинем вправо наш овал, ориентируясь на предыдущую позицию, показываемую призраком.

Рис. 6.90. Создание кадра 0

Рис. 6.91. Создание кадра 3 с контуром предыдущего кадра

Рис. 6.92. Создание кадра 5 с контуром предыдущего кадра

Повторите аналогичные действия и создайте 31 кадр (с шагом 2 кадра). Я построил траекторию вверх, а затем опустил вниз к исходной позиции. Просмотрите анимацию. По сути мы делали вручную то, что программа Anime Studio Pro делает автоматически. Мы могли бы просто задать 2 или 3 ключевых кадра, отмечающих поворотные позиции на траектории движения, которую хотим получить, и программа рассчитала бы все необходимые промежуточные кадры. Мы могли бы задать закон интерполяции, который следует применить при переходах между кадрами, и в итоге получили бы такое же движение, какое мы получили, выстраивая анимацию по кадрам. Анимировать вручную целесообразно, если хотите получить весьма изощренное движение с изменением положения узлов на форме. Ведь можно пользоваться подсказками не только одного призрака и не только от предыдущего кадра. Расставьте маркеры с шагом один кадр следующим образом: 4 маркера до и 4 маркера после текущего кадра (рис. 6.93).

Рис. 6.93. Использование 8 маркеров

Теперь вы видите существенную часть траектории, по которой двигается ваш объект, и можете что-то изменить. Давайте добавим новый узел на сферу, несколько изменив ее форму (рис. 6.94). Так как узел не анимирован, то он остается на месте, в то время как остальные узлы будут двигаться по траектории.

Рис. 6.94. Добавление неанимированного узла

Рис. 6.95. Создание стробоскопического эффекта

Удалите добавленный узел и создайте стробоскопический эффект, добавив несколько кадров перемещения сферы за пределы траектории. Кадры должны идти без промежутков друг за другом. На рис. 6.95 это кадры с 9 по 17.

Так как теперь маркеры нам не нужны, удалите все маркеры. Чтобы стереть маркер, достаточно щелкнуть по нему один раз левой кнопкой мыши. Можно также щелкнуть по кнопке Clear All (Очистить все) в настройках инструмента Onionskins (Полупрозрачная бумага) (рис. 6.89). Выделим, удерживая нажатой клавишу , все ключевые кадры слева и справа от кадров, дающих стробоскопический эффект. Удалим их, щелкнув по кнопке Delete , которая находится в верхней строке панели Timeline (Временная шкала). Должны остаться только кадры с 9 по 17 (рис. 6.96).

Рис. 6.96. Оставшиеся кадры

Зациклим наши стробоскопические кадры, то есть кадры с 9 по 17. Щелкнем правой кнопкой по кружочку ключевого кадра 17 и в контекстном меню выберем метод интерполяции Cycle (Циклический). В диалоговом окне Cycle Interpolation (Циклическая интерполяция) (рис. 6.97) введите номер кадра 9. Это означает, что цикл будет начинаться с 9 кадра и заканчиваться кадром 17. Цикл будет выполняться безостановочно на протяжении всех кадров анимации или пока на треке анимируемого свойства не появится ключевой кадр, не входящий в состав кадров цикла.

Просмотрите полученную анимацию. Вам должно понравиться.

При создании покадровой анимации можно пользоваться также переключающим слоем типа Switch . В этом случае создается столько векторных слоев, сколько кадров анимации вы собираетесь создать. Причем каждый новый слой создается именно в том кадре, в котором рисуется фаза движения. Слой типа Switch будет автоматически переключать слои, делая видимым в данный момент только один слой.

Рис. 6.97. Настройка цикла

Откройте новый проект и, находясь на нулевом кадре, добавьте переключающий слой типа Switch . Переименуйте его. Пусть его имя тоже будет Switch (рис. 6.98). Перетащите ярлык векторного слоя Layer 1 на ярлык слоя Switch, чтобы слой Layer 1 стал подслоем слоя Switch (рис. 6.98). Визуальным признаком подслоя является сдвиг надписей на ярлыке подслоя на одно знакоместо вправо. Щелкните правой кнопкой по ярлыку слоя Switch и в появившемся списке поставьте галочку напротив имени слоя Layer 1. Щелкните левой кнопкой мыши по ярлыку слоя Layer 1. Слой Layer 1 должен быть выделен (рис. 6.98). Инструментом Oval (Овал) нарисуйте овал. Это будет начальный кадр анимации. Напомню, что мы находимся в кадре 0.

Передвигаем вертикальный указатель текущего кадра на кадр 3 и создаем векторный слой Layer 2. Этот слой автоматически включается в состав подслоев переключающего слоя и размещается над слоем Layer 1 (рис. 6.99). В этот момент овал перестает быть виден, так как его закрывает слой Layer 2, расположенный над слоем Layer 1. Но так как нам нужно видеть расположение рисунка на предыдущем кадре, то воспользуемся инструментом Onionskins (Полупрозрачная бумага). Откройте настройки инструмента Onionskins (Полупрозрачная бумага) и установите флажок Relative frames (Относительные кадры) (рис. 6.99). Это даст вам возможность создавать маркеры кадров.

Закройте настройки Onionskins (Полупрозрачная бумага), щелкнув левой кнопкой мыши по надписи Onionskins . Поставьте маркер на кадр 2. Сразу же появился контур овала, изображенного на предыдущем кадре (рис. 6.99).

Рис. 6.98. Кадр 0

Рис. 6.99. Установка маркера кадров

Рисуем новый овал, ориентируясь на расположение овала предыдущего кадра. Применим к новому овалу инструмент масштабирования Scale Points (Масштабирование узлов), немного увеличив размер овала (рис. 6.100).

Передвигаем вертикальный указатель текущего кадра на кадр 5 и создаем векторный слой Layer 3. Маркер переместился вместе с вертикальным указателем. Теперь он соответствует кадру 3 и выводит контур (призрак) изобра-

жения, находящегося в кадре 3. Ориентируясь на призрак, рисуем очередной овал, применяя к нему масштабирование (рис. 6.101). Обратите внимание, что маркер типа Relative frames (Относительные кадры) привязан к вертикальному указателю текущего кадра, но не к какому-либо определенному кадру. Если вы переместите вертикальный указатель, то вместе с ним переместится и маркер. Теперь маркер будет указывать уже на другой кадр и выведет контур изображения, нарисованного в этом кадре.

Создайте, таким образом, еще несколько слоев с соответствующими кадрами и просмотрите анимацию.

Рис. 6.100. Создание второго овала

Рис. 6.101. Создание третьего овала

Уроки анимации

Глава 8.

Основы анимации персонажей

Теперь можно приступать к созданию анимации. Как видите, она не сводится только к перемещению объектов, а включает моделирование персонажей, построение сцены и придание им естественных поз. В этой главе мы рассмотрим движение и его синхронизацию, что является основой анимации.

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

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

Значение расчета времени

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

Действие фильма, как и звучание музыкального произведения, в значительной степени зависит от времени. Фильм можно считать таким же произведением аниматора, как песню или симфонию - произведениями композитора. Сцены из фильма можно рассматривать как строфы стихотворения или припев песни. Партии отдельных инструментов вполне сравнимы с отдельными действиями персонажей. Каждое действие, как и каждая нота, должно происходить в нужном месте в нужное время. Как мгновенно определяется неверная нота в музыке, так и неправильная синхронизация в анимации сразу же бросается в глаза.

Расчет времени

Расчет времени фильма начинается с его продолжительности. Рекламный ролик может длиться около 30 секунд, а полнометражный фильм - час и более. Затем готовятся сценарий, раскадровка и записываются диалоги. Диалоги определяют продолжительность анимации, поэтому используйте их в меру. На затянутые диалоги и речь медленно говорящего персонажа впустую расходуется много времени.

После записи диалогов все события проецируются на шкалу времени фильма. Декорации сканируются и располагаются в соответствии с треками диалогов при помощи программы редактирования видеозаписей, например, Adobe Premiere. Таким образом, задается длина фильма и отводится время под отдельные планы.

После деления фильма на планы каждый из них раскладывается на отдельные действия. Способ зависит от того, как организован производственный процесс в студии. В традиционных студиях используются таблицы кадров, а в большинстве современных студий, в которых анимация полностью проводится на компьютерах, синхронизацией занимается художник-аниматор.

Число кадров в секунду

При раскадровке сцены во время анимации в первую очередь выбирается частота кадров. В течение полувека все анимационные фильмы снимались на кинопленку с частотой 24 кадра в секунду.

Распространение видео, компакт-дисков и других носителей информации усложнило выбор. В США частота кадров для видео равна 30 кадрам в секунду, в Европе - 25, а частота анимации во многих играх составляет всего 15 кадров в секунду.

Из-за такого разнообразия временных масштабов иногда сложно определить количество кадров, которое займет то или иное действие. Опытный художник-аниматор обычно может назвать эту цифру при частоте 24 кадра в секунду. Чтобы перевести данное значение в число кадров для видео с частотой 30 кадров в секунду, нужно умножить его на 1,2 (24 х 1,2 = 30).

Какую частоту следует выбирать при расчете времени?

Целесообразно использовать обе - 24 и 30 кадров в секунду, чтобы иметь возможность переключаться между ними в зависимости от требований проекта. Большинство современных студий до сих пор снимает на кинопленку, поэтому приобретенный навык пригодится. Многие художники-аниматоры работают и над роликами для видео или компьютерных игр, и в этом случае лучше выбрать частоту в 30 кадров в секунду. Вам может также пригодиться секундомер аниматора, который позволяет подсчитать число кадров для частоты как 24, так и 30 кадров в секунду.

Определение времени при помощи таблиц кадров

Таблицей кадров (exposure sheet) называется обычный лист бумаги, разбитый на строки и столбцы, в котором каждая строка представляет один кадр анимации, а каждый столбец содержит какую-либо информацию, например, текст дорожки диалога (подробнее см. главу 10), инструкции для оператора, и поля, на которых режиссер может планировать время выполнения сцены, набрасывая позы персонажа или отмечая линиями начало и конец действия (рис. 8.1).

Рис. 8.1. Таблица кадров

Расчет времени на компьютере

Некоторые студии не используют таблицы кадров. В этом случае расчет времени выполняется художником-аниматором прямо на компьютере (а режиссер вносит в него свои поправки). Большинство мощных пакетов трехмерной анимации позволяет загрузить вместе с данными о сцене звуковую дорожку. Таким образом аниматор получает возможность доводить диалоги в реальном времени, не обращаясь к надписям из таблицы кадров.

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

Сколько времени?

Это первоочередной вопрос для любого художника-аниматора. Время -весьма коварная материя. Если отвести для фильма слишком много времени, то он получится растянутым и скучным, если слишком мало - скомканным. Чувство времени оттачивается по мере приобретения мастерства. Используйте метод проб и ошибок. Если вы не знаете, сколько времени займет выполнение того или иного действия, задайте его продолжительность приблизительно. Затем кадры добавляются, если действие развивается слишком быстро, или удаляются, если оно становится замедленным. Компьютеры позволяют быстро изменять время выполнения анимации.

Последовательность действий

Существует важное правило для расчета анимации: необходимо соблюдать последовательность действий. Зритель лучше всего воспринимает события, если они происходят последовательно. Например, необходимо сначала изобразить, как споткнувшийся персонаж подпрыгивает, пытаясь сохранить равновесие, затем отразить на его лице определенные эмоции. Если не показать подскока, зритель не поймет, чем вызвана гримаса персонажа. Не забывайте, что, скорее всего, зритель смотрит ваш фильм впервые. Поэтому руководите его вниманием на протяжении всего ролика. Вспомните мультфильм «Roadrunner». Когда Хитрый Койот проваливается в ущелье, он не сразу замечает, что висит в воздухе. Заметив это, он в ужасе перебирает лапами, а затем смотрит в камеру с жалостным выражением на морде. Сцена длится почти секунду. Койот моргает или подергивает усами, но в целом он неподвижен. С экрана он исчезает в течение нескольких кадров. За то время, пока животное остается неподвижным, зритель успевает понять, о чем думает койот, - он обречен на гибель. Таким образом, аниматор ясно излагает задуманный сюжет мультфильма.

Одним из наиболее важных правил является то, что перед началом движения персонажа следует привлечь к нему внимание зрителя. В таком случае действие хорошо воспринимается.

Верный расчет времени

Художники-аниматоры вырабатывают чувство времени годами. Чтобы сделать первый шаг в этом направлении, проследите какую-нибудь последовательность действий, затем разбейте ее на точные временные отрезки. Многие художники-аниматоры изучают классические мультипликационные и художественные фильмы по кадрам, чтобы понять, как был проведен хронометраж движения. Полезным в этом отношении может оказаться видеомагнитофон с функцией стоп-кадра.

Для приобретения необходимых навыков следует также изучать принципы синхронизации движения по художественным фильмам. Движение в мультфильмах V утрированное изображение реального. Художник-аниматор вначале учится изображать реальных людей, чтобы понять строение фигуры человека, и только потом переходит к созданию мультипликационных героев; иначе он не сможет правильно передать фигуру при помощи нескольких линий. Аналогичная ситуация и с движением: разобравшись, как перемещается тело в реальной жизни, вы сможете утрировать движение, придав ему карикатурный оттенок.

При определении длительности сцены ее необходимо проиграть с секундомером в руках и замерить точное время выполнения каждого действия. Подставьте полученные значения в предварительный расчет и выполните доводку в программе анимации.

Расчет времени и программное обеспечение

В программах трехмерной анимации предлагаются различные способы отслеживания и манипулирования временем. Для этого используются кривые, временные таблицы и пути. Каждому из методов присущи свои достоинства и недостатки, и выбор инструмента зависит от конкретной сцены. Мы рассмотрим основные средства, которые есть в большинстве программ.

Кривые

Большинство графических пакетов позволяет представить движение объектов в виде кривых, что очень важно для диагностики и исправления ошибок анимации. Вы должны иметь представление о кривых анимации и уметь работать с ними. Несмотря на отличия пакетов, большинство кривых строится одинаково. Как правило, горизонтальная ось соответствует времени, вертикальная - изменяемому параметру, в качестве которого служит положение, угол, размер и т.д. Эти параметры отображаются в виде графика для наглядного представления о том, как двигается объект.

Представьте, что персонаж идет по улице. Его перемещение можно представить в виде графика. Вначале герой двигается по тротуару с постоянной скоростью, затем останавливается на перекрестке. После того, как путь освобождается, продолжает движение с постоянной скоростью.

График движения может выглядеть примерно так, как показано на рис. 8.2.

Если автомобиль перемещается с постоянной скоростью, график представлен прямой линией. Если он стоит, график на этом участке горизонтален. Во время изменения скорости движения график имеет вид кривой. Если кривая изгибается вверх, то движение ускоряется, если вниз - замедляется.

В большинстве пакетов движение объекта отображается тремя графиками: для осей х, у и z. Объект может двигаться линейно по одной из осей и ускоряться вдоль другой. На рис. 8.3 показано окно программы, где три линии соответствуют осям х, у и z. Обратите внимание, что одна линия горизонтальна, то есть движения вдоль оси z нет.

Рис. 8.2. Кривая анимации движения автомобиля по городу

Рис. 8.3. Окно программы с графиками движения

Рис. 8.4. Проблемный участок анимации

Графики движения позволяют находить и устранять недостатки анимации. Обычно они выглядят как всплески на графике. Они соответствуют тем позициям, в которых ключевой кадр меняется или находится в неправильном положении (рис. 8.4). Эти графики используются и для отслеживания движения. Например, если нога персонажа неподвижна, то кривая ее перемещения имеет нулевое значение (рис. 8.5)." Если кривая принимает отрицательные значения, значит, нога опускается ниже уровня пола (рис. 8.6).

Рис. 8.5. Нулевое значение кривой может указывать на начало нежелательного перемещения ступни

Редактирование кривых

Редактирование кривых анимации похоже на редактирование кривых, применявшихся при моделировании. С каждой кривой связаны управляющие элементы, соответствующие ключевым кадрам. В большинстве программ кривая имеет элементы управления кривых Безье, которые позволяют варьировать ее форму (рис. 8.7).

Можно также перемещать сами элементы управления, изменяя тем самым длительность или параметры определенного события.

Кроме элементов управления кривыми Безье во многих пакетах используются другие виды интерполяции. Линейная кривая не имеет участков торможения или ускорения и представляет собой последовательность отрезков прямых линий (рис. 8.8). Ступенчатая кривая выглядит как последовательность сигналов прямоугольной формы, и переходы от одного значения к другому происходят скачкообразно (рис. 8.9). Большинство видов интерполяции выполняется с применением кривых Безье.

Рис. 8.6. Отрицательные значения кривой указывают на то, что нога «провалилась» сквозь «землю»

Рис. 8.7. Управление при помощи кривых Безье

Рис. 8.8. Линейные кривые

Рис. 8.9. Ступенчатые кривые

Использование кривых для анимации методом компоновки

Для анимации методом компоновки вам необходимо хорошо разбираться в кривых движения. В традиционной анимации вначале рисуются позы, а затем проводится тест поз для замера разделяющего их времени (рис. 8.10). Ведь намного проще рассчитать время между основными позами и лишь потом рисовать промежуточные положения. Это позволяет художнику сосредоточиться на расчете общего времени, не отвлекаясь на детали.

Аналогичный подход можно использовать и в компьютерной анимации. Художник набрасывает основные позы на шкале времени с помощью ступенчатой кривой. При этом персонаж «перескакивает» от одной позы

Рис. 8.10. В этой анимации персонаж стоит, потом нагибается, чтобы что-то рассмотреть на земле, а затем распрямляется

Основы анимации персонажей к другой (рис. 8.11). Если воспользоваться линейными кривыми, то из-за плавного характера переходов сложно точно отслеживать время. Конечно, при скачкообразном изменении поз теряется реалистичность, но такой прием позволяет сосредоточиться на отдельных моментах анимации и их продолжительности. После того, как время задано, ключевые точки копируются на несколько кадров позже на шкале времени (рис. 8.12), а затем ступенчатые кривые преобразуются в кривые Безье. Теперь персонаж принимает одну позу, которая плавно переходит в следующую, и т.д. Сцена принимает естественный вид (рис. 8.13). После синхронизации можно приступать к созданию промежуточных поз. Основная идея заключается в том, чтобы последовательно фиксировать позы в течение небольшого промежутка времени, а затем делать переходы между ними. Как правило, на переход отводится 6-8 кадров (хотя это число может меняться в зависимости от сцены). Затем переходы преобразуются в кривые Безье. После этого движение корректируется, кадры сводятся до совпадения и т.д.

Рис. 8.11. Использование ступенчатой кривой

Рис. 8.12. Скопированные ключевые точки

Рис. 8.13. Преобразование ступенчатых кривых в кривые Безье

Временные таблицы

Временная таблица является более простым способом представления анимации. Кривая (зависимость значения параметра от времени) дает двумерное представление движения, а временная таблица - одномерное. Аниматор имеет дело с линией, на которой точками или другими символами обозначены изменения движения в ключевых кадрах (рис. 8.14 и 8.15). В предыдущем примере первая точка на временной шкале соответствовала началу движения персонажа. Моменту остановки соответствует следующая отметка, и еще одна обозначает изменение направления движения. Эта линия похожа на кривую анимации, но не содержит информации о значении параметра кривой.

Анимацию проще представлять в виде событий на шкале времени, а не их значений. Кроме того, вы можете запросто запутаться в обилии кривых на экране. Временные таблицы упрощают манипулирование ключевыми кадрами. Многие из них позволяют выбирать и перемещать десятки кадров одновременно, благодаря чему легко изменять время выполнения для целых сцен.

Рис. 8.14. Временная таблица в программе 3D Studio MAX

Рис. 8.15. Временная таблица в программе Maya

Пути/траектории

Другой метод управления анимацией предполагает использование пути. Большинство пакетов отображают путь объекта в пространстве, что помогает точно определять его движение (рис. 8.16). При коррекции формы пути изменяется способ перемещения персонажа по сцене.

В анимации персонажей траектории обычно используются для визуализации действия. Например, если руки героя перемещаются посредством кинематической цепочки (позднее вы увидите, что они совершают кругообразные движения), то вполне подходит метод путей. На рис. 8.17 показано, как при использовании метода инверсной кинематики рука персонажа следует за движением запястья, и представлен путь этого движения. В качестве другого примера можно рассмотреть полет героя по

Рис. 8.16. Линия, обозначающая путь движения запястья

Рис. 8.17. Использование пути при анимации методом инверсной кинематики

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

Расчет времени движения с учетом веса модели

Если используемый вами пакет не рассчитывает движение тела в соответствии с законами физики, то задать вес объекта невозможно. Рассмотрим шар, лежащий на земле (рис. 8.18). Что это - шар для боулинга или баскетбольный мяч? Пока он не начнет двигаться, ответить на этот вопрос нельзя. Шар для боулинга тяжелый, катится медленно, и чтобы изменить направление его движения, требуется большое усилие. Баскетбольный мяч относительно легкий, катится быстрее, легко отскакивает, и подбросить его способен даже младенец.

Рис. 8.18. Шары, вес которых неизвестен, пока они не начнут перемещаться

Упражнение 1. Имитация веса при помощи движения

Для начала лучше всего поэкспериментировать с простыми объектами (сферой и кубом). Их модели несложно создать и использовать в анимации в любом пакете трехмерной графики. Выбирая для анимации простые объекты, вы можете сосредоточиться на самом движении и процессе синхронизации.

1. Смоделируйте шар, куб и гладкую поверхность. Разместите шар и куб на поверхности на некотором расстоянии друг от друга.

2. Выполните анимацию движения шара, чтобы он катился по прямой линии к одной из граней куба.

3. Как только шар коснется куба, измените направление его движения на противоположное. Куб при этом должен оставаться неподвижным. Выполните рендеринг сцены.

4. Создается впечатление, что шар намного легче куба. Теперь воспроизведите обратную ситуацию.

5. При том же исходном положении выполните анимацию движения шара, чтобы он катился по прямой линии в сторону куба.

6. На этот раз после удара о куб шар должен продолжать катиться по прямой, а куб сдвинуться с места и начать вращаться. Выполните рендеринг сцены.

7. Возникает ощущение того, что шар тяжелее сбиваемого им куба.

В обеих сценах используются одни и те же объекты, которые по-разному взаимодействуют друг с другом. В первом случае шар кажется легче куба, во втором - тяжелее. Как видите, характер движения влияет на восприятие веса объекта.

Язык движения

Художник-аниматор должен знать базовые принципы движения. Речь идет об основных правилах воспроизведения движения, описываемых такими терминами, как «дуги», «подготовка», «принятие позы», «вторичное движение», «доводка», «наложение», «удержание позы» и т.д.

Дугообразные траектории

В природе многие движения совершаются вдоль дугообразной траектории. Например, благодаря тому, что суставы человеческого тела могут вращаться, при повороте плеча и локтя рука описывает дугу. Подобную кривую описывает при этом кисть и пальцы (рис. 8.19).

Рис. 8.19. Дуга, по которой движется рука

Перемещаться по дуге заставляет объекты также и сила притяжения: планеты движутся по эллиптическим орбитам, а брошенный мяч летит по параболической траектории (рис. 8.20). Таким образом, тела часто при своем движении описывают дугу.

Наглядным примером движения по дуге является простой поворот головы. Предположим, вам необходимо, чтобы персонаж повернул голову влево. Первым желанием будет просто повернуть голову по прямой горизонтальной линии. При этом движение получается неестественным (рис. 8.21). В реальной жизни голова обычно сначала немного опускается во время поворота и затем приподнимается, описывая дугу, как показано на рис. 8.22.

Рис. 8.20. Траектория полета подброшенного в воздух мяча

Рис. 8.21. Неправильно выполненный поворот головы

Рис. 8.22. Кадры правильной анимации

Ускоренное начало и конец движения

Естественное движение не начинается и не заканчивается внезапно. Один из законов Ньютона гласит, что объект, к которому приложена сила, совершает ускоренное движение. Следовательно, начало движения объекта происходит с некоторым положительным ускорением, а окончание - с отрицательным. Представьте себе подброшенный вверх мяч. Сила тяжести поначалу замедляет его взлет до тех пор, пока он не остановится, а затем ускоряет падение вплоть до касания земли. В анимации подобные эффекты называются ускоренными началом и концом движения (slow-in и slow-out.)

Кроме силы тяжести на персонажи действует множество других сил. Они могут быть внешними, если, например, героя толкают (рис. 8.23), тянут за руку или везут в машине, или внутренними. Силы внутреннего происхождения действуют, когда из-за сокращения мышц поворачивается сустав, что приводит к ускоренному движению конечности. (С определенной степенью обобщения это понятие можно отнести и к силе мысли персонажа - нерешительный герой даже двигается по-другому, чем самоуверенный.)

Чтобы сымитировать эффект ускоренного начала движения и торможения в конце его, лучше всего использовать кривую Безье. Однако, как правило, этого не требуется. Например, если персонаж сталкивается с кирпичной стеной, то он останавливается практически мгновенно, без торможения. Обратите внимание, что на графике при приближении скорости к нулю кривая становится почти горизонтальной (рис. 8.24). В данном случае целесообразно применить линейную или ступенчатую кривую.

Рис. 8.23. Ускоренное движение героя, которого толкнули

Рис. 8.24. Кривые анимации для отображения ускоренного движения в начале и конце пути

Запаздывание

При анимации нужно учитывать эффект так называемого запаздывания. Прилагаемая к объекту сила по-разному воздействует на различные его части. Рассмотрим два стержня, имеющих шарнирное соединение. Если потянуть за один из них, то второй не сразу последует за ним (рис. 8.25). Сначала второй повернется вслед за ним (рис. 8.26) и только через какое-то время два стержня расположатся вдоль одной прямой (рис. 8.27). Этот эффект называется запаздыванием (lag), или инерционностью.

При движении объекта, составленного из множества звеньев, каждый из шарниров совершает поворот вслед за предыдущим. Если добавить к первым двум третий стержень, то он начнет движение вслед за вторым.

Добавление третьего стержня вносит дополнительную задержку. Третье звено движется за вторым, который перемещается вслед за первым (рис. 8.28).

Рис. 8.25. Потянули за первый стержень

Рис. 8.26. Второй стержень повернулся вслед за первым с запаздыванием

Рис. 8.27. Стержни расположились вдоль одной прямой

Рис. 8.28. Движение трехзвенной цепочки

Те же принципы применимы и к движению суставов персонажа. Позвоночник представляет собой совокупность аналогичных шарниров. Сила, приложенная к одному концу позвоночника, достигает другого его конца через некоторое время, как и сила, приложенная к мышце предплечья, - плеча (рис. 8.29). Представьте себе хвост собаки. Суставы ее хвоста ведут себя так же, как шарниры в нашем примере. Основание хвоста вращается, вызывая с некоторым запаздыванием движение остальных его частей (рис. 8.30).
Наша продукция – иску сственный и природный камень , а так же сопутствующие материалы. Широкий ассортимент природного и искусственного камня, возможность продавать камень как розничным, так и оптовым покупателям, конкурентные цены на природный натуральный камень, удобная торговая площадка – вот что делает наши предложения привлекательными для покупателя. В нашей компании вы сможете купить природный камень, включая травертин, мрамор, ракушечник, гальку, камень для бани...

Анимация в интернете давно перестала быть простым украшением страницы и превратилась в полезный инструмент для улучшения юзабилити. Она помогает пользователю взаимодействовать с интерфейсом, привлекает внимание к важным моментам.

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

Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects.

Чтобы создать простой веб-баннер или презентацию, не обязательно разбираться со специальными программами. Для этого подойдут и встроенные средства Photoshop.

C чего начать

Первым делом нужно определиться с тем, что мы будем анимировать и какого результата планируем достичь.

Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который затем я анимировал.

Шкала времени

Перед созданием анимации необходимо подготовить нужные инструменты - включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.

Для этого я открываю вкладку «Окно» и ставлю галочку напротив строки «Шкала времени».

Внизу окна в Photoshop должна появиться широкая строка, с помощью которой можно управлять кадрами в анимации.

Чтобы создать первый кадр, нажимаю иконку «Создать анимацию кадра» на «Шкале времени».

После того, как первый кадр появился, можно приступить к созданию движения.

Промежуточные кадры

В Photoshop элемент можно анимировать несколькими способами:

• Нарисовать несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
• Вставить промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Необходимые кадры между этими состояниями добавит сам Photoshop. Этот способ подойдет, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.

Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента - начальное в первом кадре и конечное в следующем.

Поэтому я добавлю еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же - сдвигаю влево, пока он не исчезнет.

Во втором кадре возвращаю текст назад.

Отлично. Теперь вставим промежуточные кадры между ключевыми.

Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».

В появившемся диалоговом окне указываю, сколько кадров необходимо добавить.

Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало - элементы будут двигаться рывками.

Первая часть анимации готова. Теперь ее можно воспроизвести и посмотреть, что получилось.

Нажимаю на кнопку воспроизведения на «Шкале времени».

Вставка промежуточных кадров помогла быстро создать анимацию с плавным появлением и движением элементов.

Появление, исчезновение и движение можно комбинировать друг с другом, чтобы добиться еще более интересных эффектов.

Покадровая анимация вручную

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

Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».

В следующем кадре выделяю нужный слой с текстом и стрелкой, сдвигаю его немного вверх, а в последнем кадре - вниз.

Теперь можно запустить анимацию и посмотреть результат.

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

Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.

Для последнего кадра я задал длительность в две секунды. Теперь воспроизведение замедляется в конце. Поэтому за движением элементов комфортно наблюдать.

Сохранение и экспорт

В окне предпросмотра можно еще раз просмотреть анимацию и изменить настройки сохранения.

По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.

Вот какая анимация получилась в результате:

Заключение

В Photoshop просто создавать короткие интерактивные баннеры и презентации, анимировать отдельные элементы. Удобно экспериментировать с результатом.

Это самый полный обзор всех аспектов понятия Анимация с лучшими примерами по мнению редакции.

Инвестируй 15 минут времени в новые знания вдохновляясь трендами индустрии.

«Лики войны»: Джайна . Смесь CG ART , 3D и спецэффектов позволяют создавать сравнительно бюджетные мини-истории для роликов Blizzard . CGI + 3D анимация. Социальное вирусное видео, которое вы могли пропустить. Written, Directed & Produced by Lubomir Arsov

Еще больше примеров современной анимации ждёт вас ниже…

Виды анимации

С момента появлениея простейшей анимации было придумано широкое разнообразие видов и стилей. Рассмотрим 5 основных видов :

• Традиционная анимация;
• 2D векторная анимация;
• 3D компьютерная анимация;
• Моушн графика;
• Кукольная анимация;

Традиционная анимация (2D, Cel, Hand Drawn)

Традиционная анимация , иногда называемая анимацией cel, является одной из старых форм анимации. В ней:

• аниматор рисует каждый кадр для создания последовательности движений;
• последовательные рисунки, быстро экспонированные один за другим, создают иллюзию движения.

Самый простой пример такой анимации - старые мультфильмы Диснея.

Мультфильм «Маугли»

Как создается традиционная анимация?

• аниматор готовит рабочее поле: прозрачный лист бумаги закрепляет на специального подсвечиваемого экрана;
• на лист бумаги цветным карандашом наносится рисунок;
• рисунок должен быть грубым и приблизительным. Таким он делается, чтобы увидеть, сколько кадров нужно создать для идеального движения персонажа;
• как только очистка и промежуточные чертежи будут завершены, производство переходит к съемке каждого отдельного кадра.

Как создавались анимационные ролики в 1938 году

Современные аниматоры могут отказаться от рисования персонажей и кадров от руки. Вместо этого они используют компьютеры, планшеты специальные ручки.

Примеры современной традиционной анимации

Eluvium. Автор Стас Сантимов Are You Lost In The World Like Me? Автор Стив Катс

С чего начать?

Стартовать в профессии можно с изучения базовых

Преимуществом уроков является последовательное изучение процесса создания анимации по принципу - «от простого к сложному».

Также, для совершения первых шагов создания анимации необходимо освоить такие базовые программы как:

Photoshop часто упускается из виду при рассмотрении программного обеспечения для анимации, а его возможности отлично адаптированы для покадрового рисования в любом стиле. Функциональность временной шкалы Photoshop позволяет анимировать, рисуя кадр за кадром, используя лук-скиннинг.

• Средний заработок аниматора на Западе равен $4250/мес;
• В наших краях - сильно по-разному (в студии, на фрилансе, на удалёнке — от $400 до $3500 в мес).

2D векторная анимация

Bojack Horseman (сериал на Netflix)

2D-анимация - это термин, используемый при обращении к традиционной рисованной анимации. Он также может относиться к компьютерным векторным анимациям, использующими методы традиционной.

Принцип 2D-анимации

Для создания векторных анимаций используются те же самые методы, что и для традиционной.

Такая гибкость позволяет даже новичку создать свой первый сносный ролик.

Как научиться?

В то время как традиционная анимация требует, чтобы вы были хорошим художником, компьютерная - не совсем. 3D-анимация больше похожа конструктор, а не на рисование.

Технологии 3D-анимации имеют много общего со стоп моушн, поскольку соответствуют кадровому подходу. Но, в 3D реализация задач более управляема, поскольку находится в цифровом поле.

3D модель

Вместо рисования персонажа или создания его из глины в 3D-анимации объект создается в цифровой форме. Позже снабжаются «скелетом», который позволяет перемещать модели.

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

Ниже смотрите наглядный пример процесса создания 3D модели в программе Blender .

Примеры современной 3D анимации

Автор — ManvsMachine

Nike Air Max

Автор — PlatigeImage

Wonder Woman — Prologue | Making of

Профессия 3D-аниматора: с чего начать

Профессия высококонкурентная, поскольку эта анимация в основном для коммерческих целей.

Где можно работать моушн дизайнеру:

• В студиях
• На фрилансе
• Продавать шаблоны
• Создавать продукты обучения

Средняя зарплата моушн дизайнера на Западе достигает $5000/мес, у нас заработная плата специалиста стартует от $700/мес.

Stop motion (Кукольная анимация)

Стоп моушн - это остановка объекта после отснятого кадра и последовательное его перемещение для съемки нового фото и нового движения. При воспроизведении сделанных фото одно за другим, создаётся иллюзия движения. Так получается стоп моушн.

Этот приём похож на традиционную анимацию, но вместо рисунков аниматор использует реальные материалы.

Процесс работы над сериалом Robot Сhicken

Мне нравятся все формы анимации, но есть что-то уникальное и особенное в стоп моушн: оно более реальное. Но я думаю, что это тоже своего рода одинокая и темная вещь.

Тим Бертон

Эволюция Stop Motion

Анимация Stop-Motion использует объекты, сфотографированные в последовательности для создания иллюзии движения.

Пример Stop Motion анимации

Процесс создания анимации в формате стоп моушн длительный, поскольку каждый объект нужно осторожно перемещать миллиметр за миллиметром. Каждый отснятый кадр, просто обязан создать плавную последовательность движений объекта.

Примеры современной кукольной анимации

Еще пример из Robot Chicken Автор — Bruna Berford

Профессия кукольного аниматора: с чего начать, сколько зарабатывает

Начинать движение в глубины профессии стоп-моушн дизайнера необходимо с освоения Dragonframe и iStopMotion

Профессия стоп-моушн дизайнера на рынке труда понемногу ожила. Стоп моушн сегодня - это недорогой метод, в котором легко показать хороший художественный вкус, и навыки терпения. Поэтому и дизайнеры зарабатывают неплохо:

• средний заработок на Западе — $3864/мес;
• у нас — от $1000/мес.

Типы анимации

Рассмотрим, какие существуют типы анимации.

Гиф анимация

GIF (с расширением файла, .gif) - это формат файла изображения, который анимируется путем объединения нескольких других изображений или кадров в один.

Пример GIF. (сконвертирован в mp4 для меньшего размера)

В отличие от формата JPEG (.jpg), GIF обычно используют алгоритм сжатия, называемый кодировкой LZW, который не ухудшает качество изображения и позволяет легко хранить файл в байтах.

Более подробно о том, что такое GIF можно прочитать на Википедии.

Примеры GIF-анимации

Примеры на любой вкус находятся на портале giphy.com

Как сделать GIF самостоятельно?

• Ранее мы уже писали о самом быстром .
• А вот еще один полезный урок по созданию гифок в Adobe After Effects .

Cinemagraphy

Так же ознакомитесь с мнением может ли Анимэ стать мейнстримом (на анг языке).

Примеры японской анимации

Prison School Anime Flavors of Youth

Как создается анимэ?

Процесс создания аниме состоит из нескольких этапов:

• поиск идеи анимации и персонажа;
• придумывание концепта (продумываются персонажи, основная сюжетная линия, делаются какие-то первые наброски);
• написание подробного сценария;
• рисование персонажей и фонов;
• примерная раскадровка;
• зарисовки или скетчи приводятся в цифровой вид.

Видео — Как создается анимэ

12 принципов создания анимации

1. Сжатие и разжатие

Согласно этому принципу объекты анимации можно сжать или растянуть для передачи скорости, импульса, веса и массы объекта.

Такой прием можно использовать для обозначения прыгучести или твердости объекта (например, для того, чтобы показать какой мяч в анимированном ролике наполнен водой, а какой просто является мячом для боулинга). Также художники с помощью этого принципа передают мимику и эмоции персонажа.

Важно : размер объекта не должен меняться в зависимости от того, сплющенный он или растянутый.

Первый принцип анимации

2. Подготовка к действию

Заключается в том, чтобы подготовить зрителя к какому-либо действию персонажа анимации.

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

Важно: без подготовки к любому действию все последующие шаги персонажа будут выглядеть нереалистично и неправдоподобно. Художник не может пропустить этот момент, поскольку зритель просто не поймет, что хочет сделать персонаж в следующие секунды, и смотреть такой ролик будет просто неинтересно.

Подготовка к действию - это обязательный прием для удержания внимания.

Второй принцип анимации

3. Инсценировка

Цель этого принципа состоит в том, чтобы как можно более точно раскрыть творческий замысел автора.

В любой анимации важно направить взгляд зрителя на какой-то момент или важный нюанс, движение персонажа или происходящее событие. Инсценировка как-бы привлекает внимание к самому важному.

Отметим, что в этом принципе необходимо чередовать крупные планы с дальним фоном. Крупным планом обычно показана мимика персонажа, а на заднем фоне происходят динамичные или статичные события мультимедийного ролика.

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

Третий принцип анимации

4. Спонтанное действие и От позы к позе

Принцип спонтанного действия состоит в том, что поочередно создается несколько рисунков без конкретного плана действий и финала.

Принцип от позы к позе состоит в том, что художник рисует каждую финальную точку движения и лишь после этого рисует промежуточные позы и движения.

Важно : принцип от позы к позе экономит силы и время художника, ведь, используя его, он точно знает, что будет происходить на экране, и чем все закончится. В спонтанном действии такого бонуса нет - если художник нарисовал что-то некорректно, ему придется все перерисовывать.

Спонтанным действием хорошо отображать огонь, капли, облака, дым и пыль , а еще оно отлично передает эстетику и непредсказуемость природных явлений.

Четвертый принцип анимации

5. Инерция и нахлест

Применяется этот принцип для того, чтобы после остановки персонажа части его одежды, волосы, руки или даже ноги продолжали двигаться по инерции. Так остановка кажется более естественной и не вызывает у зрителя придирок к в противоестественности картинки.

Инерция и нахлест делают движения, тело и персонаж анимации более живыми.

В эту группу также входит такой принцип как оттяжка. Благодаря оттяжке при повороте головы персонажа его волосы или же щеки (как у бульдога) будут медленно и пружинисто двигаться за ней.

Пятый принцип анимации

6. Замедление движения в начале и конце

Принцип состоит в том, что все движения выполняются медленно в начале, затем они ускоряются и в конце, действия снова замедляются. Это делается для того, чтобы максимально увеличить естественность ролика и приблизить нарисованный персонаж к реальному.

С одинаковой скоростью двигаются только роботы, поэтому художник старается нарисовать все движения своих персонажей в разных амплитудах и на разных скоростях.

Важно: замедление используется не во всех случаях. Например, для того, чтобы показать движение пули замедление не нужно, а вот для движения пистолета во время выстрела - да.

Шестой принцип анимации

7. Дуги

Без учета движения персонажа по дуге возникают очевидные ошибки и они становятся слишком механическими.

Абсолютно все движения персонажей выполняются по принципу дуги, и не потому что они все должны быть плавными, а потому что дуга может обрисовать гораздо большую траекторию и наделить персонажа возможностью двигаться максимально естественно.

Седьмой принцип анимации

8. Выразительные штрихи

Этот принцип часто путают с нахлестом, но это неправильно. Выразительные штрихи - это особенности движений персонажа, которые придают ему колорита.

Выразительные штрихи наделяют движения персонажа характером момента и настроением. Если персонаж злой, то при стуке в дверь вторая рука у него будет сжата в кулак. Может этот штрих не так и бросается в глаза, но он как нельзя лучше передает настоящие, реальные эмоции человека.

Художник, который придает значение таким мелким деталям, наделяет анимацию жизнью.

Восьмой принцип анимации

9. Частота кадров

От того, сколько кадров художник нарисовал между основными действиями зависит и общий характер анимации.

Меняя частоту кадров, аниматор может рассказать целых 10 историй. Если между основными кадрами поз много и они расположены близко друг к другу, то движения будут осуществляться очень медленно, а если кадров мало и они расположены на большом расстоянии друг от друга - движения будут очень быстрыми.

Стандартная частота кадров для кино равна 24 . Анимация также рисуется в один, два или три кадра.

Важно: чем чаще будут меняться кадры, там в более тщательной прорисовке они будут нуждаться.

Девятый принцип анимации

10. Гиперболизация

Принцип состоит в том, что почти каждое выражение лица, мимику и эмоцию необходимо сделать уникальной.

С помощью этого принципа грустную эмоцию можно сделать еще более грустной, а веселую - еще более веселой. Гиперболизация базируется не на искажении эмоций и мимики, а на придании еще большей убедительности в движениях и выражениях лица.

Принцип гиперболизации уместен всегда, поскольку он делает каждый ролик более интересным, насыщенным и завершенным.

Оптимальную степень гиперболизации определить сложно. Поэтому сперва необходимо гиперболизировать задумку по максимуму, а затем адаптировать под ролик.

Десятый принцип анимации

11. Прорисовка

Рисовать по этому принципу нужно так, чтобы подать рисунок в рамках трехмерного пространства. Передавая массу, объем и равновесие персонажа.

Если нарисовать фигуру со всех сторон, то процесс анимации будет значительно упрощен.

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

Одиннадцатый принцип анимации

12. Харизматичность

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

Красота персонажа - это не обязательно харизматичность. Эта черта может выражаться в любой детали, быть заключенной в одном персонаже или же во всех героя ролика.

Важно: добиться харизматичности персонажа можно, разнообразив форму объекта, пропорции, а также, подчеркнув характерную деталь. Она обязательно должна быть необычной и выбиваться из общей картины характера персонажа.

Двенадцатый принцип анимации

Тенденции (тренды) в анимации

Сегодня анимация перевоплощается в самые разнообразные и захватывающие способы рассказа истории и идею. Благодаря появлению новых достижений в технике и телекомуникационных технологиях, регулярно возникают новые тренды в анимации.

• Смотрите .

Вот самые популярные из них:

3D в стиле ретро и винтаж

Cтиль 3D-анимации, который снова становится популярным - это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так.

Техника: использование пышных световых эффектов и пиксельных цифровых элементов служит для создания местности и персонажей, в ретро мире.

Высококонтрасная Cel Animation

Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X.

Яркие контрастные цвета в сочетании с угловым дизайном используются, чтобы придать анимации упрощенный, почти cel-стиль.

Результат - забавная последовательность от которой трудно отвести взгляд.

Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне.

Микс 2D и 3D

Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D.

Вам не нужно далеко ходить, чтобы найти учебное пособие, в котором показано, как в итоге получить плоский 2D-взгляд, используя cel shader для рендеринга 3D.

Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию.

Сверхсюрреализм

Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм.

Эффект гипер-сюрреалистической анимации основан на объединении фотореалистичных элементов с фантастическими изображениями для создания сказочных миров и действий.

Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам.

Динамическая анимация функций в приложениях

Вместо использования статических изображений или всего текста многие приложения в 2018 году используют функциональную анимацию, которая держит внимание пользователя с ярким, интересным пользовательским интерфейсом.

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

Возрождение 2D-анимации в маркетинге

В индустрии развлечений, таких как кино и видеоигры, 2D-анимация почти исчезла, когда появился 3D. С тех пор компании чувствовали, что нет лучшего способа увлечь аудиторию, игроков и потенциальных клиентов, чем с помощью 3D-анимации, даже если для этого требуется больше времени и усилий.

Adobe After Effects - программное обеспечение компании Adobe Systems для редактирования видео и динамических изображений, разработки композиций, анимации и создания разнообразных эффектов.