Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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

Элегантное портфолио


Загрузите эти элементы:

Кисти потёртой металлической поверхности
Шрифт “Lobster”
Шрифт “Bebas”
Шрифт “Baskerville”
Гранжевые кисти


Шаг 1 – Создание нового документа
Создайте новый документ:

Элегантное портфолио


Разблокируйте фоновый слой (кликните дважды на нём). Имя этого слоя сменится на “Layer 0”. Примените стиль Наложение цвета (Layer Style - Color Overlay): #EBEBEB.

Элегантное портфолио


Кликните правой кнопкой на слое “Layer 0” и выберите Преобразовать в смарт-объект (Convert to Smart-Object). После этого примените фильтр Добавить шум (Add Noise Filter), чтобы создать зернистость на фоне.

Элегантное портфолио


Шаг 2 – Создание дополнительных узоров

Узор 1
Создайте новый документ размером 38х38 пикселей.

Элегантное портфолио


Инструментами Прямоугольная область (Rectangular Marquee Tool) и Свободное трансформирование (Free Transform) или инструментом Перо (Pen Tool) нарисуйте узор, показанный ниже. Фон должен быть прозрачным. При создании документа мы этого не указали, поэтому просто удалите фоновый слой и рисуйте на новом.
Как закончите, сделайте выделение всего холста (Ctrl+A) и перейдите в меню Редактирование»Определить узор (Edit > Define Pattern), сохраните узор.

Элегантное портфолио


Узор 2
Создайте новый документ размером 3х3 пикселя:

Элегантное портфолио


Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), в настройках сверху установите значение Заданный размер (Fixed Size): ширина и высота – 1 пиксель. Нарисуйте узор, показанный ниже, и сохраните его.

Элегантное портфолио


Узор 3
Создайте ещё один документ размером 130х20 пикселей:

Элегантное портфолио


Создайте новый слой (Create New Layer) и инструментом Овальная область (Elliptical Marquee Tool) создайте круг размером 20х20 пикселей. Залейте выделение чёрным цветом. Нажмите Ctrl+A и перейдите в меню Слой»Выровнять слои по области»Центры по горизонтали (Layer > Align Layers To Selection > Horizontal Centers), чтобы расположить круг в центре. Потом перейдите в то же меню и выберите Нижние края (Layer > Align Layers To Selection > Bottom Edges), чтобы расположить круг в основании холста.
Создайте ещё один слой и создайте прямоугольник размером 20х120 пикселей. Нужно расположить фигуры так:

Элегантное портфолио


Шаг 3 – Создание шапки сайта
Вернитесь в наш основной документ и создайте новый слой “header”. Создайте прямоугольное выделение размером 130х100 пикселей в верхней части холста. Перейдите в меню Редактирование»Заливка (Edit > Fill), в появившемся окне выберите третий узор. Нажмите ОК.

Элегантное портфолио


К слою “header” примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Элегантное портфолио


Преобразуйте слой “header” в смарт-объект и примените фильтр Добавить шум (Add Noise Filter) со значением 2%. Сделайте копию слоя “header” (Ctrl+J) и назовите её “stripes-thin”. Сделайте выделение этой копии “stripes-thin” (Ctrl+Click) и нажмите Delete. Залейте выделение вторым узором:

Элегантное портфолио


Сделайте копию слоя “header” ещё раз и назовите её “stripes-thick”. Этот слой должен быть расположен прямо над слоем “header” под слоем “stripes-thin”. Сделайте выделение этого слоя (Ctrl+Click), нажмите Delete, и залейте выделение вторым узором.
Выберите все три слоя и сгруппируйте их (Ctrl+G). Установите Режим наложения группы – Перекрытие (Blending Mode – Overlay). Непрозрачность слоя "stripes-thick" – 3%, а слоя "stripes-thin" – 15%.

Элегантное портфолио


Создайте новый слой (Create New Layer), установите цвет заливки – белый, выберите инструмент Кисть (Brush Tool), понадобится кисть металлической текстуры, и обрисуйте шапку. Установите Непрозрачность этого слоя – 15%.

Элегантное портфолио


Шаг 4 – Добавление логотипа
Создайте две вертикальные направляющие на отметках 20 и 980 пикселей, и одну горизонтальную на отметке 65 пикселей. Это можно сделать через меню Просмотр»Новая направляющая (View > New Guide).
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта. Я использовал шрифт “Lobster” размером 50pt.

Элегантное портфолио


К тексту примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение

Элегантное портфолио


Сделайте копию текстового слоя, кликните на ней правой кнопкой и выберите Очистить стили слоя (Clear Layer Style). Растрируйте текстовый слой (кликните правой кнопкой на слое и выберите нужный пункт). Сделайте выделение этого слоя (Ctrl+Click) и нажмите Delete. Залейте выделение вторым узором, который мы создали в шаге 2. Инструментом Перемещение (Move Tool) сдвиньте слой на 4 пикселя вниз и вправо. Этот слой должен быть под оригинальным текстовым слоём в палитре слоёв. Примените к нему стиль Наложение цвета: цвет – белый

Элегантное портфолио


Создайте новый слой, выберите кисть, показанную ниже, и сделайте одиночный клик на области, показанной ниже. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 40%.

Элегантное портфолио


Шаг 5 – Навигационная панель
Для навигации я выбрал 4 пункта: "Home", "About", "Portfolio", and "Contact". Инструментом Горизонтальный текст (Horizontal Type Tool) напишите эти слова. Я использовал шрифт “Bebas” размером 20pt. Выберите все текстовые слои и перейдите в меню Слой»Выровнять»Центры по вертикали (Layer > Align > Vertical Centers). Инструментом Перемещение (Move Tool) расположите их на одинаковом расстоянии друг от друга.
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте фигуру под словом “Home”.

Элегантное портфолио


К этому прямоугольнику примените следующие стили:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Элегантное портфолио


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Элегантное портфолио


Внутреннее свечение (Режим – Осветление, Метод – Мягкий):

Элегантное портфолио


Установите Режим наложения этого слоя – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 62%. Я также добавил отбрасывание тени, чтобы создать объёмность.

Элегантное портфолио


Шаг 6 – Текст приветствия
Шапка сайта закончена. Теперь под ней создадим текст приветствия. Пользователь должен знать с кем он имеет дело. Я написал “Hey There” шрифтом “Bebas”. Настройте шрифта показаны ниже:

Элегантное портфолио


К этому тексту примените стиль Наложение градиента:

Элегантное портфолио


Растрируйте текстовый слой “Hey There” и примените фильтр Добавить шум (Add Noise Filter) со значением 3%. Примените стиль Отбрасывание тени:

Элегантное портфолио


Сделайте копию слоя с текстом, удалите стили с неё и сделайте выделение (Ctrl+Click). Нажмите Delete и залейте выделение узором с наклонными полосками, который мы создали в шаге 2. Этот слой с узором нужно поместить под оригинальный слой “Hey There”. Сдвиньте его на 4 пикселя вниз и вправо.

Элегантное портфолио


Справа от надписи “Hey There” напишите немного о себе (о создателе) и примените к этому тексту стиль Наложение цвета: цвет - #797c26. Чтобы создать объёмность примените стиль Отбрасывание тени:

Элегантное портфолио


Шаг 7 – Элегантный разделитель
Чтобы отделить текст приветствия от основного контента, я создал разделительную линию толщиной 1 пиксель. Между линиями добавьте фигуру “Hedera 2” при помощи инструмента Произвольная фигура (Custom Shape Tool).

Элегантное портфолио


Шаг 8 – Область портфолио
Под линиями напишите что-нибудь вроде Portfolio", "Recent Additions to My Portfolio" и т.д. Я написал “Aren’t sure yet? This’ll convince you…”. Шрифт – “Baskerville” размером 27pt. К этому тексту скопируйте стиль Отбрасывание тени с текста приветствия. Под этим заголовок добавьте изображения размером 250х160 пикселей. Я расположил 6 картинок в 2 ряда (3 колонки).
К слоям с изображениями примените эти стили:

Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Градиент, Стиль – Радиальный):

Элегантное портфолио


Наложение узора (Режим – Нормальный, Узор – из шага 2):

Элегантное портфолио


Внешнее свечение (Режим – Умножение, Метод – Мягкий):

Элегантное портфолио


Результат:

Элегантное портфолио


Если хотите, то можете добавить тень от картинок. Создайте чёрный прямоугольник под картинками такого же размера, что и они. Потом примените к нему фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 6 пикселей. В режиме Искажение (Transform – Distort) искривите среднюю часть тени, чтобы скрыть её.

Элегантное портфолио


Шаг 9 – Кнопка связи
Под областью портфолио создайте кнопку “Hire Me”. Напишите текст и под сделайте пару мазков гранжевой кистью, загруженной в начале урока. Слева от кнопки напишите какую-нибудь информацию о своих знаниях.

Элегантное портфолио


Шаг 10 – Футер
Создайте новый слой “footer divider”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 10 пикселей и шириной 940 пикселей. Залейте его узором наклонных линий из шага 2. Под линией напишите информацию футера. Ниже показаны настройки текста:

Элегантное портфолио

Элегантное портфолио


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

Элегантное портфолио



Изображение в оригинальном размере можете посмотреть здесь.





Обсудить данный урок на форуме





PSD файл

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