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