Як зробити анімований банер в Фотошопі
- Що потрібно для створення банера
- Вибір розміру банера
- Процес створення банера
- Як встановити банер на сайт
Привіт, шановні друзі. Сьогодні поговоримо про банерах, про те, як зробити анімований банер в Фотошопі. Ви не раз бачили банери на багатьох сайтах, можливо, розміщували ці банери на своїх сайтах. Зрозуміло, мета будь-якого баннера привернути увагу відвідувача. І якщо підібрати гарні зображення, то зробити гідний банер не складно.
А якщо ви займаєтеся партнерським маркетингом , То знаєте, що банери є практично в будь-який партнерській програмі. Вам лише потрібно взяти і вставити код на своєму сайті або в рекламній мережі. І гарний банер з вашої партнерської посиланням почне працювати.
А ще можливо ви хочете привернути увагу до свого інфопродукта. У будь-якому випадку, якщо потрібно зробити банер, то це можна зробити в графічному редакторі Photoshop.
Звичайно, якщо у вас немає цього редактора, то можна скористатися безліччю онлайн сервісами по створенню банерів.
Я ж хочу розповісти, як зробити банер своїми ручками від А до Я в графічному редакторі Photoshop.
Що потрібно для створення банера
Перш за все, вам буде потрібно сам редактор Photoshop, версія не нижче CS3. Хоча, і в більш ранніх версіях, можна зробити анімований банер, але трохи іншим способом.
Зрозуміло, вам буде потрібно зображення. Зображення - це основа всіх банерів. Залежно від тематики банера, зображення легко знайти в інтернеті.
Підібравши потрібні заготовки, можна приступати до створення банера.
Вибір розміру банера
Перш ніж приступити до створення банера, потрібно визначитися з його розмірами. Розмірів досить багато. І відповідно багато сайтів мають розміри сайтбаров, заголовка і футера з врахованими можливостями розміщення банерів.
Тому я раджу використовувати саме стандартні розміри банерів:
88 x 31; 100 x 100; 120 x 60; 120 x 90; 125 x 125; 120 x 240; 120 x 600; 160 x 600; 180 x 150; 234 x 60; 240 x 400; 250 x 250; 300 x 250; 300 x 600; 336 x 280; 468 x 60; 500 x 100; 600 x 90; 728 x 90; 970 x 90.
Розміри наведені в пікселях (px). Перша цифра - ширина, друга - висота. Вибирайте розмір виходячи з розрахунку розміщення банера.
Процес створення банера
Отже, припустимо, я вирішив зробити банер 300 x 300 для свого безкоштовного курсу «Як набрати текст голосом» . Це нестандартний розмір, але для свого блогу я можу використовувати цей розмір, так як знаю де його розмістити.
Відкриваємо графічний редактор фотошоп і створюємо нове зображення з розмірами 300 х 300 пікселів.
Пункт меню «Файл» - «Новий» - задаєте розмір і тиснете кнопку «Так» або «ОК».
Створити нове зображення
В фотошопі зображення створюється за верствам. І це дуже зручно, так як ви можете створити дуже цікаві зображення, оперую графічними елементами на різних шарах. Я розписувати в дрібницях не буду, як зробити заливку фону і так далі. Покажу це в відеоуроці. А тут розглянемо покрокову схему створення банера.
Для анімованого банера потрібно від двох зображень. Тобто два і більше. Все залежить від того, чим ви хочете привернути увагу відвідувачів.
Я створив 4 шари з зображеннями. Точніше, одне із зображенням і три з текстом.
Готуємо шари для анімації
Тепер потрібно включити відображення панелі «Анімація». Для цього відкриваємо пункт меню «Вікно» - «Анімація».
Підключаємо панель анімації
Примітка: В залежності від версії і перекладу цей пункт може називатися «Шкала часу» або ще як-небудь.
В панелі «Анімація» буде відображатися один кадр з поточним шаром. Для відтворення решти шарів слід тимчасово відключити (прибрати піктограму «очей» навпроти шару).
перший кадр
Далі, працюємо саме з цією панеллю і шарами зображення. Для початку створюємо новий кадр і включаємо відображення другого шару. Тут потрібно зрозуміти принцип, новий кадр - це підсумок зміни попереднього кадру на новий.
другий кадр
А ось зміна між кадрами забезпечується проміжними кадрами. Саме проміжні кадри дозволять створити ефект плавного прояви і зникнення написів і зображень.
проміжні кадри
Для поліпшення плавного ефекту, на кожен кадр можна задати тимчасову затримку. На кадрах, на яких слід зробити акцент, встановлюємо велику тимчасову затримку.
проміжні кадри
Тому же принципом ви додаєте, і інші кадри та шари. І кожен раз натискайте на кнопку «плей» в панелі «Анімація» і переглядайте отриманий результат. Коли результат буде вас влаштовувати, слід зберегти банер.
Тільки запам'ятайте, анімацію підтримує формат GIF. Цей формат дуже мало важить і сприймається будь-яким сайтом. Тільки ось якістю зображення цей формат не відрізняється, тому занадто круті візуальні ефекти при створенні банера використовувати немає сенсу. Якщо хочете створювати красиві візуальні ефекти, тоді варто створювати флеш банери або банери в форматі html5 .
Отже, для збереження анімованого банера потрібно відкрити пункт меню «Файл» - «Зберегти для Web».
збереження банера
Тепер ваше завдання вибрати формат GIF, решта фотошоп зробить за вас. Звичайно, ви можете поекспериментувати з налаштуваннями. Але, думаю, цього не буде потрібно.
Вибір формату gif
В результаті у вас вийде подібний банер.
Як встановити банер на сайт
Мало зробити гарний банер. Його потрібно ще встановити на сайт. Для цього сам банер потрібно завантажити на ваш сайт. Зробити це можна за допомогою файлового менеджера хостингу або через FTP-з'єднання .
Тепер в тому місці сайту, де необхідно показувати банер вставляєте ось цей код:
<! - Банер в сайтбаре -> <p style = "text-align: center;"> <a href=" ЗАСЛАННЯ З БАНЕРА "target="_blank" rel="nofollow"> <img src =" ПОСИЛАННЯ НА БАННЕР "width =" 300 "height =" 300 "border =" 0 "alt =" голосовий набір тексту "/> </a> </ p> <! - Банер в сайтбаре ->
Тільки пам'ятайте, коди вставляються в вихідний код сайту або через віджети. Не забувайте міняти посилання і розміри банера.
Банер, який я зробив ідеально підходить своїми розмірами під сайтбар, тому його найпростіше вставити через віджет.
Для цього відкриваємо адміністративну панель WordPress - «Зовнішній вигляд» - «Віджети» - тип віджета «Текст».
Віджет
Після чого додаєте віджет в сайтбар і вставляєте в нього код банера. Не забудьте поміняти посилання!
Вставка коду в віджет
Готово, - насолоджуємося плодами своєї праці.
А тепер дивимося видеоурок, в ньому ви побачите все наочно і багато питань вирішаться самі собою.
Друзі, на цьому сьогодні все. Я бажаю вам успіху і гарного настрою! До зустрічі в нових статтях.
З повагою, Максим Зайцев .