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





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

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


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

Подсказка

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

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

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


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


1. Создайте новый документ размером 850х790 пикселей, залейте фон цветом #080808, используя инструмент Заливка (Paint Bucket Tool). Потом инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте прямоугольник, как показано ниже. Ширину сделайте меньше 850 пикселей:


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


2. Вставьте в этот прямоугольник любое изображение. Для этого скопируйте его в буфер обмена, сделайте выделение слоя с прямоугольником (Ctrl+Click) и перейдите в меню Редактирование»Вклеить в (Edit > Paste Into). Картинка вставится в выделение. Вы можете её уменьшить или изменить расположение:


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


3. Я обесцветил своё изображение (Desaturation) и применил такие стили в меню Стилей слоя (Layer Style - Blending Options):

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


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


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


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


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


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


5. Залейте его белым цветом в новом слое и установите Непрозрачность слоя – 12%. Примените такие стили:

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


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


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


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


6. В эту белую область добавьте заголовок сайта и слоган. Под слоем с картинкой создайте навигационную панель инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool). Она должна прямо под картинкой (смотрите изображение ниже). К слою с панелью примените такие стили:

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


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


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


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


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


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

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


7. Создайте прямоугольное выделение на верхней половине навигационной панели и залейте его белым цветом. Установите Непрозрачность этого слоя – 18%.


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


8. Добавьте названия разделов и между ними создайте разделители – две 1-пиксельные линии разного цвета:


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


9. Далее переходим к области контента. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте такую фигуру чёрного цвета:


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


10. Верхние закруглённые углы нужно обрезать. Потом примените такие стили слоя:

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


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


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


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

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


11. Тем же инструментом создайте такое выделение:


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


12. Залейте его белым цветом в новом слое и примените стиль Обводка (Layer Style – Stroke):

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


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


13. Вам нужно создать узор с диагональными линями. Потом сделайте выделение слоя с верхним прямоугольником области контента (Ctrl+Click) и залейте его созданным узором. Если линии вашего узора чёрные, то можете применить стиль Наложение цвета (Layer Style - Color Overlay), цвет – белый, чтобы сделать их видными. Понизьте Непрозрачность слоя до 8%.


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


14. Повторите эти шаги, чтобы создать больше таких областей:


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


15. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите заголовки. Я использовал два цвета для текста – белый и зелёный (#afd107).


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


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


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


17. В нижней части создайте прямоугольное выделение инструментом Прямоугольная область (Rectangular Marquee Tool) и залейте его чёрным цветом в новом слое. Потом примените стиль Обводка (Layer Style – Stroke):

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


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


18. Залейте футер диагональным узором и добавьте текст о правах:


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


19. Справа создайте 1-пиксельную линию цветом #afd107.


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


20. В наборе инструмента Произвольная фигура (Custom Shape Tool) найдите стрелку и создайте её поверх линии тем же цветом. Потом примените 1-пиксельную обводку чёрным цветом:


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


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


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




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

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

Ваше Имя

Ваш E-mail

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

Введите код: