Сто дней моушн-дизайна: как создать 50 анимаций за 100 дней
Полина Кабирова, коммерческий автор и переводчик, специально для блога Нетологии адаптировала статью Тианшин Зу о том, как за сто дней освоить Sketch, Illustrator и After Effects и научиться создавать анимации.
Первый раз я устроила себе такой марафон в 2015 году. До этого я устраивала другие челленджи: «100 дней Google-дудлов», «100 дней леттеринга», «100 дней акварельных иллюстраций» и «100 дней векторной графики».
Работы прошлых стодневных марафонов
Стодневный марафон — это возможность для творчества. Мне нравится преодолевать трудности, изучая новые навыки. Ради этого я продолжаю устраивать для себя новые челленджи.
Во время марафона «100 дней моушн-дизайна» я научилась создавать анимации с векторной графикой и нарисовала 50 работ. Их можно посмотреть в Инстаграм или на Dribbble.
В статье расскажу о творческом процессе, инструментах и поделюсь размышлениями о марафоне.
Инструменты
Первые две недели я рисовала в Sketch, а для создания анимации использовала Principle.
Sketch. Несложный и интуитивно понятный векторный графический редактор. Удобный инструмент для создания простых иллюстраций.
Principle. Простой инструмент для создания прототипов и интерактивной анимации. Он сочетается со Sketch и подходит для знакомства с особенностями работы с анимацией и временной шкалой.
Adobe Illustrator + Adobe After Effects
После первых двух недель я перешла на Illustrator и After Effects для изучения более сложных техник.
Adobe Illustrator. Самый мощный векторный графический редактор. Иллюстрации из Illustrator легко импортируются в After Effects.
Adobe After Effects. Главный инструмент для создания анимации, но для работы с ним нужно многому научиться. Во время марафона я освоила продвинутые функции и встроенные визуальные эффекты.
Творческий процесс
Анимации создаются долго. Я разделила процесс работы на 4 шага и поставила цель выполнять их за два дня.
Шаг 1: Ищем вдохновения (15 минут)
Вдохновение для анимаций я каждый день ищу на Dribbble, Behance и в Инстаграм. Моё главное место для вдохновения — Pinterest, там я собираю все понравившиеся работы.
Я также искала видеоуроки по моушн-дизайну на Ютубе. Вот список уроков, которые я смотрела во время марафона.
Шаг 2: Делаем наброски (5 минут)
Как только появлялась идея, я делала зарисовки в блокноте.
Шаг 3: Создаём иллюстрацию (40 минут)
Я рисовала иллюстрации и импортировала их в Principle или After Effects. При этом у файла с иллюстрацией должна быть чёткая структура — это значительно ускорит импорт.
В этом видеоуроке показано, как подготовить файл и импортировать его из Illustrator в After Effects. Перенести слои из Sketch в After Effects также можно с помощью плагина Sketch2AE.
Шаг 4: Создаём анимацию (1 час)
Я анимировала иллюстрации и результат экспортировала в формате короткого видео, которое выкладывала в Инстаграм с хэштегом #100daysofmotionbytx.
Если хотите загружать анимации на Dribbble, посмотрите видеоурок о том, как экспортировать видео в GIF.
Дни 1–14: начинаем с основ
Первые анимации я создавала по видеоурокам:
Первые анимации в Principle без видеоуроков «День / ночь» и «Солнечное затмение»:
Дни 15–70: погружаемся в моушн-дизайн
На протяжении следующих дней я разбиралась в After Effects, используя четыре приёма.
1. Смотрим видеоурок и рисуем по памяти
Я смотрела видеоуроки в ускоренном режиме и пыталась создать анимацию по памяти. Ключевые шаги записывала, а видеоурок открывала, только когда возникали сложности. Чтобы работать быстрее, я использовала горячие клавиши.
Так получились анимации дыма (видеоурок) и лавовой лампы (видеоурок):
2. Вдохновляемся работами других людей
Я покадрово изучала готовые работы, и у меня появлялись свои идеи.
Анимацию пользователя Deekay «Bouncy Fruits» я использовала для изучения анимационного приёма Squash and Stretch:
Моя анимация, вдохновлённая Deekay
На основе туториала Тони Бейбла «Ducky Walk Cycle» я научилась создавать шагающих персонажей (видеоурок):
Персонаж на иллюстрации создан на основе дудла
3. Оттачиваем новые навыки
Повторение помогает закрепить недавно освоенные навыки. Создавая новую анимацию, я старалась использовать уже знакомые принципы.
Закрепляя Squash and Stretch, я анимировала прыгающую тыкву:
На основе урока о шагающих персонажах Тони Бейбла я нарисовала фламинго:
4. Заполняем пробелы
На середине стодневного марафона я выделила день для чтения книги «Adobe After Effects CC Classroom in a Book». С помощью неё я систематизировала информацию и заполнила пробелы в знаниях, а ещё узнала о новых техниках анимации, которые хотела попробовать.
Дни 71–100: рисуем от души
Освоив инструменты, я начала рисовать то, что мне нравится, вдохновляясь любимыми играми и фильмами:
Анимация на основе игры «Firewatch»
Анимация на основе мобильной игры «Monument Valley»
Анимация на основе фильма «Красавица и Чудовище»
Некоторые работы делала на основе иллюстраций других художников:
Анимация на основе иллюстрации «Lighthouse» пользователя Dribble
Анимация на основе иллюстрации «Whale Migration» пользователя Dribble
Затем я участвовала в челлендже от Uplabs. Благодаря ему, я вышла из зоны комфорта и начала изучать новые техники:
Я сделала анимированную рекламы Type Thursday Seattle — ежемесячной встречи дизайнеров, посвящённой шрифтам и буквам:
Рисовала места, где я была или хотела побывать:
Анимация «Воздушный шар»
Анимация «Северное сияние»
Анимация «Небесный фонарик»
Анимация «Лес» на основе работы «Birds» пользователя Dribble
В конце марафона я анимировала свою работу из предыдущего челленджа «100 дней акварельных иллюстраций»:
Анимация на основе акварельной иллюстрации «Galaxy Girl»
Советы
1. Вдохновляйтесь идеями
Как только у меня появлялась идея, мне хотелось скорее воплотить её. Неважно, какие техники нужно было для этого освоить.
Например, я хотела выразить любовь к чтению и нарисовать книгу, страницы которой перелистываются. Для этого по видеоуроку на Ютубе я научилась добавлять ЗD-слой к 2D-объекту.
Иллюстрация, выражающая мою любовь к чтению
Аналогично у меня появилась идея нарисовать стаканчик тыквенного латте. С помощью видеоурока я на практике научилась использовать функции Slider Control и Wiggle Expression в After Effects:
Анимация «Тыквенный латте»
Идеи вдохновляли меня и мотивировали изучать новые техники.
2. Оценивайте себя адекватно
В начале марафона я была уверена в своих навыках моушн-дизайна, но уверенность пропала, когда я начала изучать After Effects. Я поняла, что у меня мало опыта и многому нужно учиться.
Это искажение восприятия описывает Эффект Даннинга-Крюгера: некомпетентный человек чувствует превосходство и ошибочно переоценивает свои способности.
Эффект Даннинга-Крюгера в виде графика: самоуверенность новичка падает по мере того, как у него появляются новые знания
Осознавая свою неопытность, я оценивала свои навыки более адекватно.
Неважно, сколько вы уже знаете. Помните, что впереди ещё много нового — это помогает развиваться.
3. Будьте в меньшинстве
До марафонов я в основном потребляла контент: социальные сети, Netflix, онлайн-курсы, книги.
«Правило одного процента» описывает уровень участия интернет-аудитории в создании контента: только 1% пользователей активно создают новый контент, 9% обрабатывают его, а остальные 90% — потребляют.
«Правило одного процента»
Во время стодневного марафона я стала создавать контент. Я начала делать то, что мне нравится, изучать новые навыки и вдохновлять людей вокруг.
«Я хочу принадлежать к 1% тех, кто создаёт» — эта мысль каждый день мотивировала меня показывать людям свои работы.
Для вдохновения
Я благодарна тем, кто делает видеоуроки и бесплатно выкладывает их на Ютуб. Люди, которые постоянно создают прекрасное сильно мотивировали меня и помогли закончить марафон.
Десять дизайнеров, которые вдохновляли меня на протяжении марафона «100 дней моушн-дизайна»:
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Как сделать свой анимационный сериал в идеальных условиях?
Как создается мультфильм? От идеи до запуска на ТВ
Анимация — это волшебство!
Сегодня мы хотим рассказать о производстве анимационного сериала, какой путь проходит мультик от идеи до запуска на телевидении. Но, сразу оговоримся: производства на разных студиях могут отличаться. Мы покажем обобщенный путь, «типовой» пайплайн.
Идея
Придумываете ли вы оригинальный сюжет, адаптируете готовый материал или делаете ремейк – у истоков всегда стоит один (может быть несколько) человек, который рассказывает идею телеканалу или руководству студии. А те в свою очередь принимают решение, запускать ли ее в производство.
Происходит это обычно в формате презентации, которая максимально иллюстрирует ваш замысел. В индустрии она называется «питч-библия» и включает в себя: сюжет, характеристики персонажей, темы, которые будете раскрывать, примеры похожих проектов.
Пилот
Допустим (мы же рассматриваем идеальные условия!), идею взяли в разработку.
Первая пробная серия (пилот) относительно низкозатратна, поэтому на ней можно «обкатать» ошибки и выявить проблемы, чтобы найти наиболее эффективный вариант создания мультфильма. Именно поэтому пилоты часто отличаются от финальных вариантов.
Для пробы пилот могут выложить в интернет, запустить в эфир в ночное время, а иногда кроме команды студии его больше никто так и не увидит.
Персонажи пилота в сравнении с финальным дизайном
Предпродакшн. Сценарий
Образы персонажей, их мотивация и характеристики уже появились на стадии питчинга. Теперь нужно продумать взаимодействие с другими персонажами, сюжетные ходы. Кто-то встретит большую любовь? Или злодей раскается и встанет на сторону добра?
Продакшн. Поиск единомышленников
• по пути «от сториборда»
Сценаристы пишут аутлайны, которые передают сторибордистам. А те прорабатывают эпизод, прописывают диалоги, разыгрывают сцены и создают что-то похожее на комикс.
Сценаристы делают подробную разработку эпизода, добавляя диалоги и действия. Сторибордисты получают готовый сценарий и по нему рисуют раскадровки, не придумывая реплики и не задумываясь о поведении героев. Так создают The Simpsons и Rick and Morty.
Вот так работают в студии PIXAR
Сториборд и аниматик
Сториборд (раскадровка) – это последовательность изображений, в которых отражены ключевые фазы развития событий и основные персонажи.
Художники создают быстрые рисунки, которые нужны, чтобы обозначить, где в кадре находится персонаж, не заботясь о прорисовке и фоне.
Сториборд состоит из секвенций, сцен и панелей.
Когда сториборд готов, его презентуют команде. В первый раз его смотрят только шоураннер и сценаристы, дают замечания и поправки. Во второй раз показывают результат чистовой отрисовки.
Сотрудники анимационной студии «Паровоз» за работой
Озвучка
После того, как сториборд готов и реплики «приглажены» и приняты командой, пора записывать актеров и озвучивать эпизод. Хорошая озвучка сделает интересным даже скучный сюжет, а плохая – загубит лучший сценарий. Поэтому к этому этапу приходится подходить с особой тщательностью. Здесь важна настоящая актерская игра.
Как озвучивали мультфильм «Король Лев»
На этом же этапе подключается композитор – начинает писать музыкальное сопровождение на основе рабочего монтажа.
Персонажи
Обычно дизайнер персонажей берет рисунок из сториборда и, прорисовывая, доводит до полноценной модели. А также делает дизайн поз.
Затем готовые варианты отдают 3D-моделерам, которые моделят 3D-персонажей. Делают скульптуринг того, что наполняет кадр, придают форму и объем, прорисовывают пропорции в разных ракурсах: анфас, профиль, 3/4 и под каждым углом обозрения.
После этого модели отдают текстурщикам для рисования текстур и создания карты материалов: цвет кожи персонажа, оттенки, фактуры, далее переходят к риггингу.
Риггинг – процесс создания скелета и точек контролинга у 3D-модели, при помощи которых создаются позы персонажа и анимация.
Все эти люди должны сохранить дух оригинальных персонажей, но при этом сделать привлекательнее.
Вот так выглядели известные персонажи на первых стадиях производства
Дизайн локаций
Здесь художники занимаются дизайном и раскраской фонов.
Колористы создают цветовые палитры для персонажей и эффектов внутри сцены, учитывая условия освещения.
Разная палитра подсвечника в зависимости от условий освещения в м/ф «Красавица и чудовище»
Параллельно с этим специалисты по спецэффектам (VFX) приступают к созданию пыли, дыма, огня, воды и прочих эффектов с частицами.
Каждый объект, которого касается персонаж, должен быть задизайнен. Работы море!
Layout (сборка сцены)
Layout — это первая стадия сборки сцены в 3D, где происходит компоновка кадра, выставление камеры и персонажей. На этом этапе обозначаются движения героев.
Это одна из главных стадий, так как на локации выставляются персонажи, декорации, предметы. Layout – финальный «черновой» вариант мультфильма.
Layout на примере мультика «Миньоны»
Анимация
Художники, которые уже создали моделей с готовым ригом, отдают их аниматорам, которые приступают непосредственно к оживлению персонажей.
Готовую анимацию персонажей с окружением отдают в отдел визуализации, где с помощью рендерера получают проходы визуализации, которые потом передают для финального композитинга.
Карта эмоций персонажа для аниматора
Постпродакшн. Композитинг
Всё, что сделано на предыдущих этапах, собирают воедино для цельной картинки. Здесь происходит цветокоррекция, добавление эффектов (снег, дождь и т.д.), вносятся незначительные исправления.
Сведение звука
Настоящая магия приходит с озвучкой диалогов. Теперь – время свести и остальной звук: из множества различных вариантов нужно выбрать один, наиболее подходящий.
Монтаж (финальное режиссирование)
В 8 случаях из 10 правятся только те моменты, которые приоритетны для сюжета, важные шутки или такие ошибки, которые нельзя оставить.
Маркетинг
После того, как команда закончила работу над эпизодом, у них нет практически никакого влияния на то, когда мультфильм пойдет на экран и на рынок. Здесь вступают в игру маркетологи, рекламщики и продюсеры.
Процесс создание анимационного сериала – это точная слаженная работа многих людей, которые дарят нам удивительные мгновения наедине с фантастическим миром мультфильма.
Надеемся, мы хоть немного приоткрыли завесу над тем, как создаются анимационные сериалы, а может быть заинтересовали настолько, что вы сами захотите их производить. Возможно, именно ваш проект повторит успех сериалов «Смешарики», «Лунтик» и «Маша и Медведь».
Задавайте вопросы, если хотите узнать что-то еще, ведь преподаватели CGAim работают над созданием анимационных сериалов каждый день.
6 популярных программ для создания анимации
Быстро сменяющиеся кадры создают иллюзию движения, а аниматоры с её помощью — живые продукты. Разбираем инструменты для моушн- и UI-дизайна.
Изначально анимацию в интернете использовали для развлечения: создавали весёлых персонажей или рассказывали короткие истории. Сейчас она помогает улучшить юзабилити сайта или приложения, управлять вниманием пользователя и делать продукты интерактивными.
Чтобы разобраться в правилах создания анимации, мы приглашаем начинающих и опытных дизайнеров на курс «Анимация интерфейсов» от Skillbox. А выпускникам с дипломами гарантируем трудоустройство в компании-партнёры.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Для чего нужна анимация
Для прототипов. С помощью анимации дизайнеры оживляют макеты сайтов и приложений. Создают интерактивные переключения между разными экранами приложений и страницами сайтов.
Для презентации кейсов. Дизайнеры используют анимацию для того, чтобы показать актуальные работы и продемонстрировать своё портфолио. Движущиеся элементы привлекают и удерживают внимание пользователей. А интерес и внимание — критерий хорошей презентации.
Для реализации микровзаимодействий — анимаций интерфейса, которые сообщают о состоянии страницы, о реакции элемента на действия пользователя и показывают результат этого действия. Отвлекают и развлекают, пока приложение или сайт загружается.
Анимация: какие программы использовать
Анимации создают в специальных программах, но универсального инструмента для решения всех задач не существует. Поэтому необходимо выбрать тот софт, который лучше всего подходит для конкретных целей.
Программы в нашей подборке условно разделены на два направления: для анимирования прототипов и создания полноценных анимаций.
Анимирование прототипов
С помощью таких программ создают бесшовные переходы между экранами и страницами сайта. При правильной настройке можно имитировать поведение элементов интерфейса и собрать несложную анимацию.
Программы работают на основе макетов из графических редакторов. И создают анимацию, если задать начальное и конечное состояние экрана и триггер — событие, при котором запускается переход. Вид анимации, плавность, скорость и остальные параметры можно настроить.
1. Principle
Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Работает только на macOS.
Сфера применения: создание коротких сценариев в 2–4 экрана.
| Плюсы | Минусы |
|---|---|
| Простой инструмент для несложной анимации | Неудобно работать со сложными сценариями |
| Простой интерфейс | Работает только на 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 | Нет | Нет | Да | Нет |
Резюме
Программ для создания анимации много, каждая из них подходит для своей цели. Если хотите узнать, какими программами пользуются для анимации интерфейсов, и научиться с ними работать, обратите внимание на наш курс.
