Банер є різновидом рекламного продукту, який розміщується на сайтах, привертаючи увагу відвідувачів. Чим барвистіше і цікавіше він буде, тим вище його результативність. Найчастіше розміщення банерів потребують ті, хто здійснює комерційну діяльність.
Безумовно, для його створення розшукуються талановиті графічні дизайнери, здатні створити дивовижний проект. Однак ознайомившись з деякими рекомендаціями, як зробити банер у Фотошопі, можна навчитися самостійно створювати власні цікаві проекти. Не виключено, що згодом, при відточуванні навичок, ваші банери зможуть зацікавити багатьох.
Photoshop має величезну кількість функцій і можливостей, в тому числі і створення банерів
Створення статичних варіантів
Ті, хто мав вже досвід створення банерів в Adobe Photoshop CS6, може перерахувати кілька їх переваг. Зокрема, їх достатньо просто встановлювати, вони займають зовсім небагато місця, що так важливо, коли на сайті присутній дефіцит вільного простору. Також він досить легко оновлюється і відображається на всіх пристроях.
Процес і правила створення статичних банерів
Для того щоб створити банер, користувач повинен до цього спочатку підготуватися. Підготовка полягає у створенні попереднього ескізу, зображеного на чистому аркуші паперу, щоб заздалегідь мати уявлення, що хочеться бачити автор або замовник в кінцевому підсумку. Після цього слід підібрати відповідні картинки і помістити їх всі в окрему теку.
Коли підготовчий етап завершується, можна приступати до основної частини, що передбачає створення самого банера. Спочатку відкривається Фотошоп, в якому створюється новий документ.
На цьому етапі важливо вказати бажані розміри в пікселях. Ширина може бути довільною, але досвідчені дизайнери рекомендують встановлювати ширину, рівною ширині сайдбара. Висота обчислюється шляхом обчислення висоти застосованої картинки і додаванням додаткових 60 пікселів для розміщення кнопочки.
Дозвіл нового документа також встановлює сам користувач, але при цьому важливо враховувати деякі правила. Зокрема, рекомендується застосовувати дозвіл у 72 пікселі, оскільки при збільшенні цього показника готовий банер буде важкуватий для сайту, а при зменшенні буде спостерігатися втрата якості. Фон банера підбирається під той, який має основна картинка.
Підготовлену картинку слід перемістити на створений новий документ, після чого за допомогою стрілочок її розміщують в потрібному місці, яке було визначено раніше на ескізі. Далі на цей документ переміщують кнопку, яку можна трохи прикрасити, супроводивши її додатковою тінню. Для цього всього лише потрібно двічі клікнути по ній, а потім внести відповідні параметри по установці тіні.
Після цього банер вважається готовим, залишається тільки з'єднати всі застосовані шари, а потім зберегти готовий результат у форматі jpeg, але обов'язково вибравши «Зберегти для Web».
Створення анімованих варіантів
Анімований банер здатний ефективніше привертати увагу відвідувачів сайту. Графічний дизайнер повинен самостійно вирішити, що безпосередньо має бути піддано анімації. Це може бути кнопка, а може бути і малюнок. Анімація за рахунок створення декількох шарів, які починають змінюватися в певній послідовності, створюючи ілюзію руху.
Процес та правила створення анімованих банерів
Задавшись метою створити анімований банер, спочатку слід обов'язково навчитися створювати статичні варіанти, щоб відмінно набити руку, а після цього, вивчивши рекомендації, як зробити банер у Фотошопі cs6, приступати до реалізації задуманих планів.
Спочатку користувач повинен створити простий статичний банер, успішно розташовуючи на ньому основний малюнок, кнопку і створюючи написи. Щоб зробити анімовану кнопку, потрібно зробити декілька шарів з такою кнопкою, але такою, що відрізняється за будь-якою ознакою.
Якщо ви бажаєте, щоб кнопка змінювала колір, клацніть на шарі з кнопкою, роблячи його активним, потім перейдіть до «Зображення» та «Коригування», а потім знайдіть «Насиченість колірного фону». Клацнувши по ньому, відкривається вікно, в якому вибирається тонування, що дозволяє користувачеві, рухаючи повзунок, вибрати бажаний відтінок.
Коли роботу з першим шаром завершено, створіть новий шар. Для цього слід зайти на панель «Шари» та знайти пункт «Створити дублікат шару». У новому шарі знову слід виконати ті ж самі дії з кнопкою, тільки якщо вибрано колір, слід зупинити свій вибір на тому ж кольорі, але з іншим відтінком.
Після вибору бажаних ефектів залишається погодитися, натиснувши «Ok». Далі за шаром з цими ефектами необхідно клацнути правою клавішею миші, вибрати «Скопіювати стиль шару», а потім клацнути шаром без ефектів і вибрати «Вставити стиль шару». У результаті таких дій створюються обидва шари, що супроводжуються ефектами.
Тепер залишається привести банер у рух - власне, зробити його анімованим. Для цього потрібно відкрити параметр «Створити анімацію кадру».
Оскільки в цей момент у Фотошопі відкрито два шари з кнопками, що відрізняються, перший шар важливо залишити активним, а другий шар відключити. Це буде вважатися першим кадром. Користувачеві слід підібрати оптимальний час його показу, який згодом можна при бажанні відкоригувати.
Далі необхідно створити другий кадр. Для цього користувач внизу повинен клацнути на чистому аркуші. На другому кадрі все робиться навпаки. Другий шар робиться активним, а перший вимикається.
Після завершення ви можете встановити позначку «Постійно програвати», зберегти для Web, але у форматі gif.
Отже, ознайомившись з інструкціями, як створити банер у Фотошопі, можна приступити до практичної реалізації задуманого і переконатися на власному досвіді, що нічого складного у створенні статичних і анімованих банерів немає. Після того як створення простих анімованих варіантів буде доведено до автоматизму, можна спробувати свої сили і в створенні більш складних проектів, де одночасно буде змінюватися не тільки колір кнопки, але і картинка, напис, інше.
