Этот урок предназначен для всех, кто нуждается в довольно простом (но не скучном) портфолио со стильными решениями. Мы будем создавать дизайн в 2 этапа: сначала нарисуем макет в Фотошопе, затем сверстаем его.

Окончательный результат:

Смотрите демо

Каркас сайта

Каркас сайта имеет очень простую структуру:

Шаг 0 – Подготовка

Используйте 12-ти колоночный шаблон 960.gs  для этого проекта. Или же вы можете скачать 960-grid-actions и самостоятельно настроить сетку.

Шаг 1 – Лого

Разместите горизонтальную направляющую на уровне 50px и добавьте текст для логотипа. Автор использовал шрифт Apricot размером 46pt и цветом #e35e35. Разместите еще одну горизонтальную направляющую под логотипом. В нашем случае она располагается на уровне 109px.

Шаг 2 – Навигация

Теперь давайте поработаем над навигацией. Она будет находиться справа, для текста используется шрифт Museo500 размером 14pt и цветом #454545. Расстояние между каждым пунктом -  34px.
Шрифт вы можете скачать отсюда. Не все семейство шрифтов Museo бесплатное, выберите 500. Также нам нужно продумать, как будут выглядеть активные пункты меню и пункты в момент наведения курсора.

Шаг 3 – Слайдер

Добавьте новую горизонтальную направляющую на 40px ниже, чем последняя – на уровне 149px, и еще одну на  373px ниже предыдущей – на уровне 522px. Таким образом мы определили область для слайдера. Заполните ее заливкой ‘clean pattern 3 light’ из набора Minimal Patterns for Backgrounds.

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

Добавьте еще одну направляющую на 30px ниже верха области слайдера, на уровне 179px.
Добавьте прямоугольник с высотой  280px и шириной  940px. Назовите слой для слайдера ‘window’ и заполните любым цветом.

Добавьте светло-серую обводку размером 5px.

Шаг 4 – Элементы управления слайдером

В этом примере мы использовали 4 изображения для слайдера, следовательно, 4 круга. Перетащите 2 новые горизонтальные направляющие на 489px и 497px, а вертикальную на 55 пикселей. Используя Ellipse Tool (U) нарисуйте четыре одинаковых круга.
Три из них будут иметь контур размером 1px цветом # e35e35 и белую заливку (или можете вообще убрать заливку). Диаметр активного круга  10px (вместо 8px для нормального состояния). Чтобы сделать это, либо заново нарисовать круг, либо просто изменить цвет заливки на #e35e35 и сделайте внешний контур. Расположите круги, как показано на скриншоте ниже:

У вас должен получится приблизительно такой результат:

Шаг 5 – Секция «О нас» – 1-ая колонка

Добавьте новую горизонтальную направляющую на уровне 565px (на 40px ниже секции с слайдером)  и добавьте первый заголовок ‘Who we are’, используя шрифт Museo500, размером 19pt и цветом #454545.
Текст параграфа находится на  25px ниже заголовка и сдвинут на 5px влево, для него также выбран шрифт Museo Sans 500 размером 13pt.

Убедитесь, что ширина этого параграфа не превышает 240px, новая вертикальная направляющая на уровне 295px поможет вам в этом.

Теперь добавим линию нашему параграфу. Загрузите квадратную кисть при помощи панели  Brush Presets и выберите кисть размером 3px.

Используйте следующие настройки, чтобы получить вертикальную линию:

Удерживая  Shift, нарисуйте такую полоску:

Копируйте всю эту секцию (у вас же все организовано, и вы создали для нее папку?) и разместите дубликат на 35px ниже оригинала.

Шаг 6 – 2-ая колонка

Создайте вторую колонку таким же способом, как и первую, только ширина ее области должна быть 345px. Вертикальная направляющая на уровне 705px поможет вам в этом.
Под текстом расположите кнопку размером 104×28 px, установите ей белую заливку и добавьте обводку размером 1px и цветом #ffbca4 и расположите текст внутри ее. Используйте для этого шрифт Museo500 размером 14pt и цветом #e35e35.

У вас должен получиться такой результат:

Шаг 7 – 3-я колонка

И наконец, 3-я колонка имеет ширину 205px.
Вот параметры для шрифта:

Расстояние между этими маленькими параграфами 25px.

Шаг 8 – Разделитель (<hr />)

Добавьте новую горизонтальную линию на уровне 868px. Используйте квадратную кисть размером 2px и следующие настройки:

Нарисуйте такой разделитель (цвет #ffbca4):

Шаг 9 – Область для примеров работ

Добавьте новую горизонтальную направляющую на уровне 932px. Добавьте новый заголовок при помощи шрифта Museo500  размером 16pt и цветом #454545. Добавьте такую же кнопку, как в предыдущем шаге (118x28px) и расположите  ее на 30px ниже заголовка.

Шаг 10 – Миниатюры

Используйте инструмент Rectangular Marquee Tool (M), чтобы нарисовать прямоугольник размером 140x140px. Дублируйте созданный прямоугольник и сдвиньте дубликат на  40px правее оригинала. Повторите это 2 раза.

Сдвиньте группу прямоугольников вниз на 10px. Дублируйте группу и сдвиньте дубликат на  40px ниже оригинала.

Теперь наше портфолио должно выглядеть так:

Дублируйте разделитель и расположите его на  60px ниже секции  ‘recent projects’.

И добавьте внизу навигацию с расстоянием между ссылками 45px. Вот настройки для шрифтов:

Все, наш дизайн готов!

Окончательный результат:

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

Автор: wegraphics

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

• Делаем дизайн современного календаря при помощи Photoshop
• 20 высококлассных уроков по веб-дизайну
• Качественные шаблоны сайтов
• Качественные уроки веб-дизайна
• Делаем красивое портфолио в Adobe Photoshop