Дизайн веб-портфолио

5 мая 2012 · Глеб Х. · «Мир Фотошопа»

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

Ресурсы урока:

Сетка «960 Grid System»

В процессе урока мы будем использовать сетку «960 Grid System» для того, чтобы распределить элементы дизайна по своим местам. Загрузите её себе на компьютер. Распакуйте архив и перейдите в папку «templates», затем в папку «photoshop». Там Вы найдите три PSD файла с сетками на 12, 16 и 24 колонки. В этих PSD файлах уже отведены направляющие, которые нам очень помогут. Мы будем использовать файл с 12 колонками. Чтобы сделать видимыми направляющие, перейдите в меню View → Show Guides.

В дальнейшем нам нужно будет создавать фигуры определённого размера. Чтобы знать точный размер, используйте окно Info (Window → Info). В нём будет показана ширина и высота фигуры.

Шаг 1: Настройка документа

Откройте файл «960_grid_12_col.psd» в Фотошопе. Перейдите в меню Edit → Canvas Size и введите значения ширины и высоты, указанные на скриншоте ниже. Вы в любой момент сможете изменить размер холста ещё раз, чтобы все элементы дизайна поместились.

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

Создайте новую группу (Layer → New → Group) и назовите её «Header». Выберите инструмент Rectangle Tool (U) и создайте фигуру размером 1200х100 пикселей цветом #383c3e. Назовите слой «header bg». Вы также можете использовать функцию Fixed Size в настройках инструмента, которая позволяет заранее определить размер создаваемой фигуры.

Кликните правой кнопкой мыши на слое с фигурой и выберите пункт Convert to Smart Object. Затем перейдите в меню Filter → Noise → Add Noise. Настройки фильтра показаны ниже.

Шаг 3: Добавление названия сайта

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T) и в левой части созданного прямоугольника напишите название сайта. Я использовал шрифт «Rockwell Bold» размером 40pt белого цвета. Используйте направляющие (Ctrl + ;), чтобы правильно расположить текст.

Шаг 4: Создание узора диагональных линий

Сейчас мы создадим узор, который позже применим в качестве тени. Создайте новый документ (Ctrl + N) размером 3х3 пикселя. Скройте фоновый слой и создайте новый (Ctrl + Shift + N). Инструментом Rectangular Marquee Tool (M) создайте три квадратных выделения, как показано ниже. Удерживая Shift, Вы будете добавлять новое выделение к уже существующему.

Залейте выделение белым цветом и нажмите Ctrl + D, чтобы убрать его. Затем перейдите в меню Edit → Define Pattern, дайте имя узору и нажмите ОК. Можете закрыть этот документ.

Шаг 5: Добавление тени к текстовому слою

Выберите инструмент Move Tool (V), зажмите клавишу Alt и перетащите заголовок ниже. У Вас создастся копия слоя, которая будет опущена под оригинальный заголовок. Назовите эту копию «shadow» и измените цвет на красный, чтобы легче было различить.

Используя клавиши стрелок, сдвиньте красный текст на 2 пикселя вниз и вправо, относительно первоначального положения заголовка. Установите Fill слоя на 0%, Opacity — на 40% и перейдите в меню стилей (кликните дважды на слое). Примените стиль Pattern Overlay с настройками, показанными ниже.

Шаг 6: Добавление навигационных ссылок

Создайте новую группу (Layer → New → Group) и назовите её «navigation». Выберите инструмент Horizontal Type Tool (T) и напишите названия разделов сайта. Я использовал шрифт «Rockwell Regular» размером 16pt цветом #e1e6e9.

Под названиями разделов можно добавить ещё одну строку навигационных ссылок меньшего размера. Шрифт — «Lucida Sans Regular» размером 12pt цветом #e1e6e9.

Шаг 7: Добавление разделителя между разделами

Сейчас создадим ещё один узор для разделителя. Создайте новый документ (Ctrl + N) размером 1х10 пикселей. Создайте новый слой (Ctrl + Shift + N) и скройте фоновый. Инструментом Rectangular Marquee Tool (M) создайте выделение размером 1х6 пикселей. Залейте его белым цветом и уберите выделение (Ctrl + D). Сохраните узор (Edit → Define Pattern) и закройте документ.

Инструментом Line Tool (U) создайте вертикальный разделитель между двумя разделами меню. Установите Fill этого слоя на 0% и Opacity на 30%.Назовите слой «dashed line». Перейдите к его стилям (кликните дважды на слое) и примените Pattern Overlay (настройки показаны ниже на скриншоте).

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

Шаг 8: Создание активного раздела меню

Для одной из навигационных ссылок мы создадим светлый фон, чтобы показать её активность. Инструментом Rectangular Marquee Tool (M) создайте прямоугольное выделение вокруг раздела «ABOUT», как показано ниже. Затем создайте корректирующий слой Brightness/Contrast (Layer → New Adjustment Layer → Brightness/Contrast) с настройками, показанными на скриншоте ниже. Выделение, которое мы создали, поможет залить маску корректирующего слоя должным образом. Всё, что находилось за пределами выделения, будет залито чёрным цветом, то есть скрыто, и коррекция коснётся только внутренней части выделенной области.

Расположите этот корректирующий слой под всеми текстовыми слоями навигационного меню.

Шаг 9: Создание панели под навигационным меню

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

Выберите инструмент Rectangle Tool (U) и создайте прямоугольник размером 1200х40 пикселей цветом #63686b. Назовите слой «breadcrumbs bg». Кликните правой кнопкой мыши на этом слое и выберите пункт Convert to Smart Object. Затем примените фильтр шума (Filter → Noise → Add Noise).

Создайте новый документ (Ctrl + N) размером 5х5 пикселей. Создайте диагональный узор так же, как и ранее. Затем вернитесь в основной документ и кликните дважды на слое «breadcrumbs bg», чтобы открыть окно стилей. Примените стиль Pattern Overlay.

Шаг 10: Завершение создания панели

Выберите инструмент Horizontal Type Tool (T) и напишите текст, как показано ниже. Я использовал шрифт «Lucida Sans» размером 12pt цветом #dde2e5.

Выберите инструмент Line Tool (U) и создайте горизонтальную 1-пиксельную линию прямо под полоской с информацией. Цвет линии — #373a3c. Затем сделайте копию слоя с линией (Ctrl + J) и поднимите её на 1 пиксель при помощи инструмента Move Tool (V). Измените цвет копии на #787e82.

Создайте такие же две линии в верхней части информационной панели.

Шаг 11: Создание фона для слайдера

Создайте новую группу (Layer → New → Group) и назовите её «Slider». Инструментом Rectangle Tool (U) создайте прямоугольник размером 1200х460 пикселей цветом #45494c. Назовите слой «slider bg».

Кликните правой кнопкой мыши на слое и выберите пункт Convert to Smart Object. Затем примените фильтр шума (Filter → Noise → Add Noise).

Шаг 12: Создание слайдера

Инструментом Rectangle Tool (U) создайте прямоугольник размером 940х340 пикселей цветом #5e6468. Назовите этот слой «border». Перейдите в меню стилей этого слоя и примените стиль Stroke: #787e82.

Создайте ещё один прямоугольник размером 910х295 пикселей внутри предыдущего. Назовите слой «image_holder» и примените к нему 1-пиксельную обводку цветом #45494c через стиль Stroke.

Откройте изображение, которое Вы хотите расположить внутри слайдера, в отдельном документе. Инструментом Move Tool (V) перетащите его в основной документ и расположите поверх слоя «image_holder». Назовите слой с изображением «image», кликните на нём правой кнопкой мыши и выберите пункт Create Clipping Mask (либо нажмите Ctrl + Alt + G). После этого изображение не выйдет за пределы слоя, находящегося ниже.

Шаг 13: Создание навигации для слайдера

В этом шаге мы создадим ленточку под слайдером. На ней будет показана информация об имени текущего изображения и кнопки навигации.

Создайте новую группу «slider navigation». Выберите инструмент Rectangle Tool (U) и создайте прямоугольник размером 960х50 пикселей цветом #c4ccd1. Назовите слой «rectangle». Кликните правой кнопкой мыши на этом слое и выберите пункт Convert to Smart Object. Затем примените фильтр шума (Filter → Noise → Add Noise). Затем примените стили, показанные ниже на скриншоте:

  • Inner Glow: #d8e0e4
  • Stroke: #575d61

Инструментом Pen Tool (P) нарисуйте треугольник под правым нижним углом прямоугольника. Цвет — #636b70. Назовите слой «triangle right». Преобразуйте этот слой в смарт-объект и примените фильтр шума (Filter → Noise → Add Noise) (настройки указаны ниже). После этого примените стиль Stroke: #575d61.

Сейчас создадим конец ленточки. Инструментом Pen Tool (P) нарисуйте фигуру, показанную на следующем скриншоте. Цвет фигуры — #8b9297. Назовите слой с ней «end ribbon right». Преобразуйте слой в смарт-объект и примените тот же фильтр шума (Ctrl + F). Затем примените стили Outer Glow (#9ea6ab) и Stroke (#3d4245).

Расположите этот слой под слоем «triangle right» и сдвиньте в сторону.

Сделайте копию слоёв «triangle right» и «end ribbon right» (выберите их и перенесите на иконку создания нового слоя в нижней части палитры слоёв). Копии нужно отразить по горизонтали (Edit → Transform → Flip Horizontal). Инструментом Move Tool (V) расположите копии на левой стороне ленты.

Сейчас создадим тень от ленты. Инструментом Rectangle Tool (U) создайте чёрный прямоугольник (скриншот 1). Назовите слой «shadow». Преобразуйте его в смарт-объект и примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) (скриншот 2). Затем расположите этот слой под всеми слоями ленты (скриншот 3).

К слою «shadow» добавьте пиксельную маску, залитую чёрным цветом (Layer → Layer Mask → Hide All). Тень должна исчезнуть. Выберите инструмент Brush Tool (B) с мягкими краями белого цвета. Обрисуйте центральную нижнюю часть ленты, чтобы тень стала видна. Установите Opacity этого слоя на 60% (скриншот 4).

Выберите инструмент Horizontal Type Tool (T) и напишите название изображения, показываемого на слайдере. Я использовал шрифт «Lucida Sans» размером 18pt цветом #4b4e50.

Шаг 14: Навигационные кнопки слайдера

Создайте новую группу «next button». Выберите инструмент Rounded Rectangle Tool (U) и в настройках установите значение параметра Radius на 4 пикселя. Создайте прямоугольник размером 110х26 пикселей цветом #8fbfd1.

Назовите слой «button» и примените стили, показанные ниже на скриншоте. Цвет стиля Stroke — #6f95a4.

Инструментом Rectangle Tool (U) создайте прямоугольник поверх предыдущего на правой стороне. Цвет — #72a3b5. Назовите этот слой «dark rectangle» и создайте обтравочную маску (Ctrl + Alt + G), чтобы обрезать его пределами нижней фигуры.

Сделайте выделение слоя «button» (удерживая Ctrl, кликните на иконке слоя). Создайте новый слой (Ctrl + Shift + N) и залейте его белым цветом. Назовите этот слой «noise», преобразуйте его в смарт-объект и примените фильтр шума (Filter → Noise → Add Noise) (настройки показаны ниже).

Установите Blending Mode слоя на Multiply и понизьте Opacity до 50%.

Выберите текстовый инструмент и напишите «Next Project» на кнопке. Я использовал шрифт «Rockwell Regular» размером 13pt цветом #effbff.

На правый прямоугольник скопируйте символ “»”. Шрифт — «Rockwell Regular» размером 20pt цветом #effbff.

Сделайте копию группы «next button» (через контекстное меню). Назовите её «prev button». Отразите группу по горизонтали (Edit → Transform → Flip Horizontal) и расположите на левой стороне ленты. Удалите текстовый слой и замените его текстом «prev button». Настройки шрифта те же.

Шаг 15: Создание навигационных кругов

Создайте новую группу «bullet points». Выберите инструмент Ellipse Tool (U) и создайте круг размером 10х10 пикселей (удерживайте Shift при создании). Цвет круга — #373b3e. Назовите слой «bullet point».

Сделайте несколько копий круга и расположите их в ряд при помощи инструмента Move Tool (V). Затем создайте ещё один круг размером 6х6 пикселей цветом #a6adb2. Расположите его внутри первого круга и назовите слой «active».

Шаг 16: Линия под слайдером

Выберите инструмент Line Tool (U) и в настройках установите Weight на 1 пиксель. Создайте горизонтальную линию прямо под фоном слайдера. Цвет линии — #373a3c. Назовите слой «1px line». Сделайте копию слоя и сдвиньте её на 1 пиксель вверх при помощи инструмента Move Tool (V). Измените цвет линии на #5a5f63.

Шаг 17: Создание области контента

Создайте новую группу «Main Content». Инструментом Rectangle Tool (U) создайте фигуру под областью слайдера размером 1200х670 пикселей цветом #5e6468. Назовите слой «main content bg» и преобразуйте его в смарт-объект.

Теперь мы воспользуемся парой фильтров, чтобы создать текстуру на фоне. Сначала примените фильтр шума (Filter → Noise → Add Noise) с параметрами, указанными ниже. Затем примените фильтр Glass (Filter → Distort → Glass). И в завершении — фильтр Crosshatch (Filter → Brush Strokes → Crosshatch). Все настройки фильтров указаны ниже.

Перейдите в меню стилей слоя «main content bg» и примените Inner Shadow. В верхней части появится тень.

Шаг 18: Добавление вступительного текста

Так как это портфолио, и активен раздел ABOUT, то вступительный текст должен давать информацию о Вас и Ваших услугах.

Выберите текстовый инструмент и напишите текст, как показано ниже. Я использовал шрифт «Rockwell» размером 26pt цветом #eeeeee. Текст должен быть по центру. К текстовому слою примените стиль Drop Shadow.

Шаг 19: Создание фона для основного контента

Выберите инструмент Rounded Rectangle Tool (U) и создайте фигуру размером 940х380 пикселей. Используйте направляющие, чтобы определить правильное положение фигуры. Назовите слой «content bg» и примените стили, показанные ниже. Цвет стиля Stroke — #4c5154.

Сейчас мы добавим тень в верхней и нижней частях прямоугольника. Сделайте копию слоя «content bg» (Ctrl +J). Назовите слой «shadow», кликните на нём правой кнопкой мыши и выберите пункт Clear Layer Style, чтобы удалить стили. Измените цвет фигуры на чёрный и расположите под слоем «content bg».

Преобразуйте слой «shadow» в смарт-объект и примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением Radius — 7 пикселей. Так как тень должна быть только сверху и снизу, мы воспользуемся маской, чтобы скрыть её в ненужных участках. К слою «shadow» добавьте пиксельную маску, залитую чёрным цветом (Layer → Layer Mask → Hide All). Затем выберите мягкую кисть белого цвета и обрисуйте участки сверху и снизу, там, где Вы хотите видеть тень.

Шаг 20: Создание области «Services»

Создайте новую группу «services». Загрузите этот набор иконок, откройте PSD файл и перенесите иконку звезды в наш документ. Расположите её в верхнем левом углу прямоугольника контента. Назовите слой «star icon» и примените к нему стиль Gradient Overlay: #505356 — #a1a5a8.

Выберите текстовый инструмент и напишите «Services» справа от звезды. Я использовал шрифт «Rockwell Regular» размером 22pt цветом #5e6468.

Совет: чтобы выбрать иконку без поиска её слоя в палитре слоёв, используйте инструмент Move Tool (V). В настройках инструмента выберите пункт Layer. Удерживая Ctrl, кликните на нужной иконке на холсте, чтобы выбрать её слой.

Добавьте ещё несколько иконок и напишите текст справа от них. Для заголовков я использовал шрифт «Rockwell Regular» размером 18pt цветом #5e6468. Для параграфов — «Lucida Sans Regular» размером 12pt цветом #5e6468.

Расположите группы и слои в палитре слоёв, как показано ниже.

Шаг 21: Создание области «Portfolio»

Создайте новую группу «portfolio». Перетащите иконку чемодана в неё. Скопируйте стиль с иконки iMac на чемодан. Текстовым инструментом напишите название раздела справа от иконки. Шрифт такой же, как и для слова «Services».

Создайте ещё одну группу — «portfolio items». Инструментом Rectangle Tool (U) создайте квадрат размером 80х80 пикселей цветом #c8ccce. Назовите слой «border» и преобразуйте в смарт-объект. Примените стили, показанные ниже. Цвет для стиля Stroke — #bababa. В завершении примените фильтр шума (Filter → Noise → Add Noise).

Создайте ещё один квадрат внутри первого и назовите его «image_holder». Примените к нему 1-пиксельную обводку цветом #bababa.

Выберите слои «border» и «image_holder». Создайте несколько копий и расположите, как показано ниже. Расстояние между квадратами — 20 пикселей.

Шаг 22: Создание области «About»

Создайте новую группу «About». Вставьте иконку пользователя и подпишите её. К этой иконке примените тот же стиль градиента, что и для «Services» и «Portfolio».

Под названием раздела создайте прямоугольник размером 270х120 пикселей цветом #c8ccd0. Преобразуйте слой в смарт-объект и примените те же стили и фильтры, что и для слоёв «border» области «Portfolio». Затем создайте ещё один прямоугольник внутри созданного. Назовите слой «image_holder» и применит 1-пиксельную обводку цветом #bababa.

Откройте изображение в Фотошопе, которое Вы хотите добавить в этот раздел. Инструментом Move Tool (V) перетащите его в основной документ и расположите над прямоугольником «image_holder». Создайте для изображения обтравочную маску (Ctrl + Alt + G) и оно не выйдет за пределы прямоугольника.

Текстовым инструментом напишите информацию о себе под изображением. Я использовал шрифт «Lucida Sans Regular» размером 12pt цветом #5a6064.

Шаг 23: Создание кнопок для основной области

Создайте новую группу «buttons». Выберите инструмент Rounded Rectangle Tool (U) и в настройках задайте Radius — 4 пикселя. Создайте прямоугольник размером 190х38 пикселей. Назовите слой «button» и примените стили, показанные ниже. Цвет стиля Stroke — #415c66.

Выберите инструмент Rectangle Tool (U) и создайте прямоугольник на правом конце предыдущей фигуры. Цвет — #72a3b5. Назовите слой «dark rectangle» и примените 1-пиксельную обводку цветом #608c9d. Создайте для этого прямоугольник обтравочную маску (Ctrl + Alt + G).

Текстовым инструментом напишите «View portfolio» на кнопке. Шрифт — «Rockwell Regular» размером 20pt цветом #effbff. Вставьте символ стрелок на правую часть кнопки.

Теперь добавим шум на кнопку. Сделайте выделение слоя «button», создайте новый слой (Ctrl + Shift + N) над слоем «dark rectangle» и залейте его белым цветом. Назовите слой «noise» и преобразуйте в смарт-объект. Примените фильтр шума (Filter → Noise → Add Noise) с настройками, показанными ниже. Установите Blending Mode слоя на Multiply и понизьте Opacity до 50%.

Шаг 24: Создание кнопки «Hire me»

Таким же способом создайте вторую кнопку и замените текст. Можете просто создать копию и изменить ширину.

Шаг 25: Добавление разделителей

В основной области контента нужно создать два разделителя. Создайте новую группу «separators». Выберите инструмент Line Tool (U) и создайте вертикальную линию с верхней части закруглённого прямоугольника фона к нижней. Цвет линии — белый, толщина — 1 пиксель. Назовите этот слой «1px line».

Сделайте копию слоя линии (Ctrl + J) и измените её цвет на #abb0b3. Выберите инструмент Move Tool (V) и сдвиньте копию на 1 пиксель вправо (используйте клавишу стрелки вправо). После этого выберите оба слоя линий и создайте их копию. Расположите между двумя другими разделами.

Добавьте пиксельную маску к группу «separators». Выберите инструмент Gradient Tool (G): от чёрного к прозрачному (Black to Transparent). Удерживая Shift, сделайте линейную заливку из верхней части линий вниз. Конец должен постепенно исчезать. Проделайте то же самое для нижней части линий.

Шаг 26: Создание области «Testimonials»

Если Вы создаёте блог для фрилансера, то рекомендации от клиентов могут быть полезны.

Создайте новую группу «Testimonials». Выберите инструмент Rectangle Tool (U) и создайте прямоугольник размером 1200х500 пикселей цветом #45494c. Назовите слой «bg», преобразуйте его в смарт-объект и примените фильтр шума (Filter → Noise → Add Noise) с настройками, показанными ниже. Затем примените стиль Drop Shadow.

Инструментом Line Tool (U) создайте 1-пиксельную горизонтальную линию в верхней части прямоугольника цветом #373a3c. Назовите слой «1px line».

Сделайте копию слоя линии (Ctrl + J) и опустите её на 1 пиксель. Измените цвет на #5a5f63.

Шаг 27: Создание заголовка «Testimonials»

Активируйте направляющие (Ctrl + ;) и добавьте иконку сообщения в наш документ. Расположите её в левом углу и скопируйте на неё стиль градиента с предыдущих иконок. Справа от иконки напишите название раздела — «Testimonials». Я использовал шрифт «Rockwell» размером 22pt цветом #c5cacd.

Шаг 28: Создание рекомендательного поста

Создайте новую группу «testimonial #1». Инструментом Rounded Rectangle Tool (U) создайте фигуру размером 490х120 пикселей. Назовите слой «text bg» и добавьте 1-пиксельную обводку цветом #252729.

Прямоугольник должен быть на расстоянии 30 пикселей от левого края холста.

Сейчас создадим область для фотографии, оставляющего отзыв, клиента. Инструментом Rounded Rectangle Tool (U) создайте фигуру размером 60х60 пикселей цветом #747a7f. Назовите слой «border».

Инструментом Pen Tool (P) дорисуйте треугольник справа от созданного квадрата. Назовите слой «arrow».

Инструментом Rectangle Tool (U) создайте квадрат размером 50х50 пикселей внутри слоя «border». Назовите этот слой «image_holder».

Текстовым инструментом напишите отзыв клиента. Я использовал шрифт «Lucida Sans» размером 12pt цветом #6f7274.

Сейчас мы создадим линию, которая будет отделять отзыв от информации о клиенте.

Создайте новый документ (Ctrl + N) размером 10х1 пиксель. Создайте новый слой (Ctrl + Shift + N) и инструментом Rectangular Marquee Tool (M) создайте выделение размером 6х1 пиксель и залейте его чёрным цветом.

Скройте фоновый слой и перейдите в меню Edit → Define Pattern, чтобы сохранить узор. После этого можете закрыть документ.

Вернитесь в основной документ и инструментом Line Tool (U) создайте линию толщиной 1 пиксель, шириной — 430 пикселей. Установите Fill слоя с ней на 0% и понизьте Opacity до 20%. Затем примените стиль Pattern Overlay (выберите созданный узор).

Добавьте иконки и подпишите их. Используйте инструмент Free Transform (Ctrl + T) для изменения размера иконок. Преобразуйте иконки в смарт-объекты и примените стиль Color Overlay: #7e8082.

Шаг 29: Больше рекомендательных постов

Сделайте копию группы «testimonial #1» и расположите её под первой.

Шаг 30: Форма обратной связи

Создайте новую группу «contact». Добавьте иконку конверта, скопируйте на неё всё тот же стиль градиента, и подпишите её. Я использовал шрифт «Rockwell Regular» размером 22pt цветом #c5cacd.

Инструментом Rectangle Tool (U) создайте несколько прямоугольников цветом #eeeeee. Затем примените стили, показанные ниже. Цвет стиля Stroke — #393c3e. Текстовым инструментом подпишите поля.

Создайте кнопку отправки сообщения размером 100х28 пикселей.

Шаг 31: Создание футера

Создайте новую группу «Footer» и инструментом Rectangle Tool (U) создайте прямоугольник в нижней части холста высотой 40 пикселей. Назовите слой «footer bg». Инструментом Line Tool (U) создайте две горизонтальные линии в верхней части прямоугольника. Цвета: #303436 и #4a5053.

Текстовым инструментом напишите информацию о правах. Я использовал шрифт «Lucida Sans Regular» размером 12pt цветом #a8aeb1.

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта designinstruct.com, автор перевода указан в начале урока.