Design a car dealer website layout with Photoshop
Hello 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:
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.
Add some layer styles for this layer
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
Change the blending mode for this layer to Soft Light
With Rounded Rectangle Tool and Rectangle Tool create a header for our layout, and also 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.
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.
This is the result.
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.
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.
This is my result so far
I will select Custom shape tool, and I will create some arrows on the left side of the slide show
I will add some text with Horizontal Type Tool
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
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.
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






































i like the header better than the rest of the layout
Good tutorail, thanks for the sharing.
nice color and layout, thanks for the tut..
this is really awesome. exept the car in the header
Great Layout !
1.000.000 Thanks
yeah, thanks for sharing…
I like it a lot. thanks for sharing. I agree with lawny, the header is the better portion of the site, but I like it overall. nice work.
thanks, this is really nice!
thanks, its very useful for me
I use Adobe Photoshop on my Webpage making business at home. Photoshop got all the features i need to make some really great graphics and banners. ~
its good. good design.
I was wondering… After you’ve created the graphics… like you have here. How does that then become an actual functioning website? How do you code it? Do you have to use dream weaver or something?
we have a tutorial here on how to convert a PSD file to xhtml/css website:
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
Very nice. Great Information.