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





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

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


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

Подсказка

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

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

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


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


1. Создайте новый документ размером 850х850 пикселей и залейте фон цветом #1b1b1b. В новом слое инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольник в верхней части холста на всю его ширину:


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


2. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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


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


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


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


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


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

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


3. Добавьте заголовок сайта цветами #adc203 и #424242.


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


4. Справа напишите разделы навигации.


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


5. Над текстом добавьте иконки:


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


6. К каждой иконке примените такие стили слоя:

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


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


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


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


7. Сделайте выделение каждой области, как показано ниже:


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


8. Залейте выделения белым цветом и объедините все слои с белой заливкой в один. Установите Непрозрачность слоя – 5%. Потом добавьте маску слоя (Layer Mask) и сделайте заливку зеркальным градиентом так, чтобы верняя и нижняя части переходили в фон.


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


9. Сделайте копию заголовка сайта, отразите её по вертикали (Transform – Flip Vertical) и опустите под оригинал. Потом добавьте маску слоя к копии и сделайте заливку градиентом так, чтобы нижняя часть скрылась. В результате мы получим отражение. Этот шаг необязателен. Ещё можете создать диагональный узор и залить им шапку сайта.


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


10. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру:


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


11. Примените к ней такие стили слоя:

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


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


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


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


12. Тем же инструментом создайте квадрат (удерживайте Shift при создании).


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


13. Примените эти стили слоя к квадрату:

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


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


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


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


14. Скопируйте иконку дома и поместите её в квадрат, рядом напишите название области. Инструментом Овальная область (Elliptical Marquee Tool) создайте белую фигуру поверх квадрата, сделайте выделение слоя с квадратом (Ctrl+Click), Инвертируйте выделение (Select – Inverse) и в слое с белый кругом нажмите Delete. Установите Непрозрачность оставшейся части белого круга – 25%. Сделайте то же самое с чёрным прямоугольником, но на этот раз используйте инструмент Лассо (Lasso Tool) для создания формы свечения.


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


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


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


16. Примените к нему такие стили слоя:

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


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


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


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


17. Установите Непрозрачность прямоугольника – 24%.
Потом создайте ещё две области таким же образом.


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


18. В каждую область добавьте контент.


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

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

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


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


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



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

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

Ваше Имя

Ваш E-mail

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

Введите код: