33000 Premium resources for designers

Design a car dealer website layout with Photoshop

in Tutorials, Web layouts by Razvan on October 6th, 200914 Comments

car-dealer-website-layoutHello my friends. From today all things will get back to normal. We have moved all our VIP members from the old system to the new one. It was a hard work but it is finished and I can focus more on producing tutorials for you.

Today I will show you how to create a car layout. This template can suite as a design for car dealers, communities dedicated to cars and other related topics.
With some small modifications you can use this layout for a Wordpress blog too. Join our VIP membershp if you want to download all PSD layouts for each tutorial including this one.

Things you need to complete this tutorial:

I will start with this tutorial by creating an empty document with the following size: 960×900 pixels. I will grab my Paint Bucket Tool and with the following color: #959595 I will click one time inside my document.
Select the background layer inside your layer palette, and press on CTRL+J. This shortcut will duplicate your background layer, and it will place another layer on top of the background layer.

Go to Filter > Noise > Add noise, and use the following settings:

1-add-noise-over-the-background-image

With Rectangle Tool I will create a big shape on top of the layout. We will place in this area some important information about our website.

2-create-a-lila-shape-on-the-header-of-the-website

Add some layer styles for this layer

3-drop-shadow-settings-for-the-header-image

4-gradient-settings-for-the-big-header

I will create a big white spot with a soft round brush. For this you will need to press on CTRL+SHIFT+ALT+N to create a new layer, and then wit Brush Tool make a white spot like in the following image

5-create-a-white-spot-with-brush-tool-over-your-header

Change the blending mode for this layer to Soft Light

6-apply-the-soft-light-belnding-mode

With Rounded Rectangle Tool and Rectangle Tool create a header for our layout, and also a navigation bar.

7-create-a-header-and-a-navigation-bar

With Rounded Rectangle Tool and with Ellipse Tool I will create three shapes like in the following image. I will create a slideshow where you can rotate your work, or portfolio. In my case I will place some stock images with cars, because this is the theme of my layout.

8-create-a-slide-show

Select all these black shapes inside your layer palette, and then press on CTRL+E to merge them into a single layer. After you have only a single layer for this slide show you need to add the following layer styles.

9-outer-glow-settings-for-slideshow

10-inner-glow-settings-for-slide-show

11-stroke-settings-for-our-slide-show

This is the result.

12-slide-show-box

In the middle of the layout I will add some content boxes. Here I will add later some images with some nice 3D car renders.

13-create-3-content-boxes-for-slide-show-images

Now you will need to apply the following layer styles for all white shapes you see on this layout: the three content boxes, the navigation bar and the header.

14-outer-glow-settings-for-navigation-bar

15-inner-glow-for-navigation-bar-and-header

16-gradient-overlay-settings-for-navigation-bar-and-header

17-stoke-settings-for-navigation-bar-and-header

This is my result so far

18-result-for-the-car-dealer-layout

I will select Custom shape tool, and I will create some arrows on the left side of the slide show

19-add-an-arrow-for-the-slide-show

I will add some text with Horizontal Type Tool

20-write-some-text-over-your-car-layout

The next step is to create some buttons. I will use Rounded Rectangle Tool to create some buttons. I will use the same layer style I have used for the slide show border

21-create-buttons-with-fancy-border

My Final step is to add some images. I will use an image from an old tutorial: Design an old style Chevy icon

After that in the slide show area I will add some images. This is my final card dealer layout. I hope you like it.

22-final-car-dealer-layout

Do you want to download this PSD layout? Apply for a VIP membership, and you can download our entire collection of premium downloads: vector files, Photoshop brushes, icons, Photoshop gradients, and all PSD layouts for each tutorial including this one. Join our VIP membership

Download Demo

Responses to “Design a car dealer website layout with Photoshop”

Leave a reply