Как сделать движущийся логотип
Как создать 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
Email-курс «Как создать фирменный стиль за 7 шагов»
Вы узнаете, как создать свой фирменный стиль. 7 писем, в которых передаем 8 летний опыт команды Логастер.
Создавайте свой дизайн сейчас
Приступите к разработке своего фирменного стиля прямо сейчас. Введите название своей компании — и всего через минуту логотип будет у вас! Попробуйте сами! Нет ничего проще!
Как создать анимированный логотип: пошаговая инструкция
Обновлено Март 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
Подпишитесь на блог Логастер!
И получите: советы по брендированию продукции, пошаговые инструкции и популярные новости о трендах в мире дизайна!
Создавайте свой дизайн сейчас
Приступите к разработке своего фирменного стиля прямо сейчас. Введите название своей компании — и всего через минуту логотип будет у вас! Попробуйте сами! Нет ничего проще!
Как создать видео логотип онлайн, бесплатно
Логотип — надпись или изображение (либо комбинация элементов), символизирующие деятельность и направление развития компании. Главная функция эмблемы — запомниться потребителю, вызывать положительные ассоциации и позитивные впечатления.
Нажмите кнопку «Создать логотип» и конструктор бесплатно предложит для вас варианты лого. Просто выбирайте и начинайте работать!
Фирменный знак позволяет брендировать продукцию, выгодно выделить её из ряда подобных товаров и услуг, заявить о преимуществах и положительных качествах. Важно помнить о формировании имиджа: стильный и аккуратный символ способен придать образу компании основательность и надёжность.
Виды логотипов
Сегодня выделяется несколько масштабных типов логотипов: они разнятся по форме и внешнему виду, однако их назначение одинаково.
Визуальные логотипы — самая крупная и популярная группа фирменных знаков. Такие лого чаще других используются компаниями. К ней относятся основные виды эмблем:
Видео логотипы — новый, невероятно перспективный формат, набирающий популярность за счёт динамики и спецэффектов. Создание видео логотипа — процесс достаточно трудоёмкий и кропотливый, однако результат превосходит все ожидания.
Видео логотип
Сфера применения динамичных эмблем разрастается: если раньше создавать видео логотипы было необходимо лишь тем, кто продвигает исключительно визуальный контент, то сегодня такие лого нужны абсолютно всем. Использование видео логотипа, например, при ведении аккаунтов в социальных сетях, положительно скажется на раскрутке бренда и увеличении продаж.
Как сделать логотип в видео? — очень просто! Для этого не нужно проходить длительное обучение — каждый может создать видео логотип онлайн буквально за полчаса.
Как создать видео логотип
Разработка видео логотипов с помощью онлайн-конструкторов не требует много времени и крупных вложений. Далее представлены популярные сервисы, которые позволяют сделать видео логотип.
Мakewebvideo.com
Это простой русскоязычный портал, с помощью которого можно сделать видео логотип онлайн бесплатно достаточно быстро. На сайте опубликована подробная пошаговая инструкция. Кроме того, на сервисе в качестве базиса используются профессиональные шаблоны видео. Для разработки видео логотипа потребуется выбрать понравившийся вариант шаблона, а дальше персонализировать его под собственные параметры. После завершения процесса создания эмблемы сохраните результат. Логотип будет готов к скачиванию через 30 минут. Сохранить лого можно в любом удобном формате.
Renderforest
Этот сервис позволяет сделать слайд-шоу, анимированные и видео логотипы различной сложности. Помимо этого, пользователям доступен большой выбор шаблонов, разбитых по тематикам. Каждый из них детально проработан дизайнерами и отличается высоким качеством. Для разработки видео логотипа потребуется выбрать понравившийся шаблон и изменить его отдельные детали под свои требования.
Вiteable.com
Сервис даёт возможность сформировать видео логотип онлайн полностью самостоятельно: пользователю предоставляются удобные современные инструменты. Данная программа считается самой простой в использовании среди конкурентов.
Заключение
Видео логотип сделает вашу компанию узнаваемой на рынке и увеличит узнаваемость фирменной продукции. Эмблема такого необычного дизайна отличается привлекательностью и в целом выгодно выделяется среди других лого.
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
Как бесплатно сделать анимацию фирменного логотипа
Рискнули поделиться самым неудачным лого, который нам недавно встретился. А также хотим помочь компаниям, у которых еще нет собственного логотипа.
Как бесплатно сделать анимацию фирменного логотипа
Для любой компании, которая только начала раскручивать свою продукцию, актуален вопрос создания собственного логотипа. С одной стороны, это лишние расходы, тем более, если бизнес еще не приносит дохода. Конечно, сам по себе логотип не будет так явно влиять на продажи, но нужно понимать, что жесткая рыночная конкуренция диктует свои правила. Логотип – это лицо, которое помогает потенциальным клиентам выделять ту или иную компанию среди конкурентов и внушает им доверие к бренду.
К сожалению, многие производители любят копировать оформление продукции успешных брендов. В таком случае инициализировать нужный продукт потребителю поможет логотип.
На что обратить внимание при создании логотипа
У вас есть всего несколько секунд, чтобы взгляд потенциального клиента упал на логотип продукции, да еще и запомнил его. Именно поэтому логотип должен быть максимально читаемый, понятный и емкий. Он должен хорошо ассоциироваться с деятельностью компании и выделяться своим оригинальным исполнением, профессионализмом и замыслом.
Приступая к продумыванию идеи логотипа обратите внимание на следующие принципы:
В качестве примера не хочется приводить удачные логотипы, дабы в интернете существует множество таких подборок. Покажем лишь пример логотипа, с которым видеостудия INFOMULT столкнулась недавно.
Для чего нужна анимация логотипа
Анимация логотипа вам нужна, если:
В целом, как вы уже смогли убедиться, анимация логотипа необходима, практически, каждому бизнесу. Но вот что делать, если компания начинающая, а денег на анимацию логотипа нет совсем?
Как сделать анимацию логотипа бесплатно
Итак, вы потратили на разработку логотипа немало средств. Хотим вас огорчить – его анимация тоже стоит не дешево. В профессиональный видеостудиях такая услуга стоит от 8 т.р и более. Студия INFOMULT предлагает вам поучаствовать в конкурсе, главный приз которого — БЕСПЛАТНАЯ АНИМАЦИЯ ЛОГОТИПА!
Что вам для этого нужно
Наличие логотипа и 3 минуты свободного времени. Все очень просто.
7 марта с помощью генератора случайных чисел студия INFOMULT выберет счастливчика. Всем удачи!
Создание вращающегося логотипа с помощью ImageMagick и FFMPEG
Статья может заинтересовать тех, кто хочет слегка оживить оформление своего видеоканала, а также тех, кто только начал работать с указанными в заголовке инструментами. Уверенные же пользователи, рассчитываю, дополнят мой материал.
Задумался, как можно оживить логотип, который накладываю на видеоролики неких спортивных мероприятий. Возникла идея сделать поворачивающийся вокруг своей вертикальной оси каждые секунд 20 логотип. В результате хотелось получить нечто подобное:
Для выполнения задачи понадобится система с установленными imagemagick и ffmpeg. Для формирования команд утилите imagemagick будет использоваться bash. Что повлечет за собой использование утилиты bc, т.к. математика в bash довольно простая и тригонометрические функции вычислить затруднительно.
С помощью python, например, тоже самое сделать еще проще, в нем-то синус и косинус вычисляются.
Для создания видео создадим N кадров, за которые логотип сделает полный оборот, затем превратим их в видеофайл.
По сути, вращение — это последовательное сжатие и расширение изображения по одному из измерений. Если мы хотим получить эффект равномерного вращения вокруг вертикальной оси — ширина изображения будет изменяться кратно значению функций синус или косинус.
Начальное состояние для нас — это видимый в полный размер логотип, поэтому для изменения ширины изображения будем умножать его ширину на косинус (его значение в нуле как раз равно единице).
Вращение изображения для данных целей можно поделить на 4 этапа:
— изображение сужается;
— расширяется, но к зрителю повернуто обратной стороной;
— сужается обратной стороной к зрителю;
— расширяется до исходных размеров.
Сформируем базовый набор кадров построим для вращения на 0-90 градусов, а кадры для остальных 270 получим немного их преобразовывая. Цикл, соответственно, будет не от 0 до 360 градусов, а от 0 до 90.
Для удобства введем переменные равные ширине и высоте логотипа, так будет проще подправить скрипт под другую картинку:
Заведем переменную, равную количеству кадров, за которые логотип совершит четверть оборота. Она понадобится один раз — для вычисления шага, с которым должен вычисляться угол поворота.
В цикле понадобится:
— вычислить, какова будет ширина изображения при его повороте на заданный переменной «n» угол;
— создать пустой холст размером, скажем 850×600;
— добавить в его центр сжатое по ширине изображение.
Разберем код по частям.
Вычислить ширину изображения под данным углом:
Вид с угла в 54 градуса:
Из этого эталонного набора изображений создадим 4 кадра будущей анимации.
Пусть логотип вращается по часовой стрелке если смотреть сверху. Для придания объема изображению добавим «тень» сдвинутую вправо или влево в зависимости от того, куда на кадре вращается изображение. И отразим изображение слева-направо на кадрах, где логотип повернут к зрителю задней стороной. «Тень» на этих же кадрах будет добавлена не под исходное изображение, а поверх него, чтобы создать эффект оборотной стороны логотипа.
Рассмотрим подробно выражение для первой четверти поворота. Остальные будут понятны по аналогии. Лишь акцентирую внимание на отличиях от первого:
convert tmp/$n.png — взять за основу исходное изображение.
имя такое чтобы имена кадров сразу отсортировались в алфавитном порядке и их было удобно отдать на обработку ffmpeg’у.
Для кадров второй четверти поворота будет «1800-n», для третьей «2000+n», для четвертой «2800-n».
Код для всех четырех четвертей поворота:
В результате из исходного кадра получены 4 с небольшими отличиями:
Теперь дело за малым, собрать из этих изображений видео:
-pattern_type glob — позволяет задать маску имени кадра в привычном по консоли виде
-i ‘tmp/logo*.png’ — взять как исходные данные изображения из папки tmp чье имя начинается с «logo»
-pix_fmt argb — задать формат изображения с прозрачностью. «a» в ARGB — это как раз альфа-канал
-vcodec qtrle — задать кодек для видео поддерживающий прозрачность. Из известных мне это «qtrle» и «png»
-r 30 — задать частоту итогового видео 30 кадров в секунду.
rotating_logo.mov — сохранить под именем «rotatingLogo.mov»
Теперь можем выполнить команду и посмотреть на результат:
Получившееся видео длинной всего в пару секунд, т.ч. совместим множество таких кусков вместе.
Для этого используем тот же ffmpeg.
Чтобы логотип вращался не постоянно, а эпизодически создадим кусок видео с неподвижным логотипом. Для статьи пусть будет длительностью в 3 секунды, чтобы не приходилось долго ждать вращения при просмотре:
В этой команде появилась опция «-loop 1» — указывающая ffmpeg повторять входную последовательность изображений (в данном случае одно единственное), и опция «-t 3» указывающая, что продолжительность итогового видео 3 секунды.
Чтобы склеить видео с неподвижным и вращающимся логотипом, создадим файл со списком файлов, которые нужно склеить. В данном случае 20 экземпляров наших файлов:
Подадим этот файл на вход фильтру concat с указанием копировать кодеки, а не перекодировать (-c copy).
Осталось наложить получившийся логотип на видео.
Логотип довольно большой, т.ч. при наложении отмасштабируем его, уменьшив в три раза.
-filter_complex — использовать filter_complex которому мы указываем, следующее:
[1:0]scale=iw/3:ih/3[logo] — взять поток 0 из второго видео (1 отсчет идет с нуля) и уменьшить значения ширины (iw — input width) и высоты (ih — input height) втрое. Передать дальше под именем «logo».
[0:0][logo]overlay=shortest=1:x=20:y=0 — взять поток 0 из первого видео и поток «logo» и наложить их друг на друга.
«shortest=1» — говорит, прекратить по достижении конца любого из потоков.
x=20:y=500 — указывает где располагать левый верхний угол накладываемого видео.
overlay.mov — сохранить под этим именем.
Рисунки и анимация для статьи созданы с помощью тех же инструментов. В порядке появления в статье:
Итоговый скрипт для создания вращающегося логотипа: