Як зробити свій банер.

Створення власного сайту - важливий крок у розвитку людини і вигідний хід для молодої компанії. До найважливішим атрибутам будь-якого сайту відносяться інформативність, зручність навігації і дизайн. Однією з найбільш значущих деталей дизайну, в свою чергу, є барвистий і оригінальний баннер .
Вам знадобиться
  • Редактор растрової графіки Adobe Photoshop
Інструкція
1
Спочатку потрібно визначитися з розміром баннер а. Найчастіше баннер и займають всю (або практично всю ширину) сайту і мають невелику висоту. Тому на початку потрібно дізнатися ширину свого сайту (зробити це можна як засобами html, так і програмою DreamWeaver, що використовується для розробки сайтів) і визначитися з висотою вашого баннер а.
2
Створюємо новий документ в програмі Adobe Photoshop (версія в даному випадку вагомої ролі не грає). Ширину і висоту нового документа задаємо в пікселях, Фон переважно використовувати білий або чорний, щоб він не відволікав вас про процесу створення баннер а. Потім його можна замінити на більш цікавий колір (який підбирається трохи світліше, або навпаки, темніше основного фону сайту). Коли розміри і фон обрані, можемо натискати "ОК" і приступати до створення цікавого баннер а.
3
Як правило, баннер складається з графічної інформації - ряду невеликих картинок і тексту (на якому представлена в декількох словах найважливіша інформація - про що і для кого даний web-ресурс). Для того, щоб розмістити на баннер е невеликі картинки, відкриваємо в окремих вікнах вихідні зображення або вже готові кліпарти і перетягуємо на баннер , використовуючи інструмент "ласо", яким виділяємо об'єкт. Потрібно застосувати поєднання клавіш CTRL + C для копіювання малюнка. Далі ми робимо вікно баннер а активним клацанням по ньому, натискаємо CTRL + V - і потрібний графічний об'єкт розміщений на баннер е.
4
Додавання текстової інформації набагато простіше. Використовуємо інструмент "текст" (іконка - заголовна буква "Т"), і на активному вікні створення баннер а друкуємо потрібні слова. Змінити колір тексту можна, використовуючи панель атрибутів "Текст", також можна використовувати інструмент "Піпетка" для підбору потрібного кольору з елементів баннер а.
Зверніть увагу
Дуже важливо визначитися з тим, який банер вам потрібен - анімований або статичний. Якщо на вашому сайті є безліч текстової інформації, обов'язкової для прочитання, краще використовувати статичну картинку - вона не буде відволікати відвідувачів від важливих матеріалів.
Корисна порада
Незважаючи на той факт, що зробити цікавий і оригінальний банер в фотошопі може практично кожен, для серйозних сайтів і порталів має сенс звернутися до досвідченого дизайнера з портфоліо. Знайти дизайнерів-фрілансерів можна на спеціалізованих ресурсах, наприклад на www.demiart.ru.
В інтернеті існує велика кількість уроків, навчальних створенню банерів, проте часто в них потрібні поглиблені знання різних ємних програм, досить складних для початківця web-майстри. Якщо ж ви хочете зробити барвистий банер швидко і нескладним способом, вам допоможе в цьому стандартний графічний редактор Paint, який входить в збірку ОС Windows.
Вам знадобиться
  • стандартна програма Paint, програма Gif Animator
Інструкція
1
На панелі «Пуск» виберіть пункт "Всі програми", потім "Стандартні". Клікніть програму Paint, щоб вона відкрилася.
2
Щоб банер вийшов цікавим і ефектним, ви можете заздалегідь завантажити декілька варіантів зображень за потрібною для вас темі. Виберіть найбільш відповідну з них, яка представлятиме рекламу вашої продукції або послуги.
3
Щоб завантажити вибрану картинку в редактор Paint, натисніть на значок в лівому верхньому кутку, потім виберіть пункт "Відкрити".
4
У вкладці, огляду файлів знайдіть вибране зображення, виділіть його та натисніть «Відкрити» (або просто двічі клікніть по ньому).
5
Виділіть головний інформаційний елемент вашого зображення: «Зображення» - «Виділити» - «Прямокутна область» (або за допомогою курсору).
6
Задайте виділеному елементу потрібну форму, рухаючи квадратики виділення курсором. Наприклад, ви можете трохи зрушити зображення вправо, щоб звільнити вільний простір для написи з лівого боку майбутнього банера.
7
Щоб обрізати виділену область, натисніть «Зображення» - «Обрізати».
8
Змініть розмір зображення: «Зображення» - «Змінити розмір».
9
У вікні зміни розміру задайте потрібний розмір в пікселях в ширину і в висоту. Для завдання довільних параметрів приберіть галочку напроти пункту «Зберігати пропорції».
10
Натисніть на на значок в лівому верхньому кутку - «Зберегти як» - «Зображення в форматі GIF».
11
У вікні, в рядку «Тип файлу» буде встановлений формат GIF (* gif). Задайте ім'я файлу і збережіть його, натиснувши "Зберегти".
12
Щоб вставити на банер текстову інформацію, активізуйте інструмент «Текст».
13
На панелі інструменту введення тексту виберіть потрібні розмір, шрифт, колір, тип і розташування шрифту. Розтягніть рамку для введення тексту на потрібні довжину і ширину і введіть текст.
14
Можна додати на банер будь-які додаткові елементи. Або, наприклад, оформити його в рамочку: «Постаті» - «Прямокутник» - вибрати товщину і колір рамки - курсором миші розтягнути рамку по краях зображення. Потім знову збережіть файл, але під іншим ім'ям.
15
Тепер потрібно створити ще один файл з іншим текстом. Відкрийте перший збережений файл (без текстової інформації) та нанесіть на нього новий текст та інші елементи описаним вище чином. Як варіант, просто зітріть ластиком попередній текст, щоб внести новий (якщо фон білий). Якщо фон іншого кольору, клікніть його піпеткою і зафарбуйте цим кольором текст. Готовий банер збережіть, як описано вище.
16
Отже, у вас є під рукою два однакових файлу з різним текстом. Це будуть два шари, які потрібно об'єднати, щоб текст банера постійно змінювався. Цю операцію можна легко зробити в невеликій програмі для створення анімованих GIF'ов MS GIF Animator.
17
Встановивши програму на комп'ютер, відкрийте її подвійним кліком.
18
В панелі інструментів Gif Animator натисніть значок Open/«Відкрити» (або Ctrl + O), в поле «Папка» виберіть свою папку з створеними GIF-файлами. Потім подвійним клацанням миші виберіть файл, який стане другим шаром вашого баннера, щоб інший файл (перший шар) ліг зверху, т.к. в цій програмі анімація створюється в зворотному порядку.
19
Відкрийте перший шар інструментом додавання Insert/«+» (або Ctrl + I).
20
Згрупуйте верстви інструментом Select All/«Виділити все» (або Ctrl + L).
21
Перейдіть у вкладку Animation і поставте галочку навпроти пунктів Repeat forever («Завжди повторювати») і Looping («Виконання циклу»).
22
У вкладці Image встановіть швидкість кадрів - наприклад, 1/80, оптимально.
23
Натисніть інструмент Preview (або Ctrl + R), щоб переглянути результат.
24
Збережіть банер з допомогою інструменту збереження Save (або Ctrl + S). Ваш банер готовий, тепер його можна розміщувати.
Зверніть увагу
Щоб уникнути великої ваги баннера, краще обмежитися 2-4 шарами.
Корисна порада
Анімація тексту відбувається способом заміни шарів, тому аналогічні дії можна застосувати і до основного фону.