Как сделать анимированный gif баннер

Доброго времени суток друзья. Сегодня вас ожидает очередной урок GIMP, из которого вы узнаете, как сделать анимированный GIF баннер для сайта. Кроме этого, в уроке будет рассмотрен процесс оптимизации графической анимации и вопрос установки баннера на сайт. Так что, будет интересно. Поехали.

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

Что такое баннер?

Как гласит одна умная вики энциклопедия, то

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

Таким образом, баннер служит вроде «наживки» для клиента, чтобы тот кликнул по нему и попался «на удочку». От сюда следует вывод, баннер должен притягивать наш взгляд и вызывать эмоцию. Но об этом чуть-чуть ниже.

Какие существуют размеры графических баннеров?

Существует бесчисленное множество разных форматов баннеров. Приведу вам лишь неполный список стандартных размеров баннеров:

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 пикселей. Вы же, можете выбрать и другой, какой вам приглянется больше всего.

01_kak-sdelat-banner

Шаг 2. Как я уже упомянул выше, наш баннер будет состоять из трех кадров, т.е. мы должны с вами создать три отдельных слоя. Помните, как мы с вами делали простую анимацию? Теперь, за место слоев с цифрами, у нас будут слои с текстовыми надписями, разницы в принципе не какой нет.

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

Для создания текстовой надписи, выбираем инструмент «Текст» и создадим надпись 02_kak-sdelat-gif-banner

Шаг 3. Теперь нужно объединить текстовый слой с нижним белым. Щелкаем по верхнему слою правой кнопкой мыши и выбираем «Объединить с предыдущим».

03_kak-sdelat-animirovannui-banner

Шаг 4. Вот так, первый кадр, обозначающий проблему, у нас готов. Идем дальше и создаем новый слой с белой заливкой нажав на пиктограмму «создания нового слоя»

Далее, вновь выбираем инструмент «Текст» и пишем надпись вида 04_animirovannui-banner

854
Также, объединяем текстовый слой с белой подложкой. На данный момент у нас уже есть два отдельных слоя в панели слоев.

Шаг 5. Создаем еще один белый слой и текстовый. В этот раз я выбрал цвет текста черный, а не красный. 05_kak-sozdat-banner

Далее блокируем изменение альфа-канала у текстового слоя, нажав вот на эту пиктограмму

06_kak_sdelat-banner-dlya-saita

Изменяем цвет переднего плана на синий.

07_kak-sozdat-banner-dlya-saita

Выбираем инструмент «Кисть» и закрашиваем синим цветом надпись «здесь». Вот что у меня получилось.

08_banner-gif

09_sozdanie-gif-bannerov

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

10_kak-sozdat-banner-v-fotoshope

Шаг 6. Теперь, для  пущего стимулирующего эффекта,  добавим с помощью вот этих кистей, небольшой курсор руки под надписью «Здесь». Как устанавливать новые кисти в редактор гимп, можете почитать вот в этом уроке.

Курсор, добавляем на самый верхний слой

11_kak-sdelat-banner-v-gimp

Шаг 7. Добавляем к имени слоя параметр времени в круглых скобках (1000ms-это одна секунда), т.е. задаем тот интервал, который будет показываться кадр анимации. Как я уже говорил ранее, последний верхний кадр мы задержим подольше, т.е. увеличим время его показа до трех секунд (3000ms).

12_kak-sdelat-banner-v-gimp

Теперь, нужно воспроизвести нашу анимацию и посмотреть, что у нас получилось. Для этого переходим в меню «Фильтры — Анимация — Воспроизведение» и нажимаем на кнопку «Play»

13_kak-sdelat-banner-v-gimp

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

Шаг 8. Чтобы уменьшить размер (объем занимаемого места на диске) анимации,  воспользуемся стандартным фильтром редактора. Для этого переходим в меню «Фильтры -Анимация — Оптимизация (для GIF)»

В результате этого у нас откроется новый проект и слои в стопке слоев примут следующий вид:

14_kak-sdelat-banner-v-gimp

Шаг 9. И в завершении, нам остается только сохранить текущий проект в формате анимации, т.е. в графическом формате GIF. Как правильно сохранить изображение в редакторе GIMP смотрите вот в этом уроке.

Так как этот урок я делал в старой версии редактора гимп 2.6, то для сохранения работы  идем в меню «Файл — Сохранить как» и задаем имя баннера — banner.gif и нажимаем кнопку «Сохранить»

15_kak-sdelat-banner-v-gimp

В следующем диалоговом окне выбираем пункт «Сохранить как анимацию»

16_kak-sdelat-banner-v-gimp

И еще раз жмем «сохранить»

17_kak-sdelat-banner-v-gimp

Как установить баннер на сайт?

После того, как мы сделали баннер в GIMP, его нужно скопировать и установить на сайт. Верно? Для этого, запускаем любой FTP менеджер (я использую FileZilla) и копирую баннер в папку картинок на сайте. Лично у меня, данная папка находится в корне сайта и называется img. Таким образом, у баннера будет следующий URL (адрес):

https://www.gimpart.org/img/banner.gif

Теперь нам остается прописать HTML код баннера в том месте, где мы хотим его

<a href=»ссылка, куда попадет человек нажавший на баннер»><img src=»img/banner.gif» /></a>

Зацените, я немного добавил кадров с курсором, и вот, что у меня получилось:

баннер в gimp

Исходник баннера оптимизированный — Скачать

Исходник баннера в формате XCF  — Скачать

Кисти курсоров в формате GBR — Скачать

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

Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!

Автор блога GimpArt.Org - Антон Лапшин

За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз!!!

👉Посмотрите другие материалы:

-->

Видео курс азбука GIMP скачать

20 комментариев к “Как сделать анимированный gif баннер”

  1. Костя, а вот для меня видео не так удобно как текст,у нас в глубинке интернет медленный и дорогой, поэтому видеоуроки мы себе позволить не можем. Поэтому я очень благодарен Антону за такие уроки.

    Ответить
  2. Всем спасибо за комментарии. Не переживайте будут и видео и текстовые уроки. Хороший интернет Еще не у всех есть в России (

    Ответить
  3. Анимированый банер- классная штука. Но меня больше интересует вопрос, как активировать это «Здесь», что бы слово стало кликабельным. Ведь это- картинка. Когда создаешь кнопку, там все понятно- код подключается к кнопке и вуаля…а в таком варианте, как отделить слово в картинке?

    Ответить
  4. Это уже хитрости CSS, выходящие за рамки уроков по GIMP. Так на вскидку можно сказать, что надо создать два div, один вложенный в другой. Фоном к внешнему divу будет как раз картинка «Кликай ЗДЕСЬ чтобы скачать», а div, который вложен(в нем может быть заключен тэг

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

    Ответить
  6. когда есть видео и текст — это здорово ) и почитаешь урок со скринами и видео потом посмотришь )

    Ответить
  7. Добрый день, Антон! Программка чудесная, урок замечательный. Дошла до пункта ФИЛЬТРЫ-АНИМАЦИЯ-ВОСПРОИЗВЕДЕНИЕ. А у меня в фильтрах Анимации нет…. и не могу найти как это исправить — подскажите пожалуйста как быть.
    Спасибо.

    Ответить
  8. Антон! Спасибо за Ваши уроки! Надеюсь вы не обидитесь, но: Слово в баннере «научится» — неправильно! Следует писать — научитЬся. (пример. Надо научиться правильно писать. Он научиТся правильно писать. Хорошо бы научитЬся правильно писать.Еще Ленин писал — Учиться, учиться и еще раз — учитЬся!

    Ответить
  9. Круто, у меня получился первый примитивный баннер! главное сам принцип,спасибо за статью!

    Ответить
  10. Спасибо Антон, за подробный и понятный урок! Хорошая программа, сразу все получилось.

    Ответить
  11. А вы планируете урок по флеш баннерам? Хотелось бы научиться их самому изготавливать, так как часто их заказываю и иногда выходит довольно дорого по цене.

    Ответить
  12. Объяснение не для начинающих. Всё делаю строго по инструкции, а монитор показывает совсем не то, что на рисунках. Похоже, что автор некоторые моменты, элементарные для него, пропустил, но для «чайников» очень важно видеть, что появляется на мониторе после каждого, повторяю, — каждого клика. А это можно исправить только новыми рисунками с объяснялками. Спасибо!

    Ответить

Оставьте комментарий

Нажимая на кнопку "Комментировать", вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности