Разработка фирменной анимации загрузки в After Effects

1. 01. Создать новую последовательность
2. 02. Разберитесь с вашими рабочими местами
3. 03. Сделай несколько фигур
4. 04. Добавить цвет
5. 06. Используйте опорные точки
6. 07. Шататься по времени
7. 08. Добавить больше цветов
8. 09. Сделайте первый предварительный просмотр
9. 10. Создайте ключевой кадр
10. 11. Сделайте еще один ключевой кадр
11. 12. Сделайте больше ключевых кадров
12. 13. Предварительный просмотр
13. 14. Отрегулируйте ослабление
14. 15. Добавить логотип
15. 16. Предварительный просмотр и экспорт
16. 17. Зайди в Фотошоп
17. 18. Проверьте, все ли хорошо
18. 19. Экспортируйте свой GIF
19. 20. Вы все сделали!

Хороший визуальный дизайн становится все проще и проще. Становится все труднее сказать, у кого есть настоящие дизайнерские решения, а у кого просто есть доступ к действительно хорошему шаблоны сайтов или наборы пользовательского интерфейса. Это означает, что для создания действенного Пользовательский опыт , вам нужно превзойти то, что люди ожидают.

Некоторые из самых запоминающихся штрихов - маленькие. Подумайте о знаменитой «пятерке обезьян», которая появляется, когда вы нажимаете «Отправить» в своей кампании. Вместо общего сообщения об успехе, как вы могли ожидать, они вырыли немного глубже и внесли свой бренд в опыт. Мы не будем анимировать здесь какие-нибудь обезьяньи лапы, но мы сделаем красочную анимацию загрузки, которую легко настроить с помощью собственных фирменных цветов и логотипа. Вы можете увидеть пример InVision ниже:

Вот тот, который мы сделали ранее

Мы будем использовать After Effects для создания последовательности анимации загрузки, а затем перенести наш экспортированный видеофайл в Photoshop и превратить его в легкий GIF-файл, который можно запускать в любом месте, где вам нужен анимированный загрузочный элемент.

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

01. Создать новую последовательность

Создайте новую последовательность, установив ширину и высоту в 120 пикселей

Откройте After Effects и нажмите cmd + N, чтобы создать новую последовательность. Поскольку наше видео будет квадратным вместо стандартного соотношения сторон 16: 9, измените ширину и высоту на 120px в настройках композиции и нажмите кнопку «ОК». Рекомендованный конечный результат нашего GIF будет 60px, но мы также хотим учитывать экраны Retina.

02. Разберитесь с вашими рабочими местами

Установите для рабочей области значение «Стандарт», чтобы мы все работали над одним макетом.

Прежде чем мы продолжим, давайте удостоверимся, что наши рабочие пространства After Effects одинаковы. В верхнем меню выберите « Окно»> «Рабочая область»> «Стандарт» . Таким образом, когда я говорю «Нажмите на эту вещь в правом нижнем углу экрана», она фактически будет в правом нижнем углу экрана.

03. Сделай несколько фигур

Нарисуйте несколько фигур, чтобы сформировать основу анимации

Теперь давайте создадим несколько квадратных фигур, которые станут нашими анимированными цветными блоками. Нажмите на свою последовательность (черный квадрат в середине экрана), нажмите Q , затем Shift + щелчок и перетащите квадрат на экран так, чтобы края выходили за границы композиции.

Хорошей практикой является идеальное центрирование фигуры на экране. На панели «Выравнивание» в правом нижнем углу нажмите «Горизонтальное выравнивание по центру» и «Вертикальное выравнивание по центру».

04. Добавить цвет

Отрегулируйте цвет заливки вашей фигуры

Пока ваша форма по-прежнему выбрана, выберите параметр «Цвет заливки» в верхней части экрана и введите один из основных цветов бренда в виде шестнадцатеричного или RGB-значения. Вы также можете использовать инструмент «Пипетка» для выборки цветов из любого места на экране, включая цвета вне окна After Effects, что полезно.

Экономьте время, просто дублируя ваши слои

Внизу экрана вы увидите временную шкалу с одним слоем под названием «Shape Layer 1». Выберите его, щелкнув по имени или синей полосе на временной шкале, и нажмите ctrl / cmd + D четыре раза, чтобы продублировать его. У вас должно получиться пять одинаковых слоев на вашей временной шкале. Они будут называться Shape Layer 1, 2, 3, 4 и 5.

06. Используйте опорные точки

Измените расположение опорных точек на каждой из ваших фигур

Каждая фигура будет анимироваться с другой стороны экрана. Чтобы сделать это проще, мы изменим расположение наших опорных точек заранее. Выберите Shape Layer 2 и нажмите Y, чтобы вызвать инструмент «Опорная точка». Затем нажмите на точку привязки (она выглядит как перекрестие где-то внутри вашей фигуры) и перетащите ее к нижнему краю вашего квадрата. Повторите для слоев 3-5, поместив каждую опорную точку на другой край, чем последний. Вам не нужно ничего делать с Shape Layer 1.

07. Шататься по времени

Поменяйте местами слои, чтобы они анимировались последовательно

Теперь пришло время поменять время наших фигур на временной шкале. Нажмите V, чтобы переключиться на инструмент выделения, и в сдвиге временной шкалы + щелкните синие полосы для слоев 3-5 и перетащите их вправо, с интервалом в одну секунду. Они должны начинаться с отметок 1, 2 и 3 секунды на вашей временной шкале. Если ваша временная шкала слишком уменьшена, удерживайте нажатой клавишу Alt и прокрутите вниз - это действие будет увеличивать и уменьшать масштаб вашей временной шкалы.

08. Добавить больше цветов

Измените цвета заливки других слоев в соответствии с палитрой вашего бренда.

Отдельно выберите фигуры 2-4 и измените их цвет заливки, как вы это делали в шаге 4. Вы можете перетащить свою точку воспроизведения (вертикальную красную линию прогресса) на форму, которую вы редактируете, чтобы увидеть, что ваши изменения вступят в силу. Мы оставим Shape Layers 1 и 5 одного цвета, потому что мы создадим цикл, который начинается и заканчивается в одном цвете. Если это не имеет смысла прямо сейчас, не волнуйтесь - так и будет.

09. Сделайте первый предварительный просмотр

Нажмите пробел, чтобы просмотреть

Пришло время предварительно просмотреть вашу работу. Нажмите пробел и посмотрите, как цвета меняются на экране. Хит пробел снова, чтобы остановить его (или Esc, если это не работает).

10. Создайте ключевой кадр

Пришло время создать свой первый ключевой кадр!

Нажмите и перетащите вашу точку воспроизведения обратно в начало вашей временной шкалы. Выберите Shape Layer 2, затем нажмите S на клавиатуре, чтобы вызвать параметры масштаба для этой фигуры. Теперь щелкните значок секундомера рядом с «Масштаб», отключите значок ссылки рядом с процентами шкалы и перетащите второе значение до 0%. Маленький бриллиант будет отображаться на вашей временной шкале в текущем местоположении вашей головки воспроизведения. Поздравляем, вы только что создали ключевой кадр!

11. Сделайте еще один ключевой кадр

Что скажем, давайте добавим еще один ключевой кадр

Перетащите точку воспроизведения до 1 секунды и установите значение вашей фигуры обратно на 100 процентов. Еще один ключевой кадр должен появиться на вашей временной шкале у указателя воспроизведения. Перетащите точку воспроизведения обратно в начало временной шкалы и нажмите пробел, чтобы просмотреть анимацию. Вы должны увидеть масштаб формы и накрыть Shape Layer 1.

12. Сделайте больше ключевых кадров

Ключевые кадры со всех сторон!

Повторите эти шаги снова на Слоях Формы 3-5, каждый раз начиная анимацию в начале синей полосы слоя, которую мы переместили на 1 секунду раньше. Когда вы закончите, первый ключевой кадр каждого слоя должен совпадать с последним ключевым кадром слоя под ним.

13. Предварительный просмотр

Предварительный просмотр и увидеть все вместе

Когда вы закончите добавлять свои ключевые кадры, просмотрите вашу работу. Вы должны увидеть различные формы, скользящие друг над другом под разными углами. Если это так, переместите свою игровую головку на 4 секунды и нажмите N. Это отметит конец вашей анимации и зациклит ваш предварительный просмотр, когда вы снова нажмете пробел. Если Shape Layer 1 и Shape Layer 5 имеют одинаковый цвет, он должен образовать бесшовную петлю.

14. Отрегулируйте ослабление

Отрегулируйте частоту кадров, чтобы замедлить анимацию в конце

Пришло время добавить свой логотип, но не совсем. Анимация сейчас выглядит немного линейно (читай: скучно) - давайте оживим ее, изменив замедление. Удерживая клавишу Shift , выберите последний ключевой кадр каждого слоя и щелкните правой кнопкой мыши по одному из них. Выберите скорость ключевого кадра, затем установите входящую скорость на 100 процентов и оставьте измерения X и Y в покое. Нажмите OK и снова просмотрите. Вы заметите, что анимация замедляется в самом конце, создавая более динамичное ощущение.

15. Добавить логотип

Добавьте свой логотип поверх анимации

Теперь мы готовы добавить ваш логотип поверх анимации. На панели проекта в левой части экрана дважды щелкните пустую область под Comp 1 и импортируйте файл изображения (лучше всего, если это прозрачный формат изображения, например PNG или EPS). Затем перетащите его в начало график, что делает его самым верхним слоем. Вы можете снова нажать S, чтобы масштабировать логотип вверх или вниз, и снова использовать панель «Выровнять», чтобы поместить его в мертвую точку композиции.

16. Предварительный просмотр и экспорт

Предварительный просмотр анимации и ее экспорт

Когда вы будете довольны размером и расположением вашего логотипа, нажмите кнопку воспроизведения еще раз и убедитесь, что все выглядит хорошо. Если это произойдет, пришло время экспортировать ваше видео. Перейдите в « Файл»> «Экспорт»> «Добавить в очередь рендеринга» , затем установите для параметров рендеринга значение «Лучший», для модуля вывода - «Без потерь» и выберите место для размещения видеофайла, щелкнув имя файла в области «Вывод в».

17. Зайди в Фотошоп

Преобразование видео в GIF - простая работа в Photoshop

Теперь пришло время загрузить Photoshop и преобразовать наше видео в анимированный GIF. В Photoshop перейдите в « Файл»> «Импорт»> «Кадры видео в слои» и выберите свой видеофайл. В следующем приглашении у вас есть возможность настроить ряд параметров импорта для вашего видео. Однако, поскольку эта анимация очень короткая, мы просто нажмем ОК.

18. Проверьте, все ли хорошо

Предварительно просмотрите анимацию перед ее экспортом в формате GIF

Чтобы убедиться, что с вашим GIF-файлом в Photoshop ничто не выглядит странно, перейдите в « Окно»> «Временная шкала», чтобы открыть временную шкалу, и нажмите кнопку «Воспроизвести» в левом нижнем углу. Воспроизведение может выполняться не на 100% скорости, поэтому не беспокойтесь слишком сильно, если оно кажется медленным. Вы просто хотите убедиться, что все прошло хорошо, и что все выглядит гладко и плавно при цикле.

19. Экспортируйте свой GIF

Сохраните анимацию, выбрав «навсегда» в качестве настройки цикла

Чтобы сохранить свой GIF, нажмите Ctrl / CMD + Alt + Shift + S, чтобы открыть окно Сохранить для Web. В самом верху выберите GIF в качестве типа файла, а в раскрывающемся списке предустановок выберите GIF 128 No Dither. В нижней части окна вы можете отрегулировать размер изображения до 60px для окончательного вывода. Убедитесь, что настройки циклов анимации установлены на Forever, потому что, как и в случае с бриллиантами, GIF всегда (или, по крайней мере, так должно быть).

20. Вы все сделали!

Анимация завершена и готова к использованию

Поздравляем! Теперь у вас есть GIF ручной работы, который вы можете внедрить на своем веб-сайте или в приложении, использовать для добавления реалистичных состояний «загрузки» в свои прототипы или установить Dribble или Behance для просмотра всем миром.

Эта статья изначально появилась в сеть , ведущий мировой журнал для веб-дизайнеров и разработчиков. Подписывайся Вот ,

Подробнее:

Похожие

Комментарии