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





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

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


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

Подсказка

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

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

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


Стильный web-дизайн


1. Создайте новый документ размером 800х800 пикселей и залейте фон линейным градиентом, используя цвета 2c2d2e и #47474a.


Стильный web-дизайн


2. Создайте новый слой (Create New Layer) и обрисуйте фон гранжевыми кистями.


Стильный web-дизайн


3. Установите Непрозрачность слоя – 50% и Режим наложения – Мягкий свет (Blending Mode – Soft Light). Выберите фоновый слой и примените фильтр Добавить шум (Add Noise Filter).


Стильный web-дизайн


4. Объедините оба слоя (Ctrl+E) и примените фильтр Эффекты освещения (Lighting Effect Filter) с такими настройками:


Стильный web-дизайн

Стильный web-дизайн


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


Стильный web-дизайн


6. Установите Непрозрачность всех трёх слоёв с прямоугольниками – 40% и примените к каждому такие стили в меню Стилей слоя (Layer Style - Blending Options):

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


Стильный web-дизайн


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


Стильный web-дизайн

Стильный web-дизайн


7. Добавьте логотип и название сайта:


Стильный web-дизайн


8. Потом напишите разделы меню и заголовки областей контента:


Стильный web-дизайн


9. Инструментом Произвольная фигура (Custom Shape Tool) создайте две стрелки, как показано ниже:


Стильный web-дизайн


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


Стильный web-дизайн


11. Напишите текст приветствия и гранжевой кистью нарисуйте узор в области заголовка сайта:


Стильный web-дизайн


12. Добавьте текст в две другие области:


Стильный web-дизайн


13. Вставьте картинки:


Стильный web-дизайн


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


Стильный web-дизайн


15. Сделайте выделение слоя со средним тонким прямоугольником (Ctrl+Click) и Инвертируйте выделение (Select – Inverse), потом в слое с белым прямоугольником нажмите Delete.


Стильный web-дизайн


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


Стильный web-дизайн



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

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

Ваше Имя

Ваш E-mail

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

Введите код: