1. Поширені типи банерів
2. 2. Слайдер
3. 3. GIF-анімація
4. 4. Flash-анімація
5. Як створити банер для сайту
6. Banner FANS
7. Гіфовіна
8. 2. Спеціальний софт
9. Ulead Gif Animator
10. Easy GIF Animator Pro
11. 3. Замовити дизайнерської студії або фрілансера
12. 4. Вручну в графічному редакторі
13. фотошоп
14. Microsoft Power Point
15. Paint.net
16. Як зробити банер посиланням

На певному етапі розвитку інтернет-проекту йому може знадобитися свій власний банер. Наприклад, для продажу своїх або партнерських інформаційних продуктів (про цей вид заробітку я писав у статті " Як заробити на партнерських програмах "), Розкручування бренду, залучення трафіку і так далі.

На перший погляд може здатися, що для створення повноцінного банера професійного рівня необхідно мати дизайнерські навички або, щонайменше, вміти добре малювати. Нічого цього в умовах сучасного розвитку комп'ютерних технологій не потрібно. Навіть якщо власник сайту в школі отримував по малюванню одні двійки, створити відмінний, персоналізований, унікальний і привабливий веб-банер можна буквально за кілька хвилин. А якщо затратити на це трохи більше часу, власноруч зліплений медіа-плакат не поступатиметься професійно виконаним дизайнерських робіт.

Що включає в себе веб-банер:

1. Графічне зображення;
2. Рекламний текст;
3. Гіперпосилання на рекламовану сторінку.

Головне, банер повинен створюватися з таким розрахунком, щоб користувач був притягнутий його красивим зображенням, прочитав супровідний рекламний текст і був натхнений клікнути по його поверхні, щоб дізнатися подробиці. Від привабливості зображення міні-плаката і від міститься інтриги в супровідному тексті, залежить число переходів по банеру і, відповідно, відсоток продажів рекламованого продукту.

Поширені типи банерів

1. Статичний плакат

Щоб створити простий статичний банер для сайту, достатньо будь-якого графічного редактора з опцією додавання тексту. Потім залишається тільки розмістити картинку на веб-сторінці і додати до неї гіперпосилання.

2. Слайдер

Являє собою послідовність автоматично перемикаються картинок. Відвідувач може самостійно перегортати картинки, натискаючи на кнопки вперед і назад. Приклад такого слайдера в сайдбарі WordPress-book.ru.

Для створення слайдера будь-якого розміру на сайті WordPress рекомендую використовувати плагін Content Slide .

3. GIF-анімація

Графічне анімоване зображення формату gif. Схоже на спрощену мультиплікацію. Від повноцінного мультфільму відрізняється невеликою кількістю склеєних в кільце зображень. Один з найбільш популярних форматів створення веб-банерів.

4. Flash-анімація

Наступний етап наближення до мультиплікації. Анімація на основі Flash-технології, розробленої компанією Adobe.

Flash-ролик важить зовсім небагато і не уповільнює завантаження сторінок сайту. Тому і користується великою популярністю. Виглядає дуже ефектно і привабливо. Але є серйозна проблема - багато провідних компаній-розробники не включають підтримку Flash в свої продукти і тому не всі операційні системи здатні відображати файли такого формату. Це означає, що значна частина мобільних користувачів не побачать Flash-банери на своїх смартфонах і планшетах. Але ж власники мобільних девайсів є найбільш конверсійними користувачами.

Як створити банер для сайту

1. Онлайн-сервіси

Спеціалізуються по створенню банерів онлайн-сервіси пропонують послуги з напівавтоматичного створення таких міні-плакатів практично будь-якого формату. Залежно від якості послуг такі сервіси можуть бути як абсолютно, так і умовно-безкоштовними.

Представлю два безкоштовних, сподобалися мені сервісу.

Banner FANS

Bannerfans.com - сервіс для створення статичних банерів, переведений на російську мову, що приємно і полегшує роботу. Ви можете створити банер з нуля або переробити під свої потреби із запропонованих шаблонів.

На кожній вкладці безліч опцій, розібратися в яких не важко.

Для текстового оголошення доступний багатий набір шрифтів, але кирилицю підтримують тільки з сімейства Stock.

Зручний сервіс, що дозволяє швидко створити простий і без надмірностей банер на кожній сторінці.

Гіфовіна

Gifovina.ru - цей сервіс теж гранично простий в роботі, і, на відміну від попереднього, може створювати анімаційні: банер, аватарку або слайд-шоу зі зміною картинок. Просто додайте картинки в чергу натиснувши на кнопку "Додати кадр".

Недолік сервісу в тому, що вихідні картинки для анімації повинні бути приготовлені заздалегідь.

2. Спеціальний софт

Користуватися послугами онлайн-сервісів не завжди зручно. Те сервіс виявляється занадто дорогим, то його функції не будуть підходити під ваші завдання, то ще щось не влаштовує. Альтернатива - скачати програму, спеціально пристосовану для розробки банерів.

У таких програмах можна використовувати: покроковий майстер, великі бази готових шаблонів, різноманітні інструменти для кастомайзинга і так далі.

Пропоную вашій увазі дві програми, якими час від часу користуюся сам.

Ulead Gif Animator

Ця програма по праву користується всесвітньою популярністю. Розібравшись в її нескладному інтерфейсі, ви без праці створите гарний анімований банер для свого сайту або навіть невелику презентацію свого продукту.

Робота з шарами (як в фотошопі), численні інструменти і ефекти цілком дозволяють це здійснити.

Я замінив текст біжучого рядка шаблонного банера програми, і ось що у мене вийшло:

Easy GIF Animator Pro

Цей софт простіше, ніж попередній.

Після запуску програми відкриється вікно майстра, що пропонує в кілька кроків створити анімований банер або кнопку. Вам буде запропоновано вибрати розмір банера, потім його колір або свою фонову картинку, і на останньому кроці ввести три текстових оголошення, які будуть змінювати один одного у відповідності з обраним ефектом.

Ось мій банер, створений в Easy GIF Animator Pro менш ніж за хвилину:

Банери в обох програмах оптимізуються автоматично без втрати якості, що, безсумнівно, великий плюс в їх користь.

3. Замовити дизайнерської студії або фрілансера

Це варіант для багатих естетів, які мають чіткі уявлення того, як повинен виглядати і який ступінь інтерактивності буде мати готовий банер.

Результуючий продукт визначається польотом фантазії дизайнера і сумою, яку готовий заплатити замовник.

Хорошого виконавця замовлення ви швидко знайдете на біржах фріланса, наприклад таких як frilans.ru.

4. Вручну в графічному редакторі

Користувач часто просто не здогадується, що графічна програма, встановлена ​​на його комп'ютері, вже має вбудовані опції для створення банерів, в тому числі і анімованих.

Представлю вашій увазі кілька відеоуроків про те, як створити банер на кожній сторінці в різних графічних редакторах, а ви оберете для себе найбільш підходящий варіант.

фотошоп

Найпотужніший редактор для виконання будь-яких завдань, але і найскладніший і дорогий. При наявності встановленої програми і по наочному прикладу в відеоуроці ви свій банер створите без особливого клопоту.

Microsoft Power Point

Програма, яка входить в інсталяційний пакет Microsoft Office. Є висока ймовірність того, що вона у вас вже встановлена ​​разом з Microsoft Office Word.

У відео наочно показаний процес створення банера по одному з численних шаблонів. Користувачеві потрібно вибрати бажаний зразок і потім заповнити піддаються модифікації форми бажаним матеріалом.

Paint.net

Безкоштовний і досить популярний графічний редактор. Відмінна заміна платних програмах для виконання робіт з графічними зображеннями.

Як зробити банер посиланням

Досить проста задача, але у багатьох початківців веб-майстрів виникає утруднення при її вирішенні.

Банер робиться посиланням як будь-яке інше графічне зображення. Для цього завантажте його на будь-яку сторінку свого сайту.

Після завантаження в налаштуваннях відображення файлу в поле «З розсилання» виберіть «Довільний URL» і в полі нижче вставте своє посилання.

Після вставки банера в запис, в режимі «текст» ви отримаєте його HTML код, який можна розмістити в будь-якій частині свого або сайту-донора.

Зверніть увагу, щоб рекламована сторінка відкривалася в новому вікні, до її посиланням додайте атрибут target = "_ blank", як на картинці.

Тим, кому я допоміг створити банер на кожній сторінці, пропоную поділитися тут своїм творінням. Просто скопіюйте його HTML код в форму коментаря. Додаткова реклама вашого сайту не завадить :-).