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

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


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


1. Создайте новый документ размером 1200х1200 пикселей , перейдите в меню Просмотр»Новая направляющая (View > New Guide) и создайте две вертикальные направляющие. Одну на точке 125 пикселей, другую на точке 1075 пикселей. Ширина рабочей области будет равна – 950 пикселей.


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


2. Установите цвет заливки — #212121 и цвет фона — #080808. Выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент и сделайте заливку, начиная с середины рабочей области вниз примерно на половину.


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


3. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите заголовок и слоган в разных слоях.


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


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

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


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


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


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

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


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


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


6. Примените к прямоугольнику следующие стили:

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


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


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


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

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


7. В предыдущем прямоугольнике создайте ещё одну фигуру белого цвета.


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


8. Установите Непрозрачность этого слоя – 4% и подпишите разделы меню текстовым инструментом.


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


9. Создайте разделители в виде кругов.


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


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


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


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

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


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

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


12. Теперь создадим большое свечение. Инструментом Перо (Pen Tool) нарисуйте контур в новом слое, как показано ниже.


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


13. Залейте его белым цветом, сделайте выделение слоя с большим прямоугольником (Ctrl+Click), но оставайтесь на слое с контуром. Потом примените Инверсию выделения (Select – Inverse) и нажмите Delete. Установите Непрозрачность этого слоя – 2%, добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом с правой части свечения влево.


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


14. В большом прямоугольнике напишите текст.


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


15. Найдите изображение машины и вставьте его в документ. Расположите машину, как показано ниже.


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


16. Создайте новый слой (Create New Layer) под слоем с машиной и инструментом Многоугольное лассо (Polygonal Lasso Tool) создайте выделение, как показано ниже. Углы выделения – это 4 колеса машины.


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


17. Залейте выделение чёрным цветом и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2-4 пикселя. Сделайте копию слоя с машиной и примените Отражение по вертикали (Transform – Flip Vertical), копию нужно поместить под оригинальный слой. Расположите копию под самой машиной на холсте, чтобы создать отражение. Добавьте маску слоя (Layer Mask) к копии и сделайте заливку линейным градиентом, чтобы получить отражение, как показано ниже.


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


18. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте две фигуры, как показано ниже. Залейте их цветом #141414 и примените к обоим стиль Обводка (Layer Style – Stroke):

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


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

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


19. В верхней части каждого прямоугольника создайте ещё по одному закруглённому прямоугольнику цветом#080808. Эта область отведена под заголовок контента.


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


20. Добавьте текст и картинку машины.


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


21. Под областью контента создайте две 1-пиксельные линии друг на друге. Верхняя должна быть чёрной, а нижняя – белой. Ширина линий должна быть равна ширине холста.


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


22. Установите Режим наложения – Перекрытие (Blending Mode – Overlay). Под этими линиями инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение и залейте его цветом #060606. Напишите там информацию о сайте и разработчике.


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


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


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





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

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

18 июня 2018

Светосильный нормальный объектив. Хорошо подходит для съемки в путешествиях и для съемки ростовых портретов при естественном освещении. Изображение, свободное от дисторсий и с великолепными разрешением и цветопередачей. Обеспечивает высокий контраст...

18 июня 2018

Дата анонса: 2008/01/24 Эффективное разрешение, МП: 14.6 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 800

18 июня 2018