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

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

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

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


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

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

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


Для начала создадим новый документ с размерами - 800*200 пикселей и белым фоном (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).


Зададим цвет переднего плана - #01b9f5 (foreground Основной цвет в Фотошопе (Основной цвет)), а заднего таким #006696 (background Фон в Фотошопе (Фон)).


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и заливаем его используя Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") сверху вниз.


Должно получиться что-то вроде этого: ↓


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

Выбираем Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") с такими настройками: ↓


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

Рисуем выделение: ↓

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

Затем выбираем Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") с настройками: ↓


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

И убираем часть выделение, вот так: ↓


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

И еще раз Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M"), но уже с другими настройками: ↓


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

И рисуем еще одно выделение: ↓


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

В результате у нас должно получиться, примерно так: ↓


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

Заливаем белым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")) и нажимаем Ctrl+D чтобы снять выденение.


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

Копируем этот слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) и уменьшаем в размере (Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация))): ↓


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

Берем Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U") толщиной 1 пиксель и рисуем: ↓


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

Выбираем Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и дорисовываем круг: ↓


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

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


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

Шагаем по адресу Edit > Transform > Perspective (Редактирование > Трансформация > Перспектива).


И выставляем такие параметры: ↓


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

Копируем слой до получение желаемого рузультата: ↓


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

Объединям все слои составляющие этот рисунок: ↓


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

И клонируем: ↓

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

Выбираем оба слоя и опять клонируем: ↓


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

Шагаем → Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали).


И выставляем копии симметрично.


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


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

Теперь копируем 4 ранее полученных слоя.


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

Выбираем Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V") и ровняем вот так: ↓


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

Результат выравнивания такой: ↓


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

Добавляем детали. У нас это текст написанный шрифтом маленького размера: ↓


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

И еще одна деталь добавляющая стиля в рисунок.


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


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

Увеличиваем масштаб до 1600 (Zoom Tool Инструмент - Лупа (Инструмент Лупа / Клавиша "Z")), берем Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") и рисуем три точки.


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

Идем Edit > Define Pattern (Редактирование > Определить узор) и жмем ОК.


Возвращаемся к нашему шедевру.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и заливаем его только что созданным узором (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")): ↓


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

Получаем вот что: ↓


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

Меняем параметры наложения слоя на Soft light (Мягкий свет).


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

Вот и все.


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

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

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