Как оживить логотип

Как оживить логотип или простая анимация в Figma ⁠ ⁠

Всем привет! В этой статье я хочу рассказать о том, как сделать простую анимацию и оживить логотип в Figma. В Figma есть несколько способов сделать анимацию, но я остановлюсь на том, с которого начала сама. И расскажу на своем примере как это сделать.

Для начала нужно придумать логическую последовательность действий и разбить логотип на части. И хотя бы примерно представить конечный результат.

Далее создаем несколько одинаковых фреймов (в моем случае их 4) и помещаем в них элементы логотипа.

Как это выглядит можно посмотреть на картинке.

Чтобы перейти к следующему этапу нужно нажать на первый фрейм и зайти во вкладку Prototype. В графе Interaction выбираем кнопку с плюсиком — это необходимо для того, чтобы создать новые взаимодействия с фигурой. Далее нажимаем на кружочек на боковой стенке объекта, после чего перетаскиваем появившуюся синюю стрелочку к следующему (нужному) фрейму.

On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).

Navigate to — перейти к (другому объекту/фрейму).

Smart animate — один из типов переходов, который самостоятельно анимирует схожие объекты.

Ease out — анимация начнется быстро и будет замедляться к концу.

Далее последовательно соединяем все фреймы синей стрелкой и проверяем настройки во вкладке Interaction details.

Чтобы запустить анимацию нажимаем на синюю стрелочку Flow 4 рядом с фреймом.

Для того, чтобы записать и сохранить анимацию я скачала программу ScreenToGif . Открываем программу, нажимаем запись и растягиваем окно записи под нашу анимацию.

F7 — начать запись

F8 — остановить запись

Записываем и сохраняем. Вот и всё.

1 год назад

что-то анимация совсем деревянная вышла. В фигме поинтереснее можно делать.

1 год назад

вспомнил телевизионные заставки 90-х

1 год назад
Используйте https://jitter.video .
1 год назад
Похожие посты
1 год назад

Дизайнеры с Украины накинулись на Figma и Adobe⁠ ⁠

В то время как происходит первая дизайнерская война, в которой одна сторона требует закрытия доступа к Behance, Adobe и Figma для РФ, а вторая собирает бессмысленную петицию из уже 10.000 подписавшихся против войны, бездумно публикуя свои личные данные. Хотел бы напомнить остаткам здравомыслящих специалистов о необходимости озадачится резервированием всех облачных файлов (just in case). В случае с Фигмой в будущем в случае чего, вы сможете хоть и с потерями, но импортировать файлы в Скетч, а оттуда при необходимости перекинуть в XD. Быть уверенными только в ограничении к ресурсу не стоит, и затраченное время на подстраховку окупится в случае непредвиденных ситуаций.

А также, первой группе я бы хотел сказать, что те, против кого вы подстрекаете, собрали для вас целую петицию из более 10.000 человек, основным посылом которой было то, о чем вы и просили

Мы против любой войны, тем более войны с Украиной. В Украине живут наши коллеги, друзья и родственники. Украина не представляет угрозы для безопасности нашей страны. Война против нее несправедлива и бессмысленна. Мы не хотим, чтобы в Украине убивали наших коллег и друзей. Мы хотим вместе с ними жить, создавать и созидать в мире. Участвуя в войне, мы разрушаем эту связь.

Но видимо раз вы продолжаете, дело совсем не в действиях или бездействиях людей со второй стороны, а в принципе.

Второй же группе, я хотел сказать всего три вещи:

1. Ваша квалификация и навыки это ваши руки и голова, а не стоки, сети, площадки, или софт.

2. Будьте внимательными к тому под какими словами и формулировками вы ставите свои имена и фамилии, закон страны в которой вы живете и против который вы подписываетесь никто не отменял.

3. Проверьте свои имена в документе с петицией, на случай если она попадала туда без вашего ведома.

пруфы на всякий случай

PS: Я до последнего верил что творческие люди будут последними, кто будет противостоять друг против друга за пределами фриланс площадок, у меня нет слов.

Анимация логотипа как бизнес-инструмент и новый тренд в брендинге

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

На что только не идут бренды, чтобы выделиться и запомниться потенциальным покупателям! Но ни в одном случае не обходится без логотипа. Именно с ним у целевой аудитории ассоциируется компания, поэтому экономить на корпоративной символике – себе дороже.

На волне тотального увлечения анимацией и ее присутствия на сайтах, в приложениях, презентациях и рекламе видится резонным желание оживить логотип. Рассмотрим интересные варианты использования анимированных логотипов, покажем примеры и дадим вводные по их стоимости.

Оглавление

• Зачем, когда и кому нужен анимированный лого
• 8 грамотных вариантов использования (с примерами)
• Рекомендации по созданию анимации логотипа
• Стоимость и варианты разработки
• Заключение

В чем смысл анимированного логотипа

Большинство компаний располагает классическим статическим логотипом – “лицом” бренда. В наши дни в тренде – анимация, с помощью которой в лого вдыхают новую жизнь и делают динамичными буквы, цифры, знаки и другие элементы, чтобы с первого взгляда зацепить и удержать внимание зрителя, вызвать дополнительный интерес, лучше запомниться.

Сегодня любой бренд от микро- до крупного бизнеса, создающий медиа-контент, должен иметь такой инструмент. Если компания выходит в онлайн и/или медиа-пространство, будь то ТВ, YouTube, Tik-Tok, любые соцсети – анимационный логотип становится необходимостью.

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

Некоторые анимированные логотипы даже стали легендой. Помните студию Metro Goldwyn Mayer? И если само название вам ни о чем не говорит, то ее логотип вы точно хотя бы раз видели и запомнили!

После создания нового статического логотипа, мы перешли к его анимации и сделали три разных версии, сопровождаемых звуковыми эффектами:

Как видите, в анимации нашего лого нет ничего сложного, при этом она вполне справляется со своими задачами. В зависимости от целей, которые вы преследуете, степень детализации движения и креативности лого может быть разной – и дальше вы это увидите на примерах.

В мире информационного хаоса крайне сложно удержать внимание аудитории. Движение на экране – как раз то, что завораживает и не дает отвести взгляд. Даже если перед вами – не яркая картинка, а лишь мелькающие буквы или сменяющие друг друга цифры. Так как использовать такие видео?

8 интересных вариантов использования анимированного логотипа

1. Добавьте его в начало корпоративного видео.

Сегодня невозможно представить мир рекламы и продвижения товаров без видео. 99 % маркетологов используют классические и анимационные видеоролики с разными целями. Согласно результатам опросов 2019 г., 88 % из них намерены привлекать видеоконтент в еще больших объемах. Можете себе представить уровень конкурентности.

Если ваше видео начнется с анимированного логотипа, вы выделитесь на фоне остальных, заявите о себе как о профессионале. Ведь не каждая компания готова вкладывать деньги в создание анимации логотипа. Таким нехитрым способом вы на первых секундах повысите узнаваемость своего бренда, как это сделала, например, Национальная Лизинговая Компания:

Чтобы это была не просто унылая заставка перед презентацией холдинга, а целая история, придумали концепцию:

Зажигается свет, который озаряет стилизованное под полигональную геометрию пространство. Вокруг парят треугольные паттерны.

Вглубь сцены струятся цифровые потоки, за которыми устремляется камера. Взгляд опускается чуть ниже и видим точку на полу, вокруг которой поверхность меняет структуру и рождается капля нефти. Пол расходится волнами.

Каплю подхватывает цифровые потоки и устремляется вверх. Возвращаемся на общий план — это происходит по всей поверхности.

Крупный план капли. Под воздействием цифровых потоков капля меняет структуру, обрастает фирменными треугольными паттернами СИБУРа.

В разные стороны расходятся линии-связи, соединяясь с другими сферами, парящими в пространстве. Вся композиция выстраивается в молекулярную структуру с треугольными ячейками. Камера движется сквозь молекулярное облако и вылетает из логотипа.

Логотип ПАО «СИБУР», окруженный стилизованными партиклами.

Два важных момента. Первый – не переборщите с анимацией, все-таки деловая переписка подразумевает сдержанный формат общения, это не мессенджер. Второй – гифка не должна весить слишком много, поэтому позаботьтесь о формате и максимально сожмите размер файла.

5. Добавьте его в классическую презентацию.

На презентации товара, услуги или компании как нигде важно удержать внимание аудитории. Когда однообразные кадры сменяют друг друга, зрители быстро теряют интерес. Анимация логотипа оживит ваше видео и ваш рассказ, добавит в них изюминки, повысит лояльность.

6. Используйте его в социальных сетях.

Сегодня аудитория массово переместилась в социальные сети, поэтому маркетологи ищут эффективные способы обратить на себя внимание пресытившихся пользователей. Видео традиционно лидирует в этой гонке. Люди предпочитают динамичные картинки статичным, поэтому анимированные элементы становятся козырем в руках предпринимателей. Создание анимации логотипа – вот ваш шанс выделиться. Что мешает им воспользоваться?

Например, для блокчейн-проекта DoubleWay мы сделали абстрактную анимацию логотипа, которую можно использовать в том числе в соцсетях (анимированные публикации, встройка в нативный контент, обложки Facebook, Instagram Stories и т.д.):

Для этого мы создали ролик в едином фирменном цвете, а непрерывный пролет камеры удерживает взгляд до самого конца, пока на экране не появляется название бренда. Использовать его можно как угодно, в том числе в конце видеороликов.

4. Перед разработкой лого решите, какую главную идею вы транслируете.

У вас нет минуты или две времени, чтобы объяснить, кто вы и чем занимаетесь, поэтому подумайте о бизнес-целях, потребностях покупателей и о том, какой один короткий месседж вы хотите донести до аудитории. Не две идеи, не три. Одну!

5. Используйте саунд-дизайн.

Звуковые эффекты – это 50% впечатления от картинки, поэтому обязательно озвучьте логотип, каким бы он не был и сколько бы не длился. Вспомните логотип Metro Goldwyn Mayer в начале статьи, половина впечатлений от него – это рык льва!

6. Обновляйте анимацию лого с каждым ребрендингом.

Не забывайте, что каждое обновление фирменного стиля повлечет за собой и передел анимации логотипа.

7. Адаптируйте под большое количество форматов и языки.

В самом начале создания анимации лого решите, под какие площадки она вам нужна и на каких языках, потом переделывать будет дольше и дороже. Еще можете сделать сразу несколько уникальных версий лого.

Стоимость и варианты разработки

Как уже было сказано, цена анимации логотипа сильно зависит от ваших бизнес-задач, аудитории, площадок, где планируете использовать.

• Простые анимированные логотипы можно сделать своими силами почти бесплатно в сервисах вроде Renderforest. Потребуется только время, символический бюджет и немножко терпения.
• Логотипы посложнее – с привлечением дизайнеров и художников с фриланса или inhouse, но даже тут можете использовать, например, готовые шаблоны с ресурса Videohive. Покупаете готовую анимацию, вставляете в нее свой логотип. Тогда на всё уйдет от 100 $ до 500 $, редко до 1000 $.
• Имиджевые анимированные логотипы в среднем стартуют от 3000 $ и до бесконечности. Мы делали лого и за стоимость в миллионы рублей. Конечно, такого уровня контент может себе позволить, как правило, только средний и крупный бизнес, который четко отдает себе отчет в том, зачем ему это нужно.

Вместо заключения

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

Если вы заинтересованы в креативном концепте и мощном дизайне – звоните! Хотите испытать, как это работает на практике, на более простых приемах? Начните с фриланса. И кто знает, может, эта идея приглянется вам и вашему бизнесу!

Оживить персонажа на логотипе

1) Нужно доработать персонажа и наверно рисовать с логотипа (у нашего персонажа на векторном логотипе косой взгляд. это нужно исправить).

2) Хочу набор анимаций, который смогу использовать для: а) монтажа в видео (использую movavi), б) gif, в основном для дизайна в email.

14 дней 4500 UAH

14 дней 4500 UAH
Обращайтесь — обсудим
Freelancehunt
7 дней 4000 UAH

7 дней 4000 UAH

Здравствуйте. ВОт примеры моих работ:
https://www.youtube.com/watch?v=bbQMWqhNAjI&feature=youtu.be
https://www.youtube.com/watch?v=etYIoqpExzM&feature=youtu.be
https://www.youtube.com/watch?v=wBv0FNUufQE&feature=youtu.be
https://www.youtube.com/watch?v=vAyExlMMAdk&feature=youtu.be
https://www.youtube.com/watch?v=_tsx5znktp0&feature=youtu.be
https://www.youtube.com/watch?v=w-QvmtvqiIk&feature=youtu.be
https://www.youtube.com/watch?v=gWLMJdrD6Do&feature=youtu.be
https://www.youtube.com/watch?v=RJ0D6K7zAiM&feature=youtu.be
… https://www.youtube.com/watch?v=dQ8zptfjcgk&feature=youtu.be
https://www.youtube.com/watch?v=kIIq5UEc5F4&feature=youtu.be

фрилансер больше не работает на сервисе

фрилансер больше не работает на сервисе

4 дня 800 UAH

4 дня 800 UAH

День добрый.
Специализируюсь на векторной графике, наружной рекламе, логотипах и фирменном стиле.
Мое преимущество в том что я профессиональный художник.
Делаю логотипы в любом стиле. Гербы, штампы, типографика, леттеринг, флат, материал дизайн, минимализм.
Подготовлю файлы в необходимых форматах и размерах ai, eps, pdf, svg, psd, png, cdr.
Готов выполнить вашу работу.
Примеры смотрите в портфолио Freelancehunt
Behance

3 дня 10 000 UAH

3 дня 10 000 UAH

Добрый день, меня зовут Владимир!
Предлагаю свои услуги!
Занимаюсь 3d визуализацией, анимацией, дизайн фирменного стиля, дизайн полиграфии.
Если вас заинтересовало моё предложение жду обратной связи!
Цены приемлемые и могут обсуждаться индивидуально.

5 дней 8000 UAH

5 дней 8000 UAH

Добрый день, Александр!

Я и моя команда занимаемся созданием различных креативов под ваше направление. В числе наших проектов стикеры для HR-конференции Beeline, с моей работой вы можете ознакомиться ниже:

Буду рад обсудить с Вами все детали проекта.

фрилансер больше не работает на сервисе

7 дней 8000 UAH

7 дней 8000 UAH

Добрый день. Я занимаюсь 2D анимацией. Сделаю ваш проект быстро и качественно.
Некоторые примеры моих работ по ссылкам:

Анимированная инструкция для элементов «Умного дома»
https://youtu.be/3F4ckgHK7qE
https://youtu.be/bH6bapr4LQY
https://youtu.be/hKC4Ce2Zp5E

Медицинский портал 1 часть https://youtu.be/5WmInkZsVnw
… Медицинский портал 2 часть https://youtu.be/VVHLfoGfg5Q
Медицинский портал 3 часть https://youtu.be/okehmBW2Xv4

Поздравительная анимационная открытка (Один день из жизни персонажа).
Все персонажи и локации соответствуют действительности и имеют портретное сходство (даже собака) https://youtu.be/HfU61ULHUcw

Поздравительная анимационная открытка https://youtu.be/abe5vYf4gJE
Поздравительная анимационная открытка день шахтера https://youtu.be/qMkIkvpvppk

Анимация логотипа
https://youtu.be/7zsEyTW2_J4

Заставки для детских каналов
https://youtu.be/I9RXt6NywfA
https://youtu.be/j9qsWpSVL5U
https://youtu.be/YG3VL-hKTYU

мультфильм Baby shark https://youtu.be/NLIHT40CyNQ
мультфильм Monkey Banana https://youtu.be/pUsW-n4E7R4
мультфильм If You’re HAPPY https://youtu.be/opLKXNqlNts
Персонажная анимация для самых маленьких https://youtu.be/wcQFelkOqho

Фрагмент клипа, анимация текста https://youtu.be/9YocLfkdrIU

Реклама для онлайн биржи фрилансеров 1 часть «Заказчик» https://youtu.be/uYCkPFA9C5I
Реклама для онлайн биржи фрилансеров 2 часть «Исполнитель» https://youtu.be/2mLmglZER8k

Руководство для мобильного приложения https://youtu.be/nFdAESO5FNM
Mobile Application Guide CHAPTER 1 https://youtu.be/rKsKtu5MMW4
Mobile Application Guide CHAPTER 2 https://youtu.be/pUV93tmrZQg
Mobile Application Guide CHAPTER 3 https://youtu.be/6YIf6loGmJo
Mobile Application Guide CHAPTER 4 https://youtu.be/4PUujzGidaY
Mobile Application Guide CHAPTER 5 https://youtu.be/A_r_Hr4KHRE

Рекламный ролик для компании по борьбе с вредителями https://youtu.be/TLzkQGAYGxE
Рекламный ролик для компании по ремонту крыш и вентиляции https://youtu.be/1LnMFjhVD5I

Рекламные посты для соцсетей:
Косметика https://youtu.be/BV0IHHlgg3M
Торговый центр https://youtu.be/OpjJX2kaSPA
Торговый центр https://youtu.be/UfeEGNOxOsc
Торговый центр https://youtu.be/QvHK_tequOA

Реклама детской онлайн-школы https://youtu.be/NokEeBW7PrU
исходное видео от заказчика: https://youtu.be/ejeeXkWiQOg

Монтаж+звук по типу рекламы Netflix https://youtu.be/wVLkW7hQ3gs

фрилансер больше не работает на сервисе

8 анимированных логотипов, которые заслуживают восхищения

У движущегося логотипа больше шансов быть замеченным, он может дольше удерживать внимание зрителя. Такие лого запоминаются лучше, чем статичные, поскольку их легче отыскать в воспоминаниях.

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

Чтобы показать, насколько вовлекающими могут быть анимированные лого, и вдохновить вас на собственные работы, мы собрали самые крутые примеры.

1. WWF (Всемирный фонд дикой природы)

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

Логотип WWF Дженни Лейбундгут 1986 года – известная классика. Когда Брайен Хопкинс анимировал его для анимационного фильма, созданного компанией Planet Nutshell, он добавил достаточно движений для того, чтобы заставить нас улыбнуться и вызвать дополнительную эмоциональную заинтересованность.

Дизайн был создан только для ролика. Движение лап и головы сделали лого живым. Оно абсолютно соответствует настроению видео.

2. Designtorget

Более сложный подход к анимации логотипа может заключаться в использовании движений, которые рассказывают о том, чем занимается бренд. Этот анимированный логотип, созданный стокгольмским дизайнерским агентством Kurppa Hosk для магазина скандинавского дизайна интерьера Designtorget, рассказывает нам больше о бренде. Буквы намекают на мебель и посуду – товар, который продается в магазине.

Читайте также: BBDO представил брендинг «вина, в которое вложена жизнь»

3. Allvit

Другое назначение анимированных логотипов – привлечь внимание к тому, чего мы, возможно, не заметили в оригинальном логотипе. Многие лого несут смысл через символы, скрытые в негативном пространстве или используемые вместо букв. Но люди не всегда им придают значение. Эти элементы можно использовать и сделать более очевидными в движущихся версиях лого. Этот анимированный логотип Никиты Мельникова для норвежского онлайн-хранилища книг Alvit превращает увеличительное стекло в отрицательное пространство буквы «а», подчеркивая возможность поиска на сайте.

4. Feral Sphere

Анимация также может подчеркнуть индивидуальность логотипа и самого бренда. Британская марка одежды Feral Sphere производит одежду из органического хлопка, а 100% электричества, которое они используют при производстве, они получают из возобновляемых источников – солнца и ветра. Их логотип, разработанный Mind Design и иллюстратором Ленией Хаузер, был вдохновлен традиционной японской религией — синтоизмом.

Движение линий напоминает ветер, колышущий деревья, стаю птиц и роящихся пчел. Все возможные проявления природы, которые кажутся подходящими для бренда, направленного на экологичность. Анимация подчеркивает дикое чувство свободы. Логотип отличается от других и ощущается, как нечто личное, созданное вручную.

5. Fox

Анимация логотипов также может быть полезна при переходе к новой айдентике бренда. Если происходит ребрендинг, особенно радикальный, анимация может использоваться, чтобы сообщить аудитории об изменениях. В прошлом году Fox Entertainment запустила еще один логотип, чтобы дополнить основную айдентику радикально отличающимися объемными буквами.

Абстрактная анимация, разработанная Trollbäck + Company, имеет глубокий смысл и призвана показать, что компания рискует и лидирует. Но если использовать новое лого отдельно, оно может сбить с толку, особенно если учесть, что буква «F» больше похожа на букву «V». То есть логотип можно прочитать как Vox. Использование анимации, показывающей переход от обычного логотипа, помогает облегчить восприятие новой айдентики бренда.

Читайте также: Лучший урок по композиции, который мне довелось видеть

6. Eat

Черно-белые логотипы всегда актуальны и никогда не выйдут из моды. Они могут быть простыми и стильными, они отлично привлекают внимание, и их можно использовать для самых разных дизайнов. Эта простота также позволяет моушн-дизайнерам играть с концепциями, анимируя их, как в логотипе для выставки продуктов питания «EAT» в Сингапуре. Это лого, разработанное Fable, играет с увеличением в размерах и превращается в «FAT».

7. Yokohama

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

В 2018 году японская компания по производству резины Yokohama применила новый подход, когда анимировала свой логотип с красными линиями. В видео выше вы можете увидеть, как записывался звук ветра, проходящего через листья деревьев, пение птиц, шум воды. И конечно же, в конце видео вы не только увидите, но и услышите результат этого подхода. Лого просто завораживает.

8. Boro

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