Простая шапка сайта

Конечный результат:


Простая шапка сайта


Шаг 1
Создайте новый документ размером 1000х800 пикселей с разрешением 72 dpi. с белым фоном. Создайте новый слой (Create New Layer), создайте прямоугольник размером 1000x121 пикселей и залейте его цветом #C2EBFF.


Простая шапка сайта


Шаг 2
Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Отбрасывание тени (Режим – Нормальный):


Простая шапка сайта


Внутренняя тень (Режим – Нормальный):


Простая шапка сайта


Глянец (Режим – Нормальный):


Простая шапка сайта

Простая шапка сайта


Шаг 3
Создайте новый слой (Create New Layer) и нарисуйте 1-пиксельную линию цветом #5B5B5B вдоль края верхнего прямоугольника.


Простая шапка сайта


Шаг 4
В новом слое нарисуйте длинный прямоугольник размером 540x23 пикселей цветом #930000 в нижней части тёмного прямоугольника. В меню Стилей слоя примените такие стили:

Отбрасывание тени:


Простая шапка сайта


Внутренняя тень (Режим – Осветление основы):


Простая шапка сайта


Наложение градиента (Режим — Затемнение основы, Стиль — Линейный):


Простая шапка сайта

Простая шапка сайта


Шаг 5
Создайте ещё одну 1-пиксельную линию цветом #9F1C1C на верхнем края красного прямоугольника.


Простая шапка сайта


Шаг 6
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите названия разделов меню. Я использовал шрифт “Arial”, Жирный (Bold), размером 13 pt. Потом создайте разделители цветом #272727.


Простая шапка сайта


Шаг 7
Создайте новый слой (Create New Layer) и создайте чёрный прямоугольник цветом 463x21 пикселей.


Простая шапка сайта


Шаг 8
Перейдите в меню Стилей слоя и настройте так:

Внутренняя тень (Режим – Затемнение основы):


Простая шапка сайта


Наложение градиента (Режим — Осветление основы, Стиль — Зеркальный):


Простая шапка сайта


Установите Режим наложения – Замена светлым (Blending Mode – Lighten ) и Непрозрачность – 58%.


Простая шапка сайта


Шаг 9
Напишите текст заголовка в слогана.


Простая шапка сайта


Финальный результат:


Простая шапка сайта


Вариант с поисковым полем.





Делаем Web-дизайн

Вас может также заинтересовать:

21 октября 2017

21 октября 2017

Байонет: Nikon F Тип объектива: телеобъектив Фокусное расстояние: переменное

21 октября 2017

Дата анонса: 2010/01/05 Эффективное разрешение, МП: 10 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 175