Автомобильный сайт

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

1. Создайте новый документ размером 1000х1200 пикселей и залейте фон цветом #0e0e0e, используя инструмент Заливка (Paint Bucket Tool). Загрузите это изображение и вставьте его в наш документ. Инструментом Свободное трансформирование (Free Transform) измените его размеры: ширина должна быть равна ширине холста. Поместите изображение гаража в самый верх холста:

2. Не переживайте из-за размеров, мы займёмся этим позже. Примените фильтр Резкость (Sharpen Filter) к слою с гаражом.
Теперь загрузите это изображение машины, вырежьте её в наш документ любым инструментом (о методах извлечения можете почитать здесь).

3. Создайте новый слой (Create New Layer) под слоем с машиной, инструментом Перо (Pen Tool) создайте выделение, как показано ниже. Заметьте, что выделение имеет тот же угол, что и сторона машины.

4. Залейте выделении цветом #0e0e0e и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 1 пиксель. Потом установите Непрозрачность слоя – 90%.

5. Любым инструментом сделайте выделение стороны машины (это нужно для создания отражения).

6. Скопируйте выделение в новый слой (Ctrl+J) и примените Отражение по вертикали (Transform – Flip Vertical) для вырезанной части. Расположите отражение, как показано ниже.

7. В режиме Искажения (Transform – Distort) измените слой так, чтобы задние колёса отражения соприкоснулись с оригинальными задними колёсами.

8. Поместите слой с отражение под оригинальный слой с машиной. Инструментом Перо (Pen Tool) или Многоугольное лассо (Polygonal Lasso Tool) сделайте выделение области между машиной и отражением:

9. Создайте новый слой (Create New Layer) под слоем с отражением и залейте выделение цветом.

10. Скройте все слои кроме слоя с отражением и слоя с тенью. Перейдите в меню Изображение»Объединить видимые (Image > Merge visible). Сделайте видимыми все слои и установите Непрозрачность слоя с отражением – 50-58%. Добавьте маску к этому слою (Layer Mask) и сделайте заливку линейным градиентом снизу вверх. Возможно вам придётся отменять и повторять это действие, чтобы получить более умелый результат:

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

12. Сделайте копию слоя с фоновым слоем, установите Режим наложения копии – Точечный свет (Blending Mode – Pin Light). Скройте фоновый слой и перейдите в меню Слои»Объединить видимые (Edit > Merge visible). Все слои с отражением, машиной и тенью будут объединены в один слой. Сделайте фоновый слой видимым и поместите машину ближе к верхней части холста, но оставьте там немного места для текста.
Добавьте маску слоя к слою с машиной (Layer Mask) и сделайте заливку линейным градиентом в нижней области:

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

14. К этому прямоугольнику примените стиль Обводка (Layer Style – Stroke) и установите Непрозрачность слоя – 76%.

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

15. В этой области напишите заголовок. Код зелёного цвета - #68994d.

16. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста под машиной и залейте его белым цветом в новом слое:

17. Примените к этой полоске такие стили:

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

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

18. Создайте ещё один белый прямоугольник на половину высоты предыдущего и установите его Непрозрачность – 3%. Поместите его в верхнюю часть первого прямоугольника. Потом напишите названия разделов этого прямоугольника:

19. Между разделами создайте разделители, потом объедините их в один слой и добавьте маску слоя (Layer Mask). Установите цвет заливки – белый, цвет фона – чёрный, и сделайте заливку зеркальным градиентом.

20. Объедините слой с этой навигационной панелью и слой с её свечением (тонкая белая полоска с маленькой непрозрачностью). Скопируйте объединённый слой, поместите его под оригинал в палитре слоёв, добавьте к нему маску слоя и сделайте заливку линейным градиентом в нижней части.

21. Объедините все ваши навигационные слои в один (кроме текстовых слоёв). Добавьте маску слоя (Layer Mask), установите цвет заливки – белый, и сделайте заливку зеркальным градиентом, начиная из середины навигационной панели, к правому или левому краю. В результате навигационная панель будет плавно переходить в фон по краям. Возможно вы не получите нужные результат с первого раза, поэтому вам нужно будет пробовать сделать заливку несколько раз.

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

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

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

23. Под этим прямоугольником создайте ещё один такой же ширины, но больше по высоте. Залейте его цветом #080808 и примените 1-пиксельную обводку цветом #181818.

24. Вставьте контент в эту область:

25. Таким же способом создайте ещё несколько областей для контента на остальной части холста:

26. Сделайте копию навигационной панели, примените Отражение по вертикали (Transform – Flip Vertical) и поместите её в основание холста. Инструментом Свободное трансформирование (Free Transform) измените немного эту копию и добавьте текст футера:

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