Фотошоп для фотографа 2013

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

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

В данном уроке Фотошопа мы рассмотрим процесс создания стильной шапки для сайта с отражениями в виде графики.


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

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

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


Создаем новый документ 500 на 250 пикселей (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).


Далее рисуем прямоугольник, создаем прямоугольную область используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"), заливаем его черным цветом используя Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G"), нажимаем Ctrl+T и с помощью трансформации приводим его к такому же виду как и на рисунке ниже: ↓


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

Затем добавляем маску, кликнув на кнопку расположенной на палитре слоев (Add vector mask (Добавить векторную маску / В нижней части панели слоев)), выбираем инструмент Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") (от черного к белому) и заливаем с верху в низ. Должен получиться следующий результат: ↓


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

Переходим в свойства слоя и добавляем стили слоя (Gradient Overlay (Наложение градиента) и Drop Shadow (Тень)) с настройками как на изображенях ниже. ↓


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

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

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

В результате получается вот это: ↓


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

В следующем шаге мы будем делать заголовок. Выбираем стандартный шрифт Myriad Pro и набираем любой текст (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")).


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

В свойствах слоя выставляем стиль слоя Gradient Overlay (Наложение градиента) с настройками градиента как на изображении ниже. ↓


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

Далее выделяем половину надписи используя → Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M").


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

Нажимаем Ctrl+Alt+Shift, не отпуская клавиши тыкаем на пиктограмму стоя с текстом (для создания выделения).

И получаем следующий результат: ↓


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

Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и заливаем выделение градиентом от серого (#cdcdcd) к белому, ставим прозрачность слоя 33% и получаем: ↓


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

Затем, дублируйте слой текста (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). Идем → Edit > Transform > Flip Vertically (Правка > Трансформация > Отразить по вертикали). Поворачиваем на 180 градусов, создаем маску слоя и проводим черно-белым градиентом из середины слоя на верх. Лишние детали убираем используя → Eraser Tool Инструмет - Ластик (Инструмет Ластик / Клавиша "E").


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

Далее берем какой либо логотип, помещаем его в удобное для вас место и делаем отражение как и в предыдущем шаге с текстм.


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

Добавляем тень под логотипом. С помошью Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") создаем небольшой эллипс (окружность) черного цвета под Лого, идем в → Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) высталяем радиус 2,1 и вставляем прозрачность слоя на 70%.


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

По аналогии вы можете сюда поместить и другие объекты – все упирается только в вашу фантазию.


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

В следующем щаге мы будем добавлять навигационное меню, для этого с помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") с радиусом 7 пикселей создаем прямоугольник.


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

Идем в свойства слоя и вставляем следующие стили с настройками как на изображении ниже. ↓


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

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

Получаем вот такую закладку: ↓


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

Дублируем слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) и получаем готовое меню.


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

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

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