Логотип Валидатор Валидатор Качество создания сайта

Шапка сайта

Что такое, и зачем нужна сайту шапка?

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

Шапка сайта

Образно говоря, это своеобразная визитная карточка всего сайта, которая помогает посетителю понять - а туда ли вообще он попал? ... ...Это то или не то?...

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

Вот поэтому созданию шапок для сайта веб-дизайнеры всегда уделяют особое(!) внимание.
Впрочем, о важности создания шапок в интернете полно написано. Не хочу дублировать. Лучше на этой странице далее я покажу несколько различных примеров шапок для сайтов, но сначала скажу об основах, т.е. общих принципах их создания. Однако, при желании, можно перейти к просмотру примеров сразу: Примеры шапок для сайта

И ещё!  В начале подраздела с названием: "Как сделать шапку сайта" можно скачать себе комплект из 45-ти стандартных графических элементов, которые очень пригодятся(!) в работе над созданием шапок для сайтов.

Скачать комплект элементов сразу: Как сделать шапку сайта

А единственное, о чём всё же нужно сказать в самом начале, так это о происхождении этого слова. Оно пошло от английского слова "head", которое переводится как "голова", что соответствует его положению на веб-странице, так как это, как уже говорил, самый первый элемент любого сайта.
Веб-мастера чаще всего называют этот элемент "хедером" из-за того, что произношение слова "head" звучит очень похоже - "хед".

Теперь можно переходить к основам создания этого веб-элемента.


Основы создания шапки сайта

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

1. Фоновое изображение

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

А скорее всего, посетитель даже не станет просматривать такой сайт!

И в качестве поясняющего примера, а точнее - антипримера, сохранил один экземпляр дизайна шапки сайта (найденный в интернете), совершенно НЕ подходящей по стилю к заявленной тематике сайта. Вот он. Жуть!

Антипример дизайна шапки сайта

На шапке написано: "POZITIV", что переводится, ясное же дело, как "ПОЗИТИВ", т.е. что-то положительное. А значит - позитивное!

Однако, глянув на такой дизайн шапки сайта, ничего позитивного, т.е. положительного, в голову прийти не может. Даже наоборот! Первое, что лично мне пришло в голову, что эта шапка сделана для сайта какого-то похоронного агентства.Спаси и сохрани!

Думаю, что заходить и смотреть такой "позитив" мало кому захочется ... ... .Не пойду! Чернуха какая-то!

И наоборот!

Дизайн шапки нижнего ресурса действительно вызывает хорошие, положительные эмоции. То есть - позитив!

Позитивный дизайн шапки сайта

Интересный. Оригинальный дизайн, ну а "повесить" кнопки на весёлые рожицы смайликов - проще простого.
Узнать, как это делается, можно здесь: "Кнопки для сайта" (в новом окне).

Единственное, что мне НЕ понравилось в дизайне этой шапки, - шрифт, а если точнее, то его цвет. Он, как видно на рисунке примера, практически, сливается с ней.

Однако, это совсем небольшой минус. При желании, цвет шрифта можно легко изменить с помощью команды фотошоп: Ctrl+U (Цветовой тон/Насыщенность).  К примеру, так.

Пример замены цвета шапки сайта

Или так.

Ещё пример замены цвета шапки

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

Таким образом, можно считать, что с выбором фонового изображения разобрались, и основное - чтобы оно подходило по смыслу.  "Главное, чтобы костюмчик сидел". И чтоб он был к лицу!

Почему для своего сайта я выбрал именно такой фоновый рисунок для шапки, какой есть почти у всех его страниц? Почему такая шапка?...   Об этом же, кстати, иногда спрашивают посетители моего сайта.
Рассказал об этом в конце страницы, но можно узнать сразу: Послесловие

Остался лишь один вопрос по первому пункту основ.

Где взять картинку для шапки сайта, т.е. фоновое изображение?

Мне очень понравился вот этот ресурс:
https://pixabay.com/ru/images/search/header/
Чтобы перейти на него, достаточно скопировать данный адрес, и вставить в поисковую строку браузера.

Там ОГРОМНОЕ МНОЖЕСТВО РИСУНКОВ по разным тематикам, и можно бесплатно скачать изображения для шапок в большом разрешении.

Теперь порядок! С выбором "шапочных" картинок разобрались полностью.

А дальше - о размерах фоновых рисунков, взятых мною ради примера из интернета, нужно сказать подробно. Это ещё один важнейший(!) принцип основ создания шапок для сайтов.


2. Размеры фонового изображения

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

Ширина изображения

Внимание!*Prim.  Рисунок верхнего примера (со смайликами) имел большой размер: 2543px, но очень маленькое разрешение. Всего 5ppi (pixels per inch - пикселей на дюйм).
Изменил это с помощью команд Photoshop CS2: "Изображение" - "Размер изображения", выставив его разрешению значение: 72ppi.  Получилось, НО!
Размер рисунка (по ширине) стал: 36619px, что не влезет ни в какой монитор!
Менял ширину обычным способом в несколько заходов. Первый заход длился довольно долго: минут 5-6, наверное, а каждый последующий - быстрее и быстрее. В конце-концов получилось то, что мне было нужно для этой страницы сайта, т.е. ширина: 760px, при обычном для интернета разрешении: 72ppi.

Внимание! *РАСЧЁТ максимальной ширины рисунка для моего сайта находится здесь: Просмотрщик изображений

Но при расчёте размеров, иметь ввиду!  Шапка - это особый случай. По ширине она у меня 800px, так как должна накрывать ВСЮ страницу (вместе с рамкой).

Чтобы шапка по ширине накрывала всю страницу, - так делают чаще всего. Классика!  А вообще - ширина шапки может быть и меньше ширины страницы. Это уже зависит от замыслов веб-дизайнера, но всё же гораздо чаще - ширина страницы и шапки совпадают.

Однако!

Внимание! Помнить! Для адаптивной вёрстки ширину фонового рисунка для шапки следует брать достаточно БОЛЬШУЮ, чтобы она правильно отображалась на мониторах с разными размерами и разрешениями. Статистика популярных разрешений ниже.

Статистика популярных разрешений мониторов

Я для изучения адаптивной вёрстки взял фоновый рисунок размером 1360×500px, но размеры в CSS ему указывать НЕЛЬЗЯ!  Он должен адаптироваться САМ! Только сам!

    Действующий пример шапки сайта для такой вёрстки можно посмотреть здесь: Адаптивная вёрстка

  **P.S.  Для создания шапок сайтам адаптивной вёрстки лучше всего брать фоновые изображения "геометрические", т.е. с простым, повторяющимся рисунком, который будет легко дублироваться на нужную ширину страницы.

Из показанной только что статистики видно, что размеры и разрешения используемых мониторов год от года неуклонно растут.
И это значит, что для адаптивной вёрстки изображения нужно брать всё больше и больше.

К примеру, поинтересовался, какого размера рисунки в шапках своих сайтов используют известные ресурсы: "М.Видео" и "Леруа Мерлен"? Интересно, какой ширины?
Так вот оказалось, что они используют: 1856×720px и 2360×600px соответственно.

Впрочем!  Для фиксированной, т.е. жёсткой вёрстки, которую использую я, такие большие размеры изображений не нужны! Достаточно взять ширину рисунка для шапки сайта равной указанному в CSS значению правила max-width.

* * *

С шириной фонового изображения для шапки сайта, считаю, разобрались. Осталось разобраться с его высотой.

Высота изображения

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

Самое главное!

Что очень важно! Шапка сайта не должна мешать восприятию всего остального контента, поэтому её не следует делать большой высоты.

К примеру, для создания информационных веб-ресурсов рекомендуемая высота шапки 100÷200 пикселей.  А, скажем, для лендингов и сайтов визиток шапку можно сделать и повыше. Но повторюсь: главное - чтобы она не мешала просматривать основной контент страницы. Это самое главное!

* * *

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


3. Содержание (контент) шапки сайта

Шапка сайта не должна быть перегружена информацией. Только самое необходимое! Только оно!

*Prim.  В следующем далее списке типового (обычного) содержания шапки первым пунктом идёт уже
полностью разобранный веб-элемент, но я не стал убирать его, чтобы список остался полным.

Обычно в ней размещают следующие элементы:

  • фоновый рисунок - на нём располагаются все остальные элементы шапки, и многие посетители именно его считают шапкой (и запоминают именно рисунок!);
  • отличительные знаки - логотип, название страницы, может быть фото персонажа (если это сайт-визитка), знаки достигнутых успехов, и иногда ещё может быть слоган;
  • контакты - телефон для связи и адрес электронной почты;
  • меню или навигатор - ссылки на разделы сайта, и нередко декоративно оформленные иконками, что украшает, и делает их более запоминающимися;
  • поле для поиска - обычно вверху справа или снизу под навигатором: помогает найти нужное, если ресурс достаточно большой.

Ну, а если ресурс это интернет-магазин или какое-то учреждение, и имеет ещё представительства в разных городах, то добавляются ещё два обязательных элемента:

  • поле выбора города - понятно зачем, и оно обычно расположено вверху слева;
  • корзина товаров - как правило, её делают в правом верхнем углу.

А в шапках сайтов особенно больших, международных ресурсов обязательно присутствует ещё один веб-элемент:

  • кнопка выбора языка - обычно её тоже стараются делать в правом верхнем углу.

И, наконец, последнее, что советуют учитывать при создании шапки сайта.


4. Шрифт

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

Советов в интернете "море", даже целый "океан", но единственный достойный внимания совет, - чтобы шрифт, выбранный для шапки, подходил по стилю к тематике сайта.

Понятно же, что использовать какой-нибудь "развесёленький" шрифт для создания шапки серьёзного информационного ресурса - вряд ли стоит.

Подобрать интересный, подходящий шрифт для шапки своего сайта хорошо поможет страница "Шрифты" (откроется в новом окне).

И как подключить любой понравившийся шрифт к своему сайту, узнаём там же. В конце упомянутой страницы я дал ссылку на примеры и подробную информацию об этом.  Либо можно сразу перейти в раздел "Веб-шрифты" (откроется в новом окне).

Главное помнить!  Название сайта или его страниц должно быть написано ТЕКСТОМ в заголовке h1, а не нарисовано! Нужен текст а не картинка!

В противном случае - поисковики не будут обращать внимания на сайт с такой шапкой.

Впрочем, если уж очень хочется, можно и нарисовать текст. Если уж очень хочется нарисовать

Но!  Тогда обязательно нужно рисунок текста сдублировать шрифтом.  А как это делается, подробно рассказал в конце раздела "Веб-шрифты". ◄Ссылку на него дал только что (чуть выше)☝

* * *

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


Как сделать шапку сайта

Все показанные далее примеры шапок для сайта сделаны в программе "Фотошоп". Раньше так же поступали и другие веб-дизайнеры, но теперь есть несколько специальных программ, которыми они пользуются.

Как сделать шапку сайта?

Так в 2010-ом году появилась программа "Sketch", а позже приложение "Figma", якобы, более удобные чем фотошоп.
Однако, сам я ими никогда не пользовался, поэтому сказать о них ничего не могу.

Кроме этих двух, есть ещё дизайнерская программа, которой иногда пользуюсь. Это "Adobe Illustrator".
Она предназначена для создания векторных изображений.

Правда, пользуюсь ей довольно редко. Мне вполне хватает векторных инструментов, которые есть в программе "Фотошоп": фигуры, перо, текст, выделение контура.

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

Выглядят же эти стандартные графические элементы вот так.

Стандартные графические элементы шапки сайта

Кстати!  Можно скачать себе полный комплект из 45-ти стандартных графических элементов, сделанный именно в программе "Фотошоп".

В архив упаковал файл .png (на прозрачном фоне, естественно), и единственное, что нужно знать для его использования, - как сохранить прозрачность фона.

Комплект графических элементов здесь: Комплект стандартных графических элементов

А вырезать их из него можно разными способами.

Первый способ вырезки графических элементов

Вот строчка элементов, которую я вырезал из данного комплекта с помощью самой программы "Фотошоп", установленной на компьютер дополнительно. Это самое простое и удобное(!), и у этой программы есть множество возможностей по улучшению качества изображений, по их корректировке.

Результат работы программы Фотошоп


Второй способ вырезки графических элементов

Это вырезал средствами Windows 10, т.е. с помощью встроенной в него изначально программы "Paint 3D". Ничего дополнительно НЕ устанавливал. Тоже отличный способ!

Результат работы Paint 3D


Третий и четвёртый способы

Годятся только(!) для вырезки элементов, НЕ требующих прозрачного фона. Пробовал вырезать средствами Windows 10 с помощью опять-таки уже встроенных в него программ графических обработчиков: Paint  и ещё Photos.

Обе программы выдавали вот такой результат. Ой!!! Что это?!!

Результат работы Paint и Photos

И та, и другая программы на выходе выдавали какой-то "негатив" изображений с прозрачностью, переконвертировав их родной формат .png в формат .jpg.

Внимание! Причём!  Переконвертация происходила всегда, даже если ничего НЕ вырезать, а просто попытаться изменить размер изображения.

Короче, данную особенность названных программ нужно учитывать(!) при выборе способа обработки изображений.


Пятый способ вырезки

Попробовал использовать для вырезки изображений с прозрачностью ещё одну "местную" программу, т.е. тоже встроенную в Windows 10.

Вырезал это с помощью Polarr Photo Editor.

Результат работы Polarr Photo Editor

Видно, что прозрачность данная программа поддерживает, НО(!), к сожалению, резкость результата оставляет желать лучшего. К сожалению!

Может быть, конечно, что я просто не до конца разобрался в настройках программы этого редактора, или сама программа просто-напросто "глючная" ... ... ? Не знаю...
Ну ничего. Переживём как-нибудь! Перетопчемся!

В конце концов, вырезать есть чем, ведь  первые два примера вырезки  были сделаны тоже с помощью имеющихся программ, и они оказались самыми лучшими!

вспомнить: Способы вырезки графических элементов

* * *

Однако, всё же решил протестировать ещё один способ подготовки нужных для создания шапки сайта изображений.


Шестой способ

Предпочитаю пользоваться своими программами, но есть возможность обратиться и к помощи он-лайн сервисов.

Тестовая проба 1

Тестировал вот этот сервис https://online-fotoshop.ru

Партнёрский сервис он-лайн фотошопа


А это результат его тестирования.

Результат испытаний партнёрского сервиса

Результат, нужно сказать, получился НЕ качественный. Он всё же лучше, чем в предыдущем 5-ом примере, но ... ... совсем ненамного лучше. Совсем чуть-чуть...

Резкость появилась, однако результат вырезки целого блока веб-элементов, т.е. самого обычного прямоугольника, выглядит так, будто НЕ его вырезали, а каждый из элементов в него входящих - отдельно.  Причём, "кривыми ножницами с зазубринами"! Не иначе!

В чём дело?! Стал разбираться.

Оказалось, что на этом первом "подопытном" сайте даже своего редактора нет! Как, впрочем, и на полдюжине других, которые протестировал после него. Менялись только названия сайтов и их домены.

Все они были всего лишь партнёрами ресурса https://www.photopea.com

Сервис он-лайн фотошопа Photopea

Протестировал, разумеется, и его. А как же иначе?!
Надеялся, что хоть сам основной ресурс, с которого все "партнёрятся", будет нормальным.

Результат теста - отлично!

Проверял вырезку фрагмента из большого рисунка формата .jpg, и сохранение его в разных форматах: .png  и  .svg.

Код фрагмента рисунка в формате .svg, полученный от сервиса, конечно, ОГРОМЕН(!), и основная его часть состоит из строчки с длинной-предлинной комбинацией цифр и букв.

Открывается такой формат браузером, правится в блокноте.

Разобраться с тэгами <svg></svg>, чтобы подключить кнопки меню, поможет большой раздел моего сайта: "Рисование в HTML" (откроется в новом окне).

Это многостраничный(!) справочный раздел.

Правда, думаю, вряд ли стоит делать шапку сайта в таком формате. Разбираться потом в её коде всё ж таки довольно тяжело. Но если уж очень хочется, то возможность такая есть. Если уж очень хочется...

Что же касается партнёрских сайтов протестированного основного ресурса, так, скорее всего, у них какие-то проблемы с программной частью, т.е. с подключением стороннего сервиса к своим сайтам.
У меня была подобная проблема, когда я хотел подключить сервис кибераналитики.

Поэтому сделал соответствующий вывод.

Вывод:  Работать всегда нужно НЕ с партнёрами, а с главным ресурсом!

И дальше показываю результаты тестирования ещё одного он-лайн сервиса (не партнёрского!) по фотошопу.


Тестовая проба 2

Тестировал теперь этот сервис https://pixlr.com

Сервис он-лайн фотошопа Pixlr


А это результат его тестирования.

Результат тестирования сервиса Pixlr

И результат получился отличный! Ничуть не хуже, чем на собственных встроенных программах: "Фотошоп" и "Paint 3D". Один в один!

Конечно, рекламы мешают работать, но это уже издержки бесплатного использования он-лайн сервисов.

Гораздо хуже другое! Гораздо хуже!

Бесплатные возможности подобных сервисов очень сильно ограничены.

Цены за использования он-лайн сервиса

Короче, вырезать-то из большого изображения нужный фрагмент для своей шапки можно, что неоднократно проверял, и что показал выше.

Можно даже нарисовать он-лайн что-либо не особо сложное, т.к. в бесплатном варианте доступны только базовые инструменты.

Ну ... ..., если нет своей собственной, т.е. установленной на компьютер полной программы "Фотошоп", то подобные он-лайн сервисы - это выход из положения.

Тут уж, как говорится: "на безрыбье и рак рыба". И ещё какая вкусная!

Однако, если планируется БОЛЬШОЙ объём работ по веб-дизайну сайта, а не только стоит задача сделать для своего сайта оригинальную шапку, тогда придётся: либо заплатить он-лайн сервису за возможность пользоваться всеми его инструментами, либо идти на ресурс самого Adobe®, что, конечно же, предпочтительнее! Гораздо предпочтительнее!

Вот сюда https://www.adobe.com/ru/products/photoshop.html

Правда, цены там гораздо выше, но ... ... ... .Ничего не поделаешь!

Цены за подписку на программу

Но оригинал всегда гораздо лучше(!) чем, пусть даже очень качественная, копия. Поэтому я и сказал, что зайти на ресурс Adobe, и подписаться на программу "Фотошоп" будет предпочтительнее, чем пользоваться какими-либо он-лайн сервисами.

А предпочтительнее хотя бы потому, что, сравнив возможности разных способов, можно ощутить ОГРОМНУЮ РАЗНИЦУ в удобстве их использования.

Даже если подписаться всего на один месяц, то за это время можно сто-о-олько элементов для сайта понаделать, что их на год хватит! Или даже больше!

Впрочем, я, кажется, немного отвлёкся.

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

* * *

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


Программирование меню

Любой веб-элемент сайта - мало того, что его нужно придумать и нарисовать. Его ещё нужно правильно прописать на веб-странице, чтобы он отображался так, как был задуман веб-дизайнером.

Правда, всё же нужно сказать, что написав: "можно закрывать фотошоп", я несколько поторопился.
Можно и НЕ закрывать, а доверить ему программирование меню в нарисованной шапке сайта. Пример здесь: "Шапка сайта в фотошоп" (откроется в новом окне).

Пример шапки, на которую дал ссылку, создаётся очень просто и быстро, причём, самой программой "Фотошоп".

Однако! Для большого, серьёзного ресурса такая шапка не подойдёт!

Большие ресурсы чаще всего создают для шапок своих сайтов многоуровневые меню, что удобно(!) для пользователей и очень практично!

Интересные примеры таких меню здесь: Меню для сайта (откроется в новом окне).

Кроме демонстрации действующих примеров подобных меню, на указанной странице достаточно подробно объяснил, как они создаются.

И ещё!  Большие ресурсы в веб-дизайне элементов для своих шапок постоянно применяют всевозможные логические символы.  К примеру, для обозначения меню применяют вот такой символ:

Его я вывел на экран монитора с помощью "таблицы символов Юникода", которая уже частично встроена в операционную систему компьютера. А насколько полно она в неё встроена, зависит от версии системы.

Так в Windows XP эта таблица была представлена довольно слабо. Всего лишь 10÷15% от всей таблицы. А вот в Windows 10 она присутствует уже очень хорошо!

Поэтому появилась возможность использовать её в веб-дизайне.

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

Множество интересных и полезных для веб-дизайна шапок символов упомянутой таблицы я собрал в специальном разделе "Амперсанды" (откроется в новом окне).

Здесь храню свой он-лайн справочник пиктограмм.

Если боковое меню обычно выполняют в виде текстовых ссылок, то кнопки навигатора в верхнем меню нередко оформляют в виде "смысловых" иконок, которые как раз и можно сделать с помощью пиктограмм.
Самое хорошее в них то, что в отличие от рисунков - они ничего не "весят"! Они совсем лёгкие!

* * *

Разобрались. И теперь уже можно было бы заняться, собственно, самим программированием меню. Но данная страница сайта относится к фотошоп, поэтому не счёл нужным здесь вдаваться в детали этого увлекательного процесса, тем более, что уже сделал это.   Смотреть: Многоуровневые меню

* * *

Привёл общие принципы создания шапок сайта, а всё остальное зависит от целей ресурса и задумок веб-дизайнера.
Поэтому дальше просто покажу примеры шапок для сайтов, созданные во время изучения и тренировок по курсам: "Веб-дизайн", "Фотошоп для веб-мастера" и "Веб-дизайн HTML".


Примеры шапок для сайта

Шапку данной страницы, естественно, видно. Почему она такая(?) расскажу, как и обещал, в конце раздела, а сейчас показываю другие.

Внимание! Внимание!  Некоторые примеры шапок довольно большие, и по своим размерам НЕ подходят для данной страницы. Поэтому я прописал их "усечённым способом", т.е. в HTML-коде страницы указал таким изображениям только подходящую width (ширину).

Для просмотра примеров в полном размере - открыть их в новом окне с помощью правой кнопки мыши. В контекстном меню выбрать: "Открыть изображение в новой вкладке".

*Prim.  Пометил такие примеры символом "смотреть" - Смотреть


Пример №1 Смотреть

Эту простенькую шапку, а точнее - заготовку для шапок нарисовал в программе "Фотошоп" для двух разделов сайта: "Мини-сайт"  и  "Информационная страница" (откроются в новом окне).

Заготовка для шапок страниц


Пример №2 Смотреть

Такую шапку использовал для создания страниц тестовых сайтов при изучении технологий: "jQuery"  и  "jQuery UI" (также откроются в новом окне).

Шапка тестовых сайтов


Пример №3 Смотреть

Эту шапку сделал в своё время по заказу одного из посетителей для его сайта о кристаллах и музыке.

Шапка сайта о кристаллах и музыке


Пример №4 Смотреть

Следующий пример шапки рисовал во время изучения и тренировок по материалам курса "Фотошоп для веб-мастера".
Узнать более подробно, и посмотреть всю нарисованную страницу в натуральную величину можно здесь: "Сайты в фотошоп" (откроется в новом окне).

Шапка учебного сайта для веб-мастера


Пример №5 Смотреть

Эту шапку быстренько "набросал" в фотошоп для электронной книги, для её первой страницы. Вот она: "Глава 1. Электронные книги" (также откроется в новом окне)

Шапка электронной книги

*P.S.   Честно говоря, показанный пример шапки для электронной книги "набросал на скорую руку". Лишь бы какая-нибудь была, т.к. в данном случае меня интересовало только программирование электронных книг, и их компиляция разными способами, а вовсе НЕ их дизайн. Так уж вышло!


Пример №6

А вот создавая эту шапку в программе "Фотошоп" для раздела: "Шаблон лендинга" (откроется в новом окне), интересовало уже ВСЁ!  И программирование, и веб-дизайн.

Шапка шаблона лендинга


Пример №7

Аналогично. Здесь тоже интересовало ВСЁ! Создавал эту шапку в программе "Фотошоп" при плановом повторении курсов программирования и веб-дизайна для раздела: "Веб-дизайн Блога" (откроется в новом окне).

Веб-дизайн Блога

*P.S.   Это, пожалуй, один из самых сложных примеров шапки для сайта HTML. Много времени ушло на подготовку рисунков для вставки в слайдер, который составляет неотъемлемую часть созданной шапки.
Кстати! Такой приём (слайдер в шапке сайта) стал очень популярен в последнее время.


Пример №8

Над этой шапкой трудился, когда осваивал работу с шаблонами HTML-сайтов, созданных кем-то, изучая технику работы по их изменению и доработке. А доработки всегда бывает много! Этот и другие готовые примеры, а так же все подробности по их созданию находятся здесь: "Шаблоны сайтов" (откроются в новом окне).

Шапка учебного сайта


Пример №9

И, наконец, ещё один пример "живой" шапки, созданной в фотошоп для довольно сложного раздела "Личная страничка" (откроется в новом окне).

Шапка личной странички

* * *

Считаю, разных шапок для HTML-сайтов показал достаточно. Теперь покажу два других примера. Тоже для веб-страниц, но уже несколько иного плана.


Примеры шапок для социальных сетей

Пример №10 Смотреть

Такую шапку я сделал в программе "Фотошоп" для себя, для своих аккаунтов в социальных сетях.

Пример шапки для социальных сетей

Важно!  Обязательно нужно сказать о размерах рисунков для социальных сетей. С каждым годом они "растут как на дрожжах"! Да уж! Даже быстрее!
Впрочем, о причинах такого безудержного роста я уже говорил ранее.   Вспомнить: Размеры фонового изображения

Что же касается размеров показанного примера шапки, они такие - 1740×500px.


Пример №11 Смотреть

А вот так сделанная мною шапка выглядит на странице моего личного кабинета на профильном сайте creativo.one (бывший photoshop-master.ru).

Шапка личного кабинета на профильном сайте

* * *

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

Вот об этом и рассказал в послесловии.


Послесловие

Всё очень просто!
Где лучше всего искать изображения для создания всевозможных шапок, уже сказал в начале страницы.  Вспомнить: Где взять картинку для шапки сайта

Мне нужен был нарядный, но только НЕ яркий рисунок, чтоб он не отвлекал от контента страницы, но главное - чтобы он подходил по смыслу к названию сайта.

Название же всего сайта - "Старатель Интернета".

Вот я и подбирал фоновый рисунок для его шапки, как говорится: "по образу и подобию".

Но причём же здесь тогда "звёздное небо"?! Что общего?!

Так образно изображают связь между людьми, т.е. интернет.

Связь и интернет образно


А так те же самые связь и интернет выглядят схематично.

Связь и интернет схематично


Ну а это шапка моего сайта.

Шапка моего сайта

Думаю, что из показанных выше изображений понятно, что такой фоновый рисунок для шапки выбран отнюдь НЕ случайно, и названию сайта он соответствует полностью! Да! На все 100!

* * *

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


Учебные сайты Фотошоп

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика