In this tutorial I will teach you how to create an elegant vehicles web layout with a light effect using Photoshop. You will learn how to use different settings to fill out your canvas with nice lightning and blending modes using different stock images to create good light effects. Following the steps of this tutorial you will easily learn how to use different tools and tips to create good web template. I hope you will enjoy and learn something from it!

Final Image Preview

Stocks Used:

Step 1 – Creating a new file

Open a new document on Photoshop – 1200 pixels width, 1500 pixels height and 300dpi with white background color.

Step 2 – Create Background

Open the Background Stock, then drag it into the middle of the canvas after placing it into the canvas we are going to Desaturate the Background Stock by pressing CTRL+SHIFT+U.

Open the C4D Stock and drag it to the middle of the Nebula Stock then change the Blend Mode into Overlay.

Duplicate and Resize the C4D Stock to add more elements to our web template background.

Add a Gradient Fill to add more depth using these settings. I have used black and transparent color only.

Add more Gradient Fill.

We should have something like this:

Step 3 – Navigation Bar

In this step we are going to create the Navigation Buttons. First we have to create a Round Rectangle Shape using 10px as its radius. Then add a effect Gradient Overlay using these settings.

Duplicate the Round Rectangular Shape by Pressing CTRL+J then remove the effect of the layer and resize it. Make the duplicated and resized layer above the Original Layer.

Make the Foreground Color White, then Create a New Layer and select the Marquee Tool.

After making a Marquee, right click then fill it with Foreground Color.

CTRL+CLICK the Layer of the Round Rectangular Shape and it will create a selection. Do not select the Round Rectangular shape we are still in the Layer which we filled with color White.

After we load the selection we have to select invers to delete the outer part of the Round Rectangular shape by Pressing CTRL+SHIFT+I, then hit Delete.

Step 4 – Create Menu Divider

In this step we are going to create a Menu Divider, I have made this in new Document to make it easier for you to notice the Color I have used and easier to understand.

First, Create a New Layer and Select the Marquee Tool. Make the Foreground Color #282828. Right Click and Fill with Foreground Color.

Create again a New Layer do the same process but now fill it with #181818.

Put the shapes together then Merge the Layers.

After Merging the Layers we have to resize it.

Resize the divider until it fits the Menu Navigation Bar. We can add now the Text of its buttons.

Result:

Step 5 – Main Content Box

In this step we are going to create a box in which the details of the website will be inserted. First we have to Select the Round Rectangle Tool and set the radius into 10px, then make a Round Rectangular shape into our canvas and make the color black.

After creating the Round Rectangle Shape we are going to make a stroke using these settings:

Create again a Round Rectangle Shape using the same process.

We will add again a Round Rectangular Shape for the pages button just below the Round Rectangle that we just made.

Make a Round Rectangular Shape with a radius of 5px and using Black as its color.

After Creating a round rectungular shape will add Stroke Effect using these settings.

After doing this we will make a New Layer above this and Merge it to make the Shape Layer as a Normal Layer. We can do this by clicking with the mouse while holding the CTRL buttong in our keyboard the New Layer and the Shape Layer then Press CTRL+E.

Now we will make the upper part faded of the Round Rectangle Shape that will be used for the pages.

Still selecting the Layer we are working with, we will Add Mask, after adding a mask select the Gradient tool (G) and make the Foreground Color Black, drag the Gradient Tool starting from the Top untill the middle of the Round Rectangle Shape.

We will add more gradient effect. Make a New Layer then CTRL+CLICK the Layer of the Round Rectangle Shape and make the Foreground Color #636262. Select the Gradient Tool (G) then drag it starting from the bottom until the middle of the Round Rectangle Shape.

We should have something like this:

Step 7 – Create Sidebar

In this Step we will be creating Box and Buttons for the List of Vehicles and Parts.

First we will create again a Round Rectangle using Round Rectangular Tool and the radius is 5px. After Create the Shape we will add Stroke effect with the Size of 1 and the color is #636262.

Create a New Layer (CTRL+SHIFT+N) then select the Marquee Tool (M) and change the Foreground Color to #0F0F0F.

Again Create A New Layer then CTRL+CLICK the Layer the We made to load the selection. Select the Gradient Tool (G) and then Foreground Color into #636262 then drag the Gradient Tool starting for the top up to the upper part of the Selection.

Here is the preview of the changes that we made:

Create again a Round Rectangle below what we have made for the vehicle parts. Just follow reapet again the step.

Step 8 – Create Thumbnails Divider

In this step we will create a divider for the vehicle thumbnails. First, select the rectangle tool and make a rectangle shape above the round rectangle shape in which where thumbnails will be placed.

We will add Stroke effect into the Rectangle Shape that we made using these settings.

Then make the of the Layer 0%

Repeat the step to add more Dividers.

Step 9 – Sidebar Buttons

This step we will be creating a button for the vehicle list Again we will select the Rectangle Shape Tool and add Stroke effect using these settings:

We should have something like this:

Duplicate the Layers to add more buttons.

Step 10 – Page Naviagtion Buttons

In this step we will be creating page naviagtion button. First, create a New Layer then change the Foreground Color into #252525. Select the Marquee Too (M) then make a marquee then fill it with Foreground Color.

After creating the Page Buttons, we should have something like this:

And then we could add the text for its buttons, here are the sample buttong text that I have made.

Step 11 – Create Search Textbox

In this step we will create the search textbox and search icon. We will create a rectangle shape for the text box.

And for the search Icon we will be using the Custom Shape Tool

Here the is the outcome of the Search:

Step 12 – Navigation Icons

We will be creating the small triangle button in the Home button in the Menu Bar Navigation. First Create a small triangle using the custom shape tool. After creating the triangle Shape, we will add Drop Shadow and Color Overlay Layer Effects using these settings:

Step 13 – Adding Light Effects

In this step we will add more Light Effects in our canvas to add more attraction to the visitors of the website.

Open the Nebula Stock drag it into the canvas, Resize the Nebula Stock the erase the sides of the Nebula. Desaturate the Nebula by pressing CTRL+SHIFT+U then change the Blend Mode into Linear Dodge and bring it below the layer of the shapes.

Result:

Next, we are just going to repeat the step 18 but we are using Nebula Stock2.

Next we will add a Second C4D Stock. Open the C4D Stock, drag it into our canvas, then resize it.

Bring the C4D2 stock below the shapes.

We will add line strokes into our shapes to add more light effects First Create A New Layer, select the Pen Tool (P) make a stroke; Set the brush settings into 3px size and Hardness 100% then make the foreground color White.

You should have something like this:

Step 17 – Add Light Effects to Navigation Bar

We will add a light effect into the Menu Bar Navigation. Open the Second Nebula Stock, Drag it into the Canvas, Resize and erase the unwanted parts. After getting the desired outcome change the Blend Mode into Linear Dodge.

If you like more light effect, just duplicate the Layer.

Final Result: An Elegant Vehicles Web Template

Download Psd file