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

Принцип встречают по одежке честен не только в отношении людей, но и в отношении сайтов. Одежка сайта — его дизайн. И как раз дизайн определяет то чувство, которое создается у визитёра в первые пара секунд просмотра ресурса.

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

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

Вам пригодится

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

Инструкция
1
Создайте концепцию будущей шапки сайта. В совершенстве, в базе концепции обязана лежать уникальная мысль. В случае дефицита идей возможно почерпнуть воодушевление, разбирая уже существующие успешные ответы. Итог творческих изысканий отразите в виде эскизного наброска на листе бумаги.

Набросок обязан отображать структуру будущей шапки сайта с указанием резиновых областей и мест, заполненных изображениями. На данном этапе хорошо продумать и примерную цветовую схему оформления шапки.
2
Выберите размеры шапки. Фактически, стоит четко выяснить только один ее параметр — высоту.

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

3
Создайте шаблон шапки в графическом редакторе. В новом документе добавьте прозрачный слой, в который перенесите эскиз в соответствии с выбранными геометрическими параметрами. Высота слоя обязана соответствовать высоте шапки.

Ширину возможно забрать произвольной, но больше минимального размера, покинув пространства под горизонтальные резиновые области. Обозначьте в шаблоне территории фиксированных и варьирующихся размеров, территории, предназначенные для заполнения статическими изображениями, изображениями фона.
4
Подыщите либо создайте статические изображения для размещения в шаблоне шапки. Логотип и кое-какие неповторимые элементы возможно создать в векторном редакторе либо среде 3D-моделирования.

Тематические изображения достаточно просто обнаружить бесплатных фотобанках в сети.
5
Засуньте фон, статические изображения и логотип в шаблон шапки сайта в графическом редакторе. каждое изображение и Фон додавайте в отдельный прозрачный слой. Разместите слои оптимальным образом.

Перемещая изображения в слоях, добейтесь их совершенной компоновки, соответствующей ранее созданному шаблону.
6
Сохраните результирующее изображение шапки. Сохраните рабочий проект в родном формате графического редактора.

После этого выполните сохранение сведенного изображения шапки в формате без утраты качества (к примеру, PNG).
7
Создайте HTML-шаблон шапки, в случае если это нужно. Откройте в редакторе сведенное изображение.

Сделайте вырезание из него изображений, соответствующих областям фиксированного размера. Из мест, соответствующих резиновым областям, вырежьте изображения шириной в 1 пиксель. Сохраните все изображения на диск.

Сверстайте HTML-заготовку шапки, применяя сохраненные изображения.

Создание сайта | Урок #6 — Пишем шапку сайта


Темы которые будут Вам интересны: