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

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

Слово банер походить від англійського слова «banner», що в перекладі означає «прапор» або «транспарант». У сучасній інтерпретації для сайтів банер – це якесь графічне зображення, що припускає собі за мету:
— рекламу якогось товару або послуги,
— повідомлення про будь-яку важливу подію в житті сайту (конкурс, акція, початок тренінгу …)
— просто позитивне інформування відвідувачів сайту з метою поліпшення іміджу (привітання зі святами, позитивні фрази та мотиватори, що викликають посмішку і підіймають настрій відвідувачам сайту …)

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

На статичних банерах використовується одне зображення без руху. Це зображення може являти собою просто картинку, фон або картинку з написами, або просто написи. Зображення може бути як у форматі jpg, так і в форматі gif (якщо картинка з анімаційними ефектами).

Анімаційні (GIF-банери) — це кілька зображень, які послідовно йдуть один за одним, змінюють один одного і створюють «ефект руху». Зміна кожного зображення відбувається послідовно з урахуванням певної витримки (затримки) часу кожного кадру. В даному виді банера зазвичай використовується нескладний сценарій, плавність рухів в ньому залежить від кількості проміжних кадрів, що дають візуальний ефект руху. Але при цьому чим складніше сценарій, тим більше «важить» банер. Це теж треба враховувати при створенні анімаційного банера. Оптимальна кількість кадрів – 5-6 для такого виду банерів.

Флеш-банери – це результат процесу програмування, і зазвичай вони створюються в спеціальних програмах, типу Adobe Flash. У цих банерах використовується векторна графіка, що дозволяє робити анімаційні ефекти при невеликій «вазі» банера, а також є можливість використання звукових ефектів. Якісні флеш-банери складні у виготовленні й тому їх розробку здійснюють найчастіше кваліфіковані фахівці.

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

Стандартні розміри горизонтальних банерів

Стандартні розміри вертикальних банерів

Стандартні розміри квадратних банерів

Створення статичного банера для сайту
Для створення статичного банера вам стане в пригоді фотошоп або будь-який інший графічний редактор. Процес створення досить простий і не вимагає великих зусиль. Він складається з наступних операцій:
• вибираємо розмір банера,
• корегуємо готове зображення (фон, зображення, колаж, анімовану картинку …) до розміру обраного банера,
• робимо зовнішнє обведення банера,
• пишемо потрібний текст,
• зберігаємо отриманий банер у форматі jpg, png або gif.

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

Ось такий банер я зробила в фотошопі.

Або можна скористатися безкоштовним онлайн-сервісом

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

1- Переходьте за вищезазначеним посиланням і потрапляєте на онлайн сервіс. У верхньому правому куті є можливість змінити мову інтерфейсу сервісу на російську мову. Переклад, звичайно, місцями не дуже правильний, але інтуїтивно зрозумілий.

создание статического баннера- 01

2- Меню «Макет» передбачає:
2.1 – вибір розміру банера (розмір за замовчуванням, ваш індивідуальний розмір банера і стандартний розмір банера зі списку),
2.2 – вибір фону банера: однотонний фон з вибором потрібного вам кольору; фон градієнтний – можна вибрати будь-який із запропонованого списку; фон (картинка, фон, колаж) ваш, який можна завантажити з вашого комп’ютера.

3- Кнопочку «Змінити банер» натискаєте кожен раз після кожної маніпуляції з банером і зразу бачите, які зміни відбулися у вашому банері. Якщо все влаштовує – переходите до наступної кнопочки основного меню.

4- Вибираємо меню «Текст»

создание статического баннера- 02

4.1 – в полі «текст» вводите необхідний вам текст по строках,
4.2 – потім підбираєте параметри шрифту: назва, розмір, колір шрифту, а також поворот тексту для кожного рядка введеного вами тексту.
Натискаєте кнопку 3 та рухаєте на самому банері текст так, як вам більше подобається. Коли ви розташували тексту так, як вам потрібно, знову натискаєте кнопочку 3 і переходите до наступного пункту.

5- Меню «Вплив». Переклад не правильний. Я б назвала цю закладку вибір ефекту для тексту. В даній закладці підбираєте тінь для кожного рядка тексту вашого банера. Після натискання кнопки 3 – бачите ефект.

создание статического баннера- 03

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

7- Меню «Формат». Вибираєте формат, в якому ви хочете зберегти свій банер.
создание статического баннера- 05

8- Якщо отриманий варіант вам не подобається, натискаємо на кнопочку «Нова», тобто починаєте створювати новий банер.

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

10- Онлайн сервис разрешает скачать баннер, который вы создадите, на ваш компьютер, который вы потом можете загрузить на свой сайт.

10- Онлайн сервіс дозволяє завантажити банер, який ви створите, на ваш комп’ютер, який ви потім можете завантажити на свій сайт.

11- Натиснувши кнопку «Отримати коди» ви побачите код банера, який ви можете скопіювати та потім вставити безпосередньо на свій сайт або у свою статтю.

Ось на сьогодні й все. Успіхів вам!
Я зробила ось такий простий банер за допомогою вищевказаного онлайн сервісу буквально за 2 хвилини.

баннер сайта- 01

Наступного разу ми поговоримо про те, як створити анімаційний банер. До нової зустрічі!

Text.ru - 100.00%

Поделиться в Фейсбуке Поделиться записью в Твиттере Поделиться в Телеграмм Поделиться в ВК Поделиться в ЖЖ Поделиться в ОК Поделиться в Whatsapp Поделиться в Viber

Ваш коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

  Відправляючи коментар, ви погоджуєтеся з політикою конфіденційності цього сайту *

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