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





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

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


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

Подсказка

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

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

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


Дизайнерская студия


1. Создайте новый документ размером 855х900 пикселей, установите цвет заливки - #3e3640, цвет фона - #201f20. Выберите инструмент Градиент (Gradient Tool) и сделайте заливку холста. Потом примените фильтр Добавить шум (Add Noise Filter) с такими настройками:


Дизайнерская студия


2. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру на всю ширину холста. Сделайте выделение нижних 50 пикселей и вырежьте из в отдельный слой. Скройте этот новый слой и вы получите такой результат:


Дизайнерская студия


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

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


Дизайнерская студия


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


Дизайнерская студия


4. Поместите эту фигуру в верхнюю часть холста в верхнюю часть холста тем местом где края закруглены.


Дизайнерская студия


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


Дизайнерская студия


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

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


Дизайнерская студия


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


Дизайнерская студия


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


Дизайнерская студия

Дизайнерская студия


7. Добавьте логотип, заголовок и слоган. Потом инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже. Залейте выделение белым цветом и понизьте Непрозрачность до 2%.


Дизайнерская студия


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


Дизайнерская студия


9. Добавьте текст навигационной панели и подсветите один из разделов.


Дизайнерская студия


10. Для слоя с прямоугольником для подсвеченного раздела примените такие стили:

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


Дизайнерская студия


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


Дизайнерская студия


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


Дизайнерская студия


11. Также добавьте сияние для прямоугольника подсвеченного раздела. Потом две 1-пиксельные линии, как показано ниже. Добавьте маску слоя (Layer Mask) и сделайте заливку зеркальным градиентом и получите такой результат:


Дизайнерская студия


12. Создайте новый слой (Create New Layer) поверх всех остальных и инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру, как показано ниже:


Дизайнерская студия


13. К этому слою примените такие стили:

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


Дизайнерская студия


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


Дизайнерская студия


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


Дизайнерская студия

Дизайнерская студия


14. Создайте ещё один большой прямоугольник ниже и примените к нему такие же стили, как и к верхним прямоугольникам.


Дизайнерская студия


15. В первый прямоугольник вставьте регистрационные элементы и вставьте иконку замка.


Дизайнерская студия


16. Потом добавьте контент в большой прямоугольник.


Дизайнерская студия


17. Между разделами области контента создайте разделитель. Потом внизу создайте прямоугольник с закруглёнными краями для галереи изображений.


Дизайнерская студия


18. Залейте прямоугольник цветом #e8e8e8 и добавьте 1-пиксельную обводку #cbc9ca. Потом повторите то же для правой стороны и добавьте туда текст.


Дизайнерская студия


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


Дизайнерская студия




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

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

Ваше Имя

Ваш E-mail

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

Введите код: