How to create an automotive web template using Photoshop

Jul 15th, 2010View Comments

Hello and welcome to another tutorial, here on TrendyTUTS.com. For today I will create an Automotive Template. You can use this psd layout to create an auto market website or anything related to it.

Please note that this Automotive Template is in PSD format. In this tutorial I will explain how you can create a similar template in Photoshop but I will not cover the conversion PSD to XHTML. A tutorial on how to code this template in CSS/XHTML will be posted pretty soon on our PSD to HTML Tutorial Section and It will be available to our premium members.

Also if you’d like to download all Website Layouts and all Premium Files, you can easily do that if you will become a premium member on trendyTUTS.com.

As you can see, here on trendyTUTS.com, you will learn to make websites in Photoshop but in the same time you will learn how you can turn them in fully functional websites! Most of our templates are already coded and you can download the source file (.psd) and the CSS/HTML version for each template created in Photoshop.

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

To create this Automotive Template I have used:

Open Photoshop and create a new document: Ctrl +N – 1020x1480px. Next set Foreground Color to #dedde2 and Background Color to #eff1f3, then select Gradient Tool and drag a similar line.

You should have something like this now:

Step 1 – Creating the top area: Logo and Login Form

To create the logo I will select Type Tool and I will write “Automotive Website”.  For” Automotive” I have used an orange color: #e4ac08 and for “Website” a blue color: #3f6f9f.  For both of this words I have used this layer styles:

My result:

Next on the right side I will add the login form. To create the first 2 rectangles, I have used Rectangle Tool and I have applied this layer styles:

Then on the same line, but a little bit to the right I will create a button (the login button) To create it, I will select Rounded Rectangle Tool with a radius of 30px and I will create this shape:

And I will apply this layer styles:






Here is my result for the top area – Logo and the Login Form

Step 2 – Creating Search Area and Call To Action Area

To create Search Area, I will select first Rectangle Tool and just below the logo I will create a shape and I will apply this layer styles. My shape has these dimensions: 450x284px.



Next with Rectangle Tool will create another one on the top of this one and I will apply this layer styles. My shape has these dimensions: 450x41px


Now I will select Pen Tool and I will create this shape (which it will serve as a shadow for our main rectangle).

Then I will go to Filter>Blur>Gaussian Blur and here I will apply a radius of 4.9px

I will lower the opacity to 29%. I will proceed in the same way for the right side. Here is my result:

Next with Type Tool I will add some text and with Rectangle Tool I will create some white forms.
Here is my result for search area:

Now on the right side of the search area I will create a Call to Action Area . With Type Tool I will add some text, I will use the same layer styles used for logo.

Then with Type Tool I will create 2 tiny lines (393x1px) and after them with Type Tool I will add some text

Next with Rounded Rectangle Tool (15px radius), I will create a white shape 286x88px and I will apply this layer styles:


On the top of this shape I will use again Rounded Rectangle Tool with a radius of 15px and I will add another one(smaller), I have used this color: # e4e5e9

I’ll use again Rounded Rectangle Tool (radius 30px) and I will create a button.

I will apply this layer styles:



With Type Tool I will add some text and here is my final result for this area:

Step3 – Creating the Navigation

First I will select Rectangle Tool and I will make this shape (please note that with this shape I will cover some shapes which has been created in pervious steps). Dimension: 950x99px. I will apply this layer styles also:



Next I will select Ellipse Tool and I will add this red shapes (I have used red just for demonstration proposes)

And here it is how is looking without red. You would say that this shape is a single piece.

Then using the Transportation Vector Icons, which are from our Premium Files,  I will add some vector icons. I will use a car icon, a truck, a yacht and an airplane. Please note that as a premium member you will get acces to all of our Premium Files, all source files for our Web Layout Tutorials (including PSD and CSS/XHTML files) and PSD to HTML Tutorials
Here is my result for navigation:

Step 4 – Featured listing and Latest listings.

To create Featured listing, I will select Rectangle Tool and I will create this shape. Color: #e1e3e3, Dimension: 882x829px

Having Rectangle Tool selected I will create again 2 shapes. Color used for both of them: #f6f6f6. Dimension for the first shape: 861x308px, for the second one: 861x501px

Next, on the first shape I would like to create a featured listing area, and here I would like to have a jquery slideshow with the latest 5 featured listings. That’s why with Rounded Rectangle Tool I will create this shape (color: #e1e3e3) and with ellipse tool I will create 5 circles (the first one is orange)

Then on the left side I will add a car and on the left side with Type Tool I will add some text and a button. A similar button has been created on step 1 (login form)
My result:

Next I will continue with latest listings:
First on the left side I will add an image and using Type Tool I will add some text

With Ellipse Tool I will create this black shape

Then I will go to Filter>Blur>Gaussian Blur, and I will apply a gaussian blur with a radius of 5px

With Rectangular Marque Tool I will make this selection:

I will hit Delete button on my keyboard to delete the selection and I will press Ctrl+D to Deselect. Here’s my result:

I will proceed in the same way and I will make 3 more listings. Here is my final result for Latest Listings:

At the bottom of Latest Listings I have created a Newsletter subscription. This one is really easy to create. You will need to use Rectangle and Type Tool. If you have followed all this tutorial it will be really easy for you to create it.
Well the tutorial is finished now and you should have something similar with what I have created.

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Want to Download the Source File?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

If you’d like to know when we update this blog with new tutorials, you can follow us on twitter. If you have any questions, please don’t hesitate to ask them in your comments.

  • http://www.multyshades.com Multyshades

    What a beautiful tutorial with amazing end results, you done a great job, thanks for share.

  • http://www.multyshades.com Multyshades

    What a beautiful tutorial with amazing end results, you done a great job, thanks for share.

  • http://prodigalconcepts.com/ rod rodriguez

    Interesting tuts, simple design, cool navigation, very cool concept. thanks for sharing…

  • http://prodigalconcepts.com/ rod rodriguez

    Interesting tuts, simple design, cool navigation, very cool concept. thanks for sharing…

  • http://poliman.pl Strony Internetowe Kraków

    I see that you are not idle. Good :)

  • http://poliman.pl Strony Internetowe Kraków

    I see that you are not idle. Good :)

  • http://n3dsm3.com/ nintendo 3ds games

    OMG IT’S WONDERFUL.

  • http://n3dsm3.com/ nintendo 3ds games

    OMG IT’S WONDERFUL.

  • http://www.aveef.com aveef

    WAw.,, Great! thank you ! ^^

  • http://www.aveef.com aveef

    WAw.,, Great! thank you ! ^^

  • http://www.blogsnexus.com Lae

    gOOd OUT LOOK NICE TUT

  • http://www.blogsnexus.com Lae

    gOOd OUT LOOK NICE TUT

  • http://www.technologiesreview.com Big6b

    Great tutorial on a web tutorial using photoshop

blog comments powered by Disqus