В этом уроке мы создадим простой классический хедер, который подойдет практически для любого сайта.

Шаг #1. Создайте новый документ с разрешением 700/200 пикселей, (Для этого пройдите в пункт меню файл > новый или нажмите Ctrl + N), и заполните фон бледным белым цветом, я использовал: #F6F5F5.

(Для этого вначале в панели инструментов щелкните по значку выбора цвета, установите цвет, а затем выберите инструмент заливка или нажмите клавишу G и заполните фон цветом)

Шаг #2. Выберите инструмент “Прямоугольная область” или нажмите “M” и сделайте прямоугольное выделение, на подобие того как это сделано в верху рисунка расположенного ниже:

Шаг #3. Заполните выделение цветом: #C9D2D2. (Для этого вначале установите необходимый цвет, затем выберите инструмент “Заливка” или нажмите “G” и щелкнув им в нутрии выделения заполните его цветом)

И примените следующие параметры наложения к данному слою. (Для запуска параметров наложения пройдите в пункт меню “Слой” затем “Стиль слоя” и выберите пункт “Параметры наложения…” ). Затем выберите пункт “Тень” и установите опции как показано ниже на рисунке.

Тень:

Выберите пункт “Обводка” и установите опции как показано ниже на рисунке.

Обводка:

Вот как это должно выглядеть, если все сделано правильно:

Шаг #4. Теперь мы сделаем кнопки, для этого выберите инструмент “Прямоугольная область” или нажмите "M" и сделайте прямоугольное выделение подобное этому:

Шаг #5. Заполните выделение цветом #88B6C2 (Для этого вначале установите необходимый цвет, затем выберите инструмент “Заливка” или нажмите “G” и щелкнув им в нутрии выделения заполните его цветом), и примените следующие параметры наложения: (Для запуска параметров наложения пройдите в пункт меню “Слой” затем “Стиль слоя” и выберите пункт “Параметры наложения…” ).

Выберите пункт “Наложение градиента” и установите опции как показано на рисунке ниже:

Наложение градиента:

Выберите пункт “Обводка” и установите опции как показано ниже на рисунке:

Обводка:

Вот что у вас должно получиться:

Шаг #6. Затем сделайте выделение при помощи инструмента “Прямоугольная область”, на 1 пиксель ниже уровня кнопок как показано на рисунке ниже:

И заполните это выделение цветом: #9CACAB

Шаг #7. Затем создайте новый слой, (для этого выберите пункт меню слой -> новый слой -> слой… или нажмите сочетания клавиш Shift+Ctrl+N), установите следующее значение цвета: #DCE6E8, выберите инструмент карандаш в панели инструментов, установите его толщину в 2 пикселя, затем протяните карандашом линию непосредственно под прямоугольником, созданном в предыдущем шаге (увеличьте масштаб рисунка, чтобы было легче протянуть линию).

Шаг #8. Затем сделайте выделение инструментом “Прямоугольная область”, на 1 пиксель выше уровня кнопок как показано на рисунке ниже:

Заполните это выделение градиентной заливкой, которая содержит цвета #CFD5D3 (передний план) и #FFFFFF (фон), (для этого выберите инструмент градиент и установите следующие цвета в редакторе градиентов):

В результате у вас должно получиться следующее:

Шаг #9. Затем установите Ваш цвет в следующее значение: #9CACAB, (выберите инструмент карандаш, установите его размер в 1 пиксель) и протяните линию 1 пиксель на всю длину прямоугольно выделения созданного в прошлом шаге, подобно тому, как это показано на рисунке:

Шаг #10. Затем создайте новый слой и выбрав инструмент “Прямоугольная область” сделайте прямоугольное выделение большого прямоугольника предназначенного для кнопок:

Шаг #11. Затем уберите часть прямоугольного выделения у его основания, для этого выберите инструмент “Прямоугольная область” нажмите клавишу Alt и удерживая ее сделайте прямоугольное выделение поверх существующего от середины прямоугольника предназначенного для кнопок до конца существующего выделения:

Заполните эту область белым (используя инструмент заливка), затем пройдите в пункт меню фильтр -> размытие -> размытие по Гауссу… и примените следующие параметры настройки:

И установите прозрачность этого слоя приблизительно 19 процентов:

Шаг #12. Создайте новый слой, установите цвет в #FFFFFF (белый), выберите инструмент “Горизонтальный текст” из панели инструментов или нажмите “T” и напишите необходимый текст на ваших кнопках, я использовал шрифт Aerial Black размером 12 pt:

Примените следующие стили к этому слою (Для запуска пройдите в пункт меню “Слой” затем “Стиль слоя” и выберите пункт “Параметры наложения…” ): Выберите пункт “Тень” и установите следующие параметры:

Тень:

Вот что должно получиться:

Затем разделите кнопки пунктирной линией размером 1 пиксель с белым бледным цветом:

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

Ниже Вы видите усовершенствованную версию хедера, с добавленной к нему эмблемой.

Материал подготовлен проектом: webmastermix.ru
Источник

• Хедер для коммерческого сайта
• Красивое вертикальное меню
• Почтовая кнопка
• Глянцевая кнопка
• Глянцевая иконка