Рисуем стильную шапку для сайта используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы создадим простенькую, стильную шапку для сайта.


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

Рисуем стильную шапку для сайта используя Фотошоп

Приступаем к уроку Фотошопа


Шаг 1.


1) Создаем документ произвольного размера с белым фоном. (400х175, File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).

2) Копируем Фон (СTRL+J).

3) Дальше берем инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"): ↓

Радиус: 8.


Рисуем стильную шапку для сайта используя Фотошоп

4) Обводим область для основной части нашей шапки в режиме Shape Layers (Слой фигуры).

И применяем слудующие настройки Blending Options (Параметры наложения): ↓


Drop Shadow (Тень): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Pattern Overlay (Перекрытие узора): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Stroke (Обводка): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Получаем что-то вроде этого: ↓


Рисуем стильную шапку для сайта используя Фотошоп

Шаг 2.


1) Обводим область внизу, тем же инструментом, только уже черного цвета, овальной формы, произвольной длины (там будет наш слоган).

2) Двойной клик, настраиваем следующии опции Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Inner Shadow (Внутренняя тень): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Drop Shadow (Тень): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Gradient Overlay (Наложение градиента): ↓

Рисуем стильную шапку для сайта используя Фотошоп

3) Ставим Opacity (Непрозрачность) на 20%.


Результат: ↓

Рисуем стильную шапку для сайта используя Фотошоп

4) Настраиваем рамку: ↓

4.1) Копируем слой (CTRL+J).

4.2) Ставим Opacity (Непрозрачность) на 100% Fill (Заливка) на 0%.


Таким образом мы получим рамку, без всяких проблем.


Шаг 3.


1) Пишем надпись любым шрифтом (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")), у которого широкая поласть (я взял шрифт Ben Krush).

Делается это для того, чтобы было заметно на тексте металлический стиль (это необязательно, шаг можно пропустить).


2) Применяем такие настройки слоя - Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Gradient Overlay (Наложение градиента): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Drop Shadow (Тень): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Inner Glow (Внутреннее свечение): ↓

Рисуем стильную шапку для сайта используя Фотошоп

3) Жмем ОК и получаем желаемый эфект (для других шрифтов можно поиграть с Inner Glow (Внутреннее свечение) и Gradient Overlay (Наложение градиента)).


4) Пишем текст на слогин - области (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")).


5) Двойной клик выставляем Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Drop Shadow (Тень): ↓

Рисуем стильную шапку для сайта используя Фотошоп

Получаем вот такое или что-то подобное: ↓


Рисуем стильную шапку для сайта используя Фотошоп

Теперь используя разные интересные кисти (можно подобрать из сети) инструментом Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") добавляем разводы и по желанию добавим блик (я не стал добавлять).


Вот и все.


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

Рисуем стильную шапку для сайта используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru