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

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

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


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

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

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


Шаг 1.


Создаем новый документ размером 760x770 px с белым фоном (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Затем, используя Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G") заливаем наш слой цветом #282828.


Шаг 2.


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


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

После того как создали прямоугольник, переходим в настройки Blending Options (Параметры наложения) и выбираем там Gradient Overlay (Наложение градиента) и делаем настройки как на картинке ниже: ↓


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

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

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

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

Шаг 3.


Дублируем слой с прямоугольником 4 раза (Ctrl+J). Затем переместим их так, что бы это напоминало меню - Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V"). Для это нажимаем клавишу V, и удерживая Shift перемещаем слои как на рисунке ниже: ↓


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

Шаг 4.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Выбираем Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U"), ставим цвет переднего плана #9C9C9C, толщину линии 2-3 px и рисуем вертикальную линию. Далее нажимаем Ctrl+J, что бы дублировать линию и перемещаем полученную линию вправо как на рисунке: ↓


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

Шаг 5.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), выбираем Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) и рисуем внизу прямоугольник как на рисунке ниже. Далее идем в Blending Options (Параметры наложения) выбираем Gradient Overlay (Наложение градиента) и делаем такие же настройки, как в Шаге 2.


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

Шаг 6.


Идем в File > Open (Файл > Открыть / Сочетание клавиш "Ctrl+O") и открываем изображение для фона. Далее растягиваем его, так, как показано ниже на рисунке - Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)). ↓


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

Шаг 7.


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


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

Далее идем в Image > Adjustments > Desaturate (Изображение > Настройки > Обесцветить / Сочетание клавиш "Shift+Ctrl+U").


Результат: ↓

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

Шаг 8.


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


Шаг 9.


Теперь используя кисти, придаем сайту более привлекательный вид.


Вот и все.


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

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

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