Как сделать анимацию логотипа
Новый формат: анимированный логотип
Встречайте новый формат в VistaCreate — анимированный логотип! В нашей коллекции — сотни шаблонов, которые уже сейчас можно редактировать и использовать для своего бизнеса.
Зачем нужен анимированный логотип?
Статичные логотипы — хороший выбор. Они отлично смотрятся на любой платформе. Но анимированные лого еще лучше, потому что с ними можно рассказать целую историю бренда, показать его преимущества или просто немного развлечь аудиторию. И даже при том, что анимация может немного замедлять загрузку страницы, это того стоит — все внимание пользователей будет вашим. Анимация всегда работает лучше статичного изображения, если ваша цель — выделиться среди других. Люди любят смотреть на что-то, что двигается — особенно, если это «что-то» двигается забавно.
Еще анимации очень гибкие. Например, если в вашем лого есть персонаж, то с помощью анимации можно сделать его милым, серьезным, смешным или буквально каким угодно. Можно менять его эмоции и внешний вид под каждое время года, праздник или маркетинг-кампанию.
Анимированные лого выглядят очень свежо и в духе времени. Можно даже сказать, что это новый тренд — но при этом почему-то далеко не у каждого бизнеса есть анимированные версии логотипов. Вы можете использовать эту возможность, чтобы стать заметнее на фоне других — пока это не сделали конкуренты. Если хотите сделать анимированный логотип для своего бренда за пару минут, вы знаете, что делать 😉
Создать анимированный логотип
Мы сделали небольшую подборку анимированных логотипов известных брендов, которые были разработаны сильными дизайнерами. Крутые, не правда ли? И главное, вы можете сделать что-то похожее и для своего бренда.
Анимированный логотип Google — работа MadVitas 
Анимированный логотип Twitter — работа YaroFlasher 
Анимированный логотип Instagram — работа Алекса Гу 
Анимированный логотип Snapchat — работа Александра Пяткова 
Анимированный логотип Behance — работа Ирины Драгунцевой (Лузгар)
Как сделать анимированный логотип
Анимированный логотип в VistaCreate можно сделать двумя способами. Первый — с помощью готовых шаблонов:
Второй способ — собрать свой анимированный логотип с нуля:
Где использовать анимированные логотипы
Везде! Конечно, не буквально — но везде, где платформа позволяет загружать изображения в формате GIF и использовать анимированные изображения профиля. Перечислим основные платформы, где можно использовать анимированные лого.
Веб-сайт
Это — ваш сайт, поэтому вы можете добавлять на него все, что хочется. Включая анимированные логотипы. Просто создайте гифку, которая показывает ваш бренд с лучшей стороны, и поставьте ее на шапку сайта. Вы можете адаптировать ее под разные события, которые происходят в вашей компании или в мире. Пробуйте в удовольствие!
Делайте разные версии своего логотипа под Рождество, День святого Патрика или Пасху. Заглядывайте в наш маркетинг-календарь, чтобы точно знать, когда именно будет следующий важный праздник. Не забудьте поздравить вашу целевую аудиторию с важными местными или международными событиями.
Делайте тематические лого под крупные обновления или по любым другим важным для вас поводам. Привлекайте внимание самым простым, но эффектным способом. Вот какую красоту, к примеру, сделал Fubiz:
В имейлах
В прошлом году наш имейл-маркетолог заменил статичный логотип VistaCreate в рассылках на анимированный. Когда получите наше письмо и откроете его на мобильном, оно будет выглядеть примерно так, как справа. Согласны, что оно отличается от большинства других? 😉
Потом нам стали писать с вопросом: «Как вы это сделали?!» И мы заметили, что другие бренды тоже сменили свой статичный логотип на анимированный.
Может, мы и не пионеры этого тренда, но очень рады видеть, что все больше компаний делают себе анимированные лого и используют их в рассылках.
И скучный почтовый ящик превращается в крутую вечеринку. 🎉Это супертрансформация!
В соцсетях
Узнайте, где можно использовать GIF-изображения или видео вместо статичной картинки на аватаре.
К примеру, в профиль на Facebook можно ставить зацикленные видео с 2015 года. Но до этой отличной возможностью до сих пор пользуются немногие бренды. Может, настал момент о ней вспомнить?
В брендинговых видео и рекламе
Делаете рекламу для продвижения своего бизнеса? В Instagram или Facebook? Сделайте анимированный логотип и используйте его в начале или конце вашей видеорекламы
Подытожим
Давайте анимировать все! Шутка. Но в каждой шутке есть доля правды. Анимации — потрясающий формат. Мы их любим и хотим, чтобы и вы полюбили. Более того, делать их в VistaCreate — проще простого. Вам даже не нужно разбираться в моушн-дизайне, чтобы ваши анимации выглядели круто и профессионально.
Есть множество способов использовать анимированные лого — чтобы поднять узнаваемость бренда или просто развлечь аудиторию. Пробуйте и находите тот вариант, который подойдет именно вам! До встречи!
Анимированный лого: сервисы для создания, подборка анимаций лого
Обновлено 20 января, 2020
Анимированные логотипы – это один из самых свежих трендов в дизайне, который приобрел наибольшую популярность в последние годы. Современные технологии позволяют создавать такие лого в различных форматах (CSS, GIF, SVG), а затем использовать их на веб-сайтах, в мобильных приложениях, видеороликах или других местах, где доступен динамический контент. В данной статье мы расскажем вам о том, какие преимущества имеют логотипы с анимацией и чем они выгодно отличаются от их статичных аналогов.
Также вы ознакомитесь с характеристиками и особенностями самых известных сервисов для создания анимированных лого и узнаете, как разработать их проще и быстрее всего. Наконец, в конце этой статьи от Логастер мы представили вашему вниманию подборку наиболее ярких и креативных лого с анимацией, которая поможет вам зарядиться вдохновением и наглядно продемонстрирует все плюсы этой символики. Итак, поехали!
Для чего нужна анимация лого? Что делает их такими популярными?
Анимированные логотипы неспроста стали такими востребованными, причиной этому выступила не только их оригинальность, но и реальная практическая польза для бренда и бизнеса. Итак, какими преимуществами обладает данная символика и почему всё больше компаний добавляют анимацию в свои лого?
Всё это обеспечивает лого с анимацией высокую эффективность и, вместе с ней, популярность среди бизнеса. Многие известные бренды переделывают свои логотипы из статичных в анимированные, а молодые стартапы создают их в таком виде с нуля.
Как создать анимированный логотип?
Итак, как же разработать профессиональный лого с анимацией? Сделать это вам всегда поможет сервис Логастер, а также ряд специализированных сайтов, особенности которых мы рассмотрим в следующем разделе нашей статьи. К ним относятся:
Biteable.com
Сервис позволяет каждому желающему создать анимированный логотип простым и последовательным способом. Регистрируйтесь на сайте, выбирайте пункт Create a New Video, затем нажимайте на кнопку Start From Scratch в верхнем правом углу экрана и перед вами откроется многочисленный список сцен-заготовок различных тематик.
Находите понравившийся сюжет, загружайте в него файл со своим статичным логотипом (кликнув по ссылке Upload Image) и наслаждайтесь полноценной анимацией своего лого. Biteable имеет и другие полезные функции, например, поможет разработать качественный видеоролик с символикой бренда для рекламы, презентации, слайд-шоу и т.д. Кроме того, здесь вам удастся создать анимированный лого в формате GIF-изображения, вырезав его из любого видео.
Renderforest.com
На этом сайте вы сможете легко и быстро создать логотип с анимацией из обычного статичного изображения за несколько минут при помощи встроенного редактора.
Пользователям доступны различные сюжеты и целый ряд оригинальных, тщательно прорисованных спецэффектов. Это космическая, красочная (брызги красок), огненная, неоновая, электрическая, стеклянная (осколки стекла), морская (океан днем/ночью) и другие темы. Вам нужно лишь выбрать подходящую тематику и загрузить файл со своим логотипом в редактор на сайте, чтобы в кратчайшие сроки получить профессиональную анимацию, в центре которой будет расположена ваша символика. Каждая тема снабжена демонстрационным видео, отдельно указана ее длительность (как правило, 10-15 секунд).
Tube Arsenal
Основная функция данного сервиса – это создание превью для видеороликов, но также его можно использовать для разработки анимированных логотипов. На сайте находится мощный 3D редактор, который поможет вам создать необходимую анимацию в три простых шага. Сначала перейдите в галерею и выберите понравившийся шаблон из обширного списка вариантов. Затем приступайте к его редактированию – функционал сервиса поможет всячески изменять изображение, текст, цвета, разместить на нем свой лого или другую символику. По завершению работ вам удастся мгновенно скачать получившуюся анимацию в популярных форматах и использовать ее в любых целях. Tube Arsenal не требует наличия каких-либо специальных навыков или покупки/установки ПО на компьютер.
Adobe Spark
Сервис позволяет разработать лого с анимацией прямо на сайте или в iOS приложении. Вам нужно создать новый проект (Spark Video project) во встроенном слайд-редакторе, а затем добавить на эти слайды желаемый медиа-контент. Функционал Adobe Spark принимает изображения, видео, иконки, текст и шрифты.
Можно найти подходящие материалы в базе сервиса или загрузить их со своего устройства. Далее выбирайте оптимальный шаблон из большого списка профессиональных тем с видеорядом и саундтреком (их также можно изменять). В итоге вы получите полноценный MP4-видеоролик со своей символикой, который потом можно легко и быстро превратить в анимированный логотип в GIF или других подходящих форматах.
Animaker
Fiverr
Популярная фриланс-биржа Fiverr обеспечит большой выбор профессиональных дизайнеров, которые охотно возьмутся за заказ по созданию анимированного логотипа. Здесь вам удастся найти наилучшего исполнителя: по уровню его мастерства (изучив примеры работ), специализации, приоритетным услугам, рейтингу, цене и другим важным критериям. Для этого достаточно зарегистрироваться на сайте, ввести запрос «logo animation» в поисковой строке на главной странице и приступить к выбору дизайнера из многочисленного списка. Так как Fiverr является международной биржой, то для общения с большинством местных фрилансеров вам понадобится знание английского языка хотя бы на базовом уровне.
Вот основные англоязычные сервисы, которые позволят легко и быстро получить профессиональный лого с анимацией в режиме онлайн.
Примеры анимированных лого
В этом разделе мы представляем вашему вниманию подборку оригинальных логотипов с анимацией — действующих компаний, брендов или стартапов. Надеемся, что осмотр этих примеров обеспечит вам заряд вдохновения и натолкнет на яркую идею о создании собственного анимированного лого.
Обновлено 20 января, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Как создать GIF-логотип в Photoshop: пошаговая инструкция
Обновлено 26 августа, 2020
Вспомните короткие GIF-анимации (гифки) с мемами или рекламой, которые привлекают внимание в соцсетях и на сайтах. Знаете, что их можно использовать не только для развлечения, но и для продвижения бренда? Как это сделать, расскажем в статье: вы научитесь превращать ваш лого в гифку при помощи Photoshop и эффективно использовать анимацию.
Зачем нужен логотип в GIF-формате
Анимированная айдентика быстрее привлекает внимание аудитории и позволяет передать больше информации, чем обычный лого. Расскажем подробнее о ее задачах.
Чтобы добиться этих целей, не обязательно создавать гифку из ярких, часто мигающих картинок. Перед началом работы советуем вдохновиться креативными примерами других брендов. Вот несколько базовых приемов:
Где использовать анимированный логотип
Уточним, что у вас должны быть две версии эмблемы: статичная и динамичная. Первая обязательна для любого бизнеса. Это универсальный вариант, который можно использовать на любых носителях, как печатных, так и онлайн. Динамичная версия подойдет только для цифровых каналов, в том числе:
Как создать GIF-логотип в Photoshop
В Photoshop есть все инструменты, чтобы легко и быстро создать гифку. Для этого стоит знать, что GIF-файлы состоят из нескольких изображений: они последовательно воспроизводятся, создавая иллюзию движения. Для создания анимации вам понадобятся:
Создайте логотип для GIF-анимации за пару минут!
Введите название бренда, выберите цвета — и наш сервис разработает десятки вариантов лого
Теперь вам останется только создать GIF-логотип в несколько простых шагов.
Шаг 1. Загрузите изображения. В Photoshop выберите «File» — «Scripts» — «Load Files into Stack». Нажмите «Browse», найдите в папке на компьютере нужные картинки и кликните «Open», а затем «Ok». Слои, которые появятся справа на панели «Layers», станут кадрами GIF.
Шаг 2. Перейдите в нужный режим. Кликните «Window» — «Timeline», чтобы открыть «Timeline Panel», и выберите «Create Frame Animation».
Шаг 3. Превратите картинки в анимацию. Перейдите в меню «Timeline Panel» и кликните «Make Frames From Layers». Под каждым созданным кадром укажите время отображения (это может быть 0,2 или 0,5 секунды: позже вы сможете отредактировать время).
Кликните «Play» внизу «Timeline Panel», чтобы посмотреть на результат. Если кадры воспроизводятся в обратном порядке, зайдите в меню и выберите «Reverse Frames».
Шаг 4. Установите цикличность. Вы можете настроить анимацию на цикл навсегда, на один раз или определенное количество раз. Для этого щелкните на меню повтора внизу «Timeline Panel».
Шаг 5. Настройте и сохраните GIF-формат. Выберите «File» — «Export» — «Save for Web (Legacy)». В выпавшем списке «Preset» выберите, как будут отображаться цвета в гифке: «No dither» («Не размывать») или «Dithered» («Размыть»). Цифра рядом с этими словами определяет количество и точность передачи цветов в GIF по сравнению с исходными файлами. Чем больше процент размывания, тем больше цветов и деталей будет в гифке, но тем больше станет и размер файла.
Если вы хотите изменить размер, зайдите в раздел меню «Image Size Options» и укажите нужные данные ширины и высоты.
Перед сохранением еще раз проверьте файл: нажмите «Preview» в окне «Export», чтобы просмотреть гифку в браузере. Если все в порядке, кликните «Save» и укажите папку, в которую нужно сохранить файл.
Что учесть при создании гифки
Хотите, чтобы анимированный лого эффективно работал на продвижение бизнеса? Учтите несколько важных нюансов:
Заключение
Логотип в GIF-формате — это дополнительный инструмент воздействия на целевую аудиторию. Используйте его на разных каналах продвижения, не бойтесь экспериментировать и создавать ситуативную айдентику под разные поводы.
Обновлено 26 августа, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Анимация логотипа After Effects по шагам
Тьюториал по After Effects
Вы можете создать подобную анимацию меньше чем за час при помощи одного единственного эффекта в After Effects. Это руководство основано на мини мастер-классе, который я проводил в рамках программы Bridge в Designer Fund. Я предполагаю, что вы никогда раньше не пользовались After Effects, а если пользовались — вы можете пропустить большинство шагов.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Шаг 1 — Illustrator
(Для этого тьюториала вам нужно установить размер холста 800×600 px)
Откройте или создайте вашу векторную форму в Illustrator. Пусть это будет Слой 1. Потом создайте новый слой: на нем вы будете рисовать пути, которые собираетесь анимировать. Рисуйте их при помощи инструмента “Перо” (P). Пусть путь начинается вне логотипа и проходит по одному или нескольким изгибам фигуры.
Создайте еще 5 (или сколько нужно) путей, которые будете анимировать.
Шаг 2 — Композиция в After Effects
Теперь вы готовы к запуску After Effects. Когда откроете программу, перед вами будет пустой проект. Если это не так, вам нужно будет создать новый проект при помощи клавиш Alt + Cmd + N.
Вы увидите нечто подобное:
Теперь вам нужно создать новую композицию (cmd + N).
Композиция — это то же самое, что и документ в Photoshop. У нее есть слои, и к этим слоям вы можете применять эффекты и маски. Отличие After Effects в том, что у вас появляется дополнительное измерение — время. Это означает, что любой примененный эффект может быть модифицирован во времени посредством ключевых кадров (keyframes).
На заметку: Ключевые кадры (keyframes) — это то, что позволяет делать изменяющиеся во времени эффекты. Например, переход от прозрачности в 0% (первый ключевой кадр) до прозрачности в 100% (второй ключевой кадр) за одну секунду (интервал между ключевыми кадрами) создаст эффект выцветания. Это основа работы After Effects.
Когда вы создаете новую композицию, в вашем распоряжении — множество опций и различных настроек. На этом этапе мы не будем долго выбирать правильные настройки, а предположим, что нашу анимацию мы будем использовать в качестве шота для Dribbble. Задайте размер 800×600 и длительность 5 секунд, а все остальное оставьте без изменений.
Шаг 3 — Переносим пути из Illustrator в After Effects
Теперь, когда вы находитесь в пустой композиции, создайте новый сплошной слой (Solid Layer: cmd + Y). Он добавится на временную шкалу. Не думайте пока о цвете слоя, его мы будем настраивать в другом месте.
Перейдите в Illustrator, выберите один из путей, перейдите обратно в After Effects, где уже выбран новый спрошной слой, и нажмите “вставить” (cmd + V). Если путь слишком большой, дважды кликните по нему, чтобы отмасштабировать (по мере вставки остальных слоев, нужно будет так же отмасштабировать и их). Вы увидите добавленный путь в окне предпросмотра. ( Еще один способ посмотреть маску — нажать M на сплошном слое временной шкалы)
Создавайте новый сплошной слой для каждого пути из Illustrator. Конечно, все пути можно вставить в один слой, но тогда они все будут анимироваться одновременно.
Также нужно создать сплошной слой для контура вашего логотипа — вы ведь захотите “залить” анимацию цветом, когда она будет готова.
Как создать анимированный логотип: пошаговая инструкция
Обновлено 23 марта, 2020
85% потребителей хотят получать от брендов больше видеоконтента, а 72% предпочитают узнавать о товаре или услуге с помощью видео. Простой и эффективный способ удовлетворить ожидания клиентов — создать анимированный логотип. Составили полную инструкцию по его разработке и применению.
Главное об анимированных логотипах: разновидности и способы использования
Анимированный лого — это динамическое изображение эмблемы. Короткий видеоролик помогает привлечь внимание целевой аудитории, отстроиться от конкурентов и эффективнее взаимодействовать с потребителями.
Для «оживления» логотипа подойдет 2D или 3D-формат. В 2D движение происходит в двухмерной среде, где элементы перемещаются только в стороны, вниз или вверх. 3D создает эффект объема. Расскажем о самых популярных приемах, которые можно использовать в каждом из этих форматов:
Где использовать анимированный логотип:
Примеры известных видеологотипов
Чаще всего динамичный брендинг выбирают компании, связанные с кинопроизводством. Возьмите на вооружение один из характерных приемов — изменения в цвете или характере мини-ролика в зависимости от продукта, который он сопровождает.
Dreamworks
Айдентика кинокомпании выполнена в ретро-стиле и вызывает теплые ностальгические чувства. Мы видим, как сидящий на Луне мальчик забрасывает удочку в озеро. Затем луна превращается в букву D, а из-за облаков появляется слово Dreamworks.
Sony Pictures
Ролик начинается с крупного плана факела, затем камера отъезжает — и мы узнаем образ девушки в тунике, стоящей на постаменте в облаках. Этот символ кинокомпании Columbia (принадлежит Sony Pictures) олицетворяет Америку.
Яркая презентация японской анимационной студии — летящие шары с мультипликационными персонажами. В конце ролика они сливаются в один шар с изображением кота Пьеро — героя одного из мультфильмов Toei.
Walt Disney
Замок Золушки на 3D-логотипе культовой кинокомпании впечатляет деталировкой: мы можем рассмотреть его архитектуру, а также облака, фейерверки и летающие звезды. Кроме визуального привлечения зрителей, эта айдентика подтверждает мощный технологический потенциал Disney.
Trump-Pence
Президентскую кампанию Дональда Трампа и его соратника Майка Пенса сопровождала динамическая эмблема с инициалами кандидатов на фоне американского флага. Переплетенные буквы Т и Р прыгали вместе с нижней красной полоской.
Paramount
Хотя символы кинокомпании не меняются больше сотни лет, в XXI веке эмблему сделали более современной. Мы видим изображение заснеженной вершины горы, к которой слетаются звезды. Цвета меняются в зависимости от времени года и суток, в которые «снимают» пейзаж.
Vanguard
Этот озорной логотип соответствует характеру анимационной студии. Разноцветные буквы названия, словно вылепленные из пластилина, выпрыгивают и выстраиваются в ряд перед зрителем.
Инструменты для создания анимированного лого
Чтобы оживить брендинг, не обязательно обращаться к дизайнеру: воспользуйтесь специализированными онлайн-ресурсами и профессиональными редакторами. Подобрали восемь сервисов с разным функционалом — выбирайте тот, который подходит именно вам.
Пять простых советов для создания анимированного лого
Заключение
Сделайте видео частью вашей маркетинговой стратегии: начните с анимированного логотипа как ключевого элемента брендинга. Подытожим три главные причины создать динамическую эмблему:
Обновлено 23 марта, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.