Шапки для сайтов, скачать хедеры для сайта - Создание шапки для сайта в Photoshop

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

Для более удобного изучения, действовать будем поэтапно. Ну что же - поехали:

Этап 1: Создать новый лист с расширением 700х200px и залейте фон каким нибудь бледным цветом, к примеру #F6F5F5.

Этап 2: С помощью инструмента "Прямоугольная область" осуществить прямоугольное выделение, примерно так как показано на изображении:

Этап 3: Заполнить выделенную область цветом #C9D2D2. Должно это выглядеть вот так:

В параметрах наложения данного слоя в пункте "Тень" выставить следующие настройки:

Затем в пункте "Обводка" изменить параметры на следующие:

После этого всего наше изображение должно приобрести такой вот вид:

Этап 4: Пришло время сделать кнопки. Выбираем инструмент "Прямоугольная область" и делаем прямоугольное выделение как показано на рисунке:

Этап 5: Заполняем выделение цветом, к примеру #88B6C2. В "Параметрах наложения" в пункте "Наложение градиента" выставляем следующие опции:

В пункте "Обводка" изменяем на:

И вот что после этого получается:

Этап 6: Теперь нужно произвести выделение на 1px ниже уровня наших кнопок, вот так:

Заполнить эту выделенную область вот этим цветом #9CACAB:

Этап 7: Для дальнейшей работы нужно создать новый слой и установить цвет #DCE6E8. Затем выбрав инструмент "Карандаш", установить его толщину в 2px и провести линию под прямоугольником, который мы создали на предыдущем этапе (для облегчения задачи увеличьте масштаб):

Этап 8: Делаем выделение на 1px, но уже выше уровня наших кнопок:

Заполнить это выделение необходимо градиентной заливкой, в которой цвет #CFD5D3 - передний план, а цвет #FFFFFF - фон:

В итоге должно выглядеть вот так:

Этап 9: Выберите цвет #9CACAB и инструментом "Карандаш" (толщина 1px) провести линию на всю длину прямоугольника, сделанного на прошлом этапе:

Этап 10: Создав еще один слой, выделите инструментом "Прямоугольная область" большой прямоугольник, который предназначен для иконок:

Этап 11: Теперь нужно убрать часть выделения у его основания (с помощью того же инструмента "Прямоугольная область" и удерживая клавишу Alt):

Залейте эту область белым. Затем в меню Фильтр -> Размытие -> Размытие по Гауссу выставить следующие опции:

Для этого слоя нужно также установить прозрачность где то 19%:

Этап 12: Снова создав новый слой и установив для него белый цвет, инструментом "Горизонтальный текст" сделать необходимые надписи шрифтом Arial Black с размером 12pt:

В меню "Параметры наложения" в пункте "Тень" изменяем параметры на:

Как результат должны получить вот что:

После этого нужно разделить созданные кнопки пунктирной линией в 1px бледно-белым цветом:

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

Как пример покажу вот этот немного доработанный хедер:

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

На этом, наверное и все.. До скорых встреч в новых уроках!