Как сделать вращающийся логотип в видео

Создание вращающегося логотипа с помощью 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 — сохранить под этим именем.

Рисунки и анимация для статьи созданы с помощью тех же инструментов. В порядке появления в статье:

Итоговый скрипт для создания вращающегося логотипа:

Источник

Анимированный логотип в Photoshop CS6

В этом уроке мы будем создавать логотип с эффектом анимации. Чтобы создать такой логотип нам потребуется Фотошоп версии CS6.

Воспользуйтесь инструментом Crop Tool (C) (Рамка) и увеличьте размер изображения таким образом, чтобы со всех сторон надписи было больше свободного пространства. Для сохранения изменений, нажмите Enter.

Инструментом Rectangular Marquee Tool (M) (Прямоугольная область) выделите только текст envato. Затем добавьте к этому слою маску, нажав на значок Add Layer Mask (Добавить слой-маску) в нижней части панели слоев. В результате сам логотип исчезнет.

Переименуйте слой с текстом на Text, продублируйте Ctrl + J и назовите копию Leaf. Перейдите на маску слоя Leaf и инвертируйте цвета Ctrl + I, в результате текст и логотип будут находиться на разных слоях.

Перейдите на панель 3D и выберите объект Leaf, который обозначен значком звезды. Далее перейдите на панель Properties (Свойства), измените значение параметра Extrusion Depth (Глубина экструзии) на 35 и отключите опции Catch Shadows (Захват тени) и Cast Shadows (Наложить тени).

Теперь нам нужно переместить объект Leaf в центр документа. Но для начала правильно разместите камеру. На панели 3D выберите слой Current View (Текущий вид), а на панели Properties (Свойства) в параметре View (Вид) выберите Top (Сверху).

Переместите объект Leaf в центр документа при помощи экранных рычагов управления 3D объектом. Центр обозначается пересечением красной (ось X) и синей (ось Y) линиями.

На данный момент мы видим наш рабочий холст сверху. На панели Properties (Свойства) выберите Default Camera (По умолчанию), чтобы камера вернулась в начальную позицию. Обратите внимание, что сам логотип находится в неправильном положении. Мы это сейчас исправим.

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

Обратите внимание, все слои стали отражаться на временной шкале в виде отдельных видео-слоев. На данный момент у нас два видео-слоя.

Чтобы анимировать логотип, нам нужно перейти к его свойствам в временной шкале. Чтобы отобразить все свойства, которые могут быть анимированы, сделайте клик по маленькой стрелочке слева от названия видео-слоя. На данный момент нас интересует опция 3D Scene Position (Положение 3D сцены).

Читайте также:  Как сделать poly low в иллюстраторе

Нажмите на значок секундомера для включения анимации ключевых кадров. Это позволит нам добавить наш первый ключевой кадр в временную шкалу (обозначается желтым ромбиком).

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

Вернитесь на панель 3D, сделайте активным слой Scene (Сцена), а затем перейдите на панель Properties (Свойства). Нажмите на значок Coordinates (Координаты) и на оси Y измените значение угла на 360 градусов, что позволит вращать сцену вокруг оси Y на 360 градусов.

После проделанных действий на временной шкале должен быть добавлен ключевой кадр. При помощи ползунка текущего времени (обозначен голубым слайдером), передвигая его вперед и назад, вы можете просмотреть процесс движения анимации 3D объекта. Так как наш логотип расположен в центре, то он будет вращаться на месте.

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

Теперь передвиньте временной индикатор в то место, где логотип делает три четверти оборота вокруг своей оси.

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

Теперь очистим первую часть анимации, в которой наш объект делает одну четверть поворота. Для этого перейдите на видео-слой Leaf и переместите его конец к красной линии, смотрите изображение ниже.

Наконец, видео-слой Leaf copy сдвиньте к красной линии на временной шкале. Удостоверьтесь, что данная анимация непрерывна.

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

Сохранение анимации

Вот результат сохранения, используя первый способ:

После проделанных действий сохраненные кадры появятся на временной шкале в виде новой анимации.

Для сохранения анимации в формате gif, нужно просто повторить действия которые мы выполняли раннее.

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

Источник

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

Обновлено Январь 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

Email-курс «Как создать фирменный стиль за 7 шагов»

Вы узнаете, как создать свой фирменный стиль. 7 писем, в которых передаем 8 летний опыт команды Логастер.

Создавайте свой дизайн сейчас

Приступите к разработке своего фирменного стиля прямо сейчас. Введите название своей компании — и всего через минуту логотип будет у вас! Попробуйте сами! Нет ничего проще!

Источник

Оцените статью
Как сделать своими руками
Adblock
detector