Анимация с чего начать изучение самостоятельно
Сто дней моушн-дизайна: как создать 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 дней моушн-дизайна»:
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Как делать анимацию, которая нравится всем (даже пользователю)?
Привет читателям Хабра! Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA и сегодня я вам принес статью про… да, про анимацию. Знаю, на этут тему здесь не писал только ленивый. Знаю, сказать что-то новое об анимации сложно. И все-таки надеюсь, что эта статья окажется для многих полезной, а для кого-то — даже интересной.
Итак, начнем.
В наши дни анимацию используют все разработчики — к месту и не к месту. И анимация, использованная не к месту, может сыграть с сайтом злую шутку — вместо «запланированного» интереса со стороны пользователя вызвать скуку, непонимание и даже отторжение. Вот как раз о том, как правильно использовать анимированные элементы, мы и поговорим в этой статье. А еще — о том, как сделать анимацию качественной, добиться ее максимальной производительности и не потратить на это слишком много времени и сил. Немного о первом, в двух словах о другом и совсем чуть-чуть о третьем. Поехали!
Зачем вообще нужна анимация?
У каждого элемента сайта должно быть четкое назначение. В том числе и у анимации. Исходя из функций, можно выделить три больших группы анимированных элементов.
Далеко не все сайты загружаются мгновенно. Для того чтобы во время загрузки страницы пользователь не потерял к ней интерес и не подумал, что сайт безнадежно «завис», и нужна анимация ожидания. Самая распространенная анимация этого типа — preloader
Это элемент, который посетитель видит сразу после перехода на сайт, пока загружается содержимое страницы. «Прелоадеры» выполняют сразу несколько функций:
На прелоадере можно показать полезную информацию — подсказки или советы.
С помощью такого типа анимации можно показать этапы, требуемые для достижения цели, или показать последовательность действий.
Пример еще одного варианта использования анимации ожидания: последовательное заполнение страницы контентом при скролле вместо отложенной одновременной загрузки всех элементов. То есть, если на экране много «тяжеловесных» элементов, их лучше загружать по очереди, а не сразу — здесь и приходит на помощь анимация.
2. Анимация подтверждения
Такая анимация нужна, чтобы пользователь не сомневался, что действие на сайте успешно совершено, и понимал, что можно сделать дальше. Интерактивные элементы на странице могут менять форму, цвет, содержание — например, кнопка меню после нажатия может смениться на «крестик», указывающий на то, что теперь меню можно снова закрыть.
Анимация подтверждения применяется и для того, чтобы подсказать посетителю, с чем на странице можно взаимодействовать. Это актуально для мобильных версий сайтов — когда на устройстве нет курсора мыши, пользователю стоит заранее указать на интерактивные элементы с помощью простой анимации.
3. Декоративная анимация
Это мини-игры, нестандартный скролл страницы, видеовставки, параллакс. Нет, эта анимация не «просто для красоты». У нее вполне утилитарная функция — привлечь внимание пользователя к самому важному, заинтересовать в дальнейшем изучении сайта, вызвать тот самый wow-эффект. Декоративную анимацию важно использовать «к месту» и дозированно, она не должна перегружать страницу и отвлекать пользователя от ее содержания.
Какой бывает анимация?
Не будем перечислять устаревшие или редко используемые технологии. Упомянем только самые распространенные — и разберем их плюсы и минусы.
Тут наверное из снежной королевы кадр, где выбирались развилки
Самый простой и действенный способ «оживить» страницу
Почти тоже самое что и видео. По сути, показ за короткий промежуток времени набора отдельных изображений, что создает иллюзию движения.
Самые сложные, но и самые впечатляющие типы анимации. Это 2D- и 3D-анимация соответственно. 2D-рисование в Canvas сводится все к тому же покадровому принципу. WebGL дает возможность реализации 3D-графики при использовании Canvas. Часть кода на WebGL может выполняться непосредственно на видеокартах, что улучшает общую производительность.
Как сделать анимацию качественной?
А как повысить производительность?
И немного лайфхаков
Вот и всё. Хотя об анимации можно говорить еще долго. К примеру, мы могли бы рассказать о новинках мира анимации — о новых фильтрах и медиазапросах, или о появившихся совсем недавно продвинутых инструментах и технологиях, таких как Web Animations API. А вы хотели бы почитать о трендах в анимации? Если да, будем рады посвятить этой теме следующую статью!
14 бесплатных онлайн-курсов по моушн-дизайну для начинающих
Всем привет, друзья! 👋 Ниже я собрал для вас 14 лучших бесплатных онлайн-курсов по моушн-дизайну, которые помогут вам создавать отличные анимационные ролики с нуля.
Готовы начать? Тогда вперёд! 🚀
1. «Бесплатный курс по моушн-дизайну» от «Мастерской Исаева»
Выдача сертификата: нет
Описание курса
Курс по моушн-дизайну, прошедший на платной основе в 2017 году. После появления более современных образовательных программ по Cinema 4D, «Мастерская Исаева» сделала представленный материал бесплатным, дополнив его более удобным оформлением. Сам материал достаточно простой и будет понятен новичкам.
💰 На правах рекламы. 39 бесплатных курсов по востребованным digital-профессиям от Skillbox 💰
🤩 Освой прибыльные и востребованные интернет-профессии на курсах Skillbox! 🏆
Пройди бесплатные онлайн-курсы по:
2. «Бесплатный курс по After Effects» от продакшн-студии «Соловей EXPRESS»
Выдача сертификата: нет
Описание курса
Курс, состоящий из шестнадцати 10-20-минутных уроков. Во время просмотра материала вы познакомитесь с основами Adobe After Effects, научившись делать как простую анимацию, так и 3D-графику. Этих знаний будет достаточно для того, чтобы приступить к началу изучения более сложной образовательной программы.
3. «Моушн-дизайн для новичков. After Effects с нуля» от Азамата Сайфуллаева
Выдача сертификата: нет
Описание курса
Менее чем за 2 часа вы научитесь работать в After Effects с полного нуля, изучите базовый интерфейс программы, а также сможете создавать и анимировать графические элементы для своих видео. Уроки отлично подойдут новичкам, дизайнерам и киноделам, желающим использовать анимацию.
Об авторе курса
Азамат Сайфуллаев
4. «After Effects для новичка» от Игоря Лохмана
Выдача сертификата: нет
Описание курса
Автору курса давно говорили, что интересные и простые уроки по After Effects найти практически невозможно.
Поэтому Игорь Лохман решил создать мини-тренинг, который поможет вам освоить базовые понятия моушн-дизайна.
В итоге получился курс, пройдя который, вы научитесь основам, после чего сможете самостоятельно создавать простую анимацию.
Об авторе курса
Игорь Лохман
5. «Уроки по Adobe After Effects» от 4Creates
Выдача сертификата: нет
Описание курса
Детальное руководство по работе с самым мощным инструментом для создания анимации и фантастических спецэффектов. Благодаря пошаговым видеоурокам вы быстро освоите функционал программы и сможете создавать внушительную графику.
6. «Master in Adobe After Effects CC 2015 Basics» от Udemy
Выдача сертификата: нет
Описание курса
Благодаря просмотру данного курса вы получите базовые знания Adobe After Effects, которые помогут вам разобраться в интерфейсе программы и создавать простую анимацию. Материал разбит на 9 небольших уроков, вкратце рассказывающих о заданной теме.
7. «3D Character Animation in After Effects» от Udemy
Выдача сертификата: нет
Описание курса
Создание анимации движений человека является достаточно сложной, но распространённой задачей. Данный курс всего за 40 минут научит вас создавать трёхмерную анимацию при помощи джойстика и специального плагина.
Об авторе курса
Муслим Кайсар
8. «Basic Animation In After Effects» от Udemy
Выдача сертификата: нет
Описание курса
Небольшой курс от американского специалиста в области программирования и моушн-дизайна Дары Харпер. Во время просмотра материала вы научитесь созданию анимаций, что позволит вам продвинуться в качестве моушн-дизайнера.
Об авторе курса
Дара Харпер
9. «After Effects CC for Beginners» от Udemy
Выдача сертификата: нет
Описание курса
Автор курса предлагает пользователям освоить основы Adobe After Effects всего за один час. В результате вы сможете использовать программное обеспечение на достаточном уровне, чтобы разнообразить свои видео отличной графикой.
Об авторе курса
Джордан Дьюек
10. «Motion Graphics Tutorials» от Dope Motions
Выдача сертификата: нет
Описание курса
Крупнейший курс, раскрывающий все темы, связанные с Adobe After Effects. На протяжении 209 уроков вы будете осваивать отдельные навыки создания графических элементов, после чего сможете применять их в своих видео. Курс регулярно пополняется новыми материалами, так что вы можете рассчитывать на качественные уроки в случае обновления ПО от Adobe.
11. «After Effects — туториалы» от Романа Болгарова
Выдача сертификата: нет
Описание курса
Небольшой курс, помогающий пользователям научиться отдельным аспектам работы с After Effects. В результате вы научитесь убирать фон без хромакея и накладывать титры. Учтите, что это не полноценный курс по обучению After Effects, а материал, рассказывающий об отдельных операциях с программой.
Об авторе курса
Роман Болгаров
12. «Motion Graphics Tutorials» от Motion Grapher
Выдача сертификата: нет
Описание курса
Небольшой курс, на практике показывающий самые базовые действия, которые можно сделать с Adobe After Effects. Благодаря просмотру уроков вы познакомитесь с интерфейсом программы и сможете выполнять простейшие операции.
13. «Бесплатный курс по After Effects» от «Вольницы»
Выдача сертификата: нет
Описание курса
Курс, состоящий из 6 крупных уроков, знакомящих новичков с основными операциями, которые можно выполнить при помощи After Effects. После просмотра материала вы сможете добавлять в свои видео наиболее распространённые графические элементы, используемые большинством блогеров.
14. «Полный базовый курс After Effects» от Давида Томпаркерса
Выдача сертификата: нет
Описание курса
Курс, созданный на основе материала от Луайя Замбаракджи. Подобные образовательные программы он выкладывает на платной основе на площадке Udemy. Все уроки были переработаны под русскоязычную аудиторию и дополнены автором YouTube-канала David Tomparkers.
Профессиональный копирайтер с 4-летним опытом работы. Хорошо разбираюсь в экономике и IT. Увлекаюсь путешествиями по России и ставками на спорт.