Как сделать gif баннер
13 сервисов и программ для создания GIF: делаем контент динамичнее и интереснее
Собрали десктопное ПО и онлайн-инструменты, которые помогут вам сделать гифку из картинок и/или видео. Enjoy!
GIF-анимация нужна для того, чтобы сделать текст — в социальных сетях, рассылке или на сайте — более динамичным. С помощью гифок вы можете увеличить вовлечённость пользователей, повысить дочитываемость и кликабельность; возможно, это даже повлияет на лиды и продажи.
Большой плюс формата — в том, что это альтернатива коротким видео без звука, потому что не везде можно использовать громоздкие файлы. При этом качество остается довольно высоким.
В этой статье — обзор десктопных программ и онлайн-сервисов, с помощью которых вы сможете создавать GIF-анимацию из картинок и видео. По каждому инструменту — плюсы и минусы.
Автор статей по SMM, практикующий таргетолог, в прошлом — продакт-менеджер диджитал-проектов.
Как создать гифку из изображений
Adobe Photoshop
Adobe Photoshop — профессиональная программа для работы с изображениями. Но в ней также можно создавать гифки.
Чтобы сделать анимированную GIF, нужно:
2. Загрузить туда все изображения, которые будут участвовать в анимации. Учтите, у каждого изображения должен быть собственный слой.
3. В меню «Окно» включить отображение панели «Шкала времени».
4. Создать нужную анимацию с помощью кнопки «Создать временную шкалу для видео».
5. Сохранить анимацию в формате GIF с помощью пункта меню «Сохранить для Web».
Gifovina
Gifovina — бесплатный онлайн-сервис, с помощью которого тоже можно создавать GIF из изображений.
Как сделать анимированную гифку:
1. Загрузить через «Добавить кадры» все изображения, которые будут участвовать в анимации.
2. В меню справа выбрать нужный размер, длительность кадров, анимацию (например, наезд слева направо).
3. Добавить, если нужно, фигуру и надпись в ней.
4. Нажать кнопку «Готово», чтобы завершить создание анимации.
GIF из видео
Если нужное видео загружено на YouTube, вы сможете создать из него GIF-анимацию. Для этого в адресной строке к URL нужного ролика просто добавьте «gif».
В открывшемся окне вы сможете указать временной диапазон анимации, добавить надписи, сделать стикер, обрезать края видео, добавить теги и многое другое.
Video To Gif Lab
Video To Gif Lab — онлайн-сервис, который позволяет конвертировать видео в GIF-анимацию. Для этого нужно сделать следующее:
1. На главной странице указать путь к видео на компьютере с помощью кнопки «Выберите файл» или перетащить его.
2. Нажать на кнопку Start Recording для загрузки видео в сервис.
3. Нажать на кнопку Stop Recording/Create GIF, чтобы сервис начал создавать саму гифку.
4. Если возле кнопки появится надпись rendering c количеством процентов, значит, конвертация началась.
5. После окончания конвертации под загруженным видео появится кнопка «Сохранить анимацию».
Online-convert
Online-convert — онлайн-конвертер, поддерживающий аудио, видео, изображения, документы и архивы. В том числе он может конвертировать видео и фото в GIF.
1. Загрузить видео в приложение с помощью кнопки «Выберите файл».
2. В разделе дополнительных настроек можно изменить размер и цвет или обрезать изображение.
3. Нажать на кнопку «Начать конвертирование», чтобы процесс пошёл.
4. После обработки видео откроется новое окно и файл автоматически загрузится. Если этого не произошло, нажмите на «Загрузить».
Camtasia Studio
Camtasia Studio — программа для работы с видео. В ней можно монтировать видеоролики, добавлять в них надписи и кнопки, записывать видео с экрана. В программе вы можете сохранить видео в GIF-формате.
2. Загрузить туда одно или несколько видео, которые будут участвовать в анимации. Если нужно, добавить в них надписи или кнопки.
3. Для сохранения видео в GIF нажать на кнопку Share.
Как сделать анимированный gif баннер за 5 минут и утереть всем дизайнерам нос
Время чтения статьи: примерно 3-5 минут.
П риветствую вас друзья на этом блоге!
Недавно я опубликовал статью, в которой показал, как очень просто сделать статичный рекламный баннер онлайн для сайта. А в этой статье я покажу вам, как сделать анимированный gif баннер. Вы знаете, какая между ними разница?
Статичный баннер — это одиночное графическое изображение, без движения.
Анимированный gif баннер, представляет собой несколько статичных баннеров в одном, картинки которых сменяют друг друга, с учетом запрограммированной задержки каждого кадра.
Баннеры с gif анимацией выглядят намного эффектней и больше притягивают внимание посетителей.
Если вы посмотрите на сайтбар, то увидите там 2 баннера с анимацией. Для себя я создал тоже анимированный баннер и сейчас я покажу вам как я это сделал.
Одна из лучших программ для создания GIF анимации Easy GIF Animator Pro
Easy GIF Animator это программа, которая предназначена для создания анимированных изображений (gif-файлов), насыщенных различными эффектами.
Программа совместима с такими операционными системами как: Windows 98, Windows Me, Windows, Windows 2000, XP, Vista, Windows 7.
Easy GIF Animator имеет сравнительно много настроек, но их легко усвоить любому пользователю компьютера, так как интерфейс программы очень понятный.
Как скачать бесплатно Easy GIF Animator Pro версия 5.0.2.42
Программа является платной, но для читателей моего блога я предоставляю лицензионный ключ, благодаря которому каждый сможет работать с программой абсолютно бесплатно неограниченное время.
Скаченный файл архивирован. Поэтому вы должны распаковать архив. В папке вы увидите это:
egifan5.exe — это и есть файл для установки программы. Установка стандартная, поэтому проблем не будет. В папке «crack» находится инструкция по авторизации и активации. Сделайте так, как там написано.
Несмотря на то, что программа на английском языке, вам не нужно беспокоиться. В этой статье я всё подробно переведу и покажу.
На самом деле в архиве, который вы скачаете, будет файл с русским языком — «rus«, но у меня почему-то программа не поменяла язык, несмотря на то, что файл установлен. Вы попробуйте и может быть вам повезёт.
Подготовка для создания анимированного баннера
Перед тем, как вы будете делать баннер с анимацией, вам нужно придумать для него сюжет. То есть, вы должны заранее знать какие картинки, в какой последовательности и с каким промежутком времени будут фигурировать в вашем баннере.
Давайте для примера я покажу вам, как я придумал сюжет для своего gif баннера. Чтобы на него посмотреть, нажмите сюда
Как вы уже знаете, я начал рекламировать своё предложение, которое я сделал для всех посетителей блога, а именно вот что:
Сюжет для баннера
1) Первый кадр в моём анимированном баннере будет с текстом для привлечения внимания. Например, такой текст « Внимание! Выгодное предложение! «
2) Второй кадр будет с текстом, который раскроет это выгодное предложение и в конце будет интригующий вопрос. Например, такой « Вы можете покупать любой инфопродукт рунета с большими скидками! Вы спросите как? «
3) Третий кадр будет с текстом, который отвечает на интригующий вопрос в прошлом кадре. Он будет такой: « я отдам вам 70% моих комиссионных «
4) Четвёртый и заключительный кадр будет с текстом, который подтолкнёт к действиям посетителей. Например, такой « Нажмите и экономьте! «
А сейчас всё зависит от вашей фантазии. Вам нужно создать четыре баннера с соответствующим текстом, разбавленными с картинками. Если вы не знаете как очень просто создать статичный баннер онлайн, то добро пожаловать сюда.
И так, вот что я создал.
А сейчас нам надо их соединить в один баннер и сделать из них анимацию.
Как создать gif баннер с анимацией в программе Easy GIF Animator
Заходим в программу Easy GIF Animator.
Нажимаете на значок как показано на скрине и у вас откроется окошко, в котором вы должны указать размеры баннера. В моём случае это 240px на 400px. Нажимаем на «ok«
Далее нажимаете на значок «Insert picture«, который находится в линейке наверху и у вас откроется окошко с папками вашего компьютера. Выбираете первый баннер для анимации и жмёте на «Open«
После этих действий вы увидите в левой колонке, выбранный вами баннер. Далее нажимаете на значок «Insert Blank Frame (f4)«, который находится в левой линейке и под вашим баннером появится пустой баннер такого же размера. Далее нажмите на значок «Insert Picture» и выберите второе изображение для анимации. Проделайте такие действия со всеми четырьмя баннерами. Вот что должно получится:
Обратите внимание на раздел «Frame Properties«
Рядом с опцией «Delay» вы должны поставить тот промежуток времени, при котором каждая картинка будет меняться. Время выставляется в миллисекундах, поэтому если вы хотите, чтобы картинка в gif баннере менялась каждые три секунды, то в окошке пишите цифру 300. И так делайте для каждого баннера.
Нажав на опцию «Preview Animate (F7)«, который выглядит как зелёный треугольник (Play), вы можете посмотреть как будет выглядеть вся анимация.
Если всё нормально, то нажимаете на «File» ⇒ «Save As…» и сохраните ваш баннер в любом месте на компьютере.
И вот что у меня получилось, смотрите!
Если вы не знаете как вставить баннер на сайт, то прочитайте мою предыдущую статью о создании баннера онлайн.
С помощью программы Easy GIF Animator, вы можете создать анимированный баннер даже без предварительно созданных статичных баннеров. Функционал у программы очень обширный, но об этом я возможно напишу в другой статье, если вам это станет интересно.
Если у вас появятся любые вопросы по созданию gif баннера, то без стеснений спрашивайте меня в комментариях. Всегда рад помочь!
А я с вами прощаюсь и до новых встреч. Пока-пока
Как сделать анимированный gif баннер
Доброго времени суток друзья. Сегодня вас ожидает очередной урок GIMP, из которого вы узнаете, как сделать анимированный GIF баннер для сайта. Кроме этого, в уроке будет рассмотрен процесс оптимизации графической анимации и вопрос установки баннера на сайт. Так что, будет интересно. Поехали.
Каждый день мы видим огромное количество всевозможных баннеров, не только в интернете, но и в реальной жизни. В любом городе можно встретить придорожные плакаты с рекламой – это тоже своеобразные баннеры. Реклама, реклама, куда не глянь реклама. Что же такое баннер? Давайте узнаем.
Что такое баннер?
Как гласит одна умная вики энциклопедия, то
Таким образом, баннер служит вроде «наживки» для клиента, чтобы тот кликнул по нему и попался «на удочку». От сюда следует вывод, баннер должен притягивать наш взгляд и вызывать эмоцию. Но об этом чуть-чуть ниже.
Какие существуют размеры графических баннеров?
Существует бесчисленное множество разных форматов баннеров. Приведу вам лишь неполный список стандартных размеров баннеров:
88×31, 100×100, 100×200, 120×60, 120×90, 120×240, 120×600, 125×125, 125×250, 160×60, 160×120,160×240,160×600, 240×400, 250×250, 336 x 280, 460×60, 728 x 90 и многие другие.
Как видите, размеров очень много — выбирай не хочу! Кроме выше представленного списка вам не кто не мешает сделать баннер по своим неповторимым размерам.
Баннер – как психологический триггер
Реклама, реклама, но куда без нее. Реклама – как говорят, это двигатель торговли, и чтобы заставить рекламу работать, нужен эффективный баннер, такой, чтобы притягивал. Чтобы нам хотелось тот товар и услугу, что рекламирует баннер.
Как же сделать цепляющий баннер? А это друзья — целая наука. Не верите? Тогда обязательно найдите и прочитайте книги Виктора Орлова (магия твоих текстов, супер заголовок, сам себе копирайтер, волшебные слова). После прочтения которых, у вас не останется сомнений, как правильно составит рекламный текст для баннера.
Если описать кратно, то привлечение клиента идет несколькими шагами:
Ни чего не напоминает? Ага, тот самый магазин на диване. Просто все построено на психологии человека и поэтому — это работает. Видите друзья, эта целая наука. Так что, кому интересно, бежим за книгами Вика Орлова в магазин или ищем в интернете.
А как эта наука применима к нашему уроку? Все просто, мы сделаем анимированный баннер, который будет состоять из трех разных слайдов. Каждый слайд – это отдельный шаг из выше представленного списка. Уловили момент? Уже готовы сделать свой цепляющий баннер? Тогда начинаем и и для этого нам понадобится всего лишь один графический редактор GIMP.
Как сделать анимированный gif баннер в GIMP?
Шаг 1. Запускаем редактор GIMP и создаем новый проект. Для данного примера я выбрал размеры баннера 468×60 пикселей. Вы же, можете выбрать и другой, какой вам приглянется больше всего.
Шаг 2. Как я уже упомянул выше, наш баннер будет состоять из трех кадров, т.е. мы должны с вами создать три отдельных слоя. Помните, как мы с вами делали простую анимацию? Теперь, за место слоев с цифрами, у нас будут слои с текстовыми надписями, разницы в принципе не какой нет.
А чтобы один кадр показывался быстрее, а другой, например, последний кадр анимации, задерживался подольше, мы изменим время показа кадра, задав различные параметры у слоя.
Для создания текстовой надписи, выбираем инструмент «Текст» и создадим надпись
Шаг 3. Теперь нужно объединить текстовый слой с нижним белым. Щелкаем по верхнему слою правой кнопкой мыши и выбираем «Объединить с предыдущим».
Шаг 4. Вот так, первый кадр, обозначающий проблему, у нас готов. Идем дальше и создаем новый слой с белой заливкой нажав на пиктограмму «создания нового слоя»
Далее, вновь выбираем инструмент «Текст» и пишем надпись вида
854
Также, объединяем текстовый слой с белой подложкой. На данный момент у нас уже есть два отдельных слоя в панели слоев.
Шаг 5. Создаем еще один белый слой и текстовый. В этот раз я выбрал цвет текста черный, а не красный.
Далее блокируем изменение альфа-канала у текстового слоя, нажав вот на эту пиктограмму
Изменяем цвет переднего плана на синий.
Выбираем инструмент «Кисть» и закрашиваем синим цветом надпись «здесь». Вот что у меня получилось.
Объединяем слой с текстом и белым фоном, как это мы делали выше. В результате этих действий у нас готово три кадра, нашего будущего анимированного баннера. Также, для простоты можно переименовать слои, например вот так:
Шаг 6. Теперь, для пущего стимулирующего эффекта, добавим с помощью вот этих кистей, небольшой курсор руки под надписью «Здесь». Как устанавливать новые кисти в редактор гимп, можете почитать вот в этом уроке.
Курсор, добавляем на самый верхний слой
Шаг 7. Добавляем к имени слоя параметр времени в круглых скобках (1000ms-это одна секунда), т.е. задаем тот интервал, который будет показываться кадр анимации. Как я уже говорил ранее, последний верхний кадр мы задержим подольше, т.е. увеличим время его показа до трех секунд (3000ms).
Теперь, нужно воспроизвести нашу анимацию и посмотреть, что у нас получилось. Для этого переходим в меню «Фильтры — Анимация — Воспроизведение» и нажимаем на кнопку «Play»
Если Вас устраивает установленное время, то закрываем это окно и идем дальше. Следующем нашим шагом у нас будет оптимизация анимации. Помните, как мы оптимизировали изображения для публикации их в сети? Что-то подобное мы сейчас сделаем и с анимацией, чтобы она занимала меньше места.
В результате этого у нас откроется новый проект и слои в стопке слоев примут следующий вид:
Шаг 9. И в завершении, нам остается только сохранить текущий проект в формате анимации, т.е. в графическом формате GIF. Как правильно сохранить изображение в редакторе GIMP смотрите вот в этом уроке.
Так как этот урок я делал в старой версии редактора гимп 2.6, то для сохранения работы идем в меню «Файл — Сохранить как» и задаем имя баннера — banner.gif и нажимаем кнопку «Сохранить»
В следующем диалоговом окне выбираем пункт «Сохранить как анимацию»
И еще раз жмем «сохранить»
Как установить баннер на сайт?
После того, как мы сделали баннер в GIMP, его нужно скопировать и установить на сайт. Верно? Для этого, запускаем любой FTP менеджер (я использую FileZilla) и копирую баннер в папку картинок на сайте. Лично у меня, данная папка находится в корне сайта и называется img. Таким образом, у баннера будет следующий URL (адрес):
https://www.gimpart.org/img/banner.gif
Теперь нам остается прописать HTML код баннера в том месте, где мы хотим его
Зацените, я немного добавил кадров с курсором, и вот, что у меня получилось:
Исходник баннера оптимизированный — Скачать
Исходник баннера в формате XCF — Скачать
Кисти курсоров в формате GBR — Скачать
Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!
За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз.
👉Посмотрите другие материалы:
20 комментариев к “Как сделать анимированный gif баннер”
Privet, Anton!Pochemu vi pishete tolko, a gde ze videos? Ja dumala, vi uze nauchilis ih delat..
Спасибо! Пригодиться при создании анимации…
что сделатЬ — научитЬся, такое простое правило…
Костя, а вот для меня видео не так удобно как текст,у нас в глубинке интернет медленный и дорогой, поэтому видеоуроки мы себе позволить не можем. Поэтому я очень благодарен Антону за такие уроки.
Антон, спасибо за очередной урок. Очень наглядно и полезно.
Всем спасибо за комментарии. Не переживайте будут и видео и текстовые уроки. Хороший интернет Еще не у всех есть в России (
Анимированый банер- классная штука. Но меня больше интересует вопрос, как активировать это «Здесь», что бы слово стало кликабельным. Ведь это- картинка. Когда создаешь кнопку, там все понятно- код подключается к кнопке и вуаля…а в таком варианте, как отделить слово в картинке?
Это уже хитрости CSS, выходящие за рамки уроков по GIMP. Так на вскидку можно сказать, что надо создать два div, один вложенный в другой. Фоном к внешнему divу будет как раз картинка «Кликай ЗДЕСЬ чтобы скачать», а div, который вложен(в нем может быть заключен тэг
Очень полезный урок для этого редактора. Спасибо большое. Я тоже люблю больше скрины и текст, одним словом — книги. Видео тоже здорово, но скрин можно напечатать и будет настольная книга. Видео урок приятно смотреть после скрина, уже имеешь представление и лучше ухватываешь суть.
когда есть видео и текст — это здорово ) и почитаешь урок со скринами и видео потом посмотришь )
Добрый день, Антон! Программка чудесная, урок замечательный. Дошла до пункта ФИЛЬТРЫ-АНИМАЦИЯ-ВОСПРОИЗВЕДЕНИЕ. А у меня в фильтрах Анимации нет…. и не могу найти как это исправить — подскажите пожалуйста как быть.
Спасибо.
Антон! Спасибо за Ваши уроки! Надеюсь вы не обидитесь, но: Слово в баннере «научится» — неправильно! Следует писать — научитЬся. (пример. Надо научиться правильно писать. Он научиТся правильно писать. Хорошо бы научитЬся правильно писать.Еще Ленин писал — Учиться, учиться и еще раз — учитЬся!
Круто, у меня получился первый примитивный баннер! главное сам принцип,спасибо за статью!
Спасибо Антон, за подробный и понятный урок! Хорошая программа, сразу все получилось.
А вы планируете урок по флеш баннерам? Хотелось бы научиться их самому изготавливать, так как часто их заказываю и иногда выходит довольно дорого по цене.
В гимпе реально сделать такой банер или это нужна влешь программа
Создал видео-курс на тему баннеров, надеюсь понравится 🙂
Объяснение не для начинающих. Всё делаю строго по инструкции, а монитор показывает совсем не то, что на рисунках. Похоже, что автор некоторые моменты, элементарные для него, пропустил, но для «чайников» очень важно видеть, что появляется на мониторе после каждого, повторяю, — каждого клика. А это можно исправить только новыми рисунками с объяснялками. Спасибо!
Оставьте комментарий Отменить ответ
Нажимая на кнопку «Комментировать», вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности