December 9th, 2009 in Photoshop Tutorials by Richard Carpenter
Car Layout #6
13 Votes, Rating: 4.92
Loading ...Hello welcome to another tutorial by hv-designs, in this tutorial il be showing you how to create a black and white themed car layout.
Lets Get Started
Start off by creating a new document 1200 x 1200 pixels, setup two vertical guides by going to “view > new guide”. Set the first guide at 125px and the second guide at 1075px, this should give us a canvas size of 950 pixels to work with.
Now set the colour #212121 as your foreground and #080808 as your background. Select the gradient tool with a radial gradient then drag the gradient from the top middle part of the canvas to about half way down.
Creating The Website Title
Select the text type tool then add your website title along with your slogan in the top left corner of the canvas.
Once you’ve done that add the following layer styles to your website title (not your slogan).
You should now have something like this.
Creating The Navigation
Select the rounded rectangle tool with the default radius settings (should be 10px). Drag out a rounded rectangle starting from the right guide. Fill the navigation with any colour.
Now add the following layer styles to your navigation rectangle.
You should have something like this.
Still with the rounded rectangle create another rectangle inside the navigation rectangle.
Fill the second rectangle with the colour white then set the layer opacity to 4%. Now with the type tool add your text navigation links.
In-between each link add a simple white ellipse.
Creating The Featured Area
Underneath your title and navigation create a rectangle with the rounded rectangle tool, the rectangle should span the width of the guides and should be about 320 pixels in height.
Fill the featured rectangle with a radial gradient in the same way we did our background at the start of this tutorial. Once you’ve done the radial gradient at a 1 pixel stroke using the settings below.
You should have something like this.
Were now going to add a big shine effect over the featured area, so select the pen tool and create a curvy path like the image below.
Fill your path in white then load a selection around the featured rectangle but keep the shine layer selected. Go to “select > inverse” then hit the delete key, you should be left with a white shape which resides inside the featured rectangle. Set the shine layer’s opacity to 2% then add a layer mask, drag a linear gradient from the right of the shine to the left.
Inside the featured area add some dummy text and title.
For this next part your going to need an image of a car, im using a car by reiger. Drag your car image onto your canvas, cut away the background using your favourite cutting method. Place the car on the right side of the featured area.
Create a new layer underneath your car layer, select the polygonal lasso tool and a make selection underneath the car. The way i do it is, i imagine the car’s wheels as four corners.
Fill the selection with the colour black then blur the shadow by around 2-4 pixels using the guassian blur. Now duplicate the car layer and flip it vertically, place the duplicated layer underneath its original. Move the car directly underneath to act as a reflection, you may need to distort the image to get a correct look.
Once you’ve moved the duplicated layer into place, add a layer mask then blend it in using the linear gradient. You should have something like this.
Creating The Content Area
Select the rounded rectangle tool and create two rectangles side by side, one big one and one small one. Fill each rectangle in the color #141414 and add a stroke using the settings below.
You should have something like this.
At the top of each content box add a smaller rounded rectangle big enough to add a simple content box title. Fill each new rectangle in the colour #080808.
Now add your content box dummy content, ive just added some lorem ipsum text a small list and an example image.
Creating The Footer
Underneath all the content add two 1pixel lines, fill the top line in black and the bottom line in white. These two 1pixel lines should span the width of the canvas up to each guide.
Once you’ve created your lines set the layer blending mode to “overlay”. Now, with the rectangular marquee tool or the rectangle tool create a rectangle underneath the lines, fill the rectangle in the colour #060606.
Finish the layout by adding your footer information to the footer area.
The Result
Here’s my finished layout.
You can download the free PSD to this tutorial by heading over to our freebies section.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
31 Responses to “Car Layout #6”