Строгий дизайн для портфолио в Фотошоп

Итоговый результат:

Исходники к уроку:

1. Иконки
2. 960 Grid System

Архив

Шаг 1. Создание структуры сайта

Для начала скачайте 960 grid system. Откройте файл "960_download\templates\photoshop\960_grid_12_col.psd". Нажмите Ctrl+Shift+C, чтобы изменить размер холста.

Используя инструмент Заливка (Paint Bucket Tool) залейте фоновый слой цветом #242b30. Теперь Вам нужно создать папки для каждой части сайта.

Шаг 2. Создание шапки сайта

Создайте новую папку и назовите её "Header". Перейдите в  Вид > Новая направляющая (View > New Guide), в появившемся окне выберите Ориентация (Orientation) - Горизонтальная (Horizontal), и в поле Позиция (Position) введите 100px.

Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), создайте выделение, как показано на скриншоте ниже, и залейте его белым (#FFFFFF) цветом.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол 90;
- #171c20;
- #22292f;

Обводка (Stroke):
- #0d1012;

Шаг 3. Создание логотипа

Создайте папку "Logo", внутри папки "Header". Выберите инструмент Текст (Type Tool) и напишите своё название сайта, с теми же настройками, что и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Теперь создайте новый слой, назовите его "Light " и поместите его под текстовым слоем. Создайте выделение, как показано на скриншоте ниже.

Установите цвет переднего плана на белый (#FFFFFF). Выберите инструмент Кисть (Brush Tool), в параметрах кисти выберите кисть с теми же параметрами, что и на скриншоте ниже.

Создайте такое же осветление, как и на скриншоте.

Установите Непрозрачность (Оpacity) на 80% и режим наложения измените на Мягкий свет (Soft Light).

Шаг 4. Создание навигации

Создайте папку "Navigation" внутри папки "Header". Выберите инструмент Текст (Type Tool) и создайте несколько пунктов меню, со следующими настройками:

Я выделил ссылку "Home", потому что это активная ссылка. Для остальных ссылок я использовал цвет #b6aefd. Для активной ссылки добавьте следующие стили:

Наложение цвета (Color Overlay):
- #232a2f;

Создайте новый слой и поместите его под слой с активной ссылкой. Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и установите радиус скругления в 5px.

Добавьте следующие стили:

Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Обводка (Stroke):
- #13181b;

Шаг 5. Создание слайд-шоу

Создайте новую направляющую (Вид > Новая направляющая (View > New Guide)). Ориентация (Orientation) - Горизонтальная (Horizontal), Позиция (Position) - 140px. Повторите действия и создайте ещё одну направляющую, позиция - 440px.

Создайте новую папку - "Slideshow". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px, и создайте прямоугольник, как на скриншоте ниже, залейте цветом - #171c20.

Добавьте стили слоя:

Создайте выделение для слоя, перейдите в Выделение > Модификация > Сжать (Selection > Modify > Contract) и сожмите выделение на 5px. Создайте 4 новых направляющих и перетащите к краям выделения.

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) с радиусом в 5px. Цвет я выбрал - #36414a. На самом деле, цвет для этой формы не имеет значения, т.к. это будет подложка для изображений.

Добавьте стили слоя:

Внутреннее свечение (Inner Glow):
- #424f5a;

Обводка (Stroke):
- #111417;

Внутри папки "Slideshow" создайте папку "divider". Выберите инструмент Прямоугольное выделение ( Rectangular Marquee Tool). Создайте две 1 пиксельные вертикальные линии. Цвет первой - #111417. Цвет второй - #424f5a.

Мы разделим слайд-шоу на 2 части. В левую часть мы поместим описание к картинке, из правой части, и две кнопки. Внутри папки "Slideshow" создайте папку "left". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px. Создайте прямоугольник внутри подложки.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #242b31;
- #36414a;

Создайте новый слой "header". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), создайте прямоугольник и поместите его так же, как на скриншоте ниже.

Добавьте следующие стили слоя:
Внутреннее свечение (Inner Glow):
- #424f5a;

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #21282d;
- #2f3840;

Обводка (Stroke):
- #111417;

Теперь добавьте свой заголовок, используя инструмент Текст (Type Tool). (Цвет - #171c20; Отступ - 20px)

Дублируйте слой с текстом и сместите на 1 пиксель вниз. Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #d4d4d4;
- #ffffff;

С помощью инструмента Текст (Type Tool) добавьте описание.

Внутри папки "Slideshow" создайте папку "Read more". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте прямоугольник и поместите так же, как на скриншоте ниже. Выберите инструмент Текст (Type Tool) и напишите "Read more", цвет - #dedede.

Создайте папку "prev_next". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте и поместите прямоугольник так же, как и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;

Обводка (Stroke):
- #161b1f;

Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите такую же стрелку, как и на скриншоте ниже.

Поместите её, как на скриншоте ниже:

Добавьте стили слоя:

Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #21282d;
- #2f3840, Позиция (Location): 50% и 100%;

Теперь возьмите какую-нибудь картинку и поместите её в правую часть слайд-шоу.

Выберите инструмент Перо (Pen Tool) и создайте такую же форму, как на рисунке ниже, залейте её чёрным (#000000) цветом.

Перейдите в Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur) радиус размытия установите 5px. Непрозрачность (Оpacity) установите на 80%.

Шаг 6. Создание блока "What I Do"

Выберите инструмент Текст (Type Tool), напишите свой заголовок и поместите так же, как и на скриншоте ниже.

Добавьте стили слоя:

Наложение градиента (Gradient Overlay):
- Стиль: линейный градиент;
- #d4d4d4;
- #ffffff;

Внутри папки "What I Do" создайте 4 папки: "I Capture Smiles", "I Design Websites", "Awards I Receive" и "I love to Socialize". С помощью инструмента Текст (Type Tool) напишите какой-нибудь текст для каждого блока. Для заголовков я использовал следующие настройки: Цвет - #dfdfdf; Размер - 18pt. Для описания: Цвет - #dfdfdf; Размер - 12pt. Стили для кнопки "Read more" те же, что и у кнопки в Слайд-шоу. Размер блока - 220px.

Если Вы выполнили предыдущий шаг, то у Вас должно уже получится что-то вроде этого:

Шаг 7. Создание разделителя

Внутри папки "Divider" создайте новую папку "lines". Чтобы сделать разделитель воспользуйтесь инструментом Линия (Line Tool). Цвет первой линии - #111417. Цвет второй - #364148.

Выберите инструмент Прямоугольник (Rectangle Tool), создайте и поместите прямоугольник так же, как на скриншоте ниже. Заливку (Fill) уменьшите до 0%.

Добавьте стили слоя:

Дублируйте слой и измените стиль Наложение градиента (Gradient Overlay).

Цвет градиента - #242b30;

Шаг 8. Создание блока "About Me"

Внутри папки "About Me" создайте новый слой, выберите инструмент Текст (Type Tool) и добавьте заголовок и описание. Используйте те же настройки, что и в блоке "What I Do".

Шаг 9. Создание блока "My Portfolio"

Внутри папки "My Portfolio" создайте новый слой, и с помощью инструмента Текст (Type Tool) напишите свой заголовок.

Выберите инструмент Прямоугольник ( Rectangle Tool) и поместите прямоугольник, как показано на скриншоте ниже.

Добавьте стили слоя:

Обводка (Stroke):
- #161b1f;

Поместите своё изображение тем же способом, что и в слайд-шоу.

Теперь, добавьте описание, для этого возьмите инструмент Текст (Type Tool) и напишите описание так, как показано на скриншоте ниже.

Шаг 10. Создание футера

Создайте новый слой, внутри папки "Footer". Выберите инструмент Прямоугольник (Rectangle Tool), цвет - #171c20, создайте прямоугольник (Высота - 50px) и поместите так же, как на скриншоте.

Добавьте стили слоя:

Внешнее свечение (Outer Glow):
- #111417;

Обводка (Stroke):
- #364148;

Добавьте свои копирайты в левой части футера и несколько ссылок в правой.

Шаг 11. Добавление фонового свечения

Выберите папку "Background" и внутри неё создайте 2 слоя и назовите их "Slideshow_light" и "whatido_light". Выберите слой "Slideshow_light", возьмите инструмент Прямоугольная область ( Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.

Чтобы создать свечение выберите инструмент Кисть (Brush Tool), размер - 700, жёсткость (hardness ) 0%. Создайте свечение, как показано на скриншоте ниже. В режиме наложения выберите Мягкий свет (Soft Light), Непрозрачность (Оpacity) 70%.

У Вас должен будет получится такой же эффект:

Выберите слой "whatido_light". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже.

Режим наложения измените на Мягкий свет (Soft Light) и Непрозрачность (Оpacity) уменьшите до 70%. Создайте свечение, как на скриншоте ниже.

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

Итоговый результат:

Автор:  Michael John Burns

Источник: 1stwebdesigner.com