Доброго времени суток друзья. Сегодня вас ожидает очередной урок 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»
Если Вас устраивает установленное время, то закрываем это окно и идем дальше. Следующем нашим шагом у нас будет оптимизация анимации. Помните, как мы оптимизировали изображения для публикации их в сети? Что-то подобное мы сейчас сделаем и с анимацией, чтобы она занимала меньше места.
Шаг 8. Чтобы уменьшить размер (объем занимаемого места на диске) анимации, воспользуемся стандартным фильтром редактора. Для этого переходим в меню «Фильтры -Анимация — Оптимизация (для GIF)»
В результате этого у нас откроется новый проект и слои в стопке слоев примут следующий вид:
Шаг 9. И в завершении, нам остается только сохранить текущий проект в формате анимации, т.е. в графическом формате GIF. Как правильно сохранить изображение в редакторе GIMP смотрите вот в этом уроке.
Так как этот урок я делал в старой версии редактора гимп 2.6, то для сохранения работы идем в меню «Файл — Сохранить как» и задаем имя баннера — banner.gif и нажимаем кнопку «Сохранить»
В следующем диалоговом окне выбираем пункт «Сохранить как анимацию»
И еще раз жмем «сохранить»
Как установить баннер на сайт?
После того, как мы сделали баннер в GIMP, его нужно скопировать и установить на сайт. Верно? Для этого, запускаем любой FTP менеджер (я использую FileZilla) и копирую баннер в папку картинок на сайте. Лично у меня, данная папка находится в корне сайта и называется img. Таким образом, у баннера будет следующий URL (адрес):
https://www.gimpart.org/img/banner.gif
Теперь нам остается прописать HTML код баннера в том месте, где мы хотим его
Зацените, я немного добавил кадров с курсором, и вот, что у меня получилось:
Исходник баннера оптимизированный — Скачать
Исходник баннера в формате XCF — Скачать
Кисти курсоров в формате GBR — Скачать
На этой ноте, я завершаю урок. Надеюсь друзья, он будет вам полезен . Всем удачи и до новых встреч на Gimpart.Org.
Privet, Anton!Pochemu vi pishete tolko, a gde ze videos? Ja dumala, vi uze nauchilis ih delat..
Спасибо! Пригодиться при создании анимации…
что сделатЬ — научитЬся, такое простое правило…
Костя, а вот для меня видео не так удобно как текст,у нас в глубинке интернет медленный и дорогой, поэтому видеоуроки мы себе позволить не можем. Поэтому я очень благодарен Антону за такие уроки.
Антон, спасибо за очередной урок. Очень наглядно и полезно.
Спасибо, учту…
Всем спасибо за комментарии. Не переживайте будут и видео и текстовые уроки. Хороший интернет Еще не у всех есть в России (
Анимированый банер- классная штука. Но меня больше интересует вопрос, как активировать это «Здесь», что бы слово стало кликабельным. Ведь это- картинка. Когда создаешь кнопку, там все понятно- код подключается к кнопке и вуаля…а в таком варианте, как отделить слово в картинке?
Это уже хитрости CSS, выходящие за рамки уроков по GIMP. Так на вскидку можно сказать, что надо создать два div, один вложенный в другой. Фоном к внешнему divу будет как раз картинка «Кликай ЗДЕСЬ чтобы скачать», а div, который вложен(в нем может быть заключен тэг
Тэг А , а то его Disqus в скобочках тэга не показывает.
Очень полезный урок для этого редактора. Спасибо большое. Я тоже люблю больше скрины и текст, одним словом — книги. Видео тоже здорово, но скрин можно напечатать и будет настольная книга. Видео урок приятно смотреть после скрина, уже имеешь представление и лучше ухватываешь суть.
когда есть видео и текст — это здорово ) и почитаешь урок со скринами и видео потом посмотришь )
Добрый день, Антон! Программка чудесная, урок замечательный. Дошла до пункта ФИЛЬТРЫ-АНИМАЦИЯ-ВОСПРОИЗВЕДЕНИЕ. А у меня в фильтрах Анимации нет…. и не могу найти как это исправить — подскажите пожалуйста как быть.
Спасибо.
Антон! Спасибо за Ваши уроки! Надеюсь вы не обидитесь, но: Слово в баннере «научится» — неправильно! Следует писать — научитЬся. (пример. Надо научиться правильно писать. Он научиТся правильно писать. Хорошо бы научитЬся правильно писать.Еще Ленин писал — Учиться, учиться и еще раз — учитЬся!
Круто, у меня получился первый примитивный баннер! главное сам принцип,спасибо за статью!
Спасибо Антон, за подробный и понятный урок! Хорошая программа, сразу все получилось.
А вы планируете урок по флеш баннерам? Хотелось бы научиться их самому изготавливать, так как часто их заказываю и иногда выходит довольно дорого по цене.
В гимпе реально сделать такой банер или это нужна влешь программа
Создал видео-курс на тему баннеров, надеюсь понравится 🙂
Объяснение не для начинающих. Всё делаю строго по инструкции, а монитор показывает совсем не то, что на рисунках. Похоже, что автор некоторые моменты, элементарные для него, пропустил, но для «чайников» очень важно видеть, что появляется на мониторе после каждого, повторяю, — каждого клика. А это можно исправить только новыми рисунками с объяснялками. Спасибо!