Как делать шапки для сайтов

Принцип "встречают по одежке" справедлив не только в отношении людей, но и в отношении сайтов. Одежка сайта - его дизайн. И именно дизайн определяет то впечатление, которое создается у посетителя в первые несколько секунд просмотра ресурса. Это впечатление особенно важно, поскольку определяет его дальнейшее поведение. Первый элемент дизайна, который видит каждый пользователь, зашедший на сайт - его "шапка". Шапка - лицо web-ресурса. Поэтому каждый начинающий web-дизайнер хочет в первую очередь научиться делать шапки для сайтов.

Вам понадобится

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

Инструкция

1. Разработайте концепцию будущей шапки сайта. В идеале, в основе концепции должна лежать оригинальная идея. При недостатке идей можно почерпнуть вдохновение, анализируя уже существующие удачные решения. Результат творческих изысканий отразите в виде эскизного наброска на листе бумаги. Набросок должен отображать структуру будущей шапки сайта с указанием "резиновых" мест и областей, заполненных изображениями. На данном этапе неплохо продумать и примерную цветовую схему оформления шапки.
2. Выберите размеры шапки. Собственно, стоит четко определить лишь один ее параметр - высоту. Как правило, по высоте шапки сайтов фиксированы, причем она не зависит от логического разрешения, влияющего на параметры отображения шрифтов. Иными словами, стоит выбрать значение высоты шапки в пикселях. При этом имеет смысл учитывать возможность размещения в шапке баннеров или блоков контекстной рекламы. В отношении ширины следует определиться с минимальным значением, выделив хотя бы одну "резиновую" область, допускающую адаптацию шапки к различным размерам web-страницы.
3. Создайте шаблон шапки в графическом редакторе. В новом документе добавьте прозрачный слой, в который перенесите эскиз в соответствии с выбранными геометрическими параметрами. Высота слоя должна соответствовать высоте шапки. Ширину можно взять произвольной, но больше минимального размера, оставив пространства под горизонтальные "резиновые" области". Обозначьте в шаблоне зоны фиксированных и варьирующихся размеров, зоны, предназначенные для заполнения статическими изображениями, изображениями фона.
4. Подыщите или создайте статические изображения для размещения в шаблоне шапки. Логотип и некоторые уникальные элементы можно создать в векторном редакторе или среде 3D-моделирования. Тематические изображения достаточно просто найти на бесплатных фотобанках в интернете.
5. Вставьте фон, логотип и статические изображения в шаблон шапки сайта в графическом редакторе. Фон и каждое изображение добавляйте в отдельный прозрачный слой. Разместите слои оптимальным образом. Перемещая изображения в слоях, добейтесь их идеальной компоновки, соответствующей ранее созданному шаблону.
6. Сохраните результирующее изображение шапки. Сохраните рабочий проект в "родном" формате графического редактора. Затем выполните сохранение сведенного изображения шапки в формате без потери качества (например, PNG).
7. Создайте HTML-шаблон шапки, если это необходимо. Откройте в редакторе сведенное изображение. Произведите вырезание из него изображений, соответствующих областям фиксированного размера. Из мест, соответствующих "резиновым" областям, вырежьте изображения шириной в 1 пиксель. Сохраните все изображения на диск. Сверстайте HTML-заготовку шапки, используя сохраненные изображения.