С чего начать изучение моушн дизайна
Сто дней моушн-дизайна: как создать 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 дней моушн-дизайна»:
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Руководство по моушн-дизайну для начинающих
Движение — это жизнь! Именно поэтому моушн-графика не сдает своих позиций с середины XX века и продолжает интенсивно набирать обороты. Мир в движении вдохновляет дизайнеров на создание анимированных историй — это и есть моушн-дизайн.
В России это направление считается новым, моушн-дизайнеры пользуются спросом. Так что вы сделали хороший выбор, если решили освоить эту профессию! В статье вы узнаете, чем моушн-дизайн отличается от обычной анимации, какие разновидности существуют и программы нужно освоить.
Нажимайте в содержании на подходящий заголовок и переходите к нужному разделу статьи.
Что такое моушн-дизайн
Моушн-дизайн – это создание компьютерной анимации, то есть движущихся объектов. Но чем же отличается моушн-графика от обычной анимации? Моушн-дизайн — это лишь разновидность анимации, в этой технике меньше сюжета и повествования.
Моушн-дизайн тесно связан с графическим дизайном. В качестве основного компонента выступает текст, объекты навигации на сайте, рекламные продукты. А персонажи могут помочь донести нужные факты до пользователей, вызвать эмоцию, но они не находятся в центре внимания.
Если вы хотите сделать на сайте вращающий логотип или оживить кляксу, из которой появится название проекта, — это и есть моушн-дизайн.
Использовать этот шаблон
Использовать этот шаблон
Анимация — это общее называние всех техник оживления статических объектов, будь то мультфильмы или компьютерная графика. А вот создание движущихся элементов веб-дизайна, графиков, презентаций — это разновидность анимации под названием моушн-дизайн.
Где можно применять моушн-дизайн
Моушн-дизайн лучше всего подходит для выделения фактов и иллюстрации того, что вы пытаетесь донести. С помощью моушн-дизайна можно представить услуги или продукты запоминающимся образом.
Реклама и SMM
Особенно активно моушн-дизайн используется в рекламных роликах для ТВ и социальных сетей. Посмотрите рекламу в моушн-технике для сингапурского приложения McDonalds.
В российском SMM моушн-дизайн — это один из трендовых приемов для привлечения внимания аудитории. Конечно, такие работы стоят дорого, но результат стоит того! SMM-специалисты гипермаркетов О’кей используют моушн-дизайн для презентации своей продукции. Анимация добавляет сочности!
Моушн-дизайн используется в интерактивных историях Инстаграм, чтобы вовлечь аудиторию и повысить лояльность к бренду. Еще простой моушн-дизайн можно применять в email-рассылках.
Маркетинг — одна из лучших сфер, где без моушн-дизайна не обойтись для продвижения проектов. Замечательно, если SMM-специалист обладает навыками моушн-дизайна, тогда стоимость его услуг значительно увеличивается и открывается возможность для сотрудничества с топовыми брендами.
Интерактивный дизайн
Анимированные логотипы, интересно сменяющиеся баннеры, всплывающие окна, выдвигающиеся рубрики — всё это тоже моушн-дизайн для улучшения взаимодействия пользователей на сайте или в мобильном приложении.
Обучающие проекты
Инфографики, кейсы, презентации, мастер-классы — любой обучающий контент можно интересно оформить в технике моушн-дизайн. Информация лучше усваивается, когда она визуально хорошо оформлена. Вместо скучных таблиц и картинок используйте моушн-дизайн. Конечно, все в таком формате не рассказать, но правила, рекомендации, списки лучше сделать в виде анимационного ролика.
В редакторе Canva можно сделать инфографики, презентации, кейсы с анимированными иллюстрациями из галереи.
Использовать этот шаблон
Видеоклипы
В редакторе Canva можно красиво оформить короткие ролики с помощью анимированных иллюстраций, стикеров и эффектов. Загрузите свое видео свадьбы в готовый шаблон Canva, чтобы получить красивый видеоролик. Нажимайте «Использовать этот шаблон».
Использовать этот шаблон
Киноиндустрия
Моушн-дизайн первоначально появился именно в большом кино. После анимационной работы дизайнера Сола Басса для фильма «Человек с золотой рукой» моушн-дизайн в 1955 году стал «выходить в мир». Сол Басс сделал заставку к фильму, на которой белые линии обратили внимание зрителя на титры, а в конце сложились в изображение руки главного героя.
Динамические титры впечатлили Альфреда Хичкока, и моушн-графика стала прорывом в киноиндустрии. Сол Басс стал главным моушн-дизайнером тех лет, он делал анимированные титры еще для работ Хичкока, Кубрика и Скорсезе. Именно из кино вышел моушн-дизайн в рекламу и ТВ.
Если у вы ведете блог на YouTube, то используйте анимированную заставку, которая сделает ваш канал узнаваемым. Найдите подходящий вариант среди готовых шаблонов Canva или создайте в редакторе свой особенный дизайн. Используйте эффекты анимации, чтобы добавить динамики надписям и картинке.
Как стать моушн дизайнером. Часть 01
В этой и других статьях я хочу разобрать такое загадочное, крутое и приятное глазу направление как моушн дизайн.
Если бы мня спросили, когда легче обучаться моушн дизайну, сейчас или 5-10 лет назад? Я бы не смог с уверенностью ответить.
Раньше (5-10 лет назад), для того, чтобы найти информацию, нужно было хорошенечко покопаться в интернете. И тогда было всего 2-3 сайта, которые публиковали туториалы. Сегодня существует настолько много информации, что трудно найти действительно нужное и важное. Уроков много, туториалов много, так с чего же начать?
After Effects 2.0.1
After Effects – это еще не Motion Design
Для многих моушн дизайн ассоциируется с программой Adobe After Effects. И это не удивительно, ведь это одна из наиболее популярных и удобных программ для создания анимации. По правде говоря, не имеет значения, в какой программе вы будете работать, Flash, Photoshop, After Effects или др., важно другое – насколько гармонично и вкусно вы сможете создавать анимацию. Софт – это всего лишь инструмент, с помощью которого реализуется замысел художника.
Изучите основы дизайна
Первое что я рекомендую – это изучить основы графического дизайна, заложить фундамент, на котором будет строится крепкое понимание и вкус в моушн дизайне. Чтобы изучить софт, нужно потратить несколько месяцев или даже недель, а вот воспитать вкус и выучить теорию – это уже может занять гораздо больше времени. Конечно, важно изучать все параллельно. Но особое внимание уделить законам и базисам в дизайне.
Когда я начинал изучение моушена, я начал с освоения Афтер Эффектса, и по правде говоря, это нельзя было назвать моушн дизайном, это скорее были двигающиеся объекты в хаосе :-). Но, изучая работы графических дизайнеров и проффесиональных моушн дизайнов, я начал понимать, что и как работает.
Какую теорию дизайна мне нужно знать.
Я рекомендую уделить особое внимание трем основным направлениям:
1. Цвет
Здесь важно понять, как правильно подбирать и сочетать цвета. Распространенная ошибка начинающих – отсутствие единой цветовой палитры в проекте, из-за чего получается дисгармония в кадре. Нужно понимать и знать психологию цвета, в чем разница между теплыми и холодными цветами, как воздействует определенный цвет на человека.
По цвету рекомендую прочитать книгу: Иханнес Иттен, “Основы цвета”. Так же много статей по цвету можно найти здесь.
2. Композиция
Это фундамент фундаментов в моушн дизайне. Знания по композиции помогут вам делать каждый кадр интересным и гармоничным, вы научитесь выделять главное от второстепенного. Нужно знать, что такое золотое сечение, перспективы, какие существуют виды перспектив, как грамотно располагать объекты. В изучении композиции очень поможет анализ картин художников, анализ работ графических дизайнеров.
По композиции рекомендую отличный урок:
3. Типографика
Это больная тема даже для многих опытных дизайнеров. Я рекомендую уделить этому направлению должное внимание. Большое количество крутых работ было изувечено плохой типографской. Вы должны знать, когда следует использовать шрифты с засечками, а когда этого нельзя делать. Если не можете самостоятельно подбирать шрифты, можете копировать у профессионалов.
И никогда не используйте Comic Sans
Здесь рекомендую курс по типографике от Сей-Хай. Не смотря на то, что он платный, цена не столь велика, сколько польза и качество от полученных знаний. Смотреть Курс
Дополнительно важно знать
Помимо трех основ важно знать и другие важные вещи. Я рекомендую изучить 12 принципов анимации. Это поможет вам создавать более динамичные и запоминающееся видео ролики:
Также важно знать основы драматургии, так как моушн дизайн максимально приближенный к видео и кино, и необходимо знать, из каких частей строится рассказ, и как воздействовать на зрителя. Рекомендую несколько книг:
Митта “Кино Между Адом и Раем”
История на Миллион Долларов
Помимо того, большим плюсом для вас будет знание основ по видео и фото сьемке. Знание, что такое диафрагма, фокусное расстояние, выдержка. В чем разница между длиннофокусным и широкоугольным объективом. Все это даст вам мощный фундамент и послужит прекрасной опорой при создании анимации.
Не забывайте посещать выставки, галереи. Смотреть и видеть, что и как работает в искусстве.
Я надеюсь эта статья будет вам полезной и станет отправной точкой в загадочный мир моушена. Далее я расскажу, какое ПО нужно знать для моушн дизайна и с чего начать, но уже на практике.
Анализируйте работы:
Если вы всерьез хотите заняться моушн дизайном, этот навык поможет вам закрепить полученные знания. Каждый раз, когда видите работу, которая вас вдохновила или зацепила, задавайте себе вопросы, например:
– Насколько гармонично смотрится изображение с точки зрения композиции
– Почему автор использовал эти цвета, и как они сочетаются
– Какие шрифты были использованы, как они сочетаются
– Какую историю рассказывает автор видео
– Какие приемы он использует
И так далее. Отвечая на эти вопросы, вы начинаете прокачивать свои навыки и понимать природу дизайна.
Заведите библиотеку вдохновения
Очень важно собирать полезные и вдохновляющие материалы в едином месте. Это может быть отдельная папка на компьютере, альбом в pinterest или же блокнот в evernote. Преимущество последнего варианта в умной сортировке файлов – вы можете создавать блокноты, отдельные заметки и присваивать им определённые теги. И все это можно просматривать с телефона, браузера или ноутбука.
Грамотное сортирование найденной информации поможет вам с легкостью находить нужные видео, фотографии или иллюстрации. Таким способом вы будете воспитывать у себя вкус и будете понимать, что вам нравиться и что для вас является красивым и крутым в моушн дизайне.
Заведите себе привычку, каждый день находить 1-2 вдохновляющих видео или изображения и добавлять их в свою библиотеку. Уже через 30 дней у вас будет 30-60 крутых работ, которые будут служить источником вдохновения.
Также напишите в комментариях, какие темы вам было бы интересно узнать о моушн дизайне, и, возможно, в ближайшем будущем вы получите на них ответы.