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

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

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


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

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

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


Создаем новый файл (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")) с размерами 800x800 px. Выберите Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G"), установите следующий цвет: #111111, затем залейте Ваш холст.


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

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


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

Blending Options (Параметры наложения) (2 раза нажмите по иконке слоя, вызываем стили слоя) > Gradient Overlay (Наложение градиента).


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

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

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

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


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

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

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

Используя тот же инструмент (Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U")) создаем блик на кнопке. Для этого создаем еще один прямоугольник (на рисунке - верхний), затем жмем Subtract from shape area (Вычитание из выделенной области) (-) в настройках инструмента и рисуем еще один прямоугольник (на рисунке - нижний). Вот так: ↓


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

Параметр слоя: Fill (Заливка) 0%.


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


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

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

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

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

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


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

Параметр слоя: Fill (Заливка) 20%.


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

Теперь объедим все слои (кроме background (фона)) в группу: зажав Ctrl выделяем нужные слои, после жмем правой кнопкой и выбираем Create a new group (Создать новую группу слоев). Копируем получившийся слой и изменяем параметры: ↓


1) Главный слой: Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

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

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

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


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

2) Параметр блика: Fill (Заливка) 0%.


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


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

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

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

3) Параметр индикатора кнопки: Fill (Заливка) 10%.


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

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


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

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


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

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


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

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

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

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


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

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

Берем Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") (1 px), поставив белый цвет, и рисуем иконки для кнопок: ↓


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

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

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

Примечание переводчика: автор, видимо, считает, что вы хорошо владеете карандашом... Но никто не мешает взять иконки, поискав их в интернете.


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


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

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

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


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

Параметр других слоев (About me, Services, Gallery, Contact me): Blending Options (Параметры наложения) > Stroke (Обводка): ↓


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

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

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


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

Параметр слоя: Fill (Заливка) 0%.


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


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

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

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


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

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

Теперь добавим надпись в логотип: ↓


(PHOTO)

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

(PORTFOLIO)

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

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

Создаем блик для логотипа: Create new layer (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Выделяем участок слоя с помощью Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"). Выбираем Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B"), Opacity (Непрозрачность) 50% - закрашиваем выделенный участок: ↓


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

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

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

Параметр слоя: Fill (Заливка) 30%: ↓


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

Используем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") (Радиус 7 px) для прорисовки функции поиска. Ненужный участок удаляем с помощью Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ), зажав Alt: ↓


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

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


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

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

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

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


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

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

Теперь создадим кнопки: ↓


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

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

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

Используя Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") (1 px) и цвет #FF9E00, рисуем стрелочки к кнопкам: ↓


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

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


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

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


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

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

Вставим слово Search в это поле: ↓


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

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

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

Кнопку начала поиска нарисуем с помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") (Радиус 3 px). Цвет #CC6600: ↓


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

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


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

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

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


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

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

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

Теперь необходимо создать поле для фотографий из портфолио. Используем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") (Радиус 7 px), цвет #111111.


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

Параметр слоя: Blending Options (Параметры наложения) > Inner Glow (Внутреннее свечение): ↓


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

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


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

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

Используя тот же инструмент, рисуем еще один слой: ↓


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

Параметр слоя: Blending Options (Параметры наложения) > Inner Glow (Внутреннее свечение): ↓


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

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


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

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

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


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

Выбираем красивые фотографии, добавляем в наш документ, предварительно подогнав под нужные размеры (можно подогнать в процессе используя → Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация))). Помещаем каждую фотку над слоем, где она будет размещаться (это действие выполняется на панели Layers (Слой)). Зажав Alt, кликаем мышью (левой кнопкой) между слоем с фотографией и слоем, гда она будет располагаться (итак для всех фото): ↓


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

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


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

Параметр слоя: Fill (Заливка) 30%.


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

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


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

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

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


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

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

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


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

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

Следующий наш шаг: Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") (Радиус 7 px) - рисуем еще один блок (цвет #939393): ↓


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

Параметр слоя: Blending Options (Параметры наложения) > Inner Glow (Внутреннее свечение): ↓


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

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


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

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

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


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

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


(WELCOME)

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

(TO MY WEB SITE)

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

(выделенный текст)

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

(обычный текст)

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

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

Добавим ссылки: ↓

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

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

Создадим новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и, используя Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") (1 px), нарисуем стрелки к ссылкам: ↓


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

Находим в интернете изображение фотоаппарата и вставляем его: ↓


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

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


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

Жмем Q (Edit in Quick Mask Mode (Режим редактирования в режиме быстрой маски)), выбираем Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") (цвет черный) и проводим вертикальную линию от фотоаппарата вниз, жмем еще раз Q и удаляем получившееся выделение. В итоге получаем: ↓


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

В нижней части сайта расположим меню: ↓


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

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

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

Используя Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") (1 px) (цвет - белый) рисуем вертикальные линии: ↓


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

Вот и все.


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

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

Полный размер.


Оригинал;
Текст доработан командой сайта PhotoshopPro.ru