Як зробити банер і створити його код?
Як зробити банер і створити його код?
В процесі розкрутки сайту, блогу, настає той час, коли виготовлення та встановлення свого банера стає найгострішою необхідністю. Наприклад, створили ми свій перший інформаційний продукт, зробили сторінку захоплення з формою підписки. На цю сторінку захоплення потрібно направляти відвідувачів. Використовуємо для цього соціальні мережі, розсилки і т.д. І тут зовсім не зайвим буде наявність на видному місці, як правило, в сайт барі і не тільки, що привертає увагу банера, при натисканні на який відвідувач потрапляє на ту ж сторінку захоплення. Тут і виникає питання, як зробити банер і створити його код.
Що таке банер і як розмістити готовий банер на сайті розглянуто раніше в статті «Розміщення банера». Тут же ми розглянемо коротко з посиланнями на інші ресурси сам процес виготовлення, а також докладніше, що викликає труднощі у початківців, створення коду банера для вставки на сайт.
Малюнок 1. Верхня панель онлайн сервісу «Photo editor online»
У цьому сервісі надані можливості створення нового малюнка, завантаження зображення з комп'ютера, завантаження зображення по URL, відкриття зображення з бібліотеки і навіть з Вашого мобільного телефону / планшета (малюнок 2).
Малюнок 2. Вікно функціональних кнопок онлайн сервісу «Photo editor online»
В інтернеті повно ресурсів, які розглядають створення і опис банера у вигляді коду. Серед них можна привести, наприклад, bloguspeh.ru , Banner Fans, MyBannerMaker, dabuttonfactory.com, all-gif.narod.ru/baner.htm, danilidi.ru, odnaknopka.ru. Створення своєї картинки з анімацією (gif файл) досить простим і зрозумілим методом в редакторі FastStone детально представлено в матеріалі Едуарда Пітерцева. Там же він розповідає і про самому редакторі FastStone. Простий спосіб створення банера представляє в своїх відеоуроку Сергій Медведєв. Процес написання коду детально розглядається на ресурсі Марії Ріш.
Можна, звичайно, покопавшись розібратися і скористатися будь-яким з наведених ресурсів, але я запропонував би для новачків простий, випробуваний свого часу мною самим шлях.
створення картинки
Створюємо картинку з використанням онлайн сервіс «Photo editor online». Розібратися там легко прямо в самому сервісі. Якщо є хоча б початкові загальні навички по роботі в програмі фотошоп, звичайно краще використовувати її. Там набагато більше можливостей для вираження Вашої індивідуальної задумки.
Отримання URL місця, де лежить картинка
Перед цим збережено у себе на компьюторе картинку, завантажуємо до себе на сайт. Для цього заходимо в адмін панель сайту на движку WordPress, в консолі знаходимо «Медіафайли» à «Додати новий» і натискаємо «Додати новий» (малюнок 3).
Малюнок 3. Консоль сайту
У вікні (малюнок 4) натискаємо кнопку «Виберіть файл». Вибираємо файл з створеної і збереженою у себе на компьюторе картинкою. У віконці (рисунок 5) з'являється назва обраної картинки. Натискаємо активується при натисканні кнопки «Завантажити» і відкривається вікно «Бібліотека файлів» (малюнок 6).
Малюнок 4. Вікно вибору нового медіафайлу
Малюнок 5. Віконце завантаження нового медіафайлу
Малюнок 6. Вікно «Бібліотека файлів»
Далі клацаємо по картинці нашого файлу - відкривається вікно «Змінити мультимедійний» (малюнок 7). У цьому вікні бачимо посилання на файл з нашою картинкою.
Малюнок 7. Вікно «Змінити мультимедійний з необхідною посиланням на нашу картинку
Створення коду банера
Відразу скажу, що не раджу новачкам створювати код самим, наприклад, як показано на ресурсі Марії Ріш. Справа ця тонка, вимагає уважності і певних навичок. Відсотків 99, що у Вас не скоро вийде. Зрештою, наша мета - заробляти гроші, а не вивчати мову HTML. Тому, заходимо на чудовий сервіс http://webanet.ucoz.ru/index/0-14 , Натискаємо «Генератор HTML коду банерів і кнопок» і заповнюємо поля у вікні (малюнок 8).
Малюнок 8. Вікно генератора HTML коду банерів і кнопок сервісу WEB.A.NET
Введення даних зазвичай утруднень не викликає. Єдине, в поля «Ширина і висота банера» значення потрібно вводити в пікселях. Після заповнення полів натискаємо кнопку «Згенерувати код» і в віконці «Скопіюйте готовий код з цієї форми» отримуємо готовий код для вставки в наш сайт бар. Ще раз нагадаю, що процес розміщення банера (вставки коду) докладно наведено в статті «Розміщення банера». У цьому вікні бачимо посилання на файл з нашою картинкою. Після вставки коду в нашому сайт барі бачимо, наприклад, таку картинку (малюнок 9). При натисканні на картинку, відкривається сторінка підписки на безкоштовну книгу «Сайт сам створю». Спробуйте! У той же час можна не натискаючи на картинку ввести свої ім'я та E - mail в форму внизу і отримати безкоштовну книгу, натиснувши на кнопку «Отримати». Спробуйте!
