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





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

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


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

Подсказка

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

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

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

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


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

Иконки
Шрифт “Lobster”
Портфолио фотографа
Блог
Сайт портфолио


Шаг 1 – Создание документа
Создайте новый документ размером 1000х1000 пикселей с белым фоном.

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


Шаг 2 – Добавление направляющих
Перейдите в меню Просмотр»Новая направляющая (View > New Guide). Создайте вертикальные направляющие на отметках 50, 500 и 950 пикселей. Потом создайте горизонтальные направляющие на отметках 75, 467 и 943 пикселя.

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


Шаг 3 – Создание фона
Кликните дважды на фоновом слое, чтобы разблокировать его. У вас появится новое окно, в нём введите имя слоя – “BG” и нажмите ОК. Теперь фоновый слой можно редактировать.
Создайте новую группу (Create New Group) и назовите её “Background”. Поместите слой “BG” в эту группу.
Установите цвет заливки - #547980 и залейте слой “BG” (Alt+Backspace).

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


Примените фильтр Добавить шум (Add Noise Filter):

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


Установите цвет заливки – чёрный, создайте новый слой (Create New Layer) и назовите его “Dark sections”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение верхней части холста (используйте направляющие) и залейте его чёрным цветом. Проделайте то же самое с серединой и нижней частью.

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

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


Понизьте Непрозрачность этого слоя до 15%.

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


Шаг 4 – Создание разделителей
Создайте новую группу внутри группы “Background” над слоями “BG” и "Dark sections". Назовите его “Lines”. Создайте новый слой внутри этой группы и назовите его “Dark”. Инструментом Карандаш (Pencil Tool) нарисуйте 1-пиксельную горизонтальную линию чёрного цвета над первой направляющей сверху.

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


Создайте ещё один слой внутри группы “Line” и назовите его “Bright”. Установите цвет заливки – белый, и нарисуйте ещё одну линию под чёрной. Понизьте Непрозрачность группы до 12%.

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

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


Кликните правой кнопкой на группе “Line” и выберите Дублировать группу (Duplicate Group). Назовите копию “Line 2”.

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


Переместите группу “Line 2” на вторую горизонтальную линию, используя инструмент Перемещение (Move Tool). Потом создайте линии на 3 и 4 направляющих.

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


Шаг 5 – Создание шапки сайта
В этом уроке у нас будет много слоёв, поэтому по завершении каждого элемента дизайна, мы будем сворачивать группы. Сейчас сверните группу “Bacground” и создайте новую группу “Header”. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта. Я использовал шрифт “Lobster” размером 36pt цветом #E5FCC2.

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


К текстовому слою примените эти стили в меню Стилей слоя (Layer Style - Blending Options):

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

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


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

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


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

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

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


Текстовым инструментом напишите названия разделов: "Home", "About", "Blog", "Work","Contact". Цвет - #E5FCC2.

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


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

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


Теперь нужно создать активный раздел. Создайте новый слой “Button” под текстовым слоем с названием раздела. Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру под словом “Home”. Непрозрачность слоя с фигурой – 10%.

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


К слою с фигурой примените эти стили:

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

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


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

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


Обводка:

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

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


Шаг 6 – Создание области "Featured Work"
Сверните группу “Header” и создайте новую группу “Work”. Здесь мы расположим три изображения и сделаем 3D навигацию. Используйте те, что предоставлены в начале урока.
Поместите первый слой в группу “Work” и инструментом Свободное трансформирование (Free Transform) измените размер картинки. Расположите её по середине холста.

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


Вставьте две другие картинки позади первой.

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


Выберите слой с правой картинкой и перейдите в режим Перспективы (Transform – Perspective). Измените настройки сверху, как показано ниже, чтобы создать иллюзию 3D.

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


Сделайте то же самое для левой картинки.

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


В результате вы должны получить такое изображение:

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


Выберите слой с левой картинкой и инструментом Размытие (Blur Tool) размером 100 пикселей с мягкими краями размойте область, которая ближе к центральной картинке, как показано ниже.

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


Потом сделайте то же самое с правой картинкой.

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


Теперь создадим тень. Создайте новый слой под слоем с центральной картинкой. Инструментом Эллипс (Ellipse Tool) нарисуйте вертикальный овал чёрного цвета на левой стороне центральной картинки. Примените фильтр Размытие по гауссу (Gaussian Blur Filter):

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


Понизьте Непрозрачность слоя до 40%.
Сделайте копию слоя с тенью и расположите её справа.

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


Теперь создадим небольшое отражение. Сделайте копию слоя с центральной картинкой и отразите её по вертикали (Transform – Flip Vertical).

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


Инструментом Перемещение (Move Tool) опустите копию вниз, оставив расстояние в 1 пиксель от оригинала. Нам не нужна вся копия, только её верхняя часть. Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение нижней части копии и удалите её (Delete).

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


К оставшейся части добавьте маску слоя (Layer Mask):

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


Выберите инструмент Градиент (Gradient Tool), стиль – линейный, от чёрного к прозрачному, и сделайте заливку снизу вверх. Понизьте Непрозрачность до 40%.

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


Сейчас мы создадим простоя глянцевое отражение на центральной картинке. Создайте новый слой на этой картинкой и назовите его “Gloss”. Инструментом Многоугольное лассо (Polygonal Lasso Tool) создайте выделение, показанное ниже.

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


Залейте это выделение белым цветом, сделайте выделение слоя с центральной картинкой, инвертируйте его и, находясь на слое “Gloss”, нажмите Delete. Теперь можете убрать выделение (Ctrl+D).

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


Понизьте Непрозрачность слоя “Gloss” до 7%.

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


Внутри группы “Works” создайте новый слой “Right Arrow”. Установите цвет заливки - #1E1E1E, выберите инструмент Произвольная фигура (Custom Shape Tool) и создайте фигуру “Arrow 2”.

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


К слою со стрелкой примените эти стили:

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

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


Внутренняя тень:
Элегантное портфолио


Понизьте Непрозрачность слоя со стрелкой до 15%.

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


Сделайте копию этой стрелки, отразите её по горизонтали (Transform – Flip Horizontal) и расположите на левой стороне. Слой с ней назовите "Left arrow".

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


Шаг 7 – Область социальных средств
Сверните группу “Work” и создайте новую “Social media”. Установите цвет заливки – чёрный и создайте новый слой “Bubble”. Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 5 пикселей создайте фигуру (она будет содержать в себе высказывание).

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


Инструментом Произвольная фигура (Custom Shape Tool) создайте фигуру “Talk 10”. Поместите её в нижний угол прямоугольника.

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


Отразите фигуру по вертикали (Transform – Flip Vertical) и объедините эти два слоя (Ctrl+E). Установите Непрозрачность слоя – 15%.

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


Текстовым инструментом напишите сообщение Twitter внутри этого прямоугольника цветом #E5FCC2. Я использовал шрифт “Georgia (Italic)” размером 18pt.

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


К слою с текстом примените стиль Отбрасывание тени:

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


Теперь нам понадобятся иконки из набора, предоставленного в начале урока. Нам понадобятся эти файлы:

twitter_48.png
twitter_boxed_48.png
stumbleupon_48.png
flickr_48.png
delicious_48.png

Откройте первую иконку списка и поместите в наш документ, как показано ниже.

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


Текстовым инструментом напишите заголовок соседнего раздела "Add Me on These Social Networks…" цветом #9DE0AD. Я использовал шрифт “Georgia” (Italic) размером 24pt. Скопируйте на него стиль с текста твиттера.

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


Вставьте остальные иконки:

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


Установите цвет заливки - #E5FCC2. Выберите шрифт “Georgia” (Italic) размером 18pt. и подпишите иконки. Скопируйте на них тот же стиль отбрасывания тени.

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


Под каждым названием создайте закруглённый прямоугольник с радиусом 5 пикселей чёрного цвета. Понизьте Непрозрачность этих слоёв до 15%.

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

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


Шаг 8 – Область блога
Создайте новую группу “Blog”, установите цвет заливки - #9DE0AD, выберите текстовый инструмент, шрифт “Georgia” (Italic), и напишите название раздела "Latest from the Blog". Скопируйте последний стиль отбрасывания тени на этот текстовый слой, который мы использовали в прошлом шаге.

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


Создайте квадрат размером 90х90 пикселей цветом #E5FCC2 под заголовком раздела. Используйте для этого инструмент Прямоугольник (Rectangle Tool).

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


Примените к квадрату стиль Внешнее свечение:

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


Вставьте картинку размером 80х80 пикселей на этот квадрат.

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


Текстовым инструментом напишите заголовок новости. Шрифт тот же размером 18pt. Скопируйте на этот слой стиль отбрасывания тени.

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


Выберите шрифт “Arial” размером 13pt. и напишите текст новости. Скопируйте на него стиль отбрасывания тени.

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


Сейчас создадим кнопку “Read more”. Выберите шрифт “Georgia” (Italic) размером 13pt. Напишите “Read more” под текстом справа и скопируйте на этот слой стиль отбрасывания тени. Под этим текстовым слоем создайте прямоугольник с закруглёнными углами с радиусом 5 пикселей чёрного цвета. Понизьте Непрозрачность до 15% и получите такой результат:

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


Шаг 9 – Создание галереи
Создайте новую группу "Gallery". Установите цвет заливки - #9DE0AD и напишите название раздела – “Gallery”. Шрифт – “Georgia” (Italic) размером 24pt. Также скопируйте на этот слой стиль с тенью.

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


Создайте новую группу внутри группу “Gallery” и назовите её “Gallery item”. В этом разделе будут маленькие картинки в рамке (такие же как мы делали в разделе блога). Из группы блога скопируйте слой с квадратом (рамка) и вставьте его в группу “Gallery”. Поверх квадрата вставьте картинку размером 80х80 пикселей.

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


Сверните группу “Gallery item” и сделайте 7 копий. Расположите все картинки в 2 ряда по 4 штуки.

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


Шаг 10 – Создание футера
Сверните группу “Gallery” и создайте последнюю группу “Footer”. Установите цвет заливки - #E5FCC2. Выберите текстовый инструмент, шрифт – “Arial” размером 13pt. и напишите информацию о правах. Скопируйте стиль отбрасывания тени на этот текст.

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


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

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


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





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






PSD файл

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