Стильный дизайн портфолио

В этом уроке мы с вами будем создавать макет сайта портфолио.

Здесь вы можете просмотреть макет в полноэкранном режиме.

Ресурсы для урока:

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

Стильный дизайн портфолио

Наверно, всем известно, что прежде чем создать сайт, сначала необходимо разработать макет или его ещё называют шаблон.

Откройте Photoshop и создайте новый документ с размерами ширина 1200 пикселей и высота 1750 пикселей.

Стильный дизайн портфолио

На панели инструментов выберите Заливка (G) и заполните фон цветом #f7f7f7.

Стильный дизайн портфолио

Создайте новый слой Layer > New > Layer (Слои – Новый - Слой), выберите инструмент Прямоугольная область и образуйте прямоугольное выделение в центре холста, для заливки используйте цвет #d4d4d4. Смотрите скриншот ниже.

Стильный дизайн портфолио

К полученному прямоугольнику добавим фильтр Шум, пройдя во вкладку Filter > Noise (Фильтр - Шум).

Стильный дизайн портфолио

Приступим к созданию меню. На новом слое инструментом Прямоугольник (U) в верхней части создайте прямоугольную форму по ширине всего макета.

Стильный дизайн портфолио

Примените к ней стиль Наложение градиента, зайдя в меню Layer > Layer Style (Слои - Стили слоя).

В редакторе градиентов, установите такие цвета:

Стильный дизайн портфолио

Выберите инструмент Линия (U) и чуть ниже меню создайте линию голубого цвета #75d0eb.

Стильный дизайн портфолио

Перейдите к инструменту Текст (T) и напишите заголовки для меню.

Стильный дизайн портфолио

Давайте обозначим активную категорию. Инструментом Прямоугольник со скруглёнными углами (U) создайте небольшую форму цветом #00acd9 для рубрики Home, поместите её ниже текстового слоя.

Стильный дизайн портфолио

Теперь давайте приступим к созданию логотипа. Активируйте инструмент Перо (P) и в верхнем левом углу создайте форму, как показано ниже.

Стильный дизайн портфолио

Кликните по созданному контуру правой кнопкой мыши и выберите команду Make Selection (Образовать выделенную область). Залейте выделение голубым оттенком #00acd9.

Стильный дизайн портфолио

Добавьте к форме радиальный градиент, при помощи стиля слоя Наложение градиента. В редакторе градиента установите следующие цвета.

Стильный дизайн портфолио

К форме логотипа так же примените стиль Тень.

Стильный дизайн портфолио

Инструментом Текст (T) добавьте текст логотипа.

Стильный дизайн портфолио

Переходим к созданию слайдера. Для начала на новом слое мягкой круглой кистью нарисуйте тень. Затем инструментом Прямоугольник (U) создайте прямоугольную форму белого цвета поверх нарисованной тени.

Стильный дизайн портфолио

Далее поверх предыдущего прямоугольника создайте ещё один, немного поменьше размером. Примените к нему такой же стиль Наложение градиента, как и для логотипа, только на этот раз тип градиента установите Линейный.

Стильный дизайн портфолио

На вновь созданном слое круглой мягкой кистью добавьте белое #ffffff пятно в правой части слайдера.

Стильный дизайн портфолио

Далее зайдите в меню Filter > Blur > Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу) и размойте пятно, установив значение для радиуса 55,2 пикселя.

Стильный дизайн портфолио

На новом слое той же кистью цветом #074859 поверх белого размытого пятна создайте небольшую тень. Затем поверх тени добавьте любое изображение. Примените к изображению стиль Обводка.

Стильный дизайн портфолио

Инструментом Текст (T) добавьте с левой стороны слайдера заголовок и описание к изображению.

Стильный дизайн портфолио

Чуть ниже текста добавим кнопку «View More». При помощи инструмента Прямоугольник со скруглёнными углами (U) образуйте форму для кнопки белого цвета. Добавьте к ней стиль Наложение градиента, как и для меню, используя чёрный цвет. Далее напишите текст на кнопке и добавьте к кнопке тень при помощи мягкой круглой кисти.

Стильный дизайн портфолио

Под слайдером мы разместим блоки с контентом. Для этого создайте форму прямоугольника при помощи инструмента Прямоугольник (U). Заполните её белой заливкой #ffffff и примените к ней стиль Внутреннее свечение, цвет для свечения установите #636363, остальные настройки смотрите ниже.

Стильный дизайн портфолио

На эту форму добавьте заголовок и текст. При помощи Пера (P) создайте маленькую стрелочку в конце текста и заполните её синим цветом. Затем из специального набора добавьте иконку кружок с галочкой в правом верхнем углу блока.

Стильный дизайн портфолио

Повторите предыдущие действия и создайте ещё три таких блока с контентом. Для заголовков используйте различные цвета и к каждому текстовому блоку добавьте иконку, описание и маленькую стрелочку.

Стильный дизайн портфолио

В нижней части макета под блоками с контентом мы добавим ещё один слайдер. Создайте прямоугольник, подобно текстовым блокам, только длиннее. Примените к нему следующие стили:

Тень.

Стильный дизайн портфолио

Тиснение.

Стильный дизайн портфолио

Обводка.

Стильный дизайн портфолио

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

Стильный дизайн портфолио

Перейдите на инструмент Произвольная фигура (U), выберите форму стрелки и добавьте её в правой части слайдера. Так же стрелку создать можно при помощи Пера (P). Примените к ней стиль Наложение градиента, подобно логотипу.

Стильный дизайн портфолио

Повторите предыдущие действия и создайте вторую стрелку слева. Или вы можете создать копию стрелки, кликнув правой кнопкой мыши на слое и выбрав команду Дублировать слой, а затем отобразите копию зеркально.

Стильный дизайн портфолио

Приступим к созданию футера. Инструментом Прямоугольник (U) создайте прямоугольную форму, используя цвет #0e0e0e. Этот слой поместите под слайдером.

Стильный дизайн портфолио

Добавьте к нему немного шума, перейдя в меню Filter > Noise (Фильтр - Шум).

В самом низу макета создайте ещё один прямоугольник и залейте его цветом #333333. По верхнему краю этого прямоугольника добавьте линию цветом #686868.

Стильный дизайн портфолио

При помощи инструмента Текст (T) добавьте навигацию, ссылки, авторское право, так же здесь можно добавить изображения. Просто вставьте изображения и примените к ним стиль Обводку.

Стильный дизайн портфолио

Нам осталось добавить форму для поиска. Создавать её мы будем при помощи Прямоугольника со скруглёнными углами (U), цвет используйте белый #000000. Затем примените к форме тень, используя стиль слоя.

Стильный дизайн портфолио

Слева в форме напишите слово search, а справа добавьте значок лупы.

Стильный дизайн портфолио

Макет сайта – конечный результат.

Стильный дизайн портфолио

Надеюсь вам понравился данный урок, и вы узнали что-то новенькое и интересное!

Ссылка на источник урока.