Как сделать loading в after effects
Анимация — важная составляющая любого проекта, которая при правильном использовании может произвести хорошее впечатление, придать вашему дизайну изюминку и привлечь как можно больше внимания.
Вот гайд по созданию анимаций с советами и замечаниями, которые улучшат вид вашего дизайна.
Часто мы используем анимации, чтобы произвести хорошее первое впечатление. Моушн-дизайн оживляет наш пользовательский интерфейс и показывает, как все функции будут работать без вмешательства со стороны программиста. Вот один из концептов, в котором мы применили анимацию для демонстрации наших идей клиенту.
Оживление иллюстраций
Иногда можно использовать простые анимации для оживления иллюстраций, на это не уйдет много времени, но приведёт к положительным результатам. Анимированные иллюстрации, даже самые маленькие, действительно отыгрывают большую роль, не стоит ими пренебрегать.
Упрощение реализации
Моушн-дизайн помогает быстрее реализовать ваш проект. Как?
Во-первых, вы можете анимировать сайт или приложение, чтобы наглядно показать разработчикам, что именно они должны сделать. Вы можете анимировать все составляющие вашего проекта или только некоторые нестандартные переходы/раскрытия.
Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.
Улучшите свое портфолио
Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.
Если вы занимаетесь моушн-дизайном, вы можете создавать множество классных анимаций: поиграйте с эффектом параллакса, включите 3D-анимацию в пользовательский интерфейс, поиграйте с эффектами искажения на фотографиях, анимируйте иллюстрации и т.д.
Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.
Импорт из Sketch
Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.
- Организуйте все в группы и дайте правильные названия всем слоям
2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).
Импорт из Figma
Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).
1. Убедитесь, что вы скачали шрифты, используемые в дизайне.
2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.
3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.
4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.
Precompose подразумевает под собой новую композицию с анимацией, которую вы решили по какой-то причине сделать отдельно. Чаще всего это делается, чтобы отделить одну логически законченную работу от других.
Как мы знаем, есть два типа людей:
- Любят precompose и используют их все время;
- Предпочитают не использовать precompose.
Мы используем их только для организации неанимированных или лишь слегка анимированных частей дизайна: верхнего и нижнего колонтитула, карточек и панелей инструментов.
Зачем? Вы часто теряете гибкость в процессе анимации. Например, если вам нужно анимировать прокрутку и у вас есть анимация для частей экрана — вы будете терять много времени, перемещаясь туда-сюда в композициях.
Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).
Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.
Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.
Во время анимации меняйте цвет для всех слоев на каждом анимированном экране (как на левом изображении) или частей экрана с цветовым кодом (как на правом изображении). Например, у нас есть экран с заголовком, а затем идет 3 столбца с содержимым.
Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.
Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.
Motion Tools
Мы не можем представить себе даже день анимации без этого плагина. Он помогает оптимизировать рабочий процесс и сэкономить много времени.Все инструкции о том, как его использовать, вы найдете в этом видео.
Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!
Bodymovin и Lottie Files
Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.
Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?
В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.
Для их анимации используются стандартные свойства: положение, непрозрачность, масштаб и поворот.
Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.
- Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
- Создайте ключевые кадры для начальной и конечной точек;
- Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
- Отрегулируйте кривую, как на изображении.
- Вернитесь к временной шкале и при необходимости отрегулируйте время.
Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.
Как оживить раскрытие?
- Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
- Переместитесь на 20 кадров вперед и создайте ключевые кадры;
- Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
- Создайте динамику, как показано на графике ниже.
Просмотрите анимацию и вы заметите, что теперь все движения выглядят более плавными.
Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.
Что из себя представляет «Смещение»?
Это означает, что анимация не одновременна. Например, анимация каждого следующего слоя начнётся на 2 кадра позже, чем анимация предыдущего слоя.
- Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
- Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!
Когда вы освоили базовую анимацию, пришло время проявить больше творчества.
Раскрытие фото
Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.
Например, здесь вы можете наблюдать добавленную масштабную анимацию и отображаемую маску. Такое действие легко реализовать и выглядеть это будет гораздо лучше, нежели стандартное раскрытие.
Фотоэффекты
Помимо раскрытия, вы можете добавить эффекты искажения фотографий, которые будут отображаться при наведении курсора или же видны постоянно.
Создание искажений — довольно комплексный, а иногда и достаточно сложный процесс, но вы можете использовать уже готовые пресеты, которые есть в свободном доступе, в Интернете. Вот несколько отличных вариантов того, как фотоэффекты могут быть применены на ваших сайтах.
В большинстве случаев мы используем простые анимации для текста, но иногда вам может понадобиться добавить некоторые интересные детали к базовой анимации.
Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.
Посмотрите, как такой вид анимации может помочь в создании впечатляющего видео.
Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.
Всегда стоит анимировать иллюстрации для сайтов/приложений. Это быстро, легко и просто реализовать, а профит от этих действий будет максимален.
Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.
Когда вы закончите создание анимаций, проверьте пару вещей:
1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.
2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).
3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.
Если вы новичок в анимации, у нас есть для вас несколько советов.
Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.
В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».
Иногда вам нужно оптимизировать видео, чтобы оно весило меньше. Для этого мы рекомендуем приложение HandBrake. Пользоваться им очень просто и интуитивно понятно. Здесь вы можете уменьшить размер файла видео, оптимизировать, изменить размер, битрейт или частоту кадров.
Советы по социальным сетям
Первое и самое главное — миниатюры. Самая распространённая ошибка — забывать о хороших миниатюрах. В результате у вас может быть пустой или непривлекательный эскиз, который испортит впечатление обо всей проделанной вами работе.
Второе, над чем нужно работать — зацикленная анимация. Это тот пункт, который делает анимацию красивее и плавнее.
Золотое правило: "Чем анимация "натуральней", тем она лучше выглядит в целом." Добится этой "натуральности" (то есть создать условия, для имитации законов физики - отскоков, инцерции и пр.), можно разными путями. Но создавать все это с помощью ключей очень утомительно. В этом нам помогут выражения, и в данной статье рассмотрим выражения "bounce" типа.
Inertial Bounce.
Очень распространенный эффект "отскока", который можно записать в виде выражения:
Где, amp - амплитуда отскока, freq - частота, decay - затухание
Элемент к которому необходимо привязать данный экспрешн,переводим в 3д слой. Затем перемещаем его anchor point в то место, где будет его "центр тяжести", то есть откуда будет идти вращение. В моем случае это самый верх слоя (текст). Также создаем ключи вращения (в моем случае X rotation от 90 до 0) и в этот X rotation дописываем выражение Inertial Bounce. Также можете создать свет (Light) в композиции для еще более натурального вида анимации.
Decay Bounce.
Еще один вид отскока, на этот раз "от земли". Со следующим выражением:
veloc = thisComp.layer("Control Layer").effect("velo control")("Slider");
amplitude = thisComp.layer("Control Layer").effect("amplitude control")("Slider");
decay = thisComp.layer("Control Layer").effect("decay control")("Slider");
Проблема в том, чтобы использовать данное выражение необходимо создать дополнительный Null Object (или solid слой), назвать его как "Control Layer". Затем применить к ниму 3 фильтра Slider control, и назвать каждый как "velo control", "amplitude control", "decay control". Поставить у них значения -200,-200 и 4, соответственно. Кстати эти значения регулируют скорость (velo), амплитуду (amp) и затухание (decay) отскока. Затем на объект к которому необходимо сделать данный отскок, применяем выражение на параметр Position.
Better Bounce.
Очень простое выражение, которое можно записать в виде:
freq = effect("bounce - frequency")("Slider"); //oscillations per second
amplitude = effect("bounce - amplitude")("Slider");
decay = effect("bounce - decay")("Slider");
Это выражение можно добавить к любому из параметру transform, главное аккуратнее подбирайте частоту отскока (freq) так как оно основано на fps проекта.
Баскетбольный мяч.
Еще одно популярное выражение имитирующее отскок баскетбольного мяча. Выражение к позиции следующее:
How to make a custom loading animation in After Effects, and turn it into a lightweight GIF.
Good visual design is becoming easier and easier to come by. It's getting harder to tell who's got real design chops, and who just has access to really nice website templates or UI kits. This means that in order to create an impactful user experience, you need to go above and beyond what people are expecting.
Some of the most memorable touches are the small ones. Think of MailChimp's famous 'monkey hand high five' that shows up when you hit Send on your campaign. Instead of a general success message, as you might expect, they dug a little deeper, and worked their brand into the experience. We won't be animating any monkey paws here, but we will make a colourful loading animation that's easy to customise with your own brand colours and logo. You can see InVision's example below:
We'll use After Effects to create the loading animation sequence, and then bring our exported video file into Photoshop and turn it into a lightweight GIF that can be launched anywhere you need an animated loading element.
Before you dive in, you'll need to pick out four brand colours and have a small, single-colour, transparent version of your logo handy. If you've been meaning to learn After Effects, this is a perfect opportunity for you to jump in, create something uniquely yours, and learn some great basic techniques in the process.
Watch this exclusive screencast, or follow the steps below to create your loading animation.
01. Create a new sequence
Open up After Effects and press cmd+N to create a new sequence. Since our video is going to be a square, instead of the standard 16:9 aspect ratio, change the width and height to 120px in the composition settings and click OK. The recommended final output of our GIF will be 60px, but we want to be able to account for Retina screens, too.
02. Sort out your workspaces
Before we continue, let's make sure our After Effects workspaces are the same. In your top menu, go to Window > Workspace > Standard. This way, when I say "Click that thing at the bottom right of your screen" it will actually be at the bottom right of your screen.
03. Make some shapes
Now let's create a handful of square shapes that will become our animated blocks of colour. Click on your sequence (the black square in the middle of the screen), press Q, then Shift+click and drag a square on screen so the edges extend just outside the edges of the composition.
It's good practice to centre the shape perfectly on screen. In the Align panel at the bottom-right, click Horizontal Center Alignment and Vertical Center Alignment.
04. Add colour
While your shape is still selected, click the Fill colour option at the top of your screen and enter one of your primary brand colours as a hex or RGB value. You can also use the eyedropper tool to sample colours from anywhere else on screen, including colours outside of the After Effects window, which is helpful.
05. Duplicate your layers
Along the bottom of your screen you'll see a timeline with a single layer named 'Shape Layer 1'. Select it by clicking on the name or the blue bar in the timeline, and press ctrl/cmd+D four times to duplicate it. You should end up with five identical layers in your timeline. These will be entitled Shape Layer 1, 2, 3, 4 and 5.
06. Use anchor points
Each shape is going to animate in from a different side of the screen. To make that easy, we'll change the location of our anchor points ahead of time. Select Shape Layer 2 and press Y to bring up the Anchor Point tool. Then click on your anchor point (it looks like crosshairs somewhere inside your shape) and drag it to the bottom edge of your square. Repeat on layers 3-5, placing each anchor point on a different edge than the last. You don't need to do anything to Shape Layer 1.
07. Stagger the timing
Now it's time to stagger the timing of our shapes in the timeline. Press V to switch to your selection tool, and in your timeline shift+click the blue bars for layers 3-5 and drag them to the right, spacing each out by one second. They should begin at the 1, 2, and 3 second marks in your timeline. If your timeline is too zoomed out, hold down alt and scroll down – this action will zoom you in and out of your timeline.
08. Add more colours
Individually select shapes 2-4 and change their fill colour like you did back in step 4. You can drag your playhead (the vertical red progress line) over the shape you're editing to see your changes take place. We'll leave Shape Layers 1 and 5 the same colour, because we'll be creating a loop that starts and ends on the same colour. If that doesn't make sense right now, don't worry – it will.
09. Do a first preview
It's time to preview your handiwork so far. Press the spacebar and watch the colours change on screen. Hit spacebar again to stop it (or esc if this doesn't work).
10. Create a keyframe
Click and drag your playhead back to the beginning of your timeline. Select Shape Layer 2, then press S on your keyboard to bring up the scale options for that shape. Now click the stopwatch icon next to Scale, turn off the link icon next to the scale percentages, and drag the second value down to 0%. A small diamond will show up on your timeline at your playhead's current location. Congratulations, you just created a keyframe!
11. Make another keyframe
Drag the playhead up to 1 second and set your shape's value back to 100 per cent. Another keyframe should show up in your timeline at the playhead. Drag the playhead back to the beginning of your timeline and press spacebar to preview your animation. You should see the shape scale up and cover Shape Layer 1.
12. Make more keyframes
Repeat those steps again on Shape Layers 3-5, each time starting your animation at the beginning of the layer's blue bar, which we staggered by 1 second earlier on. When you're done, the first keyframe of each layer should line up with the last keyframe of the layer below it.
13. Preview again
When you've finished adding your keyframes, preview your work. You should see different shapes sliding in on top of each other from different angles. If that's the case, move your playhead to 4 seconds and hit N. This will mark the end of your animation, and loop your preview when you hit spacebar again. If Shape Layer 1 and Shape Layer 5 are the same colour, it should form a seamless loop.
14. Adjust the easing
It's almost time to add your logo, but not quite. The animation right now is probably looking a little linear (read: boring) – let's liven it up by changing the easing. While holding the shift key, select the final keyframe of each layer, and right-click on one. Choose Keyframe velocity, then set the incoming velocity to 100 per cent and leave Dimension X and Y alone. Click OK and preview again. You'll notice the animations slow down at the very end, creating a more dynamic feel.
15. Add a logo
Now we're ready to add your logo on top of the animation. In the project panel at the left of your screen, double-click the empty area below Comp 1 and import your image file (it's best if it's a transparent image format, like a PNG or EPS.) Then drag it into the beginning of your timeline, making it the topmost layer. You can hit S again to scale your logo up or down, and use the Align panel again to place it dead centre in the composition.
16. Preview and export
When you're happy with the size and placement of your logo, click play again and make sure everything still looks good. If it does, it's time to export your video. Go to File>Export>Add To Render Queue, then set your render settings to Best, output module to Lossless, and choose where to put your video file by clicking the file name in the Output To area.
17. Go to Photoshop
Now it's time to boot up Photoshop and convert our video to an animated GIF. In Photoshop, go to File>Import>Video Frames to Layers and select your video file. On the following prompt you have the option of adjusting a number of import settings for you video. However, since this animation is so short, we'll just click OK.
18. Check it's all good
To make sure nothing looks funky with your GIF in Photoshop, go to Window>Timeline to bring up the timeline, and click the play button in the bottom left-hand corner. Playback may not be at 100% speed, so don't worry too much if it seems slow. You just want to make sure everything has come through OK and that it all seems smooth and seamless when looping.
19. Export your GIF
To save your GIF, press ctrl/cmd+alt+shift+S to bring up the Save for Web window. At the very top, select GIF as the file type and in the preset drop-down above that, choose GIF 128 No Dither. Near the bottom of the window you can adjust the image size down to 60px for final output. Make sure the animation looping settings are set to Forever, because much like diamonds, a GIF is forever (or at least it should be, anyway).
20. You're all done!
Congratulations! You now have a handmade, branded GIF that you can implement on your website or app, use to add realistic 'loading' states to your prototypes, or put up on Dribble or Behance for all the world to see.
This article originally appeared in net, the world's leading magazine for web designers and developers. Subscribe here.
Thank you for reading 5 articles this month* Join now for unlimited access
Моушн-дизайнер и преподаватель в Bang Bang Education Константин Новиков составил большую подборку полезных скриптов и плагинов в After Effects на все случаи жизни — и объяснил, зачем нужен каждый из них.
Zl Explode Shape Layers: разбирает и группирует шейповые слои, которые были созданы, например, в Illustrator, а также убирает артборд, который часто очень мешает работать.
Reposition Anchor Point: очень простой скрипт, который дает одну удобную функцию — перемещение энкор-пойнта в один из углов объекта или в центр. Вы просто выделяете все объекты, у которых вам нужно сместить AP, и нажимаете «переместить».
Flow: скрипт, который позволяет удобно управлять графиками скорости и значения. Кроме того, в нем много предустановок шейповой анимации.
Motion: «швейцарский нож», которым пользуются многие моушн-дизайнеры. В нем есть все перечисленное выше плюс около полусотни встроенных скриптов, которые позволяют делать анимационные ходы и приемы одним кликом. Например, сгруппировать анимацию нескольких слоев под одним слайдером или добавить какую-то элементарную физику в сцену. Есть даже функция, которая чистит проект и группирует все исходники по отдельным папочкам.
Overlord: своеобразный телепорт для данных между After Effects и Illustrator. Одной кнопкой он перекидывает все шейпы в АE, при этом вам не нужно сохранять какие-то дополнительные файлы и при необходимости можно также переслать вектор обратно.
Limber: предназначен для того, чтобы очень быстро создавать конечности — руки, ноги, пальцы, ну или, например, лапки у паука. В первую очередь используют для создания конечностей с угловатыми суставами — локтями и коленями.
Rubber Hose: этот скрипт делает классические диснеевские руки-сосиски и ноги-сосиски, у которых нет локтей и которые прекрасно тянутся.
Character Tool: по своей механике ближе к Rubber Hose. Кроме того, в скрипте есть еще куча мелких, но полезных функций.
DuIK: скрипт номер один для персонажных аниматоров. Он не очень юзер-френдли, но это связано, скорее всего, с большим количеством функций в нем. Это целая система для производства персонажей с руками, ногами, позвоночником и хвостом. В нем постоянно пополняющийся список анимационных предустановок. Чего только стоит кнопка «цикл походки», которая заставляет вашу марионетку шагать (у аниматоров это занимает минимум полдня), или «кей клинер», который оптимизирует анимацию и позволяет добавить в нее «изинги» и «овершуты». Скрипт постоянно развивается и абсолютно бесплатен. Пользуюсь им не только для персонажей.
Newton: плагин, который добавляет физику в проекты: если вам, например, не хочется разбираться с графиками и думать, как должен прыгать мячик, или нужно сделать так, чтобы сотня мячиков упала и заполнила логотип. Пару лет назад Apple сделала себе целый ролик на этом плагине. Одним словом, плагин позволяет соединять объекты невидимыми пружинками между собой, бросать их вниз и наслаждаться тем, как физика все делает за вас.
rd: comp setter: целая группа скриптов, которые упрощают работу. Например, rd: comp setter позволяет изменить параметры всех выделенных композиций: сменить им разрешение или частоту кадров. Около полусотни скриптов на все случаи жизни.
Rift: в пару кликов можно упорядочить слои и ключи в композиции на ваше усмотрение: выстроить их по CTI (бегунку) или же, наоборот, сделать их хаотичными. В проектах, где, например, надо сделать сдвижку в один кадр в сотне слоев, но чтобы при этом анимация заканчивалась в определенную секунду (выравниванием ключей), это незаменимый помощник.
Declutter: все очень просто: скрипт наводит порядок в проекте. Создает папочки и сортирует все элементы проекта. Помогает при работе с чужими проектами.
FormParticularStardust: три эффекта, которые по-разному работают с частицами. Можно сделать падающий снег, вращающиеся вихри, что-то похожее на дымку или логотип, разлетающийся на мелкие точечки. Stardust имеет нодовую систему и поэтому людям, склонным к визуальному программированию, легко найти с ним общий язык.
Element 3d: плагин номер один для тех, кто хочет работать с 3D-объектами в AE без использования сторонних программ. Может превратить любой текстовый слой в 3D-текст, работает с готовыми 3D-файлами. А еще имеет наборы объектов, благодаря которым можно, например, собрать огромный трехмерный город (Metropolitan Pack) и сделать пролет камерой по нему — причем это займет у вас не больше получаса, включая рендер.
Optical Flares: второй плагин от Эндрю Крамера и студии VideoCopilot. Это большая база настраиваемых бликов, вспышек и пересветов. Его часто используют для того, чтобы оживить параллаксы или видео, добавив в них игры света и бликов.
Deep GlowVibrance: два плагина, которые позволяют добавить эффект свечения в ваши объекты.
Slitscan: делает эффект отставания или замораживания линии пикселей.
AE Pixel Sorter: эффект стекания пикселей по контрастной области.
Lockdown: позволяет неплохо прикрепить текстуру к неоднородному и неплоскому движущемуся объекту.
Три плагина-диспетчера рендера для опытных пользователей, которым не хватает настроек и кодеков в Media Encoder:
Сегодня мы рассмотрим один из способов совмещения 3D графики и видео. Для этого нам потребуется:
- Видео
- Программа Adobe After Effects (я буду демонстрировать на версии CC 2017)
- Плагин Element 3D
- Необходимая 3D модель
Обратите внимание на то, как и где вы будете снимать ваше видео. Учтите, что чем больше в вашем видео будет различных деталей, тем проще программе производить трекинг точек, к которым впоследствии будет привязываться 3D объект.
Для начала открываем Adobe After Effects. В появившемся окне нажимаем Новый проект.
Далее нам необходимо импортировать наше видео в которое будем добавлять 3D графику. Файл > Импорт > Файл… > Выбираем видео.
Импортировавший файл перетащите в окно timeline.
Теперь нужно сделать трекинг точек к которым будет привязываться 3D модель. Обязательно кликаем на видео в окне timeline, чтобы программа поняла с каким элементом мы будем работать. Затем в окне Инспектор выбираем Отслеживание камеры. Если окна Инспектор у вас нет, просто активируйте его через вкладку Окно.
Процесс трекинга запущен. Нам остается только дождаться когда программа закончит обрабатывать видео и просчитает все возможные точки для привязки объекта.
Как только программа закончила просчет нам нужно выбрать минимум 3 наиболее удачные точки, которые находятся на необходимой нам плоскости, то есть на той поверхности где и будет находиться 3D графика. Если провести курсором мыши по всем точкам, то можно заметить что программа автоматически будет предлагать различные связки из трех рядом находящихся «маркеров». Выберите один из вариантов, кликнув на пространство между точками, после чего они должны выделиться желтым цветом. Затем кликаем правой кнопкой мыши по той же плоскости и нажимаем Создать пустые и камеру (Слой у меня подписан как Отслеживать пустые 1).
Теперь к только что созданному Пустому объекту (Отслеживать пустые 1) можно привязать 3D графику, которая будет четко следовать за плоскостью, плотно «прибитыми» точками к нужной нам поверхности. Для работы с 3D графикой, мы будем использовать плагин Element 3D, благодаря которому можно импортировать в After Effects нужную вам модель.
Создадим сплошной слой. Кликаем правой кнопкой мыши по пустому пространству в окне timeline, выбираем Создать > Сплошная заливка… > ок.
Применяем на сплошной слой эффект Element 3D. Во вкладке Эффекты и шаблоны, выполняем поиск по запросу Element и перетаскиваем его на Сплошной слой.
Нажимаем на сплошной слой. В окне Элементы управления эффектами кликаем Element > Scene Intreface > Scene Setup.
В появившемся окне выбираем нужную нам модель.
Далее нам необходимо привязать 3D модель к заранее созданному нами Пустому объекту. Но для начало создадим Пустой объект и для 3D модели тоже. Раскрываем вкладку Group 1, в окне Элементы управления эффектами, так как в нашем случае 3D модель находиться именно в этой группе. Затем, под вкладкой Create Group Null, нажимаем Create (Слой у меня подписан как Group 1 Null).
Далее нам нужно привязать Пустой объект модели к Пустому объекту видео. Зажимаем Shift, и левой кнопкой мыши перетаскиваем значок спирали, находящийся рядом с только что созданным слоем для 3D модели (Group 1 Null), на слой с Пустым объектом видео (Отслеживать пустые 1).
Скорее всего, объект уменьшиться после этой процедуры. Просто увеличим его и переместим в нужное место с помощью параметров находящиеся во вкладке Group 1. Во вкладке Group 1 раскройте Particle Replicator > Rotation. Изменяя там параметры, вы сможете перемещать и крутить ваш объект в нужное вам положение. Затем раскройте вкладку Particle Look для изменения размера 3D объекта.
Готово. Мы добавили 3D модель в наше видео, при этом она полностью «прибита» к нужной ей плоскости и на протяжении всей композиции объект находиться в одном и том же положении относительно той поверхности к которой мы и привязали нашу графику. Так что, при передвижении камеры, 3D модель будет неподвижной.
Существует несколько вариантов вставить нужный объект в отснятую сцену. Используя один из них вы сможете создать подобное видео без особого труда. Весь процесс и урок небольшой смотрим ниже
Первый это отследить движение нужного объекта при статично закрепленной видеокамеры. В этом случае мы должны открыть в правом углу программы Adobe After Effects раздел ИНСПЕКТОР и выбрать кнопку ОТСЛЕЖИВАТЬ ДВИЖЕНИЯ нажав на которую в окне просмотра одна точка отслеживания. Если мы добавим пункты ПОВОРОТ и МАСШТАБ у нас на экране появятся уже две точки отслеживания, при выборе типа дорожки можно довести количество точек отслеживания до четырех, в одном случае их можно связать парами, в другом случае для отслеживания перспективы все точки можно сделать независимыми. Пока этого делать не надо.
На картинке показана очередность 1 Нужно загрузить видео и выбрать раздел с инструментом, 2 Нажать отслеживание движение. 3 если у вас объект движется, меняет угол поворота или масштаб, добавить нужные галочки.
Второй вариант отслеживания связан с масками и я думаю что пока делать это мы не будем.
Сегодня я покажу как можно прикрепить нужный объект к видео с помощью отслеживания движение самой камеры. Обычно это делается в том случае, когда отснятый объект статичен, но в это время двигается камера, может вы снимаете с машины, тележки или вообще с дрона. Уроки на эту тему в интернете есть, но думаю и этот лишний не будет. Отличие тех уроков от этого заключается в том, что я показываю все на версиях с русской локализацией. Также мы рассмотрим вариант, когда программа не может установить маркеры в нужном нам месте, это происходит когда объект не выделяется на общем фоне, к примеру он белого цвета, именно такой объект я и выбрал.
И так, в панели справа также выбираем раздел Инспектор и нажимаем кнопку Отследить камеру. Если у вас эта панель по каким то причинам отсутствует, можно в верхнем меню выбрать раздел “Эффект” и там в подразделе “Перспектива” найти инструмент “Функция 3D КАМЕРА ТРЕКЕР”. Как только мы нажмем на эту функцию, начнется просчет нашего видео, программе понадобится два прохода. После завершения просчета на экране появится множество маркеров при наведение на которые мышкой будет появляться круг нажав на который появится треугольник связывающий три маркера. В нашем случае на нужном нам объекте таких маркеров нет.
Нам придется самим проанализировать движение камеры и с зажатой левой кнопкой мыши обвести те маркеры которые наиболее приемлемы при движении камеры. Далее наводим курсор и шелчком уже правой кнопки мыши вызываем меню в котором выбираем “СОЗДАТЬ ПУСТЫЕ И КАМЕРУ”
После этого на панели Композиции у нас появится и камера и пустой слой к которому в последствии мы и привяжем наш объект (текст, видео, картинку) Далее переносим панель композиции верхним слоем тот объект который мы ходим вставить, в нашем случае это обыкновенная фотография которую мы расположим на стене в виде плаката. Переводим нашу картинку или другой объект в 3D для этого нажмем на пока еще пустое окошко под значком с кубиком, в пустом окне появляется куб. Далее как указанно на рисунке в родительском элементе с зажатой клавишей Shift выбираем “Отслеживать пустые 1” Смотри рисунок ниже
Вот и все, остается установить картинку в нужное нам место и найти нужную ориентацию в пространстве используя раздел Преобразовать в композиции. Инструменты Масштаб, поворот, ориентация и другие.
Безусловно что бы создать сложное видео без наложения масок нам не обойтись, но это тоже вполне решаемая задача, особо сложного тут ничего нет для знающего программу
Не думал, что пара мандаринов вдохновят меня на новый выпуск. Вы тоже чувствуете, что грядёт? 😉
Начну с того, что в последнее время я подсел на всё, что связано с быстрым обучением. Слушаю, смотрю, читаю. Сначала я не понимал, кто меня клюнул. Потом дошло…
Дело в том, что прошлой ночью на моих часах был январь. А сегодня утром я обнаружил декабрь. Именно с такой скоростью прошёл мой год петуха. Клюнул так, что я галопом пробежался по календарю, не считая месяцы.
Скорее всего, вы чувствуете то же самое.
Много впечатлений. Много новых мест. Кстати, о них интересно пишет моя Инночка у себя на блоге. Заходите, если любите яркие впечатления .
В общем, есть, что вспомнить. Только почему так быстро?
Отсюда тяга к быстрым результатам. Столько интересного. Всё хочется. Потенциал есть. Ноги наготове. Осталось понять, что с этим делать.
Хорошая новость
Начну с плохой. Слышали про «правило 10 000 часов» ? Малкольм Гладуэлл выяснил — чтобы стать мастером в любом деле нужно 10 000 часов практики.
Это примерно 5 лет жизни, если заниматься по 6 часов в день.
Я относился к этому спокойно. Пока не узнал про Джоша Кауфмана и его «правиле 20 часов» . По его словам, Малкольм говорит чушь. И на всё про всё хватит 20 часов. Это хорошая новость.
Нехилый скачок в 500 раз. Поищите его выступление в YouTube. Интересно рассказывает.
Согласитесь, второй подход мотивирует больше. И дело не в потраченных часах. А в качестве.
Если вкратце — Джош предлагает концентрироваться только на одном навыке. Вот главная идея, которой я придерживаюсь в жизни, и в уроках для блога.
Например, After Effects.
Новичок шарахается при первом её запуске. Уроки в стиле «After Effects от А до Я» вызывают диарею. Потому что трудно эмоционально. Вас тупо съедает объём. Даже, если у вас есть лишние 10 000 часов.
Вот почему 5 месяцев назад я решил серьёзно взяться за After Effects. Чтобы с каждым уроком вы получали новый полезный навык. Чтобы вы сразу видели крутые мини-результаты. Чтобы вы смотрели на программу как на вкусный пирог. Который вы съедите по кусочкам.
В итоге я разработал систему изучения After Effects из 5 уровней. Первые три уже вышли:
- мини-курс «After Effects для новичка»
- курс «Быстрая анимация в After Effects»
- тренинг «Потрясающая анимация в After Effects»
Про четвёртый и пятый я как-нибудь расскажу. Всему своё время.
Главное, что в каждом из них вы получаете сразу несколько ценных навыков. Вы перестаёте бояться — потому что сразу видите результат. Вы перестаёте гоняться за всем подряд — потому что умеете извлекать максимум из минимума.
Чувствуете, как After Effects начинает походить на вкусный пирог?
Смаковать по кусочкам всегда приятней, чем глотать целиком. Если только это не фирменная шарлотка моей Инночки:
Поверьте, лучше мне не ставить чайник. Пирог исчезнет как год петуха. Чудо, что вообще успели сфоткать.
Короче. Я хочу, чтобы вы сегодня перестали сомневаться и начали правильно осваивать After Effects. Возьмите один навык. Например, анимация в AE. Поделите её на мини-навыки и тренируйте 45 минут в день.
Вот вам и 20 часов Кауфмана всего за 1 месяц.
Кстати, я тут посчитал — в тренинге по продвинутой анимации получилось больше 80 уроков общей продолжительностью 4 часа 30 минут.
Представьте, если вы будете смотреть эти уроки хотя бы 40 минут в день – то пройдёте тренинг всего за 7 дней. Это даже не один навык. Вы получаете сразу десятки ценных навыков работы в After Effects и не только.
Да я круче Кауфмана 😉
В общем, такие пироги. Хотел подбодрить вас перед просмотром нового урока. Надеюсь, в вас что-то щёлкнуло, и вы стали чуть уверенней. Урок короткий. Всего 7 минут. Приятного просмотра.
Напишите ниже в комментариях, как вам идея выпуска? Расскажите, используете ли вы After Effects или только планируете.
P.S. Как вам идея?
Как вам идея, чтобы до нового года я провёл вебинар на тему быстрого изучения After Effects? Одно дело смотреть уроки, другое – пообщаться онлайн и задать вопросы.
Если вам нравится эта идея, добавьте к своему комментарию — «Нужен вебинар по After Effects». Если будет много желающих, я подумаю, когда его лучше провести.
Читайте также: