Что нужно для анимации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Principle

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

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

2. Marvel

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

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

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

3. InVision Studio

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

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

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

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

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

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

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

4. Adobe Photoshop

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

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

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

5. Adobe Animate

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

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

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

6. Adobe After Effects

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

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

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

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

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

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

Резюме

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

Источник

Можно ли стать аниматором, не умея рисовать?

Слева направо: классическая анимация, перекладка, компьютерная 3D-анимация.

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

«Fantasmagorie» Эмиля Коля считается одной из первых анимаций. Чтобы сделать этот короткий ролик, художник нарисовал около 700 картинок.

Какие навыки нужны для 2D-анимации

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

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

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

Наш преподаватель по классической 2D-анимации, Эдвард Курчевский, комментирует это так:

«Даже начинающему аниматору нужно обязательно уметь рисовать. Вы должны хорошо ориентироваться в пространстве, пропорциях и объемах. Навык рисования поможет вам сделать анимацию не только красивее, но и быстрее. Скорость в современной индустрии — это тоже очень важный момент»‎.

Эдвард дал несколько советов начинающим 2D-аниматорам и поделился несколькими источниками:

Выбираем любую точку на карте. Помещаем человечка в любую точку. Мы в Касабланке, рисуем окружающие нас красоты.

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

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

София Фирсова, преподаватель курса «Анимация и риг в Spine», Animation Director в Playrix:

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

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

Даже в простых набросках можно живо передать динамику.

Для новичков София рекомендует книгу «Gesture Drawing For Animation», Walt Stanchfield. В ней автор разбирает приемы по построению тела в перспективе из простых форм, на что обращать внимание при проработке ключевых поз и так далее. Также каналы Proko и CG Speak на YouTube будут полезны для самообучения рисованию.

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

Наш преподаватель курса «Техника перекладки в Adobe Animate», Lead Animator в Playrix, Ян Богородецкий, согласен с Софией:

«Для работы в технике классической 2D-анимации умение рисовать обязательно, для работы в перекладке — очень желательно.

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

Нужны ли навыки рисования в 3D-анимации

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

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

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

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

Арсений Тургулайнен, преподаватель курсов 3D анимации, Senior Animator в Waterproof Studios:

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

У Алексея Медведева, аниматора студии «Аэроплан» и преподавателя курсов 3D анимации, другое мнение:

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

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

Наброски Алексея Медведева

Алексей также рекомендует книги диснеевского аниматора Уолта Стенчфилда (Walt Stanchfield. Drawn to Life) и приводит несколько его цитат для вдохновения:

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

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

Подведем итоги

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

Персонажи «Рика и Морти» сделаны с помощью перекладки.

Ирина Голина-Сагателиан, арт-директор студии WildBrain, преподаватель курсов 2D-анимации в Toon Boom Harmony:

«Если бы меня спросили 20 лет назад, я бы ответила: да, уметь рисовать нужно обязательно. Но сейчас анимационная индустрия сильно изменилась. Я работала в разных областях анимации и видела много крутых аниматоров, которые не способны нарисовать даже цветочек. При этом они очень хорошо разбираются в анатомии и способны сделать неплохую вспомогательную скетчевую анимацию.

Индустрия доказывает, что не обязательно уметь хорошо рисовать, но нужно ориентироваться в анатомии и механике движения. Скажем, 3D-аниматору быть художником вообще не нужно, но желательно понимать хотя бы основы. В Toon Boom Harmony нужно не просто рисовать, а уметь держать персонажа по модели. А флеш-аниматору может быть достаточно рисовать отдельные части персонажа.

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

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

Обсудите статью в наших социальных сетях

Источник

Как создать анимацию в Photoshop. Пошаговая инструкция

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

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

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

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

C чего начать

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

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

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

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

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

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

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

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

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

В Photoshop анимируют двумя способами:

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

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

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

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

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

Источник