Як робити шапки для сайтів

Як робити шапки для сайтів

Принцип «зустрічають по одягу» справедливий не тільки щодо людей, а й у відношенні сайтів. Одежинка сайту — його дизайн. І саме дизайн визначає те враження, яке створюється у відвідувача в перші кілька секунд перегляду ресурсу. Це враження особливо важливо, оскільки визначає його подальшу поведінку. Перший елемент дизайну, який бачить кожен користувач, що зайшов на сайт — його «шапка». Шапка — особа web-ресурсу. Тому кожен початківець web-дизайнер хоче в першу чергу навчитися робити шапки для сайтів.

Вам знадобиться

- Доступ в інтернет;
- Сучасний браузер;
- Редактор растрової графіки (GIMP, Photoshop);
- Опціонально: редактор векторної графіки (CorelDraw);
- Опціонально: середа 3D-моделювання (Blender, 3DStudio);
- Опціонально: аркуш паперу, олівець чи ручка.

Інструкція

  1. Розробіть концепцію майбутньої шапки сайту. В ідеалі, в основі концепції має лежати оригінальна ідея. При недоліку ідей можна почерпнути натхнення, аналізуючи вже існуючі вдалі рішення. Результат творчих пошуків відобразіть у вигляді ескізного начерку на аркуші паперу. Начерк повинен відображати структуру майбутньої шапки сайту з вказівкою «гумовим» місць і областей, заповнених зображеннями. На даному етапі непогано продумати і приблизну колірну схему оформлення шапки.
  2. Виберіть розміри шапки. Власне, варто чітко визначити лише один її параметр — висоту. Як правило, по висоті шапки сайтів фіксовані, причому вона не залежить від логічного дозволу, що впливає на параметри відображення шрифтів. Іншими словами, варто вибрати значення висоти шапки в пікселях. При цьому має сенс враховувати можливість розміщення в шапці банерів або блоків контекстної реклами. Щодо ширини варто визначитися з мінімальним значенням, виділивши хоча б одну «гумову» область, яка допускає адаптацію шапки до різних розмірах web-сторінки.
  3. Створіть шаблон шапки в графічному редакторі. У новому документі додайте прозорий шар, в який перенесіть ескіз відповідно до обраних геометричними параметрами. Висота шару повинна відповідати висоті шапки. Ширину можна взяти довільною, але більше мінімального розміру, залишивши простору під горизонтальні «гумові» області «. Позначте в шаблоні зони фіксованих і варіюються розмірів, зони, призначені для заповнення статичними зображеннями, зображеннями фону.
  4. Підшукайте або створіть статичні зображення для розміщення у шаблоні шапки. Логотип і деякі унікальні елементи можна створити у векторному редакторі або середовищі 3D-моделювання. Тематичні зображення досить просто знайти на безкоштовних фотобанках в інтернеті.
  5. Вставте фон, логотип і статичні зображення в шаблон шапки сайту в графічному редакторі. Фон і кожне зображення додавайте в окремий прозорий шар. Додайте шари оптимальним чином. Переміщуючи зображення в шарах, добийтеся їх ідеальною компоновки, відповідної раніше створеного шаблону.
  6. Збережіть результуюче зображення шапки. Збережіть робочий проект в «рідному» форматі графічного редактора. Потім виконайте збереження зведеного зображення шапки в форматі без втрати якості (наприклад, PNG).
  7. Створіть HTML-шаблон шапки, якщо це необхідно. Відкрийте у редакторі зведене зображення. Проведіть вирізання з нього зображень, відповідних областях фіксованого розміру. З місць, відповідних «гумовим» областям, виріжте зображення шириною в 1 піксель. Збережіть всі зображення на диск. Зверстати HTML-заготовку шапки, використовуючи збережені зображення.

Корисні поради

Для «нарізки» готової шапки і автоматичного формування HTML-шаблону, можна використовувати спеціалізовані програми, такі як Adobe ImageReady.