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





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

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


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

Подсказка

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

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

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


Дизайн портфолио


Создание документа
Создайте новый документ с такими настройками:


Дизайн портфолио


Создание фона
Сделайте копию фонового слоя и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Дизайн портфолио


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


Дизайн портфолио


В режиме Свободного трансформирования (Free Transform) потяните нижнюю среднюю точку вверх:


Дизайн портфолио


Создание футера
Под копией фонового слоя создайте новый слой (Create New Layer) и назовите его “footer”. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и сделайте выделение, как показано ниже:


Дизайн портфолио


Залейте инструментом Градиент (Gradient Tool) это выделение. Используйте цвета #0b0b0b и #222222. Делайте заливку из центра в сторону.


Дизайн портфолио


Создайте ещё один слой над слоем с футером, инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже.


Дизайн портфолио


Залейте его чёрным цветом. Потом примените фильтр Размытие по гауссу (Gaussian Blur Filter):


Дизайн портфолио


Установите Непрозрачность слоя – 75% и получите такой результат:


Дизайн портфолио


Заголовок
Инструментом Горизонтальный текст (Horizontal Type Tool) добавьте название сайта и логотип:


Дизайн портфолио


Настройки текста показаны ниже:


Дизайн портфолио


Навигационная панель
Для навигационной панели потребуется инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей.


Дизайн портфолио


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


Дизайн портфолио


Примените следующие стили к этой фигуре:

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


Дизайн портфолио


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


Дизайн портфолио


Допишите названия разделов:


Дизайн портфолио


Между разделами создайте разделители – две 1-пиксельные линии разных цветов.


Дизайн портфолио


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


Дизайн портфолио


Сделайте выделение слоя с прямоугольником навигационной панели (Ctrl+Click), инвертируйте выделение (Select – Inverse) и нажмите Delete в слое с белым прямоугольником. Потом установите Непрозрачность слоя – 8%.


Дизайн портфолио


Создание специальной области
Создайте разделитель, состоящий из двух линий:


Дизайн портфолио


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


Дизайн портфолио


Выберите фоновый слой и перейдите в меню Редактирование»Скопировать совмещённые данные (Edit > Copy Merged), создайте новый слой (Create New Layer) поверх остальных и перейдите в меню Редактирование»Вставить (Edit > Paste). Создайте новый слой (Create New Layer) , выберите инструмент Градиент (Gradient Tool), цвет – от заливки к прозрачному:


Дизайн портфолио


Сделайте заливку справа налево. Добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом слева направо.


Дизайн портфолио


Создайте новый слой под слоем со скопированным фоном и инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже:


Дизайн портфолио


Залейте выделение чёрным цветом и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2-3 пикселя. Установите Непрозрачность слоя – 75% и подотрите верхний и нижний концы.


Дизайн портфолио


Если вы не получили результат, как у меня, то добавьте маску к слою с тенью и 1-пиксельными линиями. Сделайте заливку зеркальным градиентом из середины вверх (при этом цвет заливки должен быть белым, цвет фона – чёрным).

Кнопки:
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте 4 кнопки под слоями с линиями, которые мы только что создавали.


Дизайн портфолио


Настройки стилей слоя для первой кнопки:

Отбрасывание тени (Режим – Умножение):


Дизайн портфолио


Внутренняя тень (Режим – Нормальный):


Дизайн портфолио


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


Дизайн портфолио


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


Дизайн портфолио


Отбрасывание тени (Режим – Умножение):


Дизайн портфолио


Внутренняя тень (Режим – Нормальный):


Дизайн портфолио


Наложение цвета (Режим – Нормальный):


Дизайн портфолио


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


Дизайн портфолио


Изображение
Создайте чёрный прямоугольник:


Дизайн портфолио


Перейдите в режим Деформации (Transform – Warp), в настройках сверху выберите Выпуклый:


Дизайн портфолио


Потом введите значение Изгиба (Bends) – 15%.


Дизайн портфолио


Примените изменения (Enter), Сделайте выделение этого слоя с фигурой, примените Сжатие (Modify – Contract) со значением 15 пикселей и нажмите Delete. Потом примените стиль Внешнее свечение (Layer Style - Outer Glow):

Режим – Осветление, Метод – Мягкий


Дизайн портфолио


Вставьте изображение в созданную рамку и справа напишите текст:


Дизайн портфолио


Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже:


Дизайн портфолио


Залейте выделение чёрным цветом:


Дизайн портфолио


Залейте выделение чёрным цветом, примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2-3 пикселя и установите Непрозрачность слоя – 45%. Этот слой нужно расположить под слоем с рамкой и картинкой:


Дизайн портфолио


Область контента
Вам осталось добавить контент (текст, иконки, картинки):


Дизайн портфолио


Также не забудьте про футер:


Дизайн портфолио


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


Дизайн портфолио



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

написал : Shomma

Помогите пожалуйста! Не получается вот этот шаг "Сделайте выделение слоя с прямоугольником навигационной панели (Ctrl+Click), инвертируйте выделение (Select – Inverse) и нажмите Delete в слое с белым прямоугольником. Потом установите Непрозрачность слоя – 8%" А именно когда на ножимаю Delete не чего не происходит. Вчем причина?

---------------


написал : positive11

Нужно сделать выделение чёрного прямоугольника, потом инвертировать его - то есть теперьв выделена область вне этого чёрного прямоугольника. Далее кликните на слое с белым прямоугольником и нажмите Delete. - то есть удалится та часть белого прямоугольника, котороая находится вне чёрной панели.
обязательно убедитесь в том, что Delete нажимаете в слое с белым прямоугольником.

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: