100-дней моушин дизайна

Как я научилась создавать 50 шедевров анимации за 100 дней

Это было летней ночью в Сиэтле. Я съела немного мороженого, посмотрела обучающее видео на Youtube и загрузила бесплатную пробную версию Principle. Несколько месяцев спустя я завершила свой 5-й по счету 100-дневный проект – «100 дней анимации».

Я начала свой первый 100-дневный проект еще в 2015 году. Мои предыдущие проекты: 100 дней дудла, 100 дней письма, 100 дней акварели и 100 дней векторной иллюстрации.

2 5 80x80 - 100-дней моушен-дизайна
Мои предыдущие 100-дневные проекты

Для меня 100-дневный проект – это творческий выход. Это позволяет мне выразить себя через искусство. Радость творения и трудность обучения новому ремеслу всегда заставляют меня стремиться к большему.

В 100 днях дизайна движения я научилась анимации и создала 50 творений векторной анимации за указанный период. Их можно найти в Instagram и Dribbble.

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

Инструменты

Sketch + Principle

На протяжении первых двух недель я рисовала в Sketch, а затем для анимации импортировала результаты в Principle.

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

Illustrator + After Effects

После первых двух недель я переключилась на Illustrator и After Effects для более продвинутого редактирования.

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

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

Создание анимации занимает много времени. Я разбила творческий процесс на четыре шага и намеревалась завершить их за два дня.

Шаг 1: поиск вдохновения (15 минут)

Ежедневно я собираю понравившиеся работы в области анимационного дизайна на Dribbble, Behance и Instagram. Моя постоянно пополняемая доска на Pinterest была отправной точкой для вдохновения.

Я также собираю обучающие видео по дизайну моушин дизайну на Youtube. Вот список видео, которые я использовала во время этого 100-дневного проекта.

Шаг 2: создание эскизов идей (5 минут)

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

3 6 80x52 - 100-дней моушен-дизайна
Наброски идей

Шаг 3: создание иллюстраций (40 минут)

Я создала иллюстрацию и импортировала ее в Principle или After Effects. Хорошо организованный файл дизайна может значительно ускорить импорт.

В этом руководстве показано, как подготовить и импортировать файл Illustrator в After Effects. Кроме того, плагин Sketch2AE может импортировать слои Sketch в After Effects.

Шаг 4: создание анимации (60 минут)

Я анимировала иллюстрацию и экспортировала финальную анимацию в виде короткого видео. Затем я опубликовала видео в Instagram с хэштегом #100daysofmotionbytx

В этом уроке показано, как экспортировать видео в GIF, если вы хотите публиковать анимации на Dribbble.

Дни 1–14: начните с основ

Я создала свою первую анимацию по видео Principle—Simple Character Animation (Jumping Donut).

4 80x60 - 100-дней моушен-дизайна
Прыгающий пончик

Я создала интерактивный прототип, следуя этому видео Principle — Avatar Animation Using Scroll Gestures.

5 2 80x60 - 100-дней моушен-дизайна
Джейк и пицца

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

6 2 80x60 - 100-дней моушен-дизайна
Переключатель День/Ночь
7 2 80x60 - 100-дней моушен-дизайна
Солнечное затмение

Дни 15–70: вверх по кривой обучения

На протяжении 15-70 дней я разработала следующие методы для поднятия по кривой обучения After Effects.

Метод 1: посмотрите урок и создайте по памяти

Я смотрела видео урок на скорости 1,5x и пыталась создать анимацию по памяти.

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

Я создала эффект дыма после просмотра видео Smoke Animation — After Effects Tutorial.

8 1 80x60 - 100-дней моушен-дизайна

Я создала анимацию лавовая лампа после просмотра видео After Effects Tutorial — Lava Lamp.

9 1 80x60 - 100-дней моушен-дизайна
Лавовая лампа

Метод 2: Отталкивайтесь от работ других людей

Изображение за изображением я изучала работы других людей на Dribbble, а затем придумывала свою собственную идею.

Я отталкивалась от анимации Прыгающие фрукты. Я проанализировала эту работу, чтобы изучить принцип анимации «Сжатие и растяжение».

11 80x60 - 100-дней моушен-дизайна
Прыгающие десерты

Я взяла за основу анимацию Ducky Walk Cycle от Tony Babel. Его видео урок After Effects—Walk Cycle Tutorial научил меня как зацикливать ходьбу. (Персонаж анимации вдохновлен дудлом от Skinny Andy.)

12 1 80x60 - 100-дней моушен-дизайна
Мистер Чайная чашка

Метод 3: Повторно применяйте изученное умение

Повторение – это ключ к закреплению недавно изученного умения. Я намеренно при создании новой анимации повторно применяла изученные навыки и умения.

Я создала прыгающую тыкву, повторно используя принцип анимации «Сжатие и растяжение».

13 1 80x60 - 100-дней моушен-дизайна
Тыква

Создавая анимацию фламинго, я повторно применила то, что я узнал из урока «хождение по кругу» от Тони.

14 80x60 - 100-дней моушен-дизайна
Фламинго

Метод 4: Прочтите книгу, чтобы составить полную картину

В середине своего 100-дневного проекта я потратила целый день на чтение книги «Adobe After Effects CC Classroom in a Book». Я смогла связать факты в единое целое, повторяя изученные навыки более систематическим образом. Я также открыла для себя новые методы, которые захотела попробовать.

Adobe After Effects CC Classroom in a Book (издание 2018 года)
Для творческих профессионалов, ищущих самый быстрый, простой и исчерпывающий способ изучения Adobe After Effects CC… www.amazon.com

Дни 71–100: Творчество от души

Как только я освоила инструменты, я начала создавать анимации в свое удовольствие.

На создание некоторых работ меня вдохновили любимые игры и фильмы.

15 1 80x60 - 100-дней моушен-дизайна
Сторожевая башня (Вдохновение – видеоигра Firewatch)
16 1 80x60 - 100-дней моушен-дизайна
Человек-ворона (Вдохновение – мобильная игра Monument Valley)
17 1 80x60 - 100-дней моушен-дизайна
Заколдованная роза (Вдохновение – фильм «Красавица и чудовище»)

Некоторые из моих работ были вдохновлены иллюстрациями других людей.

18 1 80x60 - 100-дней моушен-дизайна
Маяк (По мотивам работы Маяк от Paulius)
19 1 80x60 - 100-дней моушен-дизайна
Под водой (Пор мотивам работы Миграция китов от Dave Chenell)

Ниже мое представление о проблемах с дизайном загрузчика Uplab. Это вытолкнуло меня из зоны комфорта и побудило изучить новые методы.

20 1 80x60 - 100-дней моушен-дизайна
Карусель

Я создала афишу для Type Thursday Seattle – ежемесячной встречи дизайнеров, на которой обсуждаются текущие проекты, использующие орнаментированные заглавные буквы.

21 80x60 - 100-дней моушен-дизайна
Неоновый свет

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

22 1 80x60 - 100-дней моушен-дизайна
Воздушные шары
23 1 80x60 - 100-дней моушен-дизайна
Северное сияние
24 80x60 - 100-дней моушен-дизайна
Китайские фонарики
25 80x60 - 100-дней моушен-дизайна
Лес (По мотивам работы Птицы от Mikael Gustafsson)

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

26 80x60 - 100-дней моушен-дизайна
Галактика

Соображения

1. Следуйте за своими идеями

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

Например, я хотела выразить свою любовь к чтению. Чтобы воплотить идею переворачивания страниц книги, я нашла урок Open Your Book на Youtube и научилась включать 3D-слой для 2D-объекта.

27 80x60 - 100-дней моушен-дизайна
Пролистывание книги

Точно так же я хотела создать чашку тыквенного пряного латте. Я нашла руководство Flat 2D Smoke Clouds на Youtube и научилась использовать функцию wiggle.

28 80x60 - 100-дней моушен-дизайна
Тыквенный пряный латте

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

2. Оставайтесь скромными

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

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

29 1 80x57 - 100-дней моушен-дизайна
Эффект Даннинга-Крюгера

Чем больше я узнала о своей собственной некомпетентности, тем скромнее я стала.

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

3. Будьте 1%

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

В Интернет-культуре существует «правило 1%», которое описывает уровень участия интернет-сообщества: только 1% участников сообщества активно создает новый контент, 9% редактируют контент и 90% участников только просматривают контент.

30 1 80x41 - 100-дней моушен-дизайна
Правило 1%

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

Я хочу принадлежать к 1% людей, которые создают контент – эта мысль побуждала меня работать каждый день, особенно когда было сложно.

Конец

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

Вот 10 дизайнеров, которые вдохновляли меня на протяжении всего проекта:

Спасибо за прочтение! Подписывайтесь на автора статьи в Instagram и Twitter, чтобы узнать о ее следующих проектах из серии 100 дней ?

Если вам понравилась эта статья, вам также могут понравиться статьи о моих предыдущих проектах.

100 дней векторных иллюстраций
100 дней письма
100 дней дудла

Отдельное спасибо Nina Wei, Grace Fan, Niki Ni и Jonathan Smuda за помощь в написании этой статьи.

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: Tiantian Xu

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Полное руководство по правильному использованию анимации в UX

В этой статье я собрал все основные принципы и правила создания анимации воедино

Введение в новую систему Motion Material Design, паттерны переходов

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