Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Learn how to Create a Sports Car Layout in Photoshop

Learn how to Create a Sports Car Layout in Photoshop


Preview:

Img

Now let's start designing.

Step 1:-

First let's create a new file by clicking on File> New. Now name it "Sports car layout with 1000 px height and 1000 px width.

Img

Step 2:-

Now create a new layer by clicking on Layer> New> Layer. Now let's color the new layout with #000000.

Img

Step 3:-

Now once we have a nice black background, it's time to add some noise to our background, for this click on Filter> Noise> Add noise. And keep the noise amount to 9.51%.

Img

Step 4:-

Now I'll use the Grunge texture from the grunge texture set mentioned above. And randomly use them on our background layer with foreground color #000000.

Img

Step 5:-

Now click on "Rectangle Murquee Tool" and select a small rectangle on the top.

Img

Step 6:-

Now we'll add a nice black gradient and use it on the selected rectangle.

Img

Then reduce the opacity of the layer to 40%.

Img

Step 7:-

Now again we'll select the "Rectangle Marquee Tool" and create a small rectangle for our navigation bar.

Img

Step 8:-

Now I'll use a gradient on our selected box.

Img

I think we should add some outer glow to this, for this click on Layer> Layer Style> Outer Glow. And make sure our outer glow color is # 19a7f8 and size 9px.

Img

Now reduce the opacity to 60%.

Img

Step 9:-

It's time to add the button text to our navigation bar. For this select the "Text Tool" and add text. After that we'll use a light gradient on the text. For this click on Layer> Layer Style> Gradient overlay. And add gradient.

Img

Step 10:-

Now I'll create a small rectangle using our "Rounded Rectangle Tool" and fill it with #000000. Then reduce the opacity to 35%.

Img

Step 11:-

Now create a new layer by clicking Layer> New> Layer. And now create some arrows using Pen Tool. After that we'll add a silver gradient to our arrows.

Img

Now we'll add outer glow to our arrows, for this, click on Layer> Layer Style> Outer Glow. Outer glow color should be # 0090ff.

Img

Step 12:-

Now duplicate the arrow by right clicking on the layer and selecting "Duplicate Layer".  Then move the arrow to the opposite side and click on Edit> Transform> Flip Horizontal.

Img

Step 13:-

Now it's time to add the logo text. For this select our "Text Tool" and add text. Now our logo is done.

Img

Step 14:-

Now select the "Rounded Marquee Tool" and fill it with # 252626.

Img

Now click on Layer> Layer Style> Outer Glow. And add the outer glow of the color # 53e9ff.

Img

Step 15:-

Create another small rectangle and place it on the upper right corner of our big rectangle.

Img

Step 16:-

Now duplicate the rectangles we have created above. While pressing down the "Shift key" and then click on the big rectangle layer and then small rectangle layer. So, both of our layers are selected. Then click on Layer> Group Layers. So this will create a group of our rectangles.  Now simply right click on the group and click "Duplicate group".

Img

Step 17:-

Now select the duplicated group and click on "Edit > Free Transform> Flip Horizontal".

Img

Step 18:-

Now add some grunge to our rectangles using our grunge textures. Using colors # 000000 and #3aaad5. Then use "Soft round brush" with #00b7fc and 250 px size.

Img

Step 19:-

Then add images and text to our rectangle boxes.

Img

Step 20:-

Now create some arrows same as we did with the logo and add our headings and more buttons.

Img

Step 21:-

Now use the "Soft round brush" with 350 px and foreground color # 6cccf3 on the down right side corner.

Img

Step 22:-

Now add the image of a car on top of our blue spot. After that, duplicate the image by right clicking on the layer and selecting "Duplicate layer". Then press "CMD/CTRL + T" and then right click on the car and select "Flip Horizontal" then rotate it and place it in a position where it looks like the reflection of our car. After that, reduce the opacity to 11%.

Img

Step 23:-

Now select the "Rounded Rectangle Tool" again and fill it with # 132731. Then reduce the opacity to 55%.

Img

Then add some outer glow to the rectangle for this click on Layer> Layer style> Outer glow. And add some outer glow with the color # 70edff.

Img

Step 24:-

Now click on "Line Tool" and Draw a small like with # cccccc. Then reduce the opacity to 15%.

Img

Step 25:-

Now add arrows and text using "Text Tool" on the left side. And then add small images on the right side.

Img

Step 26:-

Last but not least let's add copyright text to our sporty car layout and we are done. For this select "Text Tool". Add text with # 919090. Then reduce the opacity to 70%.

Img

And now our layout is complete. Below is the final result we have created. Click on it to see the full size image. You can also download the original PSD of the layout from our VIP member area. Simply sign up and enjoy our collection of 70,000 awesome items to boost up your designs.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: