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

  1. 1. Що таке банер
  2. 1.1 Формати банерів
  3. 1.2 Види банерів
  4. 2. Як зробити банер онлайн
  5. 2.1 Крок перший: створення макета
  6. 2.2 Крок другий: створення напису
  7. 2.3 Крок третій: створення тіньових ефектів
  8. 2.4 Крок четвертий: створення рамки банера
  9. 2.5 Крок п'ятий: збереження банера
  10. 3. Програми для створення банера
  11. 3.1 Easy GIF Animator
  12. 3.2 Інші програми для створення банерів

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

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

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

1. Що таке банер

Банер (англ. Banner - прапор) - графічне зображення рекламного характеру. У сфері Інтернет банер є особливим форматом реклами, що містить гіперпосилання на рекламований сайт.

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

Але більший внесок в цю справу вносять саме банери

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

1.1 Формати банерів

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

Найчастіше в інтернеті використовуються наступні стандартні розміри банерів (сітка взята з рекламної кампанії Google Adsense):

Найчастіше в інтернеті використовуються наступні стандартні розміри банерів (сітка взята з рекламної кампанії Google Adsense):

Примітка: розміри (горизонтальний Х вертикальний) вказані в пікселях (px).

Подивитися, як виглядають банери даних форматів, можна тут .

1.2 Види банерів

Крім формату слід враховувати і ще одну особливість. Банер, за способом його реалізації, відносять до одного з трьох видів:

  • Статичний банер - найпростіший варіант. В цьому випадку банер являє собою одну статичну картинку (незмінний зображення). Переваги - простота реалізації, невелика вага файлу. Недолік - мінімум виразності; такі банери, як правило, менш ефективні, ніж їхні інші види.
  • Анімований банер являє собою кілька зображень, по черзі мінливих в часі. Формат подібного файлу - «.gif». Переваги - висока ефективність, непогана виразність. Недолік - досить велику вагу банера в порівнянні з попереднім варіантом.
  • Флеш-банер (Java-банер) - найскладніший за ступенем реалізації варіант. Створюється за технологією Adobe Flash. Завдяки своїм особливостям (використання векторної графіки замість растовой) значно зменшується обсяг файлу, але з'являються додаткові можливості (звукові ефекти, плавну зміну кадрів і т.д.). Деякі банери дають можливість здійснювати інтерактивні дії (натискати кнопки на банері, грати в міні-ігри і т.д.). А рекламна посилання захована всередині і не видна користувачеві. По суті, даний банер являє собою програму. Переваги - висока ефективність, відмінна виразність, невеликий розмір файлу. Недолік - додаткові вимоги до сайтів (необхідна підтримка Java) і браузерам (може не працювати на старих версіях браузерів, які не підтримують Flash-анімацію).

2. Як зробити банер онлайн

Одним із способів зробити анімований банер онлайн є сервіс bannerfans.com. Його перевага полягає в тому, що функціонал створення банера перевершує аналогічні ресурси. Є можливість зміни мови (російська підтримується).

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

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

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

Тепер про те, як створити банер для сайту за допомогою Bannerfans. Робиться це за 5 кроків.

2.1 Крок перший: створення макета

Отже, спочатку потрібно перейти в онлайн-конструктор банерів - ось посилання . Переключивши мову інтерфейсу на російську (правий верхній кут сайту), виберіть закладку «Макет» (перша область на скрині). Тут створюється фон для майбутнього банера.

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

Тепер можна вибирати фон зображення (третя область). Ви можете завантажити своє зображення, для чого потрібно вибрати третій пункт. Якщо ж шаблону у вас немає, вибирайте перший пункт (суцільний колір) або другий (заливка градієнтом). На скрині показаний варіант з градієнтом.

У четвертій області вибирається початковий колір градієнта і кінцевий.

У п'ятій області вибирається тип (режим) градієнта.

2.2 Крок другий: створення напису

На цьому етапі можна створювати до 6 різних написів. Але спочатку потрібно перейти на вкладку «Текст». На скрині нижче область розділена на сім частин.

Перша область - превью, де можна подивитися, як буде виглядати банер. Ця область примітна тим, що прямо на неї можна «рухати» написи, змінюючи їх положення на тлі. До недоліку сервісу по створенню банерів слід віднести те, що всі зміни, які ви будете вносити, відбуваються не в онлайн-режимі (для цього доводиться натискати на кнопку «Змінити банер»).

Друга область - безпосередньо написи. Можна створювати до 6 різних варіантів. Але довжину написи слід робити такий, щоб вона помістилася на тлі банера.

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

Четверта область - розмір шрифту.

П'ята область - колір напису. Доступний досить великий вибір.

Шоста область - нахил написи (щодо горизонталі).

Сьома область - кнопка «змінити банер». Використовується для відображення внесених змін.

2.3 Крок третій: створення тіньових ефектів

На цьому етапі можна створювати ефекти, що призводять до появи тіней від написів. Це допомагає створювати банери більш виразними. Для початку потрібно перейти на вкладку «Вплив».

Тінь - вибір положення тіні (праворуч, ліворуч, зверху, знизу і т.д.)

Відстань - віддаленість тіні від основного напису.

Колір - вибір кольору тіні (за замовчуванням обраний сірий).

Яскравість - вибір яскравості тіні.

Текст плану - вибір товщини рамки напису (при створенні, текст обводиться додатковим кольором, що робить напис об'ємною).

Начерки квітів - вибір кольору рамки.

2.4 Крок четвертий: створення рамки банера

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

На скрині нижче показані варіанти рамки (відсутня, суцільна, пунктирна, подвійна суцільна і подвійна пунктирна).

На скрині нижче показані варіанти рамки (відсутня, суцільна, пунктирна, подвійна суцільна і подвійна пунктирна)

Під рамками знаходяться інші настройки - колір, розмір, віддаленість від кордонів фону і яскравість лінії.

2.5 Крок п'ятий: збереження банера

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

. PNG - формат, який гарантує високу якість зображення, але і розмір його буде великим.

. GIF - самий «легкий» формат. Невисока якість, але і малий розмір файлу.

. JPG - щось середнє між двома попередніми варіантами.

3. Програми для створення банера

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

3.1 Easy GIF Animator

Дуже зручною програмою для створення банерів є Easy GIF Animator, яку можна завантажити безкоштовно з цим посиланням (Близько 4 Мб). Хоча сама програма платна (вартість близько 30 $), все ж перші 20 запусків безкоштовні (ознайомчі). Програма створює нехитрі анімовані GIF-банери для сайту.

Встановивши програму і запустивши її, виберіть пункт «Створити анімований банер».

Встановивши програму і запустивши її, виберіть пункт «Створити анімований банер»

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

Також є можливість визначити розміри шаблону банера для його подальшої обробки

У наступному вікні визначаються параметри колірної гами банера. Можна завантажити свій шаблон, а можна вибрати простий колір або градієнт.

Можна завантажити свій шаблон, а можна вибрати простий колір або градієнт

Далі йде вікно створення написів. Тексти (не більше 3 штук) будуть слідувати один за іншим з обраної затримкою. Для написи можна вибрати шрифт, розмір і колір. Також вказується вирівнювання і ефекти появи / зникання текстів.

Також вказується вирівнювання і ефекти появи / зникання текстів

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

3.2 Інші програми для створення банерів

  1. Banner Maker Pro - ще одна невелика програма (близько 6 Мб), яка дає можливість створювати анімовані нескладні банери, міні-логотипи або кнопки. Дуже проста і зручна у використанні, але її можливості обмежені.
  2. Ulead Gif Animator - більш потужна програма (близько 10 Мб), яка допоможе зробити логотип або банер. Її можливості набагато ширше, ніж у попередніх варіантів, але і розібратися в ній трохи складніше.
  3. Banner Designer Pro - можливо, найкраща програма зі створення якісних анімованих банерів для сайту (близько 20 Мб). Звичайно, освоїтися в ній складніше, ніж в інших програмах, але її функціонал дійсно вражає.

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