Приветствую Вас, уважаемые читатели!

У каждого блоггера наступает такой момент, когда перед ним встает вопрос, как создать рекламный баннер для сайта? На этот вопрос есть 2 варианта ответа — это заказать изготовление профессионалу или создать и разместить  баннер самому.

Для тех, кто хочет научиться сам создавать рекламный баннер, я написал этот пост.  Для этого Вам понадобятся 2 программы — Easy GIF Animator и Adobe Photoshop и любой из Вас сможет создать простой симпатичный баннер, и разместить его на своем блоге в нужном месте.

На моем блоге с 23 ноября стартует марафон кроссвордов  “Эрудит -2”.  Для того, чтобы читатели о нем больше узнали, я сам создал баннер и разместил его в шапке.

Почему в шапке? Потому, что это самое заметное место на блоге и шапка отображается на любой странице блога.

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

Как создать баннер самому при помощи Easy GIF Animator 5 Pro

1. Скачиваем и устанавливаем программу Easy GIF Animator на свой компьютер

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

2. Запускаем программу и выбираем,  что мы хотим создать

Нам предлагается создать на выбор

• Новую анимацию
• Анимированный баннер
• Анимированную кнопку

Поскольку наша цель  создание рекламного баннера, жмем 2 пункт – анимированный баннер

В открывшемся окне мы должны выбрать размер для баннера, в моем случае это стандартный 468х60. Если вашего размера нет или он не стандартный, перейдите ниже и введите свои цифры. Можно создать баннер, основываясь на размере фонового изображения, для этого пункт 3.

3. Далее необходимо выбрать фон для баннера

Тут можно выбрать несколько вариантов:

• Простой цвет, выбираете из предложенных
• Градиент цвета, довольно хороший выбор предоставляется
• Картинка или текстура (я выбрал этот вариант)

Для создания картинки — фона для будущего баннера я использовал проограмму Adobe  Photoshop. Если у Вас есть картинка для фона, переходите к следующему пункту, если нет, запускаем фотошоп

Сначала сделал “Создать ”, выбираем размер, в моем случае 468х60, после открытия нового документа выбираем “Файл”=> “Поместить” и выбираем картинку с фоном.

Можно выбрать инструмент  “Заливка” и выбрать нужный вам цвет, в зависимости от цвета фона или сайдбара, в зависимости от того,  куда планируете разместить  баннер.

Далее я для марафона кроссвордов нашел симпатичный глобус с кроссвордами, нажал “Файл”=>”Поместить”. Подгоняем по размеру шарик и жмем “Enter”, после этого сохраняем файл, это и будет фон нашего будущего баннера.

4. Устанавливаем фон баннера 

Возвращаемся к Gif Animator , вставляем картинку для фона, которую мы только что создали

Теперь будем экспериментировать с текстом. Сначала жмем “Текст 1”, форматируем текст, размер шрифта и остальные параметры, затем параметры “Как показывать”,”Как долго показывать”,”Как скрыть”.

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

Я использовал все 3 текста, поскольку весь текст бы не поместился, да и интрига нужна, поскольку за раз не нужно раскрывать всю информацию. У меня это выглядит так:

1 Текст — Новый марафон кроссвордов

2 Текст —  «Эрудит — 2»

3 текст — Старт 23 ноября

Затем готовый баннер Вам необходимо сохранить.

Создание кода и установка баннера на сайт

Для начала нам нужно зайти в админку блога => “Добавить медиафайл” и загрузить полученный баннер. Затем  под загруженным изображением жмем “Редактировать” и копируем адрес, как показано на картинке ниже.

Обратите внимание, что копировать строку до конца, адрес картинки должен заканчиваться на .gif (у меня

Далее вы должны в этот код вставить свои данные:

<a href="http://ВАШ_САЙТ/" target="_blank"><img src="http://ПУТЬ_К_КАРТИНКЕ.gif" alt="ОПИСАНИЕ"></a>

Вам нужно изменить  http://ВАШ_САЙТ это адрес страницы, на которую будет попадать читатель, кликнув по баннеру, и  http://ПУТЬ_К_КАРТИНКЕ.gif это адрес картинки – баннера, загруженной ранее.

В “Описание” введите фразу, которая будет отображаться при наведении на баннер.

Остается только вставить полученный код в нужный файл. Я установил в шапку, поэтому редактировал файл header.php и вставил код, часть его в скрине ниже

После этого сохраняем код и проверяем, если что то не так, то делаем отмену, для этого при редактировании используйте только FileZilla и программу Notepad++

Теперь Вы знаете, как можно создать анимированный баннер самому при помощи программы Easy GIF Animator и установить полученный баннер на сайт.

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

[Note]

Внимание! Новый мини-конкурс

Я скоро опубликую интервью с известным блоггером,  вы наверняка про него слышали. Каждый желающий может выбрать до 2 вариантов, и указать в комментариях свой вариант, кто угадает фамилия блоггера, получает 50 wmr на кошелек вебмани. Если будет несколько правильных ответов, использую жребий. Время на правильный ответ до выхода следующей статьи. Удачи!

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

Как Вам мой новый фавикон? Сделал сам за 10 минут, хотите узнать как?

[/note]

Хочу спросить, а вы создавали баннеры сами или заказывали их изготовление фрилансерам? Сколько Вам это стоило?  Все ли Вам понятно в моем посте? Если будут вопросы, задавайте их в комментариях. Как вам мой баннер в шапке, сильно простой или нормальный? Первый блин иногда получается комом…

До встречи!

Интересные статьи по данной теме:

Как вставить html код в статью вордпресс без плагина

Как создать свой инфопродукт

Как создать кроссворд и организовать конкурс кроссвордов на блоге

Создаем sitemap.xml с помощью All in One Seo Pack

Как создать страницу ошибки 404

С уважением, Вилков Николай

Все статьи блога

Хотите в числе первых узнавать о новых статьях и курсах?

Подпишитесь на обновления моего блога и мой канал на YouTube
Если статья вам понравилась, поделитесь с друзьями в социальных сетях. Спасибо!