Як робити шапки для сайтів. Як зробити шапку сайту з красивою написом в фотошопі.

Принцип "зустрічають по одягу" справедливий не тільки щодо людей, а й у ставленні сайтів . Вбрання сайту - його дизайн. І саме дизайн визначає те враження, яке створюється у відвідувача в перші кілька секунд перегляду ресурсу. Це враження особливо важливо, оскільки визначає його подальшу поведінку. Перший елемент дизайну, який бачить кожен користувач, що зайшов на сайт - його "шапка". Шапка - особа web-ресурсу. Тому кожен початківець web-дизайнер хоче в першу чергу навчитися робити шапки для сайтів .
Вам знадобиться
  • - доступ в інтернет;
  • - сучасний браузер;
  • - редактор растрової графіки (GIMP, Photoshop);
  • - опціонально: редактор векторної графіки ( CorelDraw);
  • - опціонально: середа 3D-моделювання (Blender, 3DStudio);
  • - опціонально: аркуш паперу, олівець чи ручка.
Інструкція
1
Розробіть концепцію майбутньої шапки сайта. В ідеалі, в основі концепції має лежати оригінальна ідея. При нестачі ідей можна почерпнути натхнення, аналізуючи вже існуючі вдалі рішення. Результат творчих вишукувань відобразіть у вигляді ескізного начерку на аркуші паперу. Начерк повинен відображати структуру майбутньої шапки сайту з зазначенням "гумових" місць і областей, заповнених зображеннями. На даному етапі непогано продумати і приблизну колірну схему оформлення шапки.
2
Виберіть розміри шапки. Власне, варто чітко визначити лише один її параметр - висоту. Як правило, по висоті шапки сайтів фіксовані, причому вона не залежить від логічного дозволу, що впливає на параметри відображення шрифтів. Інакше кажучи, варто вибрати значення висоти шапки в пікселях. При цьому має сенс враховувати можливість розміщення в шапці банерів або блоків контекстної реклами. Відносно ширини варто визначитися з мінімальним значенням, виділивши хоча б одну "гумову" область, яка допускає адаптацію шапки до різних розмірах web-сторінки.
3
Створіть шаблон шапки в графічному редакторі. У новому документі додайте прозорий шар, в який перенесіть ескіз відповідно до обраних геометричними параметрами. Висота шару повинна відповідати висоті шапки. Ширину можна взяти довільною, але більше мінімального розміру, залишивши простору під горизонтальні "гумові" області ". Позначте в шаблоні зони фіксованих і варьирующихся розмірів, зони, призначені для заповнення статичними зображеннями, зображеннями фону.
4
Підшукайте або створіть статичні зображення для розміщення в шаблоні шапки. Логотип і деякі унікальні елементи можна створити у векторному редакторі або середовищі 3D-моделювання. Тематичні зображення достатньо просто знайти на безкоштовних фотобанках в інтернеті.
5
Вставте фон, логотип і статичні зображення в шаблон шапки сайта в графічному редакторі. Фон і кожне зображення додавайте в окремий прозорий шар. Додайте верстви оптимальним чином. Переміщуючи зображення в шарах, добийтеся їх ідеальною компоновки, відповідної раніше створеному шаблоном.
6
Збережіть результуюче зображення шапки. Збережіть робочий проект в "рідному" форматі графічного редактора. Потім виконайте збереження зведеного зображення шапки в форматі без втрати якості (наприклад, PNG).
7
Створіть HTML-шаблон шапки, якщо це необхідно. Відкрийте в редакторі зведене зображення. Проведіть вирізання з нього зображень, відповідних областям фіксованого розміру. З місць, відповідних "гумовим" областям, виріжте зображення шириною в 1 піксель. Збережіть всі зображення на диск. Зверстати HTML-заготовку шапки, використовуючи збережені зображення.
Корисна порада
Для "нарізки" готової шапки і автоматичного формування HTML-шаблону, можна використовувати спеціалізовані програми, такі як Adobe ImageReady.