Дизайн web сайта автомобильного сервиса

Мы будем создавать такой стильный web дизайн для автомобильной ремонтной компании.


Дизайн web сайта автомобильного сервиса


1. Создайте новый документ размером 675×400 пикселей с разрешением 72 dpi. с чёрным фоном.


Дизайн web сайта автомобильного сервиса


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


Дизайн web сайта автомобильного сервиса


3. К слою с этой фигурой примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


4. Сделайте 2 копии этого слоя с фигурой и уменьшите первую инструментом Свободное трансформирование (Free Trasnform), удалите стили слоя и измените цвет фигуры на #330002. Потом установите Режим наложения – Осветление (Blending Mode – Screen).


Дизайн web сайта автомобильного сервиса


5. Вторую копию тоже уменьшите инструментом Свободное трансформирование
(Free Transform). Измените цвет фигуры на #810100. Установите Заливку (Fill) слоя – 30% и Режим наложения – Осветление основы (Blending Mode – Color Dodge).


Дизайн web сайта автомобильного сервиса


6. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и создайте фигуру, которая станет кнопкой меню шапки сайта. Инструментом Преобразовать точку привязки (Convert Point Tool) измените форму кнопки, чтобы получить такой результат:


Дизайн web сайта автомобильного сервиса


7. Для слоя с кнопкой примените следующие стили в меню Стилей слоя
(Layer Style — Blending Options):

Отбрасывание тени:


Дизайн web сайта автомобильного сервиса


Наложение градиента:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


8. Ещё раз инструментами Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и Преобразовать точку привязки (Convert Point Tool) создайте фигуру, как показано ниже:


Дизайн web сайта автомобильного сервиса


9. Чтобы получить такой же результат, как и у меня, вы должны применить к этой фигуре стиль Наложение градиента (Layer Style — Gradient Overlay) с такими настройками:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


И стиль Обводка:


Дизайн web сайта автомобильного сервиса


10. Теми же инструментами создайте фигуру в верхней части, которая будет использована в качестве заголовка:


Дизайн web сайта автомобильного сервиса


11. Чтобы придать эффекты к последней фигуре, нужно установить Заливку (Fill) слоя – 0% и примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

Тиснение:


Дизайн web сайта автомобильного сервиса


Наложение градиента:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


12. Инструментом Эллипс (Ellipse Tool) создайте круг, как показано ниже, цветом #878787.


Дизайн web сайта автомобильного сервиса


13. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и примените следующие стили:

Внутренняя тень:


Дизайн web сайта автомобильного сервиса


Внутреннее свечение:


Дизайн web сайта автомобильного сервиса


Обводка:


Дизайн web сайта автомобильного сервиса


Настройки градиента:


Дизайн web сайта автомобильного сервиса


14. Тем же инструментом нарисуйте ещё один круг внутри первого. Из него мы создадим свечение:


Дизайн web сайта автомобильного сервиса


Для слоя с маленьким кругом установите Заливку (Fill) – 0% и примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


15. Для удобства объедините слои с кругами в группу. Сделайте копию группы 3 раза. Первую копию поместите на противоположную сторону, как показано ниже:


Дизайн web сайта автомобильного сервиса


16. Мы вернёмся к другим двум копиям позже. Сейчас нужно написать название сайта. Для этого понадобится инструмент Горизонтальный текст (Horizontal Type Tool) и настройки, показанные ниже:

‘car service and repair’:


Дизайн web сайта автомобильного сервиса


‘car expert’:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


17. К слою с фразой ‘car service and repair’ примените стиль Внутренняя тень
(Layer Style — Inner Shadow):


Дизайн web сайта автомобильного сервиса


Наложение градиента:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


К слою ‘car expert’ примените стиль Тиснение (Layer Style — Bevel and Emboss):


Дизайн web сайта автомобильного сервиса


Наложение градиента:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


18. Напишите названия кнопок на нижней панели, используя эти настойки текста:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


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

Внутренняя тень:


Дизайн web сайта автомобильного сервиса


Наложение градиента:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


19. Теперь нам понадобятся две копии круга. Поместите их, как показано ниже, на нижней панели. Инструмент Свободное трансформирование (Free Transform) поможет вам уменьшить круги.


Дизайн web сайта автомобильного сервиса


Измените цвет кругов на #FA0300. Далее показаны настройки стилей слоя:

Внутренняя тень:


Дизайн web сайта автомобильного сервиса


Внутреннее свечение:


Дизайн web сайта автомобильного сервиса


Обводка:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


Параметры для бликов те же самые (Заливка (Fill) слоя – 0%).

20. Время добавить объявление. Используйте такие настройки текста:

‘Welcome’:


Дизайн web сайта автомобильного сервиса


‘to Car Repair Station.’:


Дизайн web сайта автомобильного сервиса


Остальная часть текста:


Дизайн web сайта автомобильного сервиса

Дизайн web сайта автомобильного сервиса


21. К текстовым слоям примените стиль Отбрасывание тени (Layer Style — Drop Shadow).


Дизайн web сайта автомобильного сервиса


22. В конце я вставил изображение машины на свободное место:


Дизайн web сайта автомобильного сервиса







Делаем Web-дизайн

Вас может также заинтересовать:

21 августа 2018

21 августа 2018

Дата анонса: 2007/06/12 Эффективное разрешение, МП: 12.1 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 161