Вам может быть необходим целый замок, но может ли вам хватить просто танцзала и темницы? Сузьте свой взгляд до действительно необходимого для рассказа истории. Я это сделал - вместо «убийственных полей», о которых говорилось чуть выше, сделал бесконечный коридор в After Effects.
Поверьте, мне хотелось снимать в большом красивом кабинете. Но вместо этого я сделал одну комнату, покрытую фетром. А потом крепко задумался о том, какую историю я могу рассказать из этой голой серой комнаты? На что похожа эта комната? Операционная! Конечно! «Ленивое» решение о съемочной площадке диктует историю. Я бы хотел целый город, но операционная проще.
Другой вопрос: как это снимать? Сначала я собирался использовать приложение для анимации iMotion на моем телефоне. Но живые сценки нам пришлось снимать на , и они выглядели потрясающе, так что уровень качества был установлен высоко - надо было соответствовать. Я решил взять цифровой фотоаппарат в аренду.
2. Не бойтесь своего оборудования
Это то, что я сказал себе сам. Так что я взял в прокат на две недели Nikon D7100, в комплекте с двумя объективами: 35мм и 28-70мм. В следующие две недели я потратил около 50 часов в моем подвале, перемещая эти маленькие куклы. Самой сложной частью всего процесса было расставлять их. Как я мог заставить их встать и двигаться? Об этом и поговорим дальше.
3. Заведите друзей в хозяйственном магазине
Вам постоянно будет что-то нужно: металлическая труба, сверхпрочная лента, деревянные бруски, да и кто еще знает, что потребуется! Я провел часы в «Hankins Hardware» в Хоторне, осматривая их полки в поисках подходящего. Я подпирал кукол маленькими трубками, вставленными в деревянные блоки и приклеенными скотчем к спине. Для маленьких кукол я использовал L-образные отрезки стальной ленты. Моими подвесами для полетов были куски жесткой проволоки, привязанной к грузу, и моток лески.
Итак, куклы закреплены, а фотоаппарат - на треноге. Сделайте кучу фотографий, проиграйте их быстро и вы - аниматор, не так ли? Ну, вы можете попробовать этот способ. Вы можете продолжать снимать на SD-карточку, вытаскивать ее из фотоаппарата, скачивать фотографии на компьютер, вставлять карточку обратно, потом готовить фильм в After Effects или чем-то вроде того. Я поступил проще - я взял Dragonframe.
4. Используйте правильные программы
Dragonframe - программное обеспечение для анимации, контролируемое через USB. Вы подключаете ваш фотоаппарат через USB-порт к компьютеру, а Dragonframe получает от нее изображения сразу, как только вы их делаете. Вы можете проиграть фотографии в обратном порядке, переходить между ними, а также использовать функцию «луковая кожура», располагая кадры один над другим. Мне это оказалось полезным, например - для совмещения кадра с ножом и кадра с мышиным ухом. Конечно, вы можете сделать это в After Effects, но это никогда не будет выглядеть так же хорошо, как если это сделать сразу камерой.
Важно заметить, что Dragonframe может работать с большим количеством разных камер, но не со всеми. Проверьте список поддерживаемого оборудования прежде чем взять камеру в аренду.
5. Для каждой сцены сделайте «чистый» снимок
«Чистый» снимок - это фотография сцены в момент пока на ней не установлено ни одной куклы, только сам задник. В этом случае, если на каком-то кадре будет виден кусочек поддерживающего куклу оборудования, вы сможете заменить его на фотографию задника из чистого снимка. Соответственно, лучше всего будет спрятать стойку, помните: лучшая подчистка - отсутствие подчистки.
6. Анимируйте задом наперед
Если сцена должна закончиться с героями на определенной позиции, лучше всего снимать задом наперед. Тогда вы начинаете с последнего кадра и точно попадаете в нужную позу. Именно так я сделал кадры где Сэмми входит в операционную.
7. Монтируйте прямо в процессе съемок
Не дожидайтесь момента, когда камеру нужно будет вернуть, а вы останетесь с кучей материала без возможности что-то доснять и исправить. В конце каждого дня я собираю все мои кадры в черновом монтаже, и это не раз выручало меня. Помимо всего прочего, такая привычка позволяет иначе взглянуть на отснятый материал и скорректировать процесс съемок. Например, в процессе первичного монтажа я обнаружил, что куклы выглядят больше и страшнее при экстремально крупном плане, так что моя камера становилась к ним все ближе и ближе.
8. Придавайте вещам жизни
Половина кадров этого анимационного фильма - кадры с разными реакциями. Моим первым планом было использовать фотографии. Однако когда я сделал первый черновой монтаж, я увидел, как это выглядит: как статичные и не очень интересные картинки. Стало понятно, что если мои куклы будут что-нибудь делать, воображение зрителя дорисует им нужные личностные качества. Движение не может быть случайным, даже небольшая дрожь может рассказать о многом.
Когда вы закончите снимать, вы выйдите из своей пещеры, моргая и потирая глаза, словно медведь, поднимающийся из спячки. Мир будет ярким и шумным. Люди будут спрашивать где вы пропадали, а вы будете вспоминать как разговаривать. Затем вы постепенно будете возвращаться к привычной жизни, а часы в темной комнате покажутся странными и далекими, как сон, который я анимировал. Это подводит меня к следующему - самому главному совету.
Программа 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). Выделим, удерживая нажатой клавишу
Рис. 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. Создание третьего овала
Вы узнаете:
- Как открыть и закрыть и настроить панель анимации.
- Как добавлять, удалять и редактировать ключевые и кадры анимации.
- Для чего нужна кнопка 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 (Параметры интерфейса).
Вопросы:
- Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?
Выделенный кадр будет удален.
Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.
Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.
Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.
- У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
5 промежуточных кадров между последним и первым кадрами?
Выбрать первый кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).
Выбрать последний кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).
Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).
- Для чего нужна оптимизация анимации?
Для преобразования в анимацию по временной шкале.
Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.
Для настройки периодичности повторов анимации.
Домашнее задание:
1)Выполнить покадровую анимацию рисования звезды (по уроку).
2) Выполнить покадровую анимацию текста.
Одна из техник анимации, которая предусматривает прорисовывание каждого кадра, называется покадровой анимацией. По своей сути, это то же самое, что рисованная анимация, но каждый кадр рисуется на отдельном листе, а потом его фотографируют.
При создании современных мультфильмов использование покадровой анимации неизбежно. Значительно облегчить работу аниматора поможет программная генерация изображений в кадрах, которые находятся между ключевыми сюжетами.
Для этих целей существует множество программ для покадровой анимации. Рассмотрим некоторые из них и определимся с выбором.
Atani
Редактор, предназначенный для создания покадровой анимации. Он имеет встроенный графический редактор и позволяет изображения импортировать в форматы WMF, BMP, GIF, EMF, JPG, ICO и PNG. Созданный мультфильм можно сохранить как AVI или как GIF-файл. Каждый анимационный кадр можно редактировать отдельно в режиме морфинга. Есть возможность предварительного просмотра анимации и поддержка горячих клавиш.
Основные функции:
Приложение Pivot Stickfigure Animator
Инструмент, который позволит создать вам простую анимацию, даже если вы не ничего не понимаете во флэш-анимации. Утилита позволяет добавлять неограниченное количество самых разнообразных слайдов. Сохранение готового ролика возможно только в формате.gif.
Программа обладает приятным интерфейсом и позволяет добавлять на один слайд несколько схем. В ее состав входит множество инструментов для изменения размеров фигуры анимации, а также отдельных ее частей. С помощью данного приложения даже новичок разберется в том, как сделать покадровую анимацию, и сможет создать простой мультипликационный ролик, затратив всего несколько минут. В общем, Pivot Stickfigure Animator - довольно интересная бесплатная программа.
Создание покадровой анимации с Stickman
Отличающаяся от большинства себе подобных программ Stickman прекрасно подходит для обучения детей в школах анимации. А для профессионалов предоставляет быстрый и легкий способ создания качественных анимационных фильмов.
Программой используется довольно интересная и новая технология создания анимации: используются ключевые кадры вместо того, чтобы прорисовывать каждый кадр, а промежуточные движения вычисляются самостоятельно. Группы контрольных точек задаются каждой фигуре и позволяют управлять анимацией.
Кроме того, экспортирование готовой мультипликации доступно в форматы SWF, MP4, MOV, AVI, MPG, FLV и другие. Можно записать собственный голос или добавить звук из файла любого формата.
Функции и особенности:
- создание по ключевым кадрам анимации;
- импорт изображений;
- поддержка нескольких камер;
- экспорт готовой анимации в девять видеоформатов;
- поддержка слоев;
- экспорт во флеш.
Утилита Easy GIF Animator
В основном, предназначена для создания мультипликационных изображений формата.gif c дополнением их разного рода спецэффектами.
Приложение обладает множеством настроек, которые позволят изменить большинство характеристик gif-файла. Например, продолжительность ролика или его цветовую гамму. Кроме того, программа покадровой анимации Easy GIF Animator позволяет непосредственно на изображение добавлять тексты и осуществлять в браузере предварительный просмотр проекта. Можно добавить звуковое сопровождение в создаваемый ролик и сохранить результат форматом.swf.
Программа Easy Gif Animator Rus подойдет разработчикам рекламной продукции и веб-аниматорам. Разработчиками предложена система функциональной оптимизации. Готовая анимация уменьшается до размеров полученного файла. Используются почти все популярные графические форматы для сохранения мультипликации: PNG, BMP, JPG, и GIF.
Ключевые функции и особенности
- добавление визуальных и текстовых эффектов анимации;
- предварительный просмотр в браузере;
- покадрово выбирается прозрачность цвета;
- установка продолжительности анимации и счетчиков циклов;
- реверс части анимации или всего ролика;
- для каждого изображения устанавливается позиция;
- оптимизация анимации и изображений;
- конвертация анимации в черно-белый формат или оттенки серого;
- редактирование палитры;
- экспортирование анимации в avi-формат.
Покадровая анимация с Synfig Studio
Бесплатная программа для создания высококачественной двухмерной анимации. Работает в основном с векторными объектами и позволит создать и небольшие анимационные картинки, и нарисовать целые мультфильмы.
Отличается от подобных приложений профессиональным и качественным интерфейсом, который оснащен рабочим окном для изображений и функциональными панелями - свойства, инструменты, навигатор, слои, параметры). В начале работы необходимо задать ключевые точки для изображения, а программа создает и рассчитывает промежуточные кадры.
Готовые ролики сохраняются в форматах Digital Video, AVI, Theora и MPEG, для мультипликации используются форматы MNG и GIF. Все эти свойства делают эту программу отличным выбором для создания в домашних условиях анимации.
Adobe Photoshop
Список возможностей и эффективность этой программы бесполезно оспаривать. Профессиональные дизайнеры и художники давно признали этот факт и серьезно расширили творческие перспективы благодаря этому популярному графическому редактору. Без сомнений эта утилита обладает огромным функционалом и является индустриальным стандартом.
Уникальность программы определена такими функциями, как управление цветом, маски, умная автокоррекция, наложение эффектов, управление слоями, инструменты для точного выделения, наборы кистей и так далее.
Расширенное издание последней версии утилиты отличается от стандартного набором некоторых дополнительных функций. Например, работа с трехмерной графикой и большой набор инструментов для создания в фотошопе покадровой анимации, теней и отражений.
Благодаря возможности предоставлять в общий доступ и экспортировать предварительные настройки рабочий процесс редактора значительно улучшен, а продвинутый интерфейс позволяет выполнять работу в редакторе с удовольствием.
Мощная и популярная программа Adobe Flash CS5 Professional
Эта утилита предназначена для профессиональной и качественной разработки интерактивного содержания веб-страниц, интерактивных flash-роликов, а также для создания видеороликов.
Приложение имеет широкие функциональные возможности, которые позволяют просто и легко создавать интерактивные проекты под разные платформы.
Покадровая анимация flash в данной программе делается одним кликом мышки. Кроме того, быстро и удобно сделать из изображения мультипликационный флеш-ролик с помощью объектно-ориентированного подхода к созданию анимации, реализованному в программе.
- Создание мультипликационных проектов с живой и максимально реалистичной анимацией.
- Благодаря Creative Suite, значительно улучшена адаптация программы.
- Наличие инструмента «Декорирование», позволяющего добавление выразительных эффектов анимации.
- Палитра «Кости» содержит новые атрибуты движения.
- Функция вставки в проект музыкального сопровождения в формате MP3.
- Улучшенные возможности редактора.
- Панель «Фрагменты кода» содержит заготовки, которые быстро вставляются в проект.
- Создание реалистичной анимации.
Процесс создания анимации шаг за шагом - вот что мы хотели рассмотреть в этой статье. Уже готовые вы можете посмотреть на сайте студии. А здесь поговорим о процессе. Прочитав этот текст, Вы сможете понять, как обычно проходит работа в этой области, кто участвует в процессе (кратко рассказывается о работе копирайтеров, сценариста, художников, аниматоров, дикторов, звукорежиссера), и получить первоначальное представление с чего можно начать процесс обучения анимации.
Работу лучше разделить на несколько основных этапов и двигаться шаг за шагом, нужна ясность в процессе работы создания анимации.
СОЗДАНИЕ МУЛЬТФИЛЬМА
СтатьяКак создать мультфильм
Часто спрашивают, как создаются мультфильмы? В этой статье мы попробуем кратко но наглядно рассказать, как выглядит этот процесс. Многое зависит от того, зачем Вам нужен мультфильм.
Если Вы хотите заказать анимационный ролик для своей компании, то, конечно, нужно обращаться к профессионалам. Если мультик в подарок своим знакомым или родственникам, тут можно делать что-то попроще, но лучше тоже делать все как надо. Это дело небыстрое и требующее профессионализма всех участников процесса.
Если Вы хотите сами научиться делать мультики или как-то связать свою работу с мультфильмами, то этот текст поможет понять, как примерно все это делается и кто в этом процессе участвует.
Этапы создания
Работу лучше разделить на несколько основных этапов. Удобнее разделить работу на части и последовательно продвигаться шаг за шагом, особенно, если вы делаете мультфильм не в свое удовольствие, а для кого-то и нужна ясность в процессе работы создания анимации.
1. Написание сценария мультфильма
На этом этапе копирайтером разрабатывается общая концепция, идея мультфильма. Часто люди уже имеют какое-то представление, что им хочется видеть в мультфильме. Иногда даже бывает, что сценарий уже полностью разработан.
Если этого нет, то составляется бриф (что-то вроде опросника), в котором перечислены основные вопросы, на которые предлагается ответить. Обычно, это вопросы о целях, которые преследуется, о целевой группе, на которую ориентируются в создании мультфильма, о продолжительности мультфильма, предпочтениях в стилистике, озвучке и т.п.
После заполнения такого брифа ситуация сильно проясняется и можно переходить к созданию сценария мультфильма. Имея заполненный бриф сценарист предлагает, обычно, несколько разных идей сценария на выбор. Выбранный вариант дорабатывается в полноценный сценарий.
После утверждения сценария можно начинать разработку персонажей.
2. Разработка персонажей
К разработке персонажей, обычно, приступают, когда уже известны основные задачи мультфильма, целевая группа и предпочтения по стилистике. По сценарию художник иллюстратор или, так называемый, концепт артист разрабатывает образ каждого из героев мультфильма. Иногда отдельным этапом еще до прорисовки персонажей разрабатывается описание характера каждого из персонажей - такой портрет каждого из героев в текстовой форме. Делается это для того, чтобы художник при разработке визуального образа уже четко представлял себе характер персонажа.
Сначала, как правило, художник делает какие-то черновые скетчи, простые зарисовки карандашом или на планшете. На этом этапе не важен ни цвет, ни четкость прорисовки. Главное сначала найти подходящий образ. Создается 1-3 разных вариантов образа персонажа. Если ничего не понравилось, то можно сделать дополнительные варианты.
После утверждения наброска следующим этапом идет уже его чистовая доработка и окончательная прорисовка в цвете и векторе (в случае если это флеш мультфильм).
Так происходит с каждым из персонажей. Когда все персонажи разработаны и утверждены, можно смело приступать к раскадровке.
3. Раскадровка
Нужно заметить, что раскадровка, вообще, является необязательным этапом. Раскадровка помогает понять еще до начала создания анимации, как примерно будет выглядеть мультфильм. Поэтому если есть какие-то особенные пожелания или опасения на этот счет, то раскадровка для мультфильма может быть полезна.
Суть раскадровки проста - это отрисовка основных сцен мультфильма в статике. Из раскадровки можно понять как будут выглядеть сцены в мультфильме, их последовательность, продолжительность (если раскадровка с таймкодом), расположение основных предметов на фоне и, также, расположение персонажей относительно фона.
пример раскадровки для мультфильма
Раскадровка может быть черно-белой в виде скетча карандашом, может быть и цветной в растре или в векторе. Детализация и прорисовка тоже может быть разной - всё зависит от сложности мультфильма и задач.
Обычно, раскадровки достаточно для понимания, как будет все выглядеть в мультфильме. После того, как раскадровка готова, чаще всего, можно приступать к созданию анимации. Но в некоторых случаях (когда нужна 100% уверенность, что все будет в мультфильме именно так, как хотелось бы) требуется еще один промежуточный этап - аниматик.
4. Аниматик
Аниматик - это анимированная раскадровка. Это уже не статичные картинки, но еще и не мультфильм - нечто среднее между ними. Аниматик, обычно, создается четко по раскадровке и по времени мультфильма (если мультфильм на 30 секунд, то и аниматик делается ровно на 30 секунд, чтобы можно было понять продолжительность каждой сцены, прежде, чем ее сменит следующая).
Пример создания аниматика
Наиболее важные моменты могут быть уже анимированы в аниматике (полностью или условно). Что-то может быть схематически показано стрелками, вставлены какие-то дополнительные поясняющие кадры, что-то подписано текстом и т.д. Аниматик не обязан быть чистовым. Его функция - сделать более понятным материал из раскадровки.
5. Создание мультфильма
Аниматик готов и утвержден. Теперь можно заниматься созданием мультика. Все необходимое для этого у аниматора уже есть. Параллельно с анимацией художник-фоновщик может заниматься фонами. Также, для полноценного мультфильма, обычно, требуется озвучивание анимации.
Озвучивание может быть разного уровня сложности и состоять из следующих составляющих: дикторская начитка или работа актеров, озвучивание событий в мультфильме, наложение музыки, написание стихов, песни, оригинальной музыки, сведение всего материала.
Но вернемся к анимации. У каждого аниматора есть своя схема работы, которая ему нравится больше, и к которой он привык. Чаще всего, сначала по аниматику аниматор делает отрисовку основных локаций персонажей. После этого уже идет анимирование промежуточных кадров между этими локациями и все остальное.
Основные принципы мультипликации
В классической анимации (мультипликации) мультфильм создается из последовательности статичных картинок (кадров). Частота кадров может быть разная (чаще всего, это от 12 до 30 кадров в секунду). То есть за секунду просматривается 12-30 кадров, каждый из которых немного отличается от предыдущего. За счет этого создается видимость движения.
Чем больше кадров в секунду, тем более плавное движение, чем меньше, тем более прерывистое. Для флеш мультфильмов в интернете, чаще всего, используется 12-18 кадров в секунду - это связано с тем, что делать 24-30 кадров в секунду в 2 раза дольше, чем 12-15. Для ТВ стандарт Pal 24-25 кадров для NTSC 30 кадров в секунду. Но, конечно, лучше и для интернета делать те же 24-25 кадров в секунду - такая анимация выглядит более плавно и красиво.
Нужно сказать, что мультфильмы для интернета - это, обычно, флеш мультфильмы. Эта программа анимации ориентирована именно на интернет и имеет ряд особенностей, которые позволяют упростить работу над мультфильмом и уменьшить размер конечного файла.
Размер файла мультфильма был очень важен несколько лет назад, когда все сидели еще на модемах и о повсеместном использовании онлайн видео не могло быть и речи - слишком медленно все грузилось. Тогда формат swf был незаменим для мультфильма. Однако сейчас ситуация сильно изменилась - интернет стал быстрым и недорогим, и мультфильмы, чаще, уже переводят в видео формат.
На видео анимация в программе Флеш
Что касается оптимизации труда аниматора, флеш предлагает, тоже, интересные решения. Классическая покадровая анимация очень трудоемка и для интернета это совершенно нерентабельно, как правило. На флеше можно делать анимацию как покадрово, так и перекладкой (с помощью motion tweening), также, в последних версиях программы добавлена возможность создания анимации по скелету, ну и, само собой, использование символов (анимационные куски могут быть зациклены и использованы по многу раз где нужно). Все это существенно помогает сократить время и сделать анимацию быстрее. Безусловно, анимация по скелету, перекладкой или покадрово будет в каждом из этих случаев выглядеть по-разному. Разумнее всего сочетать эти возможности, добиваясь оптимального результата.
Постпродакшн, компоузинг для мультфильмов
Постпродакшн и компоузинг для мультфильмов - это работа, которая может проводиться уже после того, как мультфильм готов. Это является необязательным этапом (флеш мультфильмы, обычно, делаются без него). Однако, этот этап нельзя недооценивать, если речь идет об использовании красивых растровых картинок в мультфильме, интересных красочных эффектов, создании мультфильма для ТВ. Анимация может быть в смешанной технике. К примеру, может быть видео людей снятое с хромакеем (на зеленом фоне, который в последствии удаляется при компоузинге). Скажем, какие-то люди танцуют на этом видео. Можно сделать анимированные фоны и поместить туда этих танцующих людей, то есть они будут танцевать уже в такой мультяшной стране. Или, наоборот, фотографии или видео могут быть использованы как фон, а сверху могут быть наложены анимированные персонажи.
Можно, например, снять на видео какой-то ресторан, а потом сделать анимированного повара, который ходит по ресторану и рассказывает, как всё в нем устроено. С помощью компоузинга можно достичь красивого органичного совмещения анимации с фонами, сделать цветокоррекцию и т.п. Все это позволяет сделать мультфильм максимально привлекательным и законченным.
Нужно сказать, что мультфильмы для интернета - это, обычно, флеш мультфильмы. Эта программа анимации ориентирована именно на интернет и имеет ряд особенностей, которые позволяют упростить работу над мультфильмом и уменьшить размер конечного файла
Программы для анимации
Существует множество программ для работы с анимацией. Есть разные техники и анимации и разные варианты программ позволяющие создавать мультфильмы в тех или иных техниках.
Самые популярные из них: Adobe Flash, Toonz, Toon Boom Studio, Adobe After Effects, Anime Studio. Есть и многие другие, но ограничимся в этой статье этими.
Flash стал лидером в создании анимации для интернета за счет своих гибких возможностей. Toon Boom Studio можно назвать аналогом, имеющим свои особенности, конечно, и без таких возможностей программирования, как у флеша.
Toonz больше подходит для покадровой анимации. After Effects - очень мощная программа для создания эффектов, теледизайна, компоузинга, также, в ней можно делать анимацию с растровой перекладкой. Anime Studio интересна своей простотой, возможностью анимации по скелету и качественным рендером растра.
В общем, все зависит от задач и предпочтений. Есть еще программы для 3d анимации, пластилиновой анимации и т.п. Но это уже отдельный разговор.
Посмотрите мультфильмы нашей студии здесь:
