Все виды рисования анимации

Студия анимации и дизайна Картонная Башня — Создание мультфильмов, рекламных роликов, анимации.

«Здесь, тем не менее, мы оглядываемся назад, но не стоим на месте. Мы стремимся вперед, открываем новые пути, беремся за новые дела, потому что мы любопытны. и любопытство гонит нас по новым дорогам. Только вперед.» (Уолт Дисней)

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

Для начала, что бы не запутаться, мне хотелось бы выделить 3 основных критерия по которым можно судить об анимации: виды анимации, методы анимации и стили анимации. Для многих — это одно и тоже, но это не так! Виды анимации — это то, в каком виде или форме демонстрируется мультфильм (рисованный, кукольный и т. д). Методы анимации — это технические особенности с помощью которых создается анимация (покадровая анимация, программируемая анимация и т. д). И наконец, стиль анимации — это художественный прием, который используется в анимации (реализм, аниме и т. д). В этой статье я рассмотрю понятие «виды анимации» в более развернутом виде, а впоследствии прибавлю к этому «методы» и «стили». Все это вместе и есть технология анимации.

Рисованная классическая анимация.

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

Кадр из мультфильма «Белоснежка и семь гномов» студии «Дисней»

Перекладная анимация.

Старейший вид анимации. Суть этого вида анимации в том, что нарисованный на картоне или бумаге объект режется на отдельные кусочки и эти кусочки передвигаются (перекладываются) от кадра к кадру. Отсюда и название — перекладка! Многие считают такую анимацию примитивной, но в умелых руках такие мультфильмы могут получиться очень интересными. Одним из самых ярких примеров перекладной анимации можно смело назвать мультфильм «Ежик в Тумане» режиссера Юрия Норштейна. «Ежик в тумане» был признан мировым сообществом САМЫМ ЛУЧШИМ МУЛЬТФИЛЬМОМ ВСЕХ ВРЕМЕН И НАРОДОВ. Вот тебе и перекладка. Вот тебе и примитивно.

Кадр из мультфильма «Ежик в тумане» режиссера Юрия Норштейна

Живопись на стекле.

А вот здесь примитивным анимацию точно не назовешь! Суть такой анимации в рисовании масляными красками по стеклу. Каждый кадр при этом — это живописная картина, которая видоизменяется мазками художника. Ярким примером такой анимации является произведение Александра Петрова «Старик и море», которое было удостоено премией «Оскар».

Кадр из анимационного фильма «Старик и море» режиссера Александра Петрова.

Кукольная анимация.

То же старинный вид анимации. Все куклы и декорации в кукольной анимации изготавливаются вручную, что делает ее такой же дорогой, как и классическая анимация. Тем не менее такой вид анимации очень популярен даже сегодня (несмотря на распространение компьютерной 3д анимации). Если сказать честно, то кукольная анимация мне в детстве не нравилась))) Но прозрение наступило, когда я увидел мультфильм Тома Бертона «Кошмар перед рождеством».

Кадр из мультфильма «Кошмар перед рождеством» режиссера Тома Бертона.

Пластилиновая анимация

Название пластилиновая анимация говорит само за себя. Добавлю только то, что пластилиновая анимация вышла из кукольной анимации и стала популярной у нас в России после появления мультфильмов «Падал прошлогодний снег» режиссера Александра Татарского.

Кадр из мультфильма «Падал прошлогодний снег» режиссера А.Татарского.

Компьютерная 2д анимация.

Хотим мы того или не хотим, но на смену старым видам анимации приходят новые. Компьютерную 2д анимацию почему-то принято называть Flash анимацией и это не совсем верно. Flash — это только одна программа. Можно назвать и другие мощные компьютерные программы для создания 2д анимации, например: After Effect, Anime Studi Pro, Toon Boom Studio и еще множество платных и бесплатных программ. В настоящее время компьютерной 2д анимацией занимаются почти все студии. Именно такую анимацию мы видим сегодня в сериалах по телевизору, в интернете, в казуальных компьютерных играх и т. д.

Кадр из анимационного сериала «Симсоны»

3д анимация.

3д анимация — вид мультипликации созданный на базе компьютерных 3д программ. Это самый молодой и самый перспективны вид анимации. С развитием компьютерных технологий стало возможным не только рисовать графику и анимацию в двухмерной плоскости (2д анимация), но и оживлять трехмерные формы. Технология эта очень сложная, но если рассказать коротко, то процесс производства выглядит примерно так. Сначала рисуются концепт арты (любым способом), по этим рисункам создают трехмерную геометрию модели. Затем текстуры, которые надеваются на форму персонажа или объекта. Далее создают кости объекта и прикрепляют их к форме, что бы форма смогла двигаться. Аниматоры получают подготовленную модель для движений и начинают ее оживлять. Чем лучше подготовлена модель, тем ее движения получаются естественнее и пластичнее. После создания анимации сцена визуализируется (переводится из 3д в обычную картинку). Яркими примерами такой анимации являются мультфильмы студии Пиксар.

Кадр из мультфильма «Рататуй» студии Пиксар.

Комбинированная анимация.

Комбинированная анимация — это совмещение любого из видов анимации с видеофильмом. Ранними примерами такой анимации могут быть: фильм «Кто подставил кролика Роджера», мультфильм «Приключение Капитана Врунгеля» и т. д. С развитием 3д технологии и компьютерных спецэффектов этот вид анимации встречается в художественных фильмах все чаще и чаще. Основной особенностью современной комбинированной анимация заключается в ее полной реалистичности.

Кадр из фильма «Мир юрского периода» режиссера Стивена Спилберга

Другие виды анимации.

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

Виды анимации в студии Картонная Башня.

Наша студия анимации специализируется на производстве компьютерной 2д анимации. Благодаря гибким возможностям компьютерных программ мы можем создавать как перекладную, так и классическую анимацию одновременно. Так же нам по силам создание и 3д анимации. В качестве примера, вы можете посмотреть на 3 ролика из нашего портфолио:

1. Компьютерная 2д анимация в классической манере:

Источник

6 популярных программ для создания анимации

Быстро сменяющиеся кадры создают иллюзию движения, а аниматоры с её помощью — живые продукты. Разбираем инструменты для моушн- и UI-дизайна.

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

Чтобы разобраться в правилах создания анимации, мы приглашаем начинающих и опытных дизайнеров на курс «Анимация интерфейсов» от Skillbox. А выпускникам с дипломами гарантируем трудоустройство в компании-партнёры.

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

Для чего нужна анимация

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

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

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

Анимация: какие программы использовать

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

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

Анимирование прототипов

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

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

1. Principle

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

Сфера применения: создание коротких сценариев в 2–4 экрана.

Цена: 129 долларов.

Плюсы	Минусы
Простой инструмент для несложной анимации	Неудобно работать со сложными сценариями
Простой интерфейс	Работает только на macOS

2. Marvel

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

Сфера применения: удобное создание прототипов прямо из браузера.

Цена: несколько тарифных планов, есть бесплатный.

Плюсы	Минусы
Кросс-платформенный, работает из браузера	Долго загружается при медленном интернете
Условно-бесплатный

3. InVision Studio

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

Сфера применения: создание дизайна и прототипов.

Цена: бесплатный в раннем доступе.

Плюсы	Минусы
Подходит для совместной работы	Ранний доступ
Работает на Windows	Иногда возникают ошибки во время работы

Создание полноценных анимаций

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

Универсальные программы для анимирования — это продукты компании Adobe. Простую анимацию можно сделать и в Photoshop, для сложного подойдёт Animate или After Effects.

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

4. Adobe Photoshop

Универсальный редактор для обработки графики. С помощью инструмента Timeline («Шкала времени») можно создавать покадровую анимацию работ. Photoshop — самый простой инструмент от Adobe, в котором имитируют движение. Интерфейс более сложных программ построен на основе Photoshop. Поэтому знакомство с созданием анимации лучше начать с него.

Сфера применения: работа и анимация сайтов, фотографий, иллюстраций и другой графики.

Цена: подписка, 1 288 рублей в месяц.

Плюсы	Минусы
Популярный редактор для обработки графики	Универсальность, много лишних функций
Поддержка Windows и macOS	Нет веб-версии

5. Adobe Animate

Это одна из тех программ, которые используют для анимации изображений. Есть удобная шкала времени с раскадровкой. В Animate удобно работать с макетами из Photoshop. Идеально подходит для создания интерактивных презентаций и баннеров. Позволяет экспортировать анимацию в формате HTML и CSS.

Сфера применения: анимация презентаций, баннеров, рекламы.

Цена: подписка, 1 288 рублей в месяц.

Плюсы	Минусы
Работа с векторной графикой	Иногда встроенного редактора не хватает
Поддержка Windows и macOS	Нет веб-версии
Развитое сообщество, много уроков

6. Adobe After Effects

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

After Effects требует значительных ресурсов и довольно сложен для изучения. Поэтому знакомство с ним лучше начать уже после изучения Photoshop и Animate.

Сфера применения: создание спецэффектов, заставок, титров, анимаций.

Цена: подписка, 1 288 рублей в месяц.

Плюсы	Минусы
Мультифункциональный инструмент	Сложно освоить
Поддержка Windows и macOS	Запутанный интерфейс
Развитое сообщество, много уроков	Необходим мощный компьютер

В какой программе сделать анимацию

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

ПРОГРАММА	ПРОСТЫЕ АНИМАЦИИ	РАБОТАЕТ В БРАУЗЕРЕ	PRO-УРОВЕНЬ	БЕСПЛАТНАЯ
InVision	Нет	Нет	Нет	Да
Adobe Photoshop	Да	Нет	Нет	Нет
Principle	Да	Нет	Нет	Нет
Marvel	Да	Да	Нет	Да
Adobe Animate	Нет	Нет	Нет	Нет
Adobe After Effects	Нет	Нет	Да	Нет

Резюме

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

Анимация интерфейсов

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

Источник