Красивый gif баннер для вашего сайта: доступная инструкция к применению
Лучшим средством для продвижения товара в онлайн-магазине или на веб-портале является анимированная баннерная реклама, спрос на которую не падает на протяжении нескольких лет. И это не мудрено! Современный рекламный ролик в виде gif баннера для сайта, помещённый в привлекательную «мультипликационную» обложку, способен заинтересовать потенциальных клиентов и заставить их перейти на площадку рекламодателя.
Сегодня вы узнаете, что такое gif баннер, выберете наиболее оптимальную для вас программу для создания анимированной графики, и создадите качественный рекламную ссылку, переносящую пользователя на ваш интернет-ресурс.
Рекламная ГИФОмания
Что такое gif баннер? Это уникальная рекламная анимация, которая содержит в себе фиксированное количество изображений, методически сменяющих друг друга. Расположение и частота кадров всегда неизменны: они задаются на этапе создания баннера. Благодаря подобной смене и создаётся «мультяшный» эффект, то есть привлекающая взор анимация.
Формат gif является классикой жанра в русле создания рекламной графики. Gif баннеры для сайта используются в статичном и анимированном варианте. «Мигающие» модели, несомненно, занимают лидирующую позицию по отношению к скучной статике: яркие надписи, поступательно сменяющие друг друга, лучше и эффективней привлекают внимание потребителей интернет-товара или услуги.
Создавая анимированный gif баннер, необходимо учитывать следующие бонусы подобной рекламы:
-
это самый бюджетный и простой вариант в изготовлении привлекательной графики;
-
баннер в формате «гиф» может быть опубликован на рекламном ресурсе любого типа: в баннерных сетях, на сервисе-партнёрке и, конечно же, в блогах.
-
существует богатое разнообразие программ для изготовления gif баннеров, благодаря которому можно выбрать наиболее подходящий софт;
-
индексация баннеров подобного типа происходит очень быстро и продуктивно.
Говоря об анимированной рекламной графике, нельзя забывать и о недостатках этого элемента:
-
она занимает существенный «вес», который может отрицательно влиять на скорость загрузки веб-страницы;
-
функционал гиф баннера ограничен традиционной сменой кадров;
-
качество «гифки» может существенно пострадать из-за попыток снижения баннерного «веса».
Учитывая все вышеуказанные моменты, можно заключить следующее. Во-первых, делать мигающий баннер для сайта лучше всего с минимальной частотой смены кадров, совмещающих текст и рисунки. Во-вторых, оптимальным вариантом в использовании «гифки», выполненной в формате 88*33, является элементарная «кнопка сайта».
Оптимальная программа для изготовления gif баннеров
Создать интересный баннер в формате gif можно при помощи софта, отличающегося различным интерфейсом и уникальным функционалом. По этой причине создать анимированный gif баннер для сайта, какой бы сложности не была реклама, не представляет большого труда. Причем неважно, каким уровнем обладает веб-дизайнер: из перечисленного ниже списка и профессиональный разработчик, и начинающий веб-дизайнер смогут без труда и заморочек сделать меняющийся баннер своими руками.
Вот, собственно, и список популярных программ:
- BannerMakerPro. Эффективный софт, который применяется в изготовлении элементарных gif баннеров для сайта. Главный бонус программы – доступный и удобный интерфейс. Есть и минусы у BMK, среди которых чаще всего выделяют лимитированный функционал.
- EasyGifAnimator. Аналогично первой программе для изготовления gif баннеров: EGA обладает приличным интерфейсом, понятным и для новичка. С её помощью можно создать простецкий gif баннер, однако именно этот момент часто причисляют к разряду недостатков. Софт EGA работает на платной основе, однако можно найти и бесплатные версии (free trial) с ограниченным по времени пользованием.
- UnleadGifAnimator. Софт с более-менее замысловатым функционалом. Сделать мигающий баннер для сайта в этой программе будет затруднительно для новичков, однако для профессионалов UGA является настоящим кладом.
- BannerDesignerPro. Ещё более усложнённый сервис для изготовления анимированной баннерной рекламы. Софт обладает сложной начинкой, в которой не каждый разберётся. При этом специалисты в области разработки рекламных баннеров считают Banner Design Pro ведущей площадкой в рейтинге лучших программ для изготовления gif баннеров.
- AdobePhotoshopCS5. Одна из самых усовершенствованных софтов в плане разработки баннерной рекламы стиля gif. Практически неограниченные возможности, высококачественная графика. Единственный недостаток – программа стоит недёшево. Но, разумеется, этот минус легко перечеркивается вышеперечисленными достоинствами AP.
Анимация, сделанная в AP
Рассмотрим пошаговую инструкцию того, как сделать меняющийся баннер своими руками при помощи Фотошопа. И хотя эта программа считается довольно сложной и мудреной в управлении, однако для создания качественной и привлекательной gif анимации вам потребуется сделать всего 15 шагов.
Рассмотрим рекламную «гифку» на примере стандартной «кнопки сайта», обладающей габаритами – 88*31 pixel. Просмотрев нашу инструкцию, вы научитесь быстро создавать анимированные gif баннеры в софте AP. Не забудьте установить программу Image Ready, которая обязательно входит в лицензионный комплект Фотошопа.
Итак, для того чтобы сделать меняющийся баннер в AP, вам понадобится:
1. Создать новый документ при помощи комбинации ctrl+n и установить необходимые габариты. В нашем примере это – 88*31 pix.
2. Задать цветовую палитру фона: к примеру, #FDF8D9.
3. Кликнуть на F7: откроется палитра слоёв. Зажав кнопку alt, щёлкнуть два раза по Background. Получается элементарный фоновый слой.
4. Необходимо создать обводку для слоя изнутри: кликнуть два раза по созданному пласту и в возникшем окошке выбрать Stroke (найти его можно в нижнем углу окна). Задать характеристики будущего баннера: «размер»: 1; «локализация»: внутри; «цвет»: #A28564. После чего кликнуть O’k.
5. Придумать привлекательную текстовую часть для первого кадра с помощью инструмента горячей клавиши T. Необходимо на время «скрыть» текст, кликнув по этой иконке – . У нас первая фраза звучит так: «Всё самое интересное в сети Интернет».
6. Изготовление подложки. Сделать новый пласт с помощью нажатия комбинации shift+ctrl+n. Выбрать инструмент прямоугольного выделения (для удобства можно использовать горячую клавишу М). Выделить необходимую часть для работы: используйте «Пробел», чтобы быстро передвигать выделенную область. Залить форму оттенков #FAEEAC.
7. Убрать выделенную область при помощи ctrl+d, написать новую фразу. У нас это:
8. Выбрать пласт с фразой FREEGOLD.RU, копировать его с помощью ctrl+j. Оба текстовых слоя необходимо скрыть и работать с «клонированным» пластом. Найти в раскладке Filter пункт Motin Blur и задать следующие параметры: «угол» - 0, «дистанция» - 10.
9. Анимировать первую сценку: сделать фоновый, «подложный» и текстовый слои визуально просматриваемыми.
10. Открыть пункт «Анимация» в раскладке Windows и копировать кадр: для этого необходимо активизировать функцию Duplicates selected frames.
11. Настроить функцию анимации для следующей сценки. Включить копированный слой и посмотреть «мультик» с помощью иконки Play.
12. Снова сделать «клон» сценки. Размытый пласт выключается, а более чёткий – включается. Выбрать вторую и третью сценки, используя shift, нажать Tweens animation frames.
Указать в возникшем окне число сценок – 5, нажать O’k. Подобный показатель позволит добиться плавного перехода между сценами.
13. Дублировать последнюю сценку. Фоновый и текстовый («Самое интересное…») пласты оставить включенными, оставшиеся слои – отключаются. На выходе должно получиться до 9 сценок.
14. Необходимо задать временной показатель для каждой отдельной сцены. Это делается в нижней вкладке, расположенной внизу любого кадра. В предложенном списке отсутствует подходящий показатель времени? В таком случае следует воспользоваться функцией Others или «Другие».
Подбирая оптимальный временной промежуток для нашего баннера, мы остановились на:
15. Последний шаг – сохранение анимированной гифки в разделе File. В появившемся окошке указать формат gif.
В итоге, мы получим вот такой мигающий баннер для сайта: