Разработка фирменной анимации загрузки в 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-файл, который можно запускать в любом месте, где вам нужен анимированный загрузочный элемент.

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

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

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

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

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

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

Вы все сделали

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

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

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

Подробнее:

Похожие

Как создать свой блог | Здесь растут юные информатики
сначала необходимо создать электронный ящик , которая заканчивалась
Создание анимированных GIF-файлов из After Effects Comps
... всевозможные варианты для матовой живописи, ротоскопирования и т. Д., Но это темы для другого урока. В этом случае просто откройте видео, как любой другой файл в Photoshop. Это займет немного больше времени, чем обычно, чтобы открыть, но как только вы это сделаете, у вас будет дополнительная палитра «временной шкалы» вдоль нижней части, которую вы можете использовать для просмотра файла.
Джош Миллер / CNET Учебный год быстро приближается, а значит, пришло время покупать школьные принадлежност...
Джош Миллер / CNET Учебный год быстро приближается, а значит, пришло время покупать школьные принадлежности. Если Microsoft Office есть в вашем списке, пока не покупайте его: есть шанс, что вы можете получить его бесплатно, благодаря Microsoft. Ранее в этом году Microsoft
Как и зачем использовать приватный просмотр в iOS
... просмотра в iOS 7. Приведенные ниже инструкции по-прежнему применяются к iOS 5 и 6. Читатель недавно обратился за помощью к своему iPad: навигационные панели Safari стали черными, и читатель не знал, почему или как это исправить. Короткий ответ заключается в том, что читатель случайно включил приватный просмотр в Safari, но это заставило нас задуматься о том, что, возможно, более подробный взгляд на эту полезную, но малоизвестную функцию iOS был в порядке. Что такое
Как создать блог с Hugo
Hugo - это такой генератор статических сайтов. Статические сайты - это сайты состоящие из набора фиксированных страниц и не генерируются из шаблонов и запросов к базе данных при каждой загрузке. Это с одной стороны менее удобно потому что нет возможности например опубликовать то автоматически установив время публикации, а с другой - менее требовательно к ресурсам, и лучше с точки зрения компьютерной безопасности. Кроме того, wordpress.com со своими обновлениями интерфейса
Чему вы можете научиться из Википедии?
Многие из нас время от времени проверяют Википедию для быстрой информации. Но для надежного интеллекта, необходимого для ведения бизнеса, отраслевые конференции неоценимы. Datto проводит свое первое мероприятие, и читателям MSPmentor предоставляется скидка. Проверьте детали здесь. «Википедия - лучшая вещь в мире. Любой человек в мире может написать что угодно на
Конвертер AVI в GIF | Как конвертировать AVI видео в GIF анимацию бесплатно
... всего за три шага. Он поддерживает практически все популярные форматы видео, включая AVI, MP4, FLV, MKV, RMVB, MOV и т. Д. Если у вас длинное видео, его можно обрезать и преобразовать сегмент видео в GIF. И вы можете установить ширину и высоту выходного GIF, чтобы получить правильное изображение и установить частоту кадров, чтобы изменить скорость анимации GIF. Одним из основных моментов является то, что он позволяет объединять различные видеоклипы в GIF. Это действительно профессиональный
Вы можете выиграть корабль T6 с литейным заводом!
Пришло время проверить свои навыки и построить свою лучшую миссию - пришло время принять участие в Foundry Challenge! The Foundry - это система Star Trek Online для создания собственных миссий для других Капитанов, и мы объединяемся с
WhatsApp Lockout: есть несколько альтернатив для пользователей iPhone 3G
Поставщик услуги WhatsApp имеет шило на шее: С несколько дней пользователи старых версий приложения для iPhone больше не могут пользоваться сервисом. Владелец первого айфонов или из iPhone 3G не может
Как создать анимированный GIF-баннер в Photoshop
Анимации являются важным инструментом в веб-дизайне, особенно в разработке рекламных материалов и баннеров. Движущиеся изображения привлекают больше внимания посетителя, чем статические, даже если они имеют яркие цвета или находятся в стратегических позициях. Когда возникает необходимость, многие цепляются за первый вариант, который приходит на ум: Flash. Но меньшинство знает, как использовать программу для создания анимаций и их экспорта, используя веб-сайты и программное обеспечение,
Адаптивный сайт
В настоящее время большая часть трафика поступает с мобильных устройств. Впервые в октябре 2016 года количество посещений с мобильных устройств превысило трафик компьютеров и ноутбуков. Это очень важная причина, почему мы должны убедиться, что наш сайт отображается правильно на всех устройствах. Ответом на это является отзывчивый сайт. Адаптивная страница - это короткая страница, которая адаптируется к разрешению устройства, на котором она отображается. Техническая,

Комментарии

Если вы начинаете блог в Blogspot, а затем создаете что-то ценное для своей аудитории, что вы собираетесь делать, если хотите монетизировать свой сайт или начать продавать товары или услуги?
Если вы начинаете блог в Blogspot, а затем создаете что-то ценное для своей аудитории, что вы собираетесь делать, если хотите монетизировать свой сайт или начать продавать товары или услуги? Отсутствие поддержки и руководства С любой бесплатной платформой или услугой вы, скорее всего, будете ограничены в количестве услуг или поддержки, которые вы получаете. То же самое относится и к Blogspot. Да, в Интернете есть учебники и руководства, но связаться с кем-то, кто
Вы устали от темы по умолчанию для iOS и поиска, можете ли вы сделать ваш iPhone или iPad похожим на Windows Phone?
Вы устали от темы по умолчанию для iOS и поиска, можете ли вы сделать ваш iPhone или iPad похожим на Windows Phone? Тогда вы находитесь в правильном месте, потому что здесь вы получите определенное решение. Вы получите список Top 5 лучших тем Windows для приложения Dreamboard для iPhone (iPhone / iPad / iPod touch). Да, пользовательский интерфейс iOS / iOS 7 в разы лучше, чем у Windows Phone, но из-за сложной человеческой натуры мы не можем долго придерживаться определенной
В эпоху все большего числа пользователей, использующих плагины, позволяющие блокировать рекламу, становится ли реклама в Интернете еще более значимой в эпоху Adblock?
В эпоху все большего числа пользователей, использующих плагины, позволяющие блокировать рекламу, становится ли реклама в Интернете еще более значимой в эпоху Adblock? Когда реклама в интернете окупается и когда выбрасывать деньги? Так кто же покупает рекламу в интернете и почему? Интернет-реклама и Adblock - как это согласовать? На написание этой записи меня вдохновило множество комментариев, появившихся на сайте Wykop (точно
И есть ли еще претенденты, чтобы добавить в список, кроме AOL , бахрома, Google Microsoft Kinect, ooVoo , Raketu , Skype , а также Танго ?
В эпоху все большего числа пользователей, использующих плагины, позволяющие блокировать рекламу, становится ли реклама в Интернете еще более значимой в эпоху Adblock? Когда реклама в интернете окупается и когда выбрасывать деньги? Так кто же покупает рекламу в интернете и почему? Интернет-реклама и Adblock - как это согласовать? На написание этой записи меня вдохновило множество комментариев, появившихся на сайте Wykop (точно
«Сколько категорий данных вы сохраняете, хранит ли Facebook, по категориям, которые вы собираете?
«Сколько категорий данных вы сохраняете, хранит ли Facebook, по категориям, которые вы собираете?» спросила она. "Сколько? Все это? Все, на что мы нажимаем? Это где-то в хранилище?" Цукерберг сказал, что Facebook хранит данные, но использовал нехватку знаний Фишера, чтобы избежать реального ответа на вопрос. Позже Фишер отметил, что «мы все знаем», что размер пользователя Facebook - 2,2 миллиарда - «больше, чем население большинства стран». Ни в одной стране нет такого
Какую информацию вы считаете самой сильной (например, информацию о продукте, историю компании, местную информацию)?
Какую информацию вы считаете самой сильной (например, информацию о продукте, историю компании, местную информацию)? Какую информацию вы считаете своей самой слабой? Какие изменения в вашем бизнесе вы хотите внести в ближайшие месяцы и годы (например, увеличить команду, консолидировать услуги, добавить места)? Если вы не можете ответить на эти 6 вопросов, то вы не готовы тратить время и деньги на новый веб-сайт для вашего бизнеса. Если вы все равно
Вывод: хотите ли вы использовать свое умное цветное освещение с Ambilight или с музыкальным сопровождением?
Вывод: хотите ли вы использовать свое умное цветное освещение с Ambilight или с музыкальным сопровождением? Тогда Philips Hue - лучший вариант. Посмотреть продукты из этой статьи
Например, существуют ли веб-сайты, к которым ваши сотрудники должны иметь доступ, чтобы выполнять свою работу и помогать вашему бизнесу расти?
Например, существуют ли веб-сайты, к которым ваши сотрудники должны иметь доступ, чтобы выполнять свою работу и помогать вашему бизнесу расти? В этих случаях большинство приложений позволяют создавать группы пользователей и выбирать разные сайты для блокировки в разное время. Блокировка разрушительных сайтов и создание настраиваемых разрешений - это один из способов, с помощью которого программное обеспечение для интернет-бизнеса может повысить вашу производительность. Также рассмотрите
Итак, вы хотите сделать GIF из видео AVI и применить его на своем сайте?
Итак, вы хотите сделать GIF из видео AVI и применить его на своем сайте? Вы хотите создать фантастические GIF-файлы для совместного использования с другими? Если вы хотите, вы можете следить за этим постом, чтобы узнать, как конвертировать AVI в изображение GIF с помощью лучшего бесплатного конвертера видео в GIF. Рекомендую: лучший конвертер AVI в GIF VideoSolo Бесплатный конвертер видео в GIF это бесплатная
Чтобы уточнить, вы хотите показать фотографии в галерее?
Чтобы уточнить, вы хотите показать фотографии в галерее? Хотите добавить фотографии в статьи? Хотите ли вы дать пользователям возможность загружать ваши фотографии? Эти вопросы необходимо решить, прежде чем начать поиск. Для поиска фотогалереи я решил использовать меню категорий слева. Я нажал: Фото и изображения, сначала, затем в результирующем списке опций, которые я выбрал: Фотогалерея (которая имеет 83 результата). В этом случае мне нужна опция галереи, которая позволит мне
Общая информация: Сколько времени вы можете использовать без перерыва с лазерным и светодиодным проектором Casio?
Общая информация: Сколько времени вы можете использовать без перерыва с лазерным и светодиодным проектором Casio? Интересный факт: году 52 недели. Если в каждую из этих недель проектор Casio XJ-V1 будет работать 8 часов в день - КАЖДЫЙ ДЕНЬ 5 дней, то есть 261 день в году ... Это даст вам 2088 часов в год. Таким образом, вы можете использовать его около 10 лет.

Если вы начинаете блог в Blogspot, а затем создаете что-то ценное для своей аудитории, что вы собираетесь делать, если хотите монетизировать свой сайт или начать продавать товары или услуги?
Вы устали от темы по умолчанию для iOS и поиска, можете ли вы сделать ваш iPhone или iPad похожим на Windows Phone?
В эпоху все большего числа пользователей, использующих плагины, позволяющие блокировать рекламу, становится ли реклама в Интернете еще более значимой в эпоху Adblock?
Когда реклама в интернете окупается и когда выбрасывать деньги?
Так кто же покупает рекламу в интернете и почему?
Интернет-реклама и Adblock - как это согласовать?
Какую информацию вы считаете самой сильной (например, информацию о продукте, историю компании, местную информацию)?
Какую информацию вы считаете своей самой слабой?
Какие изменения в вашем бизнесе вы хотите внести в ближайшие месяцы и годы (например, увеличить команду, консолидировать услуги, добавить места)?
Вывод: хотите ли вы использовать свое умное цветное освещение с Ambilight или с музыкальным сопровождением?