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

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

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

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

Создайте новый файл (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')), размером 766*699 px и 72 dpi.

Инструментом Rectangle Tool (Инструмент 'Прямоугольник' / Клавиша 'U' ), делаем выделение, как на рисунке: ↓

Применяем следующие параметры: (Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента)): ↓

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

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

Результат: ↓

Создайте новый документ 4*4 px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')). Выберите инструмент Карандаш (Pencil Tool (Инструмент Карандаш / Клавиша 'B')), основной цвет - белый. Создаем изображение, как на рисунке ниже, после чего Edit > Define Pattern (Редактирование > Определить узор). ↓

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

Параметры слоя: Fill (Заливка) 0%, Blending Options (Параметры наложения) - Pattern Overlay (Перекрытие узора): ↓

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

Результат: ↓

Выше нарисованной полосы, инструментом - Rectangle Tool (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем полосу и окрашиваем цветом - #BBDD03 (Paint Bucket Tool (Инструмент Заливка / Клавиша 'G')): ↓

Создаем копию полосы (белые точки), используя - Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация)) переверните копию полосы в основание фона: ↓

Создайте новый документ 4*4 px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')). Выберите инструмент Pencil Tool (Инструмент Карандаш / Клавиша 'B'), основной цвет - #729C06. Создаем изображение, как на рисунке, после чего Edit > Define Pattern (Редактирование > Определить узор).

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

Параметры слоя: Fill (Заливка) 0%, Blending Options (Параметры наложения) - Pattern Overlay (Перекрытие узора): ↓

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

Результат: ↓

Инструментом Pen Tool (Инструмент Перо / Клавиша 'P'), рисуем украшения фона, цвет - #AAD500: ↓

Другой рисунок, цвет - #AAD700. ↓

Цвет - #AECD01. ↓

Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Pencil Tool (Инструмент Карандаш / Клавиша 'B'), основной цвет - #E3E3E3. Создаем изображение, как на рисунке, после чего Edit > Define Pattern (Редактирование > Определить узор).

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

Выставляем параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓

Blending Options (Параметры наложения): ↓

Результат: ↓

Сделайте две копии последнего сделанного слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш 'Ctrl+J')) и разместите их (Move Tool (Перемещение / Клавиша 'V')), как показано на рисунке: ↓

Вставьте картинки: ↓

Используя Rounded Rectangle Tool (Инструмент 'Прямоугольник со скругленными углами' / Клавиша 'U'), цвет - #EBEBEB, со сл. настройками: ↓

Создаем подобную форму: ↓

Копируем последний слой, свободная трансформация (Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация))), уменьшаем размер, цвет - #49BD14.

Переходим в параметры слоя → Blending Options (Параметры наложения) > Stroke (Обводка): ↓

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

Результат: ↓

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

Зажав Alt нажимаем мышкой между двумя последними слоями. Fill (Заливка) 50%.

Для заключительного результата, мы объединяем слои с иконками, и копируем их 2 раза. После чего перемещаем иконки на 2 оставшиеся картинке, после чего меняем их цвета. Первая копия - #ED9300; вторая копия - #5EA9D1. Blending Options (Параметры наложения) > Stroke (Обводка), как показано выше.

Пишем номера в иконки, после чего Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация)), поворачиваем их: ↓

Переходим в параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Результат: ↓

Напишите название сайта → Horizontal Type Tool (Инструмент 'Горизонтальный текст' / Клавиша 'T'): ↓

Настройки текста: ↓

Переходим в параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Создаем новый слой (New Layer (Новый слой / Сочетание клавиш 'Ctrl+Shift+N')). Точки, цвет - #D7FF00:

Создайте таблицы, и подпишите карточки → Horizontal Type Tool (Инструмент 'Горизонтальный текст' / Клавиша 'T'): ↓

Настройки текста: ↓

About us, О нас: ↓

Настройки текста: ↓

Создаем меню: ↓

Настройки текста: ↓

Берем инструмент Pencil Tool (Инструмент Карандаш / Клавиша 'B'), рисуем точки: ↓

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

Полосы должны иметь следующие настройки. Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓

Outer Glow (Внешнее свечение): ↓

Rounded Rectangle Tool (Инструмент 'Прямоугольник со скругленными углами' / Клавиша 'U'), настройки: ↓

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Копия слоя. Инструментом свободная трансформация, уменьшаем, цвет - #6DD800.

Blending Options (Параметры наложения) > Stroke (Обводка): ↓

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

Rectangle Tool (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем как на рисунке, цвет - #A9DB7C.

Удерживая ALT, жмем мышкой между последними слоями: ↓

Тоже самое делаем, для двух остальных картинок. Меняем только цвет: вторая кнопка #F6C073; третья - #89B4C7 (Blending Options (Параметры наложения) > Stroke (Обводка) как выше): ↓

Пишем название кнопок: ↓

Настройки текста: ↓

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

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

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Вставляем картинки в квадраты: ↓

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

Параметры для левой полосы: Fill (Заливка) 0%, Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓

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

Параметры для правой полосы: Opacity (Непрозрачность) 70%, Fill (Заливка) 0%, Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓

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

Копируем слой с полосой и перемещаем ее на другой край: ↓

Напишите необходимый текст (ниже настройки для различных текстов): ↓

Настройки текста: ↓

Настройки текста: ↓

Настройки текста: ↓

Навигационный текст: ↓

Цифровой: ↓

Ellipse Tool (Инструмент Овальная форма / Клавиша 'U'), рисуем круг, цвет - #FFD40F.

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓

Drop Shadow (Тень): ↓

Blending Options (Параметры наложения) > Stroke (Обводка): ↓

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

Вот и все.

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

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