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





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

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


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

Подсказка

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

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

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


Web-дизайн фрилансера


1. Создайте новый документ размером 850х1000 пикселей с чёрным фоном. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольник шириной 760 пикселей и высотой 290 пикселей. Залейте прямоугольник чёрным цветом в новом слое и примените стиль Обводка (Layer Style – Stroke):

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


Web-дизайн фрилансера


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


Web-дизайн фрилансера


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

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


Web-дизайн фрилансера


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


Web-дизайн фрилансера


4. На верхней половине этой фигуры создайте ещё один прямоугольник белого цвета и понизьте Непрозрачность. Мы получим слабое сияние. Потом добавьте текст навигации:


Web-дизайн фрилансера


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


Web-дизайн фрилансера


6. В нижней части навигационной панели создайте 1-пиксельную линию любым инструментом в новом слое, цвет - #aa4282. Примените стиль Внешнее свечение (Layer Style - Outer Glow):

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


Web-дизайн фрилансера


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


Web-дизайн фрилансера


8. Под слоем с навигацией вставьте какое-нибудь изображение:


Web-дизайн фрилансера


9. Инструментом Перо (Pen Tool) создайте такое выделение:


Web-дизайн фрилансера


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


Web-дизайн фрилансера


11. Под этой областью создайте ещё два закруглённых прямоугольника, скопируйте на них стили слоя с верхнего прямоугольника:


Web-дизайн фрилансера


12. Дайте названия этим областям:


Web-дизайн фрилансера


13. Розовую иконку я создал инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и текстовым инструментом написал “+”. Стили слоя для этого прямоугольника:

Внешнее свечение (Режим – Осветление, Метод – Мягкий)
Наложение градиента (Режим – Нормальный, Стиль – Линейный)
Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет)


Web-дизайн фрилансера


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


Web-дизайн фрилансера

Web-дизайн фрилансера


15. Скопируйте навигационную панель и переместите её вниз. Добавьте информацию о правах и получите футер:


Web-дизайн фрилансера


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


Web-дизайн фрилансера




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

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

Ваше Имя

Ваш E-mail

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

Введите код: