Статьи

Зробити гарний банер онлайн. Створення банера онлайн

  1. Як створити банер самому за допомогою Easy GIF Animator 5 Pro
  2. 2. Запускаємо програму і вибираємо, що ми хочемо створити
  3. 3. Далі необхідно вибрати фон для банера
  4. 4. Встановлюємо фон банера
  5. Створення коду і установка банера на сайт
  6. Увага! Новий міні-конкурс
  7. Що таке банер?
  8. Як зробити банер в онлайн сервісі Banner Fans?

Для того, щоб читачі про нього більше дізналися, я сам створив банер і розмістив його в шапці.

Чому в шапці? Тому, що це саме помітне місце на блозі і шапка відображається на будь-якій сторінці блогу.

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

Як створити банер самому за допомогою 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)

Вам потрібно змінити http: // ваш_сайт це адреса сторінки, на яку буде потрапляти читач, клікнувши по банеру, і http: // ПУТЬ_К_КАРТІНКЕ. gif це адреса картинки - банера, офлайн попередньо.

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

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

Після цього зберігаємо код і перевіряємо, якщо щось не так, то робимо скасування, для цього при редагуванні використовуйте тільки FileZilla і програму Notepad ++

Тепер Ви знаєте, як можна створити анімований банер самому за допомогою програми Easy GIF Animator і встановити отриманий банер на сайт.

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

Увага! Новий міні-конкурс

Я скоро опублікую з відомим блогером, ви напевно про нього чули. Кожен бажаючий може вибрати до 2 варіантів, і вказати в коментарях свій варіант, хто вгадає прізвище блогера, отримує 50 wmr на гаманець вебмані. Якщо буде кілька правильних відповідей, використовую жереб. Час на правильну відповідь до виходу наступної статті. Успіхів!

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

Як Вам мій новий фавікон? Зробив сам за 10 хвилин, хочете дізнатися як?

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

До зустрічі!

Як користувачеві Інтернету вам кожен день доводиться бачити рекламні банери, подобається вам це чи ні. Реклама впевнено заповнила інтернет-простір, зі сторінок буквально кожного сайту на нас дивляться барвисті і затягають банери.

Щодня в мережі з'являються тисячі нових сайтів, і в якийсь момент часу у кожного з їхніх авторів виникає питання: як зробити банер для сайту?

Створення банерів вимагає серйозного ставлення, тому що красивий рекламний блок - це візитка сайту, і солідність в іміджі!

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

Що таке банер?

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

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

Залежно від способу створення виділяють різні види банерів - jreg, gif, flash і ін. Банер може бути статичним або анімованим. Найчастіше використовують анімацію оскільки її ефективність набагато вище. Розміри банера, його ширина і висота в пікселях, в принципі, нічим не обмежені. Однак існують загальноприйняті формати банерів, яких дотримуються більшість сайтовладельцев.

Створення банерів насправді є завданням досить простий, і вирішити її можна кількома шляхами:

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

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

Безкоштовний онлайн сервіс Banner Fans надає користувачеві можливість самому зробити банер онлайн і при цьому заходи створений банер безкоштовно.

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

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

Банер можна зберегти в jpg, png або gif форматі (Зробити анімований банер в цьому сервісі можна) або відразу отримати код для сайту. Створення банерів в Banner Fans не вимагає реєстрації (тільки в тому випадку, якщо ви хочете зберігати ваші роботи в своєму профілі на сайті сервісу, потрібно буде зареєструватися).

Зручний "drag and drop" інтерфейс дозволяє переміщати напис на банері, просто перетягуючи його мишкою.

Банер, зроблений в сервісі Banner Fans:

Як зробити банер в онлайн сервісі Banner Fans?

Для початку перейдіть на сайт онлайн сервісу Banner Fans. У разі необхідності змініть мову інтерфейсу (у правому верхньому куті). Переклад на російську не зовсім коректний, але тим не менш дозволяє вільно орієнтуватися на сайті сервісу.

Тепер спробуємо зробити банер в онлайн генераторі. Як бачите, його робоча область розділена на дві частини, у верхній відображається створюваний банер , В нижній встановлюються його налаштування (в російській перекладі вони звучать так: Макет, Текст, Вплив, Прикордонна, Формат).

У розділі "Макет" встановіть потрібні фон і розміри банера. По ходу створення свого банера натискайте на кнопку "Змінити банер" на нижній панелі робочої області, щоб наочно бачити внесені вами зміни.

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

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

Останній пункт в цьому меню потрібно вибирати, якщо в якості фону для банера ви бажаєте використовувати своє зображення. В поле "Завантаження фонового малюнка" можна завантажити картинку з комп'ютера (кнопка Огляд) або нижче вказати її URL-адресу в інтернеті. Зображення повинно бути в форматі jpg , Jpeg, gif або png і розміром не більше 450kb.

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

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

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

На банер можна нанести до 6 рядків тексту (Лінії) і кожну окремо налаштувати - встановити їм шрифт, розмір, колір і кут повороту. У вікні вибору шрифту вгорі розташовуються різні категорії шрифтів, серед них є підтримуючі кирилицю (в розділі Stock у всіх шрифтах є російські літери). Спочатку виберіть категорію і далі сподобався шрифт.

У розділі Вплив встановлюються ефекти, що застосовуються до тексту (для кожної лінії тексту окремо).

У колонці Тінь можна встановити тінь для тексту та її розташування. Якщо ви не хочете використовувати тінь, вкажіть значення No shadow. Поле Відстань встановлює зсув тіні від тексту, а Колір зрозуміло, що дозволяє вибрати колір тіні.

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

Наступний розділ Прикордонна дозволяє вибрати і налаштувати вид рамки навколо банера.

Тип рамки: None - без рамки, Solid - одинарна суцільна лінія, Dashed - одинарна пунктирна, Double Solid - подвійна суцільна, Double Dashed - подвійна пунктирна.

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

На завершення в розділі Формат виберіть розширення для створеного банера і збережіть його у себе на комп'ютері (кнопка Завантажити банер

FaceYourManga, створюємо автопортрет

У зручному онлайн сервісі Gifovina буквально в 2 кліка

Брашечка

Для любителів малювати

У сервісі для створення простих кнопок CoolText

У конструкторі LogoMaker

Пропонує веб-сервіс CoolText

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

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

Http://www.animationonline.com;

Http://www.zyris.com;

Http://www.quickbanner.com.

Особисто я для виготовлення банерів користуюся програмою Paint Shop Pro, безкоштовну демонстраційну версію якої можна скачати на http://www.jask.com. Це найкраща з легких у використанні програм графічного дизайну, доступна сьогодні в Мережі.

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

1. Використовуйте слова "Натисни сюди" і "Вхід" при дизайні банера. Звичайно, першою Вашої думкою в даному випадку буде, що ці слова вже в зубах загрузли у користувачів Мережі. Однак дослідження однозначно показують, що використання цих слів саме по собі допомагає збільшити ефективність банера на 20 - 30%. Саме ці слова стають, як правило, вирішальним фактором у дії користувача за умови, що його зацікавив заголовок.

2. виготовляють анімовані банери. Анімація банера збільшує коефіцієнт його корисної дії на 30 - 40%.

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

3. Банери повинні швидко завантажуватися. Максимальний обсяг гарного банера - 10 - 12 kb. Звичайно, важко укласти в такий обсяг всю необхідну рекламну інформацію в комплексі з хорошим дизайном, але це абсолютно необхідно. Більшість банерів, які мені доводилося бачити, важили приблизно 15 - 20 kb, що відповідним чином відбивається на часі їх завантаження і на ставленні до них користувачів. Найкращий варіант, щоб банер важив менше 10 kb, тоді він буде набагато більш ефективним і привабливим як для банерних мереж, так і для інших вебмайстрів і, звичайно ж, для відвідувачів.

Найкращий і простий спосіб домогтися бажаного результату - використання анімації з двох-трьох кадрів. Плюс до цього в підготовці графічних зображень для кадрів використовуйте управління кольором, тому що в ряді випадків кадр можна виконати в палітрі 16 кольорів, а це допомагає скинути 3 - 4 kb.

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

5. Найкраще слово, яке потрібно обов'язково використовувати в заголовку - "БЕЗКОШТОВНО". При цьому ні в якому разі не слід розташовувати дане слово без пояснювального тексту. Поясніть користувачам, що саме вони отримають у Вас безкоштовно. Практика показує, що використання слова "БЕЗКОШТОВНО" з хорошим пояснювальним текстом допомагає істотно підвищити коефіцієнт кліків.

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

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

8. Використовуйте в тексті банера адресу Вашого сайту, а також логотип і назву компанії. Чи не зводите зміст банера до логотипу компанії, її назвою та адресою сайту, але вони обов'язково повинні бути присутніми. А основним моментом в банері при цьому повинні бути вигоди, які Ви обіцяєте користувачам. Зазначений прийом формує в свідомості користувача ефект впізнаваною торгової марки і здатний зробити істотний вплив на число кліків по Вашому банеру.

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

10. Міняйте банери Частіше. Дослідження показали, что даже найкращі банери, віготовлені за всіма правилами, после третього їх перегляду користувачем почінають СтрімКо втрачати свою ефективність. Якщо за ці три перегляду користувач не клацнув по банеру, він вже ніколи цього не зробить. І якщо Ви реалізуєте платні кампанії банерної рекламою і купуєте мільйони показів, у Вас має бути в запасі велика кількість різних банерів.

Створення і просування власного бренду в Інтернеті - неодмінна успішного бізнесу.


такого бренду - банери та логотипи, прив'язані до особистого сайту, або блогу.

Тисячі веб-студій і вільних дизайнерів пропонують свої послуги з проектування професійної атрибутики для сайтів будь-яких тематичних напрямків.

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

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

Безкоштовні сервіси для створення банерів, логотипів і кнопок
1. Logaster.ru - безкоштовний російськомовний онлайн-генератор логотипів. Після створення логотипу можна перейти до конструювання макета візитки і корпоративного конверта, використовуючи вже створений логотип, що дуже зручно.

Можна завантажити логотип у растровому і векторному форматі і спеціально оптимізовані логотипи для соціальних мереж

2. Flamingtext
Відмінний сервіс для створення текстових логотипів з різними ефектами


3. Logoease
100% безкоштовний інструмент для створення логотипів. Готові файли можна зберігати в форматах PNG , JPG, EPS і TIFF


4. The PCman Website
Сервіс для створення 3-D логотипів, банерів і заголовків. Можна працювати онлайн, або завантажити безкоштовну програму для комп'ютера

5. FreeLogoServisces
Прекрасний сервіс для створення професійних логотипів з шаблонів

6. 3D Text Maker
Відмінний інструмент для створення текстових банерів


7. Addesigner
Кілька простих кроків і ви отримаєте оптимізований банер високої якості

Addesigner   Кілька простих кроків і ви отримаєте оптимізований банер високої якості

Як зробити банер в онлайн сервісі Banner Fans?
Чому в шапці?
Як Вам мій новий фавікон?
Зробив сам за 10 хвилин, хочете дізнатися як?
Хочу запитати, а ви створювали банери самі або замовляли їх виготовлення фрілансерам?
Скільки Вам це коштувало?
Вам зрозуміло в моєму пості?
Як вам мій банер в шапці, сильно простий або нормальний?
Щодня в мережі з'являються тисячі нових сайтів, і в якийсь момент часу у кожного з їхніх авторів виникає питання: як зробити банер для сайту?
Що таке банер?

Новости