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

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


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


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-дизайн

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

11 декабря 2018

Дата анонса: 2010/07/21 Эффективное разрешение, МП: 14.1 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 176

11 декабря 2018

Olympus PEN E-P3 – беззеркальная камера со сменной оптикой. Матрица 12 Мп, стабилизация изображения на сдвиге матрицы, двухъядерный процессор TruePic VI, быстрый автофокус «FAST AF», сенсорный OLED монитор 614000 точек, встроенная вспышка, диапазон ISO 200-12800, упрощенный интерфейс Фотогид, десять «Арт-фильтров», видеосъемка Full HD, сменные рукоятки, опциональный электронный видоискатель.

11 декабря 2018

Дата анонса: 2008/01/23 Эффективное разрешение, МП: 8.1 Диагональ ЖК-дисплея, дюймы: 2.4