--
Published on Mon, May-16-2011 by Michaellee

Create An Elegant Vehicles Web Layout With Light Effects


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!

You May Be Interested In The Following Posts


Final Image Preview

Vehicles Web Template

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.

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

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

Vehicles Web Template

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

Vehicles Web Template

Add more Gradient Fill.

Vehicles Web Template

Vehicles Web Template

We should have something like this:

Vehicles Web Template

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.

Vehicles Web Template

Vehicles Web Template

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

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

Vehicles Web Template

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.

Vehicles Web Template

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.

Vehicles Web Template

Vehicles Web Template

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.

Vehicles Web Template

Vehicles Web Template

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

Vehicles Web Template

Put the shapes together then Merge the Layers.

Vehicles Web Template

After Merging the Layers we have to resize it.

Vehicles Web Template

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

Vehicles Web Template

Vehicles Web Template

Result:

Vehicles Web Template

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:

Vehicles Web Template

Vehicles Web Template

Vehicles Web Template

Create again a Round Rectangle Shape using the same process.

Vehicles Web Template

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.

Vehicles Web Template

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.

Vehicles Web Template

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.

Vehicles Web Template

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.

Vehicles Web Template

We should have something like this:

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

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.

Vehicles Web Template

Here is the preview of the changes that we made:

Vehicles Web Template

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

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

Vehicles Web Template

Then make the of the Layer 0%

Vehicles Web Template

Repeat the step to add more Dividers.

Vehicles Web Template

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:

Vehicles Web Template

Vehicles Web Template

We should have something like this:

Vehicles Web Template

Duplicate the Layers to add more buttons.

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

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

Vehicles Web Template

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.

Vehicles Web Template

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

Vehicles Web Template

Here the is the outcome of the Search:

Vehicles Web Template

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:

Vehicles Web Template

Vehicles Web Template

Vehicles Web Template

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.

Vehicles Web Template

Vehicles Web Template

Result:

Vehicles Web Template

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

Vehicles Web Template

Vehicles Web Template

Vehicles Web Template

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

Vehicles Web Template

Bring the C4D2 stock below the shapes.

Vehicles Web Template

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.

Vehicles Web Template

Vehicles Web Template

You should have something like this:

Vehicles Web Template

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.

Vehicles Web Template

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

Final Result: An Elegant Vehicles Web Template

Vehicles Web Template

Download Psd file

Advertisement


7 Responses

  • Benjiiy say:

    the C4D2 Stock link is dead.

    1
  • Dainis say:

    Hi, Benjiiy. Stock was updated. You can download it now.

    Cheers.

    2
  • Mohammad Danish say:

    Hey there I am so grateful I found your weblog, I really found you by accident, while I was browsing on Google for something else, Anyhow I am here now and would just like to say many thanks for a marvelous post and a all round exciting blog (I also love the theme/design), I don?t have time to go through it all at the minute but I have saved so when I have time I will be back to read a great deal more, Please do keep up the great work.

    4
  • Jasa Pembuatan Web say:

    Nice Looking…. thank you for sharing,…. Good Work…

    5

Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.



     Technology news | Wordpress templates | ThemeLabs | Review themes

Recommended Links



Wordpress review theme