Как сделать 3d логотип в after effects
В этом уроке мы узнаем о новых возможностях программы After Effects CS6. А точнее, научимся создавать настоящие 3D объекты, при помощи нового рендерера Ray-traced 3D.
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 99
Здраствуйте а у меня After Effects cs6 токо Create Shapes from Vector Layer нету что мне надо делать?(^^
То есть есть но он выделен не черным цветом а светласерым.-.
Покажите скриншот окна программы с демонстрацией данной проблемы
в After effects cc 2017 при наличии карточки gtx 1050 Ti выдает ошибку "ay-traced 3d initial shader compile failed". как её исправлять?
Пока архитектура этой видеокарты не поддерживается
подскажите, а как переключить нагрузку на графический процессор на macbook pro?
режим Ray-tracing вставил GPU
появился ошибка After effect eror Ray-Tracet 3D Out paged mapped memory for ray tracer. что делать помоги пожалуйста
у меня видеокарта Geforce GTX 750 Ti и поддерживает GPU
У вашей видеокарты архитектура Maxwell, а она еще не поддерживается Raytraced 3D
Vendor: ATI Technologies Inc.
Device: AMD Radeon HD 7310 Graphics
Version: 3.0.12618 Compatibility Profile Context 13.251.0.0
Total Memory: 375,00 MB
Shader Model: 4.0 or later
Current Usable Memory: -
Maximum Usable Memory: -
Что написать в файл raytracer_supported_cards
Radeon карты не поддерживаются
Спасибо за урок
Спасибо за урок, а не подскажите
1) в каких случаях стоит обратно переключаться на CPU или же программа сама решает это и можно оставлять всегда на GPU.
2) Заметил в папке с установками и версию CS5 , то есть можно просто в соседней директории установить cs6 и работать Без проблем?
3) Используете последнию AE CC 12,2 ? Нет ли багов можно качать обновление и не опасаться?
Случаев когда стоит переключаться вновь на CPU практически нет, есть некоторые эффекты которые просчитываются за счет процессора, но программа переключается автоматически.
Да, если установить две версии АЕ, то они прекрасно будут работать.
Последние уроки как раз записаны в версии АЕ СС 12,2 никаких ошибок не замечал, думаю их не должно быть, на этот счет Adobe работает довольно хорошо, так что смело скачивайте обновления.
Приветствую вас, уважаемая команда проекта VideoSmile! Отдельное, громкое спасибо Фатхутдинову Марсель и Артему Лукьянову за труды, которые не перестают меня удивлять.
Успехов и процветания всему коллективу и проекту!
Подскажите, пожалуйста, а может-ли свет взаимодействовать с двухмерными объектами (с примененными тенями) ?
P.S. Заранее благодарен!
P.P.S Замучился уже, никак не могу применить Casts Shadows к растровой графике (соответственно к 2D-картинке в формате .jpg).
Нет, тени от 2D j,mtrnnjd не будет, ее можно сделать только при помощи эффекта Drop Shadow, или одноименного стиля
Во-первых, хочу сказать огромное СПАСИБО - ваши уроки самые лучшие из всех, которые мне доводилось видеть. Они подробные - вы не забыли себя в начале пути освоения AF и прекрасно понимаете, что для новичка любая мелочь может быть неразрешимой непоняткой.
Моя проблема, которую я никак не могу преодолеть. Создаю текст 3D, как в этом уроке и интегрирую его в видео. Как убрать слой пола (на котором стоят буквы) так, чтобы тени от этих букв остались? В конечном итоге - по скрину, чтобы тени от слова МОСКВА остались на перроне.
Предполаю, что возможно, это совсем просто, но я не могу найти нужную "кнопку". Прошу помочь. Заранее спасибо. И ещё раз мегареспект за классные уроки.
Преобразование 2D логотипа в 3D с помощью After Effects / дизайн очень легко
Преобразование 2D-логотипа в 3D
Как мы знаем, технологические инновации и интернет во всем мире являются неудержимыми и значимыми с точки зрения онлайн-платформ и инструментов любого рода, которые позволяют повысить удобство и эффективность при редактировании, публикации и, конечно же, взаимодействии между самими пользователями.
В этом случае мы опираемся в основном на платформы, которые имеют расширенные возможности редактирования, тем самым улучшая качество наших проектов при публикации, эти типы инструментов направлены на то, чтобы принести работодателю полностью чистую и профессиональную эстетику, разработчики остались с ясным эффектом того, что является целью высокого качества.
Adobe After Effects что это такое и как это работает?
Это инструмент, созданный Adobe, который в основном фокусируется на создании изображений с движением, логотипами, текстовой анимацией, а также анимацией мультфильмов и, конечно же, визуальными эффектами.
Он был разработан для улучшения и облегчения редактирования наших проектов, следует отметить, что After Effects считается лучшим редактором, поэтому он наиболее часто используется производителями в фильмах, признанных для спецэффектов.
В рамках своих основных функций, и одной из самых важных является то, что мы можем считать, редактирование текстов, давая им анимацию, творческих, чтобы они были опубликованы в наших социальных сетях или на любом другом сайте, полезно знать, что для того, чтобы узнать и получить все функциональные возможности, которые содержит After Effects, мы должны иметь подписку на инструмент, чтобы наслаждаться тем, что нам предлагает это приложение.
Сначала может быть трудно или сложно научиться использовать такую программу, но со временем мы можем тщательно изучить все ее функции и смешанные творческие функции, которые она предоставляет, мы можем дать персонализированную анимацию видео, изображений, в увлекательной, а также сразу, поэтому этот инструмент является одним из лучших в своей отрасли.
Что я могу сделать с After Effects?
Мы можем сделать INTRO для VIDEO After Effects, изображений, текстов и видео, это используется путем перемещения каждого из слоев, чтобы иметь возможность преобразовывать их в работе.
В свою очередь, After Effects предоставляет нам множество визуальных эффектов, позволяя нам создавать собственные короткометражные фильмы, оживлять наших любимых персонажей и многое другое, поэтому, если вы никогда не использовали After Effects, это ваш шанс.
Таким образом, вы можете анимировать любой рисунок или изображение, чтобы иметь возможность создавать проекты независимо от мотива. Вот почему это широко используемое приложение для дизайна анимированных видео.
В основном After Effects используется для создания анимации уникальным и оригинальным способом с помощью простых инструментов, которые не требуют больших усилий, чтобы научиться использовать. Таким образом, вы можете анимировать любой рисунок или изображение, чтобы иметь возможность создавать проекты независимо от мотива. Вот почему это широко используемое приложение для дизайна анимированных видео.
Как сделать логотип в Adobe After Effects?
Сначала мы занимаемся Adobe After Effects, разрабатываем инновационную композицию с помощью клавиш Ctrl + N.
Затем назовите эту композицию, где вы создадите логотип.
Затем мы выбираем инструмент логотипа и при его создании снова нажмите Ctrl + N, чтобы создать вторую композицию в редакторе, и все готово.
Узнайте, как создать логотип 2D в 3D tutorial
Все очень просто, первое, что нужно сделать, это, вступаем в главное меню After Effects, выбираем наш логотип, который мы сделали ранее в 2D, но для работы в 3D мы должны поместить его в ‘кривые’’ для них мы будем параметр в верхней части экрана ‘type’ и выбираем ‘create outines’, затем мы нажимаем на кнопку ‘сохранить » кривые’.
Затем мы идем в опцию ‘after’ и создаем новую композицию, мы помещаем имя, что хотим, и время, и, конечно, ‘HD’, там создаем слои с частями логотип, это для вещей, которые мы хотим быть независимыми, то выбираем, и мы будем ‘создавать тела’ и так далее с других сторон.
Как только слои разделены, мы импортируем наш файл, а затем выбираем первый слой и нажимаем ‘ctrl+c’ и копируем и вставляем его в наш слой твердого тела, мы выполняем ту же процедуру со всеми элементами логотипа, которые мы ранее разделили.
Затем мы создаем новый’ твердый», который уже будет нашим 3D-логотипом, просматриваем параметры эффектов ‘элемент видео’ и добавляем его, выбираем ‘слои’ и добавляем их к каждой из частей.
Затем мы нажимаем слой и даем ему ‘scene setup’, и мы увидим часть логотипа, у нас почти есть наш 3D-логотип, мы можем изменить цвета по своему вкусу, с опцией ‘bevels».
Мы даем вам » ОК’, и мы можем визуализировать наш готовый 3D-логотип, мы выбираем часть вращения по своему вкусу, и для завершения мы сохраняем его, и наш проект закончен.
Создайте анимированное 3D изображение с помощью After Effects
Чтобы создать анимированное 3D-изображение с помощью After Effect, вы должны сначала поместить слово “Exposure” в браузер “Prescts”. После этого проведите этот результат по логотипу таблицы композиции, а в разделе “эскиз проекта” появится меню, в котором вы можете перейти к пользовательским настройкам.
Затем перейдите к элементу управления слоями, выберите логотип и с помощью клавиш «Ctrl+ D» увеличьте слой в 19 раз. Как только этот шаг будет готов, перейдите в меню и в разделе” слой “нажмите” Nec“, выбрав слово” камера», нажмите нужные настройки.
В знаках в нижней части меню вы можете выбрать опцию «Camera», вам просто нужно нажать и удерживать орбиту, как только она у вас есть, перетащите ее на логотип на прицеле (который вы хотите иметь движения), чтобы анимировать изображение.
Как оживить свой 2D-логотип в 3D?
Чтобы оживить свой 2D-логотип в 3D-стиле, начните с входа в меню After Effect, затем нажмите 2D-логотип и поместите его в опцию “кривая”, чтобы он работал в 3D.
Чтобы продолжить, перейдите в «Type“ и выберите опцию ”Create outins“, затем нажмите ”Сохранить кривые“, оттуда мы заходим в меню и выбираем ” Layer“, нажимаем ”New“, выбираем ”Camera» и ставим фигуру по своему вкусу.
Чтобы придать логотипу анимацию, используйте меню, и в “Camere » вы нажмете орбиту одновременно с слоем над логотипом, и все готово!
Познакомьтесь с Adobe After Effects CC для анимации персонажей
Эта программа оказала большую помощь в создании эффектов движения от небольшого изображения до очень большого, то есть 2D и 3D проекции, поэтому она способна анимировать персонажей.
Чтобы начать анимацию этих персонажей, вы должны выполнить следующие шаги:
- Начните с разбивки каждой части тела, которую вы хотите анимировать, используйте иллюстратор и вырежьте каждую из них до желаемого размера персонажа, обратите внимание, что каждая часть должна быть собрана в отдельные слои.
- Транспортируйте слои в After Effects и правильно сортируйте их.
- Выберите инструмент, называемый » точка якорей”, и отнесите его к After Effects, взяв центральную часть конечностей вверх по ногам, чтобы он использовался в качестве сустава, придавая ему движения.
- Теперь повторите это с каждым слоем, поверните ноги отдельно, и на каждом из слоев, нажав “R”, вы сможете указать вращение, затем нажмите секундомер и сформируйте кадр, поверните каждую ногу, пока не достигнете естественного положения ходьбы.
- Для движения лица и выделения его выражений вам нужно будет ввести код в каждой части, которая находится в “Valve»”
- Наконец, с этими шагами ваши персонажи будут выровнены.
After Effects или Adobe Premier что лучше?
Между After Effects и Adobe Premier мы рекомендуем первый, так как он содержит все эффекты, которые мы ищем для лучшего и эффективного производства анимации.
Чтобы создавать видео, затем редактировать их и расширять эффекты; вы должны всегда использовать After Effects, так как это просто комбинация обоих.
Каждое из этих приложений имеет много похожих функций, но After Effects превосходит Adobe Premier по работоспособности. В Adobe Premier вы не можете создавать анимацию изображений, в то время как в After Effects вы используете необходимые плагины, одним из этих плагинов является “Rigging”, который великолепен для артикуляции рисунка с помощью “Photoshop” и “Parallax” для помощи в движении изображения, которое он предоставляет. Определенно, благодаря After Effect вы сможете анимировать шокирующие видео.
Как использовать программу Blender для 3D моделирования?
Чтобы использовать его, мы продолжим загрузку, выбираем версию, подходящую для нашей операционной системы, будь то » Windows”, “Mac или Linux” с сайта Blender.
Для начала выбирается изображение для 3D-моделирования, настраивается источник, масштаб, материалы, а затем экспортируется модель в “Unity”. Кроме того, вы настраиваете все это до достижения результата, который будет использоваться.
Затем мы добавляем эталонное изображение в Blender, нажимаем ”1“ на цифровой клавиатуре, чтобы разместить вид спереди, и нажимаем ”Shift», загружаем эталонное изображение, для этого важно перевести вид в передний режим, потому что если изображение не может выглядеть ориентированным в странном направлении.
Чтобы продолжить, перейдите на вкладку ”изображение“, активируйте инструмент ”Альфа», вам нужно будет немного снизить передачу, чтобы увидеть изображение. Мы нажимаем букву «G“, чтобы переместить ее в пространстве, а затем нажимаем ”Z», чтобы ограничить ось движения в вертикальном направлении.
Тем не менее, одна из двух сторон детали должна быть взята в качестве ссылки, чтобы создать модель, мы нажимаем “Shift” и добавляем цилиндр, на этой вкладке вы должны выбрать количество вершин в соответствии с необходимой точностью.
Для этого нажимаем букву «Z“ и активируется ”режим Wifen», который служит для просмотра модели. Он масштабируется на букву «S», и мы входим в «режим редактирования”, выбираем вершины с “Alt “и, нажав на ”ребро“, визуализируем все связанные вершины изображения, переходим на вкладку ”Item“ активируются глобальные координаты и компонент ”Z» позиции. Затем пишется “0″, чтобы все вершины имели нулевую высоту. Кроме того, вы выбираете вершины выше и нажимаете клавишу «G“, вы ограничиваете направление на ”Z», и они масштабируются.
Фактически, с буквой «Е» создается обструкция путем размещения вершин. Затем он создает больше препятствий и ищет основную форму модели. Детали начинают добавляться с помощью элемента управления «R» и создается то, что они называют deluxe, которые являются новыми подразделениями в геометрии.
Также, вы можете нажать букву “Е” для поиска дополнительной точности в геометрии изображения, добавить “петли”, где они нуждаются в ней новые детали, выбран он петлю и нажимаем букву “Г”, с ней, цикл может быть перемещение в пространстве, но при повторном прикосновении буква “Г” этот цикл будет двигаться согласно геометрии.
Мы начали работать с внутренней частью изображения, и мы будем в режиме “Редактирование“ будет щелкнуть правой кнопкой мыши на модели и помещается “Shift «, чтобы сгладить лица и создать внутри изображения, нажимаем букву “Е”, чтобы создать новое препятствие, но щелчок правой кнопкой мыши, чтобы такое засорение может остаться в том же месте, то при нажатии на букву “S”, а затем уменьшается размер в зависимости от толщины мы хотим иметь.
Мы направляемся к переднему прицелу и помещаем режим “Wifen”, чтобы создать новое препятствие на изображении и сопоставить их по измерениям. Все параметры, такие как происхождение, материалы и размер, настраиваются в “Blender”, это делается в режиме “редактирование”.
Наконец, измерения необходимы и все преобразования применяются к масштабам с помощью «Ctrl + А», 3D-модель переносится в папку Excel, затем помещается в сцену, щелкается Правой Кнопкой Мыши, чтобы извлечь из сборной, вы выбираете папку и сохраняете документ под любым именем.
Вы можете создать подобную анимацию меньше чем за час при помощи одного единственного эффекта в After Effects. Это руководство основано на мини мастер-классе, который я проводил в рамках программы Bridge в Designer Fund. Я предполагаю, что вы никогда раньше не пользовались After Effects, а если пользовались — вы можете пропустить большинство шагов.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
(Для этого тьюториала вам нужно установить размер холста 800x600 px)
Откройте или создайте вашу векторную форму в Illustrator. Пусть это будет Слой 1. Потом создайте новый слой: на нем вы будете рисовать пути, которые собираетесь анимировать. Рисуйте их при помощи инструмента “Перо” (P). Пусть путь начинается вне логотипа и проходит по одному или нескольким изгибам фигуры.
Создайте еще 5 (или сколько нужно) путей, которые будете анимировать.
Теперь вы готовы к запуску After Effects. Когда откроете программу, перед вами будет пустой проект. Если это не так, вам нужно будет создать новый проект при помощи клавиш Alt + Cmd + N.
Вы увидите нечто подобное:
Теперь вам нужно создать новую композицию (cmd + N).
Композиция — это то же самое, что и документ в Photoshop. У нее есть слои, и к этим слоям вы можете применять эффекты и маски. Отличие After Effects в том, что у вас появляется дополнительное измерение — время. Это означает, что любой примененный эффект может быть модифицирован во времени посредством ключевых кадров (keyframes).
На заметку: Ключевые кадры (keyframes) — это то, что позволяет делать изменяющиеся во времени эффекты. Например, переход от прозрачности в 0% (первый ключевой кадр) до прозрачности в 100% (второй ключевой кадр) за одну секунду (интервал между ключевыми кадрами) создаст эффект выцветания. Это основа работы After Effects.
Когда вы создаете новую композицию, в вашем распоряжении — множество опций и различных настроек. На этом этапе мы не будем долго выбирать правильные настройки, а предположим, что нашу анимацию мы будем использовать в качестве шота для Dribbble. Задайте размер 800x600 и длительность 5 секунд, а все остальное оставьте без изменений.
Теперь, когда вы находитесь в пустой композиции, создайте новый сплошной слой (Solid Layer: cmd + Y). Он добавится на временную шкалу. Не думайте пока о цвете слоя, его мы будем настраивать в другом месте.
Перейдите в Illustrator, выберите один из путей, перейдите обратно в After Effects, где уже выбран новый спрошной слой, и нажмите “вставить” (cmd + V). Если путь слишком большой, дважды кликните по нему, чтобы отмасштабировать (по мере вставки остальных слоев, нужно будет так же отмасштабировать и их). Вы увидите добавленный путь в окне предпросмотра. (Еще один способ посмотреть маску — нажать M на сплошном слое временной шкалы)
Создавайте новый сплошной слой для каждого пути из Illustrator. Конечно, все пути можно вставить в один слой, но тогда они все будут анимироваться одновременно.
Также нужно создать сплошной слой для контура вашего логотипа — вы ведь захотите “залить” анимацию цветом, когда она будет готова.
Выделите все слои с путями и добавьте эффект Stroke (“штрих”).
В этом тьюториале я буду использовать только один слой, но у вас, скорее всего, будет несколько. То, что я покажу, можно применить к каждому из слоев.
Перед вами будет примерно такой экран (в зависимости от количества слоев).
Пришло время анимировать
Вы можете открыть настройки эффекта Stroke, который вы только что добавили. Выделите слой (или слои) и нажмите E в окне временной шкалы (обычно я так делаю).
Выберите слой и нажмите E, чтобы посмотреть эффекты. Потом нажмите на иконку выпадающего списка, чтобы открыть настройки.
Во-первых, установите для опции Paint Style (“Стиль рисования”) режим “On transparent” (“на прозрачной области”). Так вы исключите фон слоя и будете работать только со штрихами.
Как вы видите, у эффекта Stroke есть настройки Start (“начало”) и End (“конец”). Установите точку воспроизведения на 00:00 и нажмите на секундомер рядом с опциями Start и End. Это ваши первые ключевые кадры.
Далее, переместите точку воспроизведения на пару секунд вперед. Не нажимайте на секундомер снова! Слева от него должна появиться пара иконок-ромбиков. Используйте их, чтобы добавить дополнительные ключевые кадры.
Попробуйте изменить стартовое значение (Start) с 0% до 100%. Вы увидите, как штрих движется по линии и исчезает. Оставьте для обеих настроек (Start и End) значение 100% на отметке в 2 секунды и переместите точку воспроизведения назад на 00:00. Теперь измените значение End на 0%. Теперь и обе настройки (Start и End) идут от 0% до 100%. Последнее что вам осталось сделать — это немного “сдвинуть” конец анимации по отношению к началу. Выглядеть должно примерно так:
Теперь, когда вы двигаете точку воспроизведения между этими ключевыми кадрами, штрих анимируется:
Это была база, которая необходима для создания анимации такого типа. Есть много других значений, которыми можно поиграть — например, толщина и прозрачность. Поэкспериментируйте с этими настройками и посмотрите, как можно сделать штрих длиннее или короче (сдвигая интервалы начала и конца анимации) и как это меняет стиль анимации.
Я сохранил эти пробные анимации в отдельной “экспериментальной” композиции в AE файле. Ссылка на скачивание файла в конце статьи.
Смягчение
Секрет красивой моушн-графики в смягчении (Easing). Существует много типов смягчения и много способов смягчить анимацию в After Effects. В данном мастер классе мы ограничимся функцией Easy Ease (Плавный вход и выход). After Effects все сделает сам. Кликните правой кнопкой по одному или нескольким ключевым кадрам и увидите это меню. Выберите опцию Easy Ease и ромбик ключевого кадра изменит форму. Так вы поймете, что смягчение включено.
Там, где раньше изменения происходили равномерно, теперь — благодаря смягчению — они происходят интенсивнее в начале и плавнее в конце. Это как проезжать светофоры: вы не даете по тормозам резко, а заблаговременно притормаживаете, чтобы машина плавно останавливалась на красный свет. Это и есть смягчение.
Чтобы посмотреть свою работу, воспользуйтесь функцией RAM Preview. Это позволяет вам посмотреть анимацию в режиме реального времени. Нажмите Ctrl + O и анимация воспроизведется. Это единственный способ протестировать анимацию в реальном времени. Потребуется немного времени на подготовку воспроизведения: в окне временной шкалы появится зеленая полоса.
Анимируем толщину штриха
Помните, как мы создавали ключевые кадры для начального и конечного значения? Точно так же я поступаю с размером кисти (Brush Size). В данном случае я создаю 3 ключевых кадра, чтобы толщина кисти изменялась с 2 до 12 и снова до 2.
Настраиваем воспроизведение
Вот как выглядит моя временная шкала по завершении работы. Вы видите, что я расположил слои (точнее их начальные точки) в шахматном порядке. Это нужно, чтобы вся анимация не проигрывалась разом. Здесь нет никакой точной науки — поэкспериментируйте с воспроизведением сами.
Добавляем мелочи
Отличный способ дополнить анимацию такого стиля — создать несколько небольших дополнительных анимаций, которые можно наложить поверх основной. Я создал эффект взрыва при помощи той же функции Stroke.
Чтобы создать эти мелочи, понадобится новая композиция. Что мне нравится в композициях — их можно использовать повторно. Я редактирую анимацию и изменяю ее размер в исходном файле, и, таким образом, создаю несколько совершенно непохожих друг на друга анимаций.
Теперь, когда вы готовы показать свою анимацию миру, ее нужно “вывести” (render). Чтобы это сделать, убедитесь, что вы находитесь в нужной композиции. В верхнем меню выберите Composition > Add to Render Queue (“Добавить в очередь рендеринга”).
Теперь вам нужно найти окно очереди рендеринга (Render Queue). Обычно это следующая вкладка после временной шкалы. На этой вкладке вы можете поменять настройки и задать место публикации. Если в настройках задан формат рендеринга .mov, значит все идет по плану.
Нажмите на кнопку Render (“вывести”) справа сверху — “дзынь!” — и готово! Теперь у вас есть Quicktime ролик, которым можно поделиться со всем миром! Чтобы выложить файл на Dribbble, откройте ролик в Photoshop и сохраните для веб (Save for Web). В диалоговом окне выберите формат gif и закольцуйте анимацию ☺
Чтобы вам было проще начать, можете скачать мои файлы из Illustrator и After Effects.
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Фев 20, 2016 · 9 мин читать
Тьюториал по After Effects
Вы можете создать подобную анимацию меньше чем за час при помощи одного единственного эффекта в After Effects. Это руководство основано на мини мастер-классе, который я проводил в рамках программы Bridge в Designer Fund. Я предполагаю, что вы никогда раньше не пользовались After Effects, а если пользовались — вы можете пропустить большинство шагов.
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀
Шаг 1 — Illustrator
(Для этого тьюториала вам нужно установить размер холста 800x600 px)
Откройте или создайте вашу векторную форму в Illustrator. Пусть это будет Слой 1. Потом создайте новый слой: на нем вы будете рисовать пути, которые собираетесь анимировать. Рисуйте их при помощи инструмента “Перо” (P). Пусть путь начинается вне логотипа и проходит по одному или нескольким изгибам фигуры.
Создайте еще 5 (или сколько нужно) путей, которые будете анимировать.
Шаг 2 — Композиция в After Effects
Теперь вы готовы к запуску After Effects. Когда откроете программу, перед вами будет пустой проект. Если это не так, вам нужно будет создать новый проект при помощи клавиш Alt + Cmd + N.
Вы увидите нечто подобное:
Теперь вам нужно создать новую композицию (cmd + N).
Композиция — это то же самое, что и документ в Photoshop. У нее есть слои, и к этим слоям вы можете применять эффекты и маски. Отличие After Effects в том, что у вас появляется дополнительное измерение — время. Это означает, что любой примененный эффект может быть модифицирован во времени посредством ключевых кадров (keyframes).
На заметку: Ключевые кадры (keyframes) — это то, что позволяет делать изменяющиеся во времени эффекты. Например, переход от прозрачности в 0% (первый ключевой кадр) до прозрачности в 100% (второй ключевой кадр) за одну секунду (интервал между ключевыми кадрами) создаст эффект выцветания. Это основа работы After Effects.
Когда вы создаете новую композицию, в вашем распоряжении — множество опций и различных настроек. На этом этапе мы не будем долго выбирать правильные настройки, а предположим, что нашу анимацию мы будем использовать в качестве шота для Dribbble. Задайте размер 800x600 и длительность 5 секунд, а все остальное оставьте без изменений.
Мы используем квадратные пиксели, потому что создаем анимацию для экрана компьютера.
Шаг 3 — Переносим пути из Illustrator в After Effects
Теперь, когда вы находитесь в пустой композиции, создайте новый сплошной слой (Solid Layer: cmd + Y). Он добавится на временную шкалу. Не думайте пока о цвете слоя, его мы будем настраивать в другом месте.
Перейдите в Illustrator, выберите один из путей, перейдите обратно в After Effects, где уже выбран новый спрошной слой, и нажмите “вставить” (cmd + V). Если путь слишком большой, дважды кликните по нему, чтобы отмасштабировать (по мере вставки остальных слоев, нужно будет так же отмасштабировать и их). Вы увидите добавленный путь в окне предпросмотра. (Еще один способ посмотреть маску — нажать M на сплошном слое временной шкалы)
Создавайте новый сплошной слой для каждого пути из Illustrator. Конечно, все пути можно вставить в один слой, но тогда они все будут анимироваться одновременно.
Также нужно создать сплошной слой для контура вашего логотипа — вы ведь захотите “залить” анимацию цветом, когда она будет готова.
Шаг 4 — Эффект
Выделите все слои с путями и добавьте эффект Stroke (“штрих”).
Можно посмотреть эффекты, примененные к слою, нажав кнопку E.
В этом тьюториале я буду использовать только один слой, но у вас, скорее всего, будет несколько. То, что я покажу, можно применить к каждому из слоев.
Перед вами будет примерно такой экран (в зависимости от количества слоев).
Пришло время анимировать
Вы можете открыть настройки эффекта Stroke, который вы только что добавили. Выделите слой (или слои) и нажмите E в окне временной шкалы (обычно я так делаю).
Выберите слой и нажмите E, чтобы посмотреть эффекты. Потом нажмите на иконку выпадающего списка, чтобы открыть настройки.
Во-первых, установите для опции Paint Style (“Стиль рисования”) режим “On transparent” (“на прозрачной области”). Так вы исключите фон слоя и будете работать только со штрихами.
Как вы видите, у эффекта Stroke есть настройки Start (“начало”) и End (“конец”). Установите точку воспроизведения на 00:00 и нажмите на секундомер рядом с опциями Start и End. Это ваши первые ключевые кадры.
Далее, переместите точку воспроизведения на пару секунд вперед. Не нажимайте на секундомер снова! Слева от него должна появиться пара иконок-ромбиков. Используйте их, чтобы добавить дополнительные ключевые кадры.
Попробуйте изменить стартовое значение (Start) с 0% до 100%. Вы увидите, как штрих движется по линии и исчезает. Оставьте для обеих настроек (Start и End) значение 100% на отметке в 2 секунды и переместите точку воспроизведения назад на 00:00. Теперь измените значение End на 0%. Теперь и обе настройки (Start и End) идут от 0% до 100%. Последнее что вам осталось сделать — это немного “сдвинуть” конец анимации по отношению к началу. Выглядеть должно примерно так:
Теперь, когда вы двигаете точку воспроизведения между этими ключевыми кадрами, штрих анимируется:
Это была база, которая необходима для создания анимации такого типа. Есть много других значений, которыми можно поиграть — например, толщина и прозрачность. Поэкспериментируйте с этими настройками и посмотрите, как можно сделать штрих длиннее или короче (сдвигая интервалы начала и конца анимации) и как это меняет стиль анимации.
Я сохранил эти пробные анимации в отдельной “экспериментальной” композиции в AE файле. Ссылка на скачивание файла в конце статьи.
Шаг 5 — Настройка и эксперименты
Смягчение
Секрет красивой моушн-графики в смягчении (Easing). Существует много типов смягчения и много способов смягчить анимацию в After Effects. В данном мастер классе мы ограничимся функцией Easy Ease (Плавный вход и выход). After Effects все сделает сам. Кликните правой кнопкой по одному или нескольким ключевым кадрам и увидите это меню. Выберите опцию Easy Ease и ромбик ключевого кадра изменит форму. Так вы поймете, что смягчение включено.
Там, где раньше изменения происходили равномерно, теперь — благодаря смягчению — они происходят интенсивнее в начале и плавнее в конце. Это как проезжать светофоры: вы не даете по тормозам резко, а заблаговременно притормаживаете, чтобы машина плавно останавливалась на красный свет. Это и есть смягчение.
Чтобы посмотреть свою работу, воспользуйтесь функцией RAM Preview. Это позволяет вам посмотреть анимацию в режиме реального времени. Нажмите Ctrl + O и анимация воспроизведется. Это единственный способ протестировать анимацию в реальном времени. Потребуется немного времени на подготовку воспроизведения: в окне временной шкалы появится зеленая полоса.
Анимируем толщину штриха
Помните, как мы создавали ключевые кадры для начального и конечного значения? Точно так же я поступаю с размером кисти (Brush Size). В данном случае я создаю 3 ключевых кадра, чтобы толщина кисти изменялась с 2 до 12 и снова до 2.
Настраиваем воспроизведение
Вот как выглядит моя временная шкала по завершении работы. Вы видите, что я расположил слои (точнее их начальные точки) в шахматном порядке. Это нужно, чтобы вся анимация не проигрывалась разом. Здесь нет никакой точной науки — поэкспериментируйте с воспроизведением сами.
Добавляем мелочи
Заметьте, как меняется толщина штриха.
Отличный способ дополнить анимацию такого стиля — создать несколько небольших дополнительных анимаций, которые можно наложить поверх основной. Я создал эффект взрыва при помощи той же функции Stroke.
Чтобы создать эти мелочи, понадобится новая композиция. Что мне нравится в композициях — их можно использовать повторно. Я редактирую анимацию и изменяю ее размер в исходном файле, и, таким образом, создаю несколько совершенно непохожих друг на друга анимаций.
Шаг 6 — Выводим анимацию из After Effects
Теперь, когда вы готовы показать свою анимацию миру, ее нужно “вывести” (render). Чтобы это сделать, убедитесь, что вы находитесь в нужной композиции. В верхнем меню выберите Composition > Add to Render Queue (“Добавить в очередь рендеринга”).
Теперь вам нужно найти окно очереди рендеринга (Render Queue). Обычно это следующая вкладка после временной шкалы. На этой вкладке вы можете поменять настройки и задать место публикации. Если в настройках задан формат рендеринга .mov, значит все идет по плану.
Нажмите на кнопку Render (“вывести”) справа сверху — “дзынь!” — и готово! Теперь у вас есть Quicktime ролик, которым можно поделиться со всем миром! Чтобы выложить файл на Dribbble, откройте ролик в Photoshop и сохраните для веб (Save for Web). В диалоговом окне выберите формат gif и закольцуйте анимацию ☺
Ресурсы
Чтобы вам было проще начать, можете скачать мои файлы из Illustrator и After Effects.
В этом видео создадим проект After Effects с Element 3D.Покажу как из 2D сделать 3D логотип, текст или картинку. Нанесем текстуры на модель в Element 3D. Рассмотрим как сделать анимацию текста, лого или картинки в After Effects. Добавим эффекты глубины композиции.
Parallax переход между страницами сайта
Photoshop + After Effects
Музыкальная тема из " Индиана Джонс"
Итоги моего марафона бесплатной анимации
Привет, пикабу! Я закончил первый этап набора портфолио, хотел бы сказать спасибо всем за предоставленные логотипы и обратную связь! Не все логотипы получилось реализовать, но большинство так или иначе, получили результат. Готовые работы можете увидеть ниже :)
Внимание! Очень много гифок
Читайте также: