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





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

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


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

Подсказка

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

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

Для урока нам понадобится текстура Torn Cardboard и шрифт Museo Free Font.

Шаг 1
Создайте новый документ размером 20х900 пикселей. Сделайте выделение холста (Ctrl+A) и залейте его цветом #F6F3EA. Потом инструментом Прямоугольная область
(Rectangular Marquee Tool) сделайте тонкое слегка тёмное выделение по правой стороне холста. Залейте выделение цветом #EFEBE1. Потом перейдите в меню Редактировать»Определить узор (Edit>Define pattern) и сохраните ваш узор под именем ‘creamstripespattern’.


Дизайн профессионального портфолио




Шаг 2
Теперь создайте новый документ размером 960х900 пикселей. Создайте новый слой
(Create New Layer) ‘background’ и залейте его любым цветом. Потом примените к нему стиль Наложение узора (Layer Style - Pattern Overlay) и в настройках выберите ранее созданный узор:


Дизайн профессионального портфолио



Шаг 3
Теперь вставьте в этот документ текстуру, которую загрузили ранее (Torn Cardboard). Поместите её вверх документа и назовите этот слой ‘header’. Я вырезал нужный элемент этой текстуры из белого фона.


Дизайн профессионального портфолио



Шаг 4
Теперь обесцветьте этот слой (Desaturation):


Дизайн профессионального портфолио



Шаг 5
Примените стиль Наложение градиента (Layer Style - Gradient Overlay) для этого элемента. Цвета – между тёмно-серыми, уменьшите непрозрачность (opacity) до 90%. Потом установите Режим наложения этого слоя – Умножение (Blending Mode – Multiply).


Дизайн профессионального портфолио



Шаг 6
Сделайте копию слоя ‘header’ и назовите эту копию ‘footer’. Потом Отразите её по вертикали (Transform - Flip Vertical) и поместите в нижнюю часть холста. Я решил немного обрезать основание. Перейдите в режим Масштабирование (Transform - Scale) и уменьшите высоту нижней части:



Дизайн профессионального портфолио



Шаг 7
Теперь выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент, цвет – от белого к прозрачному. Создайте новый слой (Create New Layer) поверх всех и назовите его ‘header gradient’. Сделайте заливку градиентом в левой верхней части:


Дизайн профессионального портфолио



Шаг 8
Уменьшите Непрозрачность (Opacity) слоя с этим градиентом до 15%. Градиент залезает на вашу область кремового цвета. Это нужно убрать. Выберите слой ‘header’ и инструментом Волшебная палочка (Magic Wand Tool) кликните на области под ним, чтобы сделать выделение кремовой области. Потом вернитесь на слой с градиентом и нажмите Delete.


Дизайн профессионального портфолио



Шаг 9
Создайте новый слой (Create New Layer) и назовите его ‘background gradient’, поместите его под слой ‘header’ и ‘footer’, но над слоем с основным кремовым слоем. Потом создайте большой радиальный градиент цветом от белого к прозрачному из центра вашего кремового фона. Чтобы определить середину точнее, перейдите в меню Просмотр»Линейки (View>Rulers). Потом уменьшите Непрозрачность (Opacity) слоя до 30%.


Дизайн профессионального портфолио



Шаг 10
Теперь напишите текст для логотипа используя загруженный ранее шрифт и перейдите в меню Стилей слоя (Layer Style - Blending Options) для слоя с текстом, примените эти стили:

Отбрасывание тени:


Дизайн профессионального портфолио



Внутренняя тень:


Дизайн профессионального портфолио



Наложение градиента:


Дизайн профессионального портфолио

Дизайн профессионального портфолио




Шаг 11
Теперь сделаем иконку логотипа. Создайте прямоугольник с закруглёнными краями. Потом создайте такой же прямоугольник меньших размеров над первым. Сделайте выделение слоя с маленьким прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract), введите значение – 4 пикселя. Нажмите Delete. У вас должен получиться портфель. Кликните правой кнопкой на слое с текстом логотипа и выберите Скопировать стили слоя (copy layer styles). Потом кликните правой кнопкой на слое с иконкой и выберите Вставить стили слоя (paste layer styles).


Дизайн профессионального портфолио

Дизайн профессионального портфолио

Дизайн профессионального портфолио





Шаг 12
Инструментом Горизонтальный текст (Horizontal Type Tool), используя шрифт Arial размером – 50, добавьте текст меню:


Дизайн профессионального портфолио



Шаг 13
Теперь напишите линию из точек инструментом Горизонтальный текст (Horizontal Type Tool). Потом поверните их на 90 градусов по часовой стрелке (Transform - 90 CW). Это будут разделители между кнопками меню:


Дизайн профессионального портфолио



Шаг 14
Добавьте текст в нижнюю часть:


Дизайн профессионального портфолио



Шаг 15
Вставьте изображение страницы сайтов и перейдите в режим Масштабирования
(Transform - Scale), уменьшите их в размере, потом для этих слоёв с изображениями примените стиль Обводка (Layer Style - Stroke).


Дизайн профессионального портфолио

Дизайн профессионального портфолио




Шаг 16
Добавьте текст на левую сторону от страницы сайта.


Дизайн профессионального портфолио



Шаг 17
Чтобы создать кнопку используйте инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool), потом перейдите в меню Стилей слоя (Layer Style - Blending Options) для этого слоя с прямоугольником и примените эти стили:

Внутренняя тень:


Дизайн профессионального портфолио



Наложение градиента:


Дизайн профессионального портфолио





Обводка:


Дизайн профессионального портфолио

Дизайн профессионального портфолио







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

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: