How to create an automotive web template using Photoshop
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.
To create this Automotive Template I have used:
- Basic Tools in Photoshop (Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool)
- From our Premium Files (available only to our premium members) I have used: Transportation Vector Icons
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:
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:
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.
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:
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:
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)
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.
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.blog comments powered by Disqus