Анимация логотипа — это процесс придания движения или изменениям визуальных элементов в логотипе, чтобы сделать его более динамичным и привлекательным. Она может быть применена к различным частям логотипа, таким как текст, изображения, цвета и формы, и она может иметь разную степень сложности, начиная с простых анимаций, таких как моргающий текст или плавное изменение цвета, и заканчивая сложными анимациями, включающими движение объектов или интерактивные эффекты.
Анимация логотипа становится все более распространенной. Между смартфонами и общим развитием интернет-технологий логотипы теперь гораздо чаще встречаются в цифровых пространствах, и это открывает двери для визуальных эффектов, таких как анимация, которые невозможны с физическими продуктами. Конечно, растущая популярность анимации логотипов означает, что все больше и больше брендов будут нуждаться в ней, чтобы оставаться конкурентоспособными. Так что научиться анимировать логотип может быть ценным навыком, который выведет ваш логотип на новый уровень.
В то же время программное обеспечение для анимации также стало более повсеместным, оптимизированным и интуитивно понятным, чтобы поддерживать эту растущую базу пользователей. Таким образом, независимо от того, насколько технически сложная и сложная анимация логотипа может звучать, даже новички теперь могут создавать простые, но эффективные анимации.
Анимация логотипа в After Effects —
Шаг 1. Подготовьте файл с логотипом.
Фактически мы начнем наше руководство по анимации логотипа в Adobe Illustrator (или в аналогичном программном обеспечении для разработки логотипов, ). Это необходимо для того, чтобы убедиться, что наш файл логотипа настроен для анимации.
Хотя само программное обеспечение для анимации является растровым, исходные файлы логотипов должны быть в векторном формате . Это позволяет изменять их без ущерба для качества изображения (например, увеличение масштаба растрового логотипа приводит к пикселизации), и это будет полезно позже при работе со слоями-фигурами.
Убедитесь, что ваш логотип разделен на слои с помощью панели слоев.
Логотип также должен быть многослойным, а не сгруппированным в один объект. Это позволяет легко создавать более сложные анимации, анимируя отдельные части логотипа. Вы можете создавать новые слои, используя кнопку « Добавить новый слой» в нижней части панели «Слои», а затем копировать и вставлять в них части своего логотипа.
Наконец, поскольку анимация по своей природе цифровая, мы также работаем с цветами RGB . Если файл Illustrator установлен в CMYK, вы можете изменить это, выбрав свой логотип и навигации к Edit > Edit Colors > Преобразовать в RGB .
Когда вы будете готовы, экспортируйте свой логотип как полностью многослойный векторный файл. Поскольку типы файлов After Effects относятся к семейству программного обеспечения Adobe, я собираюсь сохранить созданный мной логотип в виде файла AI (Adobe Illustrator), но есть несколько различных типов векторных файлов на выбор, если вы используете другой программного обеспечения.
Шаг 2. Импортируйте логотип в After Effects. Анимация логотипа
Откройте After Effects. На первый взгляд интерфейс может показаться сложным, поэтому давайте разберемся по основам:
- Панель инструментов : здесь вы можете получить доступ к основным инструментам построения графики, таким как инструмент «Перо», инструмент «Текст» и т. Д.
- Панель проекта : здесь вы управляете и систематизируете медиафайлы для всего проекта.
- Окно композиции : это окно предварительного просмотра видео, в котором вы можете просмотреть анимацию для текущей композиции (часто называемой композицией), над которой вы работаете. Композиции — это, по сути, сцены, каждая из которых имеет свои отдельные временные шкалы анимации. Мы обсудим композиции более подробно в следующем разделе.
- Временная шкала : здесь вы будете создавать свою анимацию. Он состоит как из буквальной временной шкалы справа (где вы настроите события анимации для запуска на временном графике), так и из области компоновки слева (где вы будете накладывать и редактировать атрибуты ваших медиаресурсов).
- Панель управления : здесь вы можете получить доступ к различным вспомогательным функциям, таким как мультимедийная информация, параметры абзаца и выравнивания, а также готовые библиотеки анимации и визуальных эффектов, встроенные в After Effects.
Если вы не уверены в каком-либо инструменте или кнопке, при наведении на них указателя мыши вы получите описание.
Чтобы импортировать файл с логотипом, просто перетащите его на панель «Проект» или выберите « Файл» > « Импорт» > « Файл» . В следующем диалоговом окне выберите импорт мультимедиа как видеоматериал и объединенные слои .
Шаг 3. Настройте композицию. Анимация логотипа.
Композиция (comp) — это контейнер, который позволяет накладывать, редактировать и применять анимацию к медиафайлам. Более крупная продукция, например фильм, будет содержать несколько композиций, организованных на панели проекта. Таким образом, вы можете думать о композициях как о единой сцене в этом фильме, и каждая композиция будет иметь свою отдельную временную шкалу. В нашем случае для анимации логотипа, которая длится менее пяти секунд, требуется очень мало композиций.
Чтобы настроить композицию, перетащите медиафайлы в левую часть панели временной шкалы.
Начнем с простого фона. Щелкните правой кнопкой мыши на панели компоновки и выберите « Создать» > « Сплошной» . Поскольку мой логотип белый, я выбрал сплошной черный цвет, но вы можете выбрать любой цвет. В следующем окне назовите твердое тело (в моем случае «BG»), нажмите кнопку « Сделать размер компа» и выберите « ОК» . Теперь перетащите файл вашего логотипа с панели проекта на панель временной шкалы, и вы должны увидеть свой логотип предварительно просмотренным в окне композиции. Если нет, не забудьте переупорядочить слои, перетащив сплошной фон под файл логотипа.
Щелкните правой кнопкой мыши файл логотипа на панели компоновки и выберите « Создать» > « Преобразовать в многослойную композицию» . Это превратит ваш файл с логотипом в другую композицию (вы увидите, что значок изменился). Двойной щелчок по файлу логотипа теперь откроет новую вкладку и перенесет вас в эту новую композицию, содержащую все отдельные слои, которые вы настроили в Illustrator. Теперь вы можете видеть, как работают comps: они по сути похожи на вложенные папки.
Анимация логотипа
При желании вы можете преобразовать каждый из этих слоев в отдельные композиции, щелкнув правой кнопкой мыши и выбрав « Предварительная композиция» . Это даст этому слою отдельную временную шкалу анимации, вложенную в предыдущую композицию. А если вы хотите анимировать весь логотип сразу, вы должны использовать временную шкалу, связанную с основной композицией.
Разобравшись с этим, давайте разберемся, как эти временные шкалы работают для анимации.
Шаг 4. Анимация логотипа с использованием ключевых кадров
After Effects (и большинство программ для анимации) работает с помощью ключевых кадров. Ключевые кадры — это, по сути, маркеры, которые вы можете установить на временной шкале, чтобы определить, когда должны произойти начальные и конечные состояния для вашей анимации.
Например, давайте начнем с очень простой анимации: постепенного появления. К объекту прикреплены разные атрибуты, а атрибуты, изменяемые в течение заданного времени, по сути, и есть анимация. Чтобы увидеть эти атрибуты, щелкните значок «Развернуть» рядом с логотипом и последующим свойством «Преобразовать» .
Создайте ключевые кадры, щелкнув значок секундомера рядом со свойствами на панели временной шкалы.
Для затухающей анимации вы хотите работать с атрибутом, который измеряет видимость объекта: непрозрачность. Непрозрачность установлена на 100%, потому что по умолчанию логотип полностью виден.
Щелкните значок секундомера рядом с параметром «Непрозрачность», и вы увидите ромбик там, где установлен маркер курсора воспроизведения (тусклая синяя линия, пересекающая временную шкалу). Это ключевой кадр, в основном снимок текущего значения указанного атрибута. Переместите ключевой кадр, щелкнув и перетащив его на отметку 2 секунды на шкале времени. Перетащите ползунок назад к отметке 0 секунд, затем создайте еще один ключевой кадр и установите непрозрачность на 0%. Нажмите пробел, чтобы просмотреть анимацию в окне композиции.
After Effects
Вы увидите, что создали плавную анимацию нарастания, изменив непрозрачность с 0% до 100% в течение 2 секунд всего с двумя ключевыми кадрами. Именно так и выполняется вся анимация в After Effects. Вы можете создать стартовый ключевой кадр и конечный ключевой кадр на разных интервалах вдоль временной шкалы и After Effects автоматически вычисляет необходимые кадра переходов добраться из точки А в точку В (традиционно называют промежуточные кадры в анимации бизнесе).
Простая плавная анимация создается с использованием двух ключевых кадров для свойства Opacity.
Вы можете видеть, что есть ряд атрибутов, с которыми вы можете работать в свойстве Transform, которые мы здесь кратко объясним. Не стесняйтесь экспериментировать с ключевыми кадрами и изменяя каждый из них, чтобы почувствовать их возможности анимации:
- Позиция : этот атрибут описывает положение логотипа в пространстве X, Y на экране компоновки и позволяет анимировать линейное движение.
- Масштаб : этот атрибут описывает размер логотипа (в процентах от полного размера исходного файла) и позволяет создавать анимацию увеличения или уменьшения.
- Вращение : этот атрибут описывает ориентацию в градусах и позволяет создавать анимацию вращения.
Совет от профессионала :
Когда дело доходит до анимации логотипа, имеет смысл работать в обратном направлении (как мы делали с постепенным появлением), поскольку анимация должна заканчиваться на готовом, полном логотипе. Это означает, что вам нужно создать ключевые кадры, прежде чем что-либо менять, чтобы у вас были снимки значений атрибутов в их состоянии по умолчанию. Затем вы можете переместить эти ключевые кадры в желаемую конечную точку на временной шкале (сколько бы вы не хотели, чтобы анимация длилась) и создать новые ключевые кадры для изменений в начале временной шкалы.
Шаг 5. Анимация логотипа с помощью слоев-фигур.
Теперь давайте перейдем к более интересным техникам анимации с помощью слоев-фигур. Слои-фигуры — это объекты, которые содержат информацию о путях, такую как точки привязки и соединительные линии (аналогичные таковым в векторных программах), и манипулирование ими открывает двери для целого ряда возможностей анимации за пределами свойства Transform .
Как выбрать правильный цвет для Вашего логотипа?
Сначала мы собираемся преобразовать логотип в слой-фигуру. На панели многослойной композиции (слои, созданные на шаге 3) выберите все свои слои, щелкните правой кнопкой мыши и выберите « Создать» > « Создать фигуры из векторного слоя» . Вы увидите, что каждый слой дублирован звездой рядом с ним — это слой-фигура. Вложенное под слой-фигуру, вы найдете свойство Content в дополнение к свойству Transform . Справа от свойства Content вы также увидите кнопку « Добавить» , которая позволит вам выбрать еще больше атрибутов для анимации.
Слои-фигуры содержат кнопку «Добавить» (справа от свойства Contents), которая позволяет добавлять всевозможные анимируемые свойства, такие как обрезка контуров.
Масштабирование объекта в Adobe Illustrator
Trim Paths
Для своего логотипа я использовал довольно распространенную и полезную анимацию, используя свойство Trim Paths. Для этого я добавил «Обрезать контуры» с помощью кнопки « Добавить» к слоям формы для каждой буквы, установил для ключевого кадра атрибута «Конец» значение 0% в начале шкалы времени и 100% примерно через 1 секунду. Как видите, при этом контур букв кажется нарисованным невидимой рукой в реальном времени.
Использование свойства Trim Paths позволяет анимировать линии, чтобы они рисовались сами по себе в реальном времени.
Вдобавок я хотел добавить к фону акцентную анимацию. Поскольку я работаю в черно-белом цвете, я выбрал эффект зацикленного туннеля, напоминающий сумеречную зону. Для этого я использовал инструмент многоугольника на панели инструментов, чтобы нарисовать фигуру в центре моей композиции, создав новый слой-фигуру.
Затем я добавил свойство Repeater, центрировал позицию и увеличил количество копий. Это дублирует форму, создавая кажущийся бесконечным туннель. Регулировка масштаба увеличивает пространство между каждой копией, а изменение поворота ориентирует копии в разных направлениях для визуального интереса.
Наконец, чтобы оживить это, я сделал ключевой кадр смещения 0 в начале шкалы времени и позже установил отрицательное значение на шкале времени.
Используя слой с многоугольной формой и свойство Repeater, я смог создать анимируемый фон.
Вы, наверное, догадались, что существует множество вариантов слоев-фигур. Это правда: в Интернете есть полные онлайн-курсы, посвященные этому предмету, и вы должны уделять время экспериментам, практике и обучению.
Я также не могу сказать вам, какой стиль анимации подойдет для вашего логотипа или какие конкретные инструменты анимации вам понадобятся для достижения этого стиля. Тем не менее, я могу дать вам совет, как открыть это для себя. Поищите вдохновение у других анимированных логотипов, таких как ваши конкуренты, бренды, которыми вы восхищаетесь, и / или на таких сайтах, как Pinterest или Dribbble — точно так же, как вы это делали, когда изначально создавали логотип.
Вы обнаружите, что как только вы начнете анализировать их, используя свои новые знания о том, как анимировать логотип, многие из них основаны на простых манипуляциях с формами и преобразованиями (даже те, которые явно наложены на продвинутые стилизованные эффекты). Как только вы найдете несколько из них, которые вам понравятся, вы можете работать в After Effects в обратном направлении, чтобы попытаться реконструировать эти анимации для практики.
Шаг 6. Настройте время .
Давайте поговорим о времени , которое описывает темп кадров анимации на протяжении всей анимации. Вы можете увидеть визуальное представление времени, перейдя в редактор графиков . Для этого щелкните значок графика (помеченный как « Редактор графика», если навести на него курсор) в верхней части панели временной шкалы, и это изменит временную шкалу на линейный график.
Если вы щелкните один из атрибутов ключевого кадра, вы увидите прямую линию от одного ключевого кадра к другому. Прямо сейчас, поскольку мы только создавали ключевые кадры начальной и конечной точек, мы оставили After Effects для расчета времени. Не имея направления, After Effects равномерно перемещает каждый кадр анимации, в результате чего получается идеально прямая линия.
Редактор графиков показывает синхронизацию ключевых кадров, как показано на линейном графике.
Однако целенаправленное изменение времени — вот что придает анимации ощущение реализма. Например, в анимации прыгающего мяча мяч движется медленнее на высоте отскока и быстрее, когда он приближается к земле из-за импульса и силы тяжести. Другими словами, он не движется с одинаковой скоростью на протяжении всей анимации, и если бы это было так, он бы выделился как робот.
Инструменты Безье, расположенные в нижней части редактора графиков, позволяют регулировать кривизну линии графика.
Преобразовать ключевые кадры в автоматическую Безье
Редактор графиков позволяет вам настраивать время для вашей собственной анимации с помощью так называемых маркеров Безье для преобразования линии графика в кривую. В правом нижнем углу редактора графиков вы увидите несколько значков квадратных точек, прикрепленных к линиям — это инструменты Безье.
Щелкните один из ключевых кадров и наведите указатель мыши на инструменты Безье, пока не найдете тот, который помечен как « Преобразовать ключевые кадры в автоматическую Безье» . Когда вы нажмете на это, вы увидите, что на графике появится желтый маркер. Перетаскивание этого маркера приведет к изгибу линии, и это изменит время вашей анимации. Если кривая более выражена, кадры будут воспроизводиться быстрее, а где кривая более плавная, кадры будут воспроизводиться медленнее.
Более резкая кривая соответствует более быстрой синхронизации, а более плавная кривая соответствует более медленной синхронизации.
Чтобы по-настоящему понять нюансы настройки вашего собственного времени, требуется опыт анимации, и поэтому настройка кривых Безье вручную — более сложная тема. В этом руководстве для начинающих я рекомендую использовать инструмент Безье Easy Ease (который применяет автоматическую кривую к выбранному вами ключевому кадру) для всех временных интервалов анимации. Вы можете применить Easy Ease к ключевому кадру вне редактора диаграмм, выбрав ключевой кадр и щелкнув правой кнопкой мыши.
Шаг 7. Экспортируйте логотип.
Когда вы будете готовы экспортировать готовый анимированный логотип, выберите « Файл» > « Экспорт» > « Добавить в очередь Adobe Media Encoder» . After Effects по умолчанию экспортирует файл в формате mp4, что подходит для видео. Поскольку мы хотим создать файл изображения нашего логотипа, которым можно поделиться, мы будем экспортировать его как анимированный GIF. В окне Media Encoder щелкните стрелку рядом с выделенной синей строкой текста под словом «Формат» и выберите « Анимированный GIF» . Вы также можете установить папку назначения для вашего готового файла, щелкнув синий текст под словами «Выходной файл».
Чтобы экспортировать файл, перейдите в меню «Файл»> «Экспорт»> «Добавить в очередь Adobe Media Encoder» и выберите «Анимированный Gif» в раскрывающемся списке в столбце «Формат».
Дважды щелкните выделенный синий текст под предустановкой, чтобы открыть окно «Параметры экспорта». Есть несколько вариантов, на которые вы хотите обратить внимание, чтобы уменьшить размер файла: Качество (я выставил 20), Частота кадров (я установил 10, хотя для видео рекомендуется более высокая частота кадров (fps). ) и длительность, это синяя полоса под предварительным просмотром (я обрезал свой до 4 секунд). Выберите ОК, чтобы закрыть это окно.
Когда вы закончите, выберите зеленый значок «Воспроизвести» в правом верхнем углу Media Encoder, и ваш файл будет отображен в выбранную вами папку назначения. Вот и все: готовая анимация логотипа!
Оживите свой бренд с помощью анимация логотипа.
—
Анимация логотипа — это больше, чем просто популярная тенденция, за которой вынуждены следовать бренды. В анимации логотипа также есть неоспоримое волшебство, и это отличный способ создать момент визуального удовольствия для всех, кто взаимодействует с вашим брендом. И, к счастью, программное обеспечение для анимации эволюционировало так, что почти любой, независимо от навыков, может добавить немного этой магии в свой собственный логотип.
С учетом сказанного, хотя это руководство предназначено для того, чтобы начать с основ анимации логотипа, требуется немало проб и ошибок, практики и экспериментов, чтобы получить что-либо, выходящее за рамки базовой анимации. Если вам нужна действительно особенная анимация логотипа, профессиональный аниматор логотипа стоит своих вложений.
Оставить комментарий