Рисуем макет для сайта «Chopper» используя Фотошоп

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

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


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

Рисуем макет для сайта «Chopper» используя Фотошоп

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


Создаем новый документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Размеры 760х770. background (фон): белый.


Выбираем Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") и используем следующие установки: ↓


Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Рисуем данный градиента сверху вниз используя → Layer > New Fill Layer > Gradient Fill (Слой > Новый слой-заливка > Градиент) то ставим галочку Reverse (Инверсия).


Получаем: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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


Вот так: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Цвет не важен. Далее используем к нему следующие стили слоя (Blending Options (Параметры наложения)): ↓


Drop Shadow (Тень): ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Вот что получаем: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

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


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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Вот результат: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

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


Drop Shadow (Тень): ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Получаем: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Далее дублируем слой Ctrl+J и дубликат перетягиваем чуть выше щас увидим зачем. К этому же дубликату применяем след. стили слоя (Blending Options (Параметры наложения)): ↓


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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Должно получиться вот так: ↓


Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

Для него применяем след. настройки стилей слоя (Blending Options (Параметры наложения)): ↓


Drop Shadow (Тень): ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Получаем: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

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


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

Рисуем макет для сайта «Chopper» используя Фотошоп

Параметры градиента: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

Получаем: ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

Далее автор находит красивенький CHOPPER и "кладет его" вниз... Можно использовать все что угодно.


Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

Берем их все выделяем (Alt+Click по каждому): ↓


Рисуем макет для сайта «Chopper» используя Фотошоп

И жмем Ctrl+Е для объединения в 1 слой. ↓


Рисуем макет для сайта «Chopper» используя Фотошоп

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


Рисуем макет для сайта «Chopper» используя Фотошоп

И выбираем слой с нашими белыми квадратиками не снимая выделения и жмем Delete получаем: ↓


Рисуем макет для сайта «Chopper» используя Фотошоп

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


General Blending (Основные параметры): ↓

Рисуем макет для сайта «Chopper» используя Фотошоп

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

Рисуем макет для сайта «Chopper» используя Фотошоп

И вот что получаем: ↓


Рисуем макет для сайта «Chopper» используя Фотошоп

Далее автор добавляет немного заголовков и текстов с рисунками и вот он долгожданный результат.


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

Рисуем макет для сайта «Chopper» используя Фотошоп

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