Статьи по дизайну
В наши дни анимация логотипов становится все более распространенной. Между смартфонами и общим развитием интернет-технологий логотипы теперь гораздо чаще встречаются в цифровых пространствах, и это открывает двери для визуальных эффектов, таких как анимация, которые невозможны с физическими продуктами. Конечно, растущая популярность анимации логотипов означает, что все больше и больше брендов будут нуждаться в ней, чтобы оставаться конкурентоспособными. Так что научиться анимировать логотип может оказаться ценным навыком, который выведет ваш логотип на новый уровень.
Как анимировать логотип в After Effects за 7 шагов
—
- Подготовьте файл логотипа
- Импортируйте логотип в After Effects
- Настроить композицию
- Анимация с ключевыми кадрами
- Анимация со слоями-фигурами
- Настройте время анимации
- Экспорт анимированного логотипа
Шаг 1. Подготовьте файл логотипа
Фактически мы начнем наше руководство по анимации логотипа в Adobe Illustrator (или в аналогичном программном обеспечении для разработки логотипов, которым вы владеете). Это сделано для того, чтобы убедиться, что наш файл логотипа настроен для анимации.
Анимация логотипа в After Effects !
Хотя само программное обеспечение для анимации является растровым, исходные файлы логотипов должны быть в векторном формате. Это позволяет изменять их без ущерба для качества изображения (например, увеличение масштаба растрового логотипа приводит к пикселизации), и это будет полезно позже при работе со слоями-фигурами.
] Логотип также должен быть многослойным, а не сгруппированным в один объект. Это позволяет легко создавать более сложные анимации путем анимации отдельных частей логотипа. Вы можете создавать новые слои, используя кнопку Добавить новый слой на странице внизу панели «Слои», затем скопируйте и вставьте в них части своего логотипа.
Наконец, поскольку анимация носит цифровой характер, мы также работаем с цветами RGB. Если ваш файл Illustrator настроен на CMYK, вы можете изменить это, выбрав свой логотип и перейдя к Редактировать > Редактировать цвета > Конвертировать в RGB .
Когда вы будете готовы, экспортируйте свой логотип как полностью многослойный векторный файл. Поскольку типы файлов After Effects относятся к семейству программного обеспечения Adobe, я собираюсь сохранить созданный мной логотип как файл AI (Adobe Illustrator), но есть несколько различных типов векторных файлов на выбор, если вы используете другой программное обеспечение.
Шаг 2. Импортируйте логотип в After Effects
Откройте After Effects. На первый взгляд интерфейс может показаться сложным, поэтому давайте разберемся по основам:
Если вы не уверены в каком-либо инструменте или кнопке, наведя на них курсор мыши, вы увидите описание.
Чтобы импортировать файл логотипа, просто перетащите его на панель «Проект» или перейдите к Файл > Импортировать > Файл . В следующем диалоговом окне выберите импорт медиафайлов как Видеоряд и объединенные слои .
Контурная анимация логотипа в After Effects
Шаг 3. Настройте композицию
Композиция (comp) — это контейнер, который позволяет вам накладывать, редактировать и применять анимацию к медиафайлам. Более крупная продукция, например фильм, будет содержать несколько композиций, организованных на панели проекта. Таким образом, вы можете думать о композициях как о единой сцене в этом фильме, и каждая композиция будет иметь свою отдельную временную шкалу. В нашем случае для анимации логотипа, которая длится менее пяти секунд, требуется очень мало композиций.
Шаг 4. Анимация с использованием ключевых кадров
After Effects (и большинство программ для анимации) работают с помощью ключевых кадров. Ключевые кадры — это, по сути, маркеры, которые вы можете установить на временной шкале, чтобы определить, когда должны произойти начальные и конечные состояния вашей анимации.
Например, давайте начнем с очень простой анимации: постепенного появления. К объекту прикреплены различные атрибуты, а атрибуты, изменяемые в течение заданного периода времени, по сути, и есть анимация. Чтобы просмотреть эти атрибуты, щелкните значок развертывания рядом с логотипом и последующим свойством Transform .
Шаг 5. Анимируйте свой логотип с помощью слоев-фигур
Теперь давайте перейдем к более интересным техникам анимации с помощью слоев фигур. Слои-формы — это объекты, которые содержат информацию о путях, такую как точки привязки и соединительные линии (аналогичные тем, которые используются в векторных программах), и манипулирование ими открывает двери для целого ряда возможностей анимации, помимо свойства Transform .
Шаг 6. Настройте время анимации
Давайте поговорим о времени, которое описывает темп кадров анимации на протяжении всей анимации. Вы можете увидеть визуальное представление времени, перейдя в редактор графиков . Для этого щелкните значок графика (помеченный Редактор графиков если вы наведете на него курсор) в верхней части панели временной шкалы, и это превратит временную шкалу в линейный график.
Если вы щелкните один из атрибутов ключевого кадра, вы увидите прямую линию от одного ключевого кадра к другому. Прямо сейчас, поскольку мы создавали только начальные и конечные ключевые кадры, мы предоставили After Effects расчет времени. Без направления After Effects равномерно перемещает каждый кадр анимации, в результате чего получается идеально прямая линия.
Шаг 7. Экспортируйте анимированный логотип
Когда вы будете готовы экспортировать готовый анимированный логотип, перейдите в Файл > Экспорт > Добавить в очередь Adobe Media Encoder . After Effects по умолчанию экспортирует файл в формате mp4, что подходит для видео. Поскольку мы хотим создать файл изображения нашего логотипа, которым можно поделиться, мы будем экспортировать его как анимированный GIF. В окне Media Encoder щелкните стрелку рядом с выделенной синей строкой текста под словом «Формат» и выберите Анимированный GIF . Вы также можете установить папку назначения для вашего готового файла, щелкнув синий текст под словами «Выходной файл».
Оживите свой бренд с помощью анимации логотипа
—
Анимация логотипов — это больше, чем просто популярная тенденция, за которой вынуждены следовать бренды. В анимации логотипа также есть неоспоримое волшебство, и это отличный способ создать момент визуального удовольствия для всех, кто взаимодействует с вашим брендом. И, к счастью, программное обеспечение для анимации эволюционировало так, что почти любой, независимо от навыков, может добавить немного этой магии в свой собственный логотип.
С учетом сказанного, хотя это руководство предназначено для того, чтобы начать с основ анимации логотипа, требуется немало проб и ошибок, практики и экспериментов, чтобы получить что-либо, выходящее за рамки базовой анимации. Если вам нужна действительно особенная анимация логотипа, профессиональный аниматор логотипов стоит вложенных средств.
Источник: artforlife.ru
Как сделать анимированный логотип бесплатно
Логотип – уникальный графический или буквенный знак, являющийся гарантом добросовестности компании и подтверждением качества предлагаемой продукции и услуг. Эмблема является своеобразной визитной карточкой бренда, презентует и рекламирует его на рынке.
В современном бизнес пространстве значительное внимание уделяется фирменному стилю компании, а логотип – неотъемлемая его часть.
Виды логотипов
Сегодня принято подразделять логотипы на несколько самостоятельных видов. Далее подробнее про каждый из них.
Аббревиатура. Вариант достаточно сдержанный. В таком случае на эмблеме расположено только название компании, представленное из нескольких букв. При этом использование сокращённой формы наименования уже много лет пользуется популярностью. Примерами таких логотипов являются фирменные знаки РЖД, НТВ, МТС и многие другие.
Такое сокращение используется преимущественно брендами, имеющими длинное или состоящее из нескольких слов наименование.
Текстовый логотип . Этот вид лого отлично подходит для брендов с лаконичным и ёмким названием. В таком случае нет необходимости придумывать необычную запись. Здесь важно подобрать читабельный и узнаваемый шрифт. Также следует при выборе шрифтового стиля учитывать специфику работы бренда и главные преимущества реализуемой продукции или услуг. Примерами таких логотипов являются знаки компаний Google, Netflix, Кока-Кола и другие.
Графические логотипы . Они в свою очередь подразделяются на знаки, символы, логотипы-персонажи. При выборе изображений для логотипа необходимо соотносить их с рекламной политикой и стратегией продвижения. Кроме того, они должны отражать направление работы бренда.
Комбинированные логотипы . Логотипы такого вида содержат различные элементы перечисленных типов вместе.
Анимированный логотип . Он отличается современной, неординарной подачей. Кроме того, анимированная эмблема привлекает повышенное внимание и выглядит нетривиально.
Анимированный логотип
Анимированный логотип – трендовое направление, которое стало невероятно востребованным. Движущаяся эмблема демонстрирует максимум информации, завораживает и, как следствие, вызывает больший интерес. Анимированный логотип значительно повышает узнаваемость фирмы. Помимо этого, такое необычное дизайнерское решение делает компанию в глазах потенциальных клиентов более авторитетной и современной.
Как создать анимированный логотип бесплатно
Сделать анимированный логотип довольно просто. Для этого можно воспользоваться несколькими способами. Первый – обратиться к специалистам в области дизайна, которые сделают эмблему по вашим требованиям. Второй вариант – заняться разработкой самостоятельно при помощи специальных сервисов.
Для второго способа потребуется устройство с выходом в Интернет. До того, как решите приступить к конструированию, определитесь со стилем лого и цветовой гаммой – это позволит заметно сэкономить не только время, но и силы. После проработки идеи будущего логотипа можно приступать к непосредственной разработке.
Как анимировать логотип онлайн
Анимировать логотип онлайн можно на следующих сервисах:
Fastclip.ru – универсальная площадка с десятками простых шаблонов . Сайт особенно полезен для тех, кто не хочет осваивать инструменты самостоятельно и не имеет какой-либо конкретной задумки. Для работы не требуется осуществлять скачивание и установку программы. Кроме того, разработка предоставляется абсолютно бесплатно.
Biteable.com удобен из-за своей простоты и последовательности. Пользователь переходит на новый этап создания анимации после того, как полностью проработает предыдущий. Сервис содержит большое количество уникальных и качественных шаблонов. После выбора подходящего варианта можно приступать к его кастомизации: изменить цвет фона и элементов, шрифт и размер надписи, добавить изображения.
Renderforest.com . Как анимировать логотип здесь? Просто выберите те части статичного изображения, которые должны двигаться. Затем решите, каким именно будет стиль анимации.
Источник: dzen.ru
Анимированный логотип в Photoshop CS6
В этом уроке мы будем создавать логотип с эффектом анимации. Чтобы создать такой логотип нам потребуется Фотошоп версии CS6.
Откройте выбранное вами изображение с логотипом в Фотошоп, я выбрал такое. Обратите внимание, что фон, на котором расположен логотип, прозрачный — это важный момент в работе с 3D. Нет необходимости уменьшать размер изображения на данном этапе, мы сделаем это в конце урока, когда будем сохранять его в виде анимации.
Воспользуйтесь инструментом Crop Tool (C) (Рамка) и увеличьте размер изображения таким образом, чтобы со всех сторон надписи было больше свободного пространства. Для сохранения изменений, нажмите Enter.
Инструментом Rectangular Marquee Tool (M) (Прямоугольная область) выделите только текст envato. Затем добавьте к этому слою маску, нажав на значок Add Layer Mask (Добавить слой-маску) в нижней части панели слоев. В результате сам логотип исчезнет.
Переименуйте слой с текстом на Text, продублируйте Ctrl + J и назовите копию Leaf. Перейдите на маску слоя Leaf и инвертируйте цвета Ctrl + I, в результате текст и логотип будут находиться на разных слоях.
Выберите слой Leaf, перейдите в меню Layer > Layer Mask > Apply (Слой — Слой-маска — Применить) и примените маску к слою с изображением — это позволит нам удалить часть изображения, скрытую под маской.
Теперь перейдите в меню 3D > New 3D Extrusion From SelecteD Layer (3D — Новая 3D-экструзия из выделенного слоя). После этого у вас должны открыться все панели 3D. Если у вас что-то не получилось, то открыть данные панели вы можете, зайдя в меню Window > Workspace > 3D (Окно – Рабочая среда — 3D). Теперь слой Leaf должен преобразоваться в 3D объект.
Перейдите на панель 3D и выберите объект Leaf, который обозначен значком звезды. Далее перейдите на панель Properties (Свойства), измените значение параметра Extrusion Depth (Глубина экструзии) на 35 и отключите опции Catch Shadows (Захват тени) и Cast Shadows (Наложить тени).
Теперь нам нужно переместить объект Leaf в центр документа. Но для начала правильно разместите камеру. На панели 3D выберите слой Current View (Текущий вид), а на панели Properties (Свойства) в параметре View (Вид) выберите Top (Сверху).
Переместите объект Leaf в центр документа при помощи экранных рычагов управления 3D объектом. Центр обозначается пересечением красной (ось X) и синей (ось Y) линиями.
На данный момент мы видим наш рабочий холст сверху. На панели Properties (Свойства) выберите Default Camera (По умолчанию), чтобы камера вернулась в начальную позицию. Обратите внимание, что сам логотип находится в неправильном положении. Мы это сейчас исправим.
Для изменения положения логотипа мы будем использовать инструменты для редактирования камеры в верхней панели меню, в результате мы без особого труда сможем вернуть логотип в начальную позицию. Теперь нам нужно двигать саму камеру, а не объект, как мы делали в раннее.
Теперь мы приступим к анимации. Нажмите Create Video Timeline (Создать временную шкалу для видео) на панели Timeline (Временная шкала). Чтобы отобразить эту панель перейдите в меню Window > Timeline (Окно — Временная шкала).
Обратите внимание, все слои стали отражаться на временной шкале в виде отдельных видео-слоев. На данный момент у нас два видео-слоя.
Чтобы анимировать логотип, нам нужно перейти к его свойствам в временной шкале. Чтобы отобразить все свойства, которые могут быть анимированы, сделайте клик по маленькой стрелочке слева от названия видео-слоя. На данный момент нас интересует опция 3D Scene Position (Положение 3D сцены).
Нажмите на значок секундомера для включения анимации ключевых кадров. Это позволит нам добавить наш первый ключевой кадр в временную шкалу (обозначается желтым ромбиком).
Так как ключевой кадр анимации включен, то программа Фотошоп автоматически добавит ключевой кадр, когда будут внесены изменения в положение сцены (или вращение). Перед тем как перейти к вращению сцены, мы должны указать время продолжительности анимации. Для этого необходимо переместить индикатор текущего времени (обозначен синим слайдером) в другую точку на временной шкале.
Вернитесь на панель 3D, сделайте активным слой Scene (Сцена), а затем перейдите на панель Properties (Свойства). Нажмите на значок Coordinates (Координаты) и на оси Y измените значение угла на 360 градусов, что позволит вращать сцену вокруг оси Y на 360 градусов.
После проделанных действий на временной шкале должен быть добавлен ключевой кадр. При помощи ползунка текущего времени (обозначен голубым слайдером), передвигая его вперед и назад, вы можете просмотреть процесс движения анимации 3D объекта. Так как наш логотип расположен в центре, то он будет вращаться на месте.
Наша задача заключается в том, чтобы логотип постоянно вращался вокруг своей оси и все время показывал только свою переднюю часть. Для этого на панели слоев продублируйте слой Leaf. Обратите внимание, дублированный слой с логотипом появится в временной шкале.
Теперь передвиньте временной индикатор в то место, где логотип делает три четверти оборота вокруг своей оси.
Переместите курсор на начало видео-слоя копии логотипа. После того, как курсор изменится на значок в виде квадратной скобки с двумя стрелочками, переместите слой к красной линии. Данный видео-слой обрежется, а анимация будет начинаться после трех четвертей оборота.
Теперь очистим первую часть анимации, в которой наш объект делает одну четверть поворота. Для этого перейдите на видео-слой Leaf и переместите его конец к красной линии, смотрите изображение ниже.
Наконец, видео-слой Leaf copy сдвиньте к красной линии на временной шкале. Удостоверьтесь, что данная анимация непрерывна.
Прежде чем мы продолжим создание анимации, нам нужно указать программе Фотошоп, какие именно кадры мы хотим использовать. Передвигая временной индикатор, определите, в какой момент логотип совершит полный оборот. Теперь переместите ползунок к красной линии под временной шкалой к найденной отметке. В результате в анимации будут отражены только те кадры, которые мы указали.
Сохранение анимации
Работа с анимацией завершена, теперь нам нужно сохранить анимированный логотип в виде файла используя формат gif. Вот два способа. Первый — быстрое сохранение файла, но качество будет плохое. Второй — на сохранение уйдет больше времени, но файл gif получится высокого качества.
Теперь рассмотрим эти способы подробнее. Первый: зайдите в меню File > Save for Web (Файл — Сохранить для web и устройств). В данном способе сохранения пропускается период рендеринга и сохраняются кадры так, как они располагаются в анимации. Опираясь на изображение ниже, измените следующие настройки:
Вот результат сохранения, используя первый способ:
Суть второго способа заключается в рендеринге анимации. Это нужно для того чтобы улучшить качество при сохранении файла gif. Перейдите в меню File > Export > Render Video (Файл — Экспортировать — Просмотреть видео). Установите такие параметры: Photoshop Image Sequence (Последовательность изображений Фотошоп) и Ray Traced Final (Окончательная трассировка лучей).
Таким образом, логотип в виде анимации будет сохранен на отдельных кадров. Остальные настройки смотрите на изображении ниже.
После прохождения и сохранения рендеринга, мы можем открыть кадры и сохранить их в анимацию. Для этого перейдите в меню File > Open As (Файл — Открыть как) и укажите папку, в которую вы сохраняли кадры. Выберите первое изображение и активируйте опцию Image Sequence (Последовательность изображений) в нижней части окна. Нажмите кнопку Open (Открыть), затем должно отобразиться диалоговое окно, в котором нужно нажать ОК.
После проделанных действий сохраненные кадры появятся на временной шкале в виде новой анимации.
Для сохранения анимации в формате gif, нужно просто повторить действия которые мы выполняли раннее.
В результате нехитрых манипуляций у нас получился довольно стильный анимированный логотип.
Ссылка на источник урока.
Источник: pskurs.ru