1. Давайте звернемося до вікіпедії що ж таке банер
2. розміри банерів
3. Що нам буде потрібно для банера
4. Процес створення банера
5. Налаштовуємо колірну гамму
6. Пишемо текст і наповнюємо його ефектами
7. Установка картинки і зміна масштабу
8. Робимо кнопку з написом скачати
9. налаштовуємо анімацію

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

Як то кажуть «реклама це двигун бізнесу» і ми цей двигун будемо з вами створювати по гаечки по болтики ми зберемо наш GIF банер.

зміст:

1. Процес створення банера
2. Налаштовуємо колірну гамму
3. Пишемо текст і наповнюємо ефектами
4. Установка картинки і зміна масштабу
5. Робимо кнопку з написом СКАЧАТИ
6. налаштовуємо анімацію

Давайте звернемося до вікіпедії що ж таке банер

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

розміри банерів

88 × 31, 100 × 100, 100 × 200, 120 × 60, 120 × 90, 120 × 240, 120 × 600, 125 × 125, 125 × 250, 160 × 60, 160 × 120,160 × 240,160 × 600, 240 × 400, 250 × 250, 336 x 280, 460 × 60, 728 x 90 і багато інших.

Що нам буде потрібно для банера

• І так перш за все вам потрібна програма Photoshop не нижче cs 3, хоча і в більш ранніх версіях теж можна зробити але трохи в інший спосіб.
• Звичайно ж вам ще потрібно зображення дивлячись яка у вас тематика, в моєму випадку ми будемо створювати банер на тему «Як створити сайт»
• І звичайно ж вам буде потрібно трохи проявити фантазії.

Процес створення банера

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

1. Ми заходимо в редактор «Photoshop» і натискаємо вкладку «файл»
2. Після того як ми натиснули на «файл» після ми «створюємо новий»
3. І у нас з'являється нове вікно для визначення розмірів, і потрібного фону.
4. Потім вам потрібно визначиться з розмірами банера а точніше з шириною у мене 236 px
5. А тут ми вписуємо розмір висоти, в моєму випадку це 400 px
6. Ми визначаємо який буде наш новий фон.
7. Після того як ми в новому вікні все налаштували ми натискаємо «ok»

Налаштовуємо колірну гамму

1. Для цього ми натискаємо на іконку з ліва під назвою «заливка»
2. І у нас з'являється нове вікно за допомогою чого ми вибираємо потрібний нам колір.
3. За допомогою бігунка ми можемо вибрати будь-яку колірну палітру.
4. Після того як ми вибрали колір натискаємо «ок»

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

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

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

Пишемо текст і наповнюємо його ефектами

1. Для того що б написати текст ми натискаємо на потрібну нам вкладку а саме на букву «Т» в лівій колонки.
2. Для зміна колірної гами тексту ми натискаємо на квадратик який розташований внизу також лівої колонки панелі і так же бегунком визначаємо потрібний нам колір.
3. Для того що б змінити який не будь текст, картинку і.т.д ми наводимо курсор на потрібний шар і натискаємо на нього, після чого з'являється панель зовнішніх ефектів і вибираємо потрібну нам настройку і чаклуємо)). (Дивимося нижче)

Установка картинки і зміна масштабу

Потім як ми написали текст і вставили ефекти для банера нам потрібно тепер вставити картинку, для цього ми натискаємо на «файл» і потім «відкрити». Далі нам потрібно вибрати потрібну нам картинку наприклад я вибрав 3-D картинку до речі в моїй статті ви можете подивитися як її можна зробити буквально за 2 хвилини.

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

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

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

Робимо кнопку з написом скачати

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

І ось уже кнопка майже готова не вистачає тільки написи і ми знову натискаємо на букву (1) Т і пишем слово на кнопці, наприклад «скачати» далі ми налаштовуємо ефекти під свій смак кнопки і тексту.

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

налаштовуємо анімацію

Підходимо до заключного етапу налаштовуємо анімацію, для цього ми переходимо на вкладку «Вікно» і натискаємо «Анімація»

1. 1. Після цього у вас внизу з'явиться нове додаткове вікно це і є анімаційна функція для нашого банера.
   2. Після ми натискаємо на папку розташована внизу вікна, ця функція дозволяє примножити наш файл для подальшої роботи (дивимося нижче)
   3. Так само якщо наприклад ви розмножили велика кількість файлів то ви з легкістю можете їх видалити натиснувши на кошик.
   4. І тепер переходимо до головного для того що б наш банер виглядав за потрібне нам чином нам потрібно по черзі натискати на око (4) там де відображається вічко і буде відображатися на нашому банері.
   5. Після вам потрібно визначити час, поставлені вами секунди і будуть відображати інтервал анімаційного ефекту.
   6. Ця функція дозволяє відтворити те, що у вас вийшло.
   7. Так само ви можете задати час на свій розсуд.

повернутися до змісту

Рекомендую подивитися відео

-Рекомендується ознайомитися зі схожими моїми статьямі-