Главная · Windows XP · Что такое покадровая анимация. Что такое покадровая анимация и как ее делать. Теперь вам нужно придумать фон, концепт персонажей и движения

Что такое покадровая анимация. Что такое покадровая анимация и как ее делать. Теперь вам нужно придумать фон, концепт персонажей и движения

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


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

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

Многие советовали мне переходить на другие программы (например, TVP Animation Pro ), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.

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


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


Короткие анимации – это анимированные аватарки, смайлики и т.д.

Длинные анимации – это мультфильмы, видео и т.п.


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

Важное дополнение

Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро , потому что вы нарисовали мало кадров.

Ваш персонаж/объект двигается медленно , потому что вы нарисовали много кадров.

Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.


Запомните: в одной секунде 24 кадра!


Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.

Короткие анимации

Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e , но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко. С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15 -30 кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320 кадров!).

Что вы должны помнить и знать?

Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:


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


Примерно так это показано на схеме:


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


И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.



Слабый ветер:


Средний ветер:


Сильный ветер:


Всё то же самое относится к ткани и одежде - они будут вести себя примерно так же, как и волосы.


А теперь, например, вы захотели нарисовать анимацию с движением своего персонажаобъекта. значит:


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

Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:

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

Небольшое дополнение

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

Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!

Лучше поработайте над ней и никогда не спешите.

Длинные анимации

Ооо, вот тут-то и начинается всё самое интересное!


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


Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.

И знаете, я ведь нахожу ответы на все свои вопросы!


Но давайте будем разбирать всё по порядку.

Процесс создания длинной анимации

1. Изначально нам нужна ИДЕЯ

Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.

Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.

Но в начале своего пути аниматора лучше ограничиться одной-двумя.

2. Теперь вам необходимо составить раскадровку по сценам (РПС)

Что это такое, и с чем её едят?


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


Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30 штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.

В ней они изображают сцены.

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



Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь - что это я тут изобразила?


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

3. Теперь вам нужно придумать фон, концепт персонажей и движения

Движения рисуем в книжечке РПС.

Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь - фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.

Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24 -72 -кадровой анимации.


Что ж, начнём!


1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.


2. Теперь, если у вас нет внизу слева окна «Анимация », смотрим наверх, открываем вкладку «Окно » - «Анимация ».*


* - В примерах используется русифицированная версия Photoshop CS2 .


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

Всегда/однажды - выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная - где показан принцип ДПД, воспроизводимая один раз - где показана смена сцен).

Выберите первый кадр - возвращает нас к самому началу.

Выбирает предыдущий кадр - не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию - Play/Stop.

Выбирает следующие кадры - следующий кадр. Ваш Кэп!

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

Дублирует выбранные кадры - не совсем верное название... Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры - корзина.


3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).


4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.


Создаём новый кадр, и... Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).


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

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.


Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.


5. Сидим, рисуем кадров 10 -15 ...


6. И смотрим, что получилось.


Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.


Смотрите сами:


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

Почти конец

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



И, после того, как мы сохранили нашу gif -анимацию как видео файл формата .avi , например, можно смело идти в Киностудию Windows Live .
Там уже делайте с вашим клипом всё, что душе угодно.


А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.



Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения...

Но, надеюсь, вы почерпнули для себя что-то новое и интересное!

Вы узнаете:

  • Как открыть и закрыть и настроить панель анимации.
  • Как добавлять, удалять и редактировать ключевые и кадры анимации.
  • Для чего нужна кнопка 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) Выполнить покадровую анимацию текста.

Покадровая анимация (англ. - «Stop motion») – это техника анимации, при которой отрисовывают каждый кадр. Фильм или мультфильм, созданный при помощи покадровой анимации, состоит из сотен или даже тысяч кадров, каждый из которых прорисовывается отдельно.

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

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

История явления

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

В 1900 году анимация применялась в коротком фильме “Очарованный рисунок”. В нем главный герой показывает преимущества покадровой анимации.

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

Одним из самых ярких примеров покадровой анимации в истории по праву считается фильм “Кинг-Конг”, 1933 год. Была создана кукла обезьяны из резины, шкуры и пенопласта. На создание анимации ушел целый год.

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

Отличия от других анимационных техник

Существует несколько видов анимации:

  • Покадровая;
  • Перекладная;
  • Компьютерная 2D;

Перекладная анимация – одна из самых старых техник, которую можно увидеть, например, в мультфильме “Ежик в тумане”. На бумаге объект разрезается на отдельные куски, которые передвигают (перекладывают). Реализация по принципу покадровой анимации, только рисовать каждый кадр не надо. Несмотря на примитивность такой анимации, “Ежик в тумане” считается одним из лучших мультфильмов всех времен.

Компьютерная 2D анимация – современная техника, которую применяют почти в каждом мультфильме. Можно сказать, что это просто рисованная анимация, которую рисуют на компьютере. Зрители сильно полюбили этот вид анимации, ведь мультфильмы получаются яркие, динамичные и простые.

3D анимация – это по-настоящему живые персонажи в мультфильме. На компьютере создается трехмерная модель персонажа, которая “оживает” с помощью компьютерной графики. Поэтому мультфильмы с применением 3D анимации особенно нравится смотреть, когда в кадре люди или животные.

Покадровая анимация – самый сложный и долгий процесс из всех перечисленных. Однако, такая анимация плавная и “живая”. Множество мультфильмов компании “Дисней” выполнены именно в этой технике.

Особенности создания покадровой анимации

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

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

Известные современные примеры

Сейчас покадровая анимация применяется в основном при создании простых видео для youtube и других видеоплощадок в интернете. Это могут быть как забавные короткие видео, так и видео, несущие информационный характер. Среди наиболее известных примеров можно выделить “Simons’ cat” и “Mr. Freeman”. В анимации используется 10-15 кадров в секунду, однако это и является ключевой фишкой этих мультфильмов. Все действия выглядят динамично, их интересно смотреть.

Итоги

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

Вам может быть необходим целый замок, но может ли вам хватить просто танцзала и темницы? Сузьте свой взгляд до действительно необходимого для рассказа истории. Я это сделал - вместо «убийственных полей», о которых говорилось чуть выше, сделал бесконечный коридор в 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. Придавайте вещам жизни

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

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

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

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

Для этих целей существует множество программ для покадровой анимации. Рассмотрим некоторые из них и определимся с выбором.

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.
  • Улучшенные возможности редактора.
  • Панель «Фрагменты кода» содержит заготовки, которые быстро вставляются в проект.
  • Создание реалистичной анимации.