HV-Designs.co.uk

May 14th, 2009 in Photoshop Tutorials by Richard Carpenter

Car Layout #5

• Share

Good evening everybody, today i’ll be showing you how to create a car club style layout. We’ll be using two stock images and combining the two to make a cool composition.

Create a new document 1000 x 1200 pixels and fill your background with the color #0e0e0e. Your now going to need this stock image Resize your stock with the free transform tool (CTRL + T) make the stock the same width as your canvas. Place the stock at the very top of your canvas.

Dont worry about it looking really big at the moment as we’ll be moving it and making it smaller later. Goto “filter > sharpen > sharpen” to sharpen the image. Your now going to need this stock image Open up the need for speed wallpaper stock in photoshop, with your prefered cutting tool cut around the image of the car, then copy and paste it onto your orginal canvas.

Create a new layer below your car layer, with the pen tool create a selection like this. Notice how the selection is roughly in the same angle as the side of the car, and is also just a fraction below the wheels.

Fill your selection with the color #0e0e0e then goto “filter > blur > guassian blur”. Blur by 1.0 pixels and set layer opacity to 90%.

With your desired cutting tool make a selection around the side of the car. We need to make a reflection in the floor of the car, obviously flipping the car vertically wont work as the angle makes it that little bit more arkward.

Copy and paste the selection to a new layer then goto “edit > transform > flip vertically”. Line up the front of the car.

Goto “edit > transform > distort”. Using the left middle anchor point distort the image so both front and back wheels are touching the orginal’s wheels.

Drag the reflection layer underneath your car layer, select the pen tool or the polygonal lasso tool and make a selection in the gap between the top car and the reflection.

Create a new layer underneath your reflection layer and fill the selection with the color #0e0e0e.

Hide all your layers apart from the reflection layer and the layer with the shadow you just made on. Goto “layer > merge visable” this should merge both layers together, unhide all other layers. Set the reflections layer’s opacity to about 50-58%, add a layer mask then drag a linear gradient from the bottom of the reflection upwards. You may need to undo and redo a couple of times to get the right effect. Were looking to get a nice subtle reflection. Heres mine.

Add a layer mask to your background stock image, drag a radial gradient over the top.

Duplicate your background stock image, set the duplicated stock images blend mode to pin light. HIDE your background layer then goto “layers > merge visable”, all your reflection, car and shadow layers should now be merged into one layer. Unhide your background layer, then move your car upwards towards the top of you canvas, leaving enough space for some text at the top. Add a layer mask to your car layer and drag a linear gradient over the BOTTOM. You should have something like this.

Select the rounded rectangle tool with a radius of 15px create a small box above your car, fill your rectangle with the color black.

Add this stroke to your rounded rectangle layer then set opacity to about 76%.

Inside the box add your website title. The color code for the green i used is #68994d.

Select the rectangle tool or the rectangular marquee tool and create a white rectangle the width of the canvas underneath your car.

Add these layer styles to your navigation bar.

Create another white rectangle half the height of the navigation, set opacity to 3% and place at the top of the navbar. Label your navbar to finish this step.

Inbetween each link item add a small divider. Once you’ve added the dividers merge all divider layers together and add a layer mask. Drag a reflected gradient over them using white as your forground.

Merge your navigation layer and navigation shine layer, duplicate it then flip it horizontally. Move your duplicated layer underneath its orginal, then shift the navigation down underneath its orginal. Add a layer mask to your duplicated layer and drag a linear gradient over the bottom.

Merge all your navigation layers together as one, apart from the text. Add a layer mask over the merged layer. Using a reflected gradient with your forground set to white, start from the middle of the navigation and drag towards either the left or the right of the canvas. The result will be your navigation blending into the background on both left and right sides. You might not get the desired first time, just undo and redo untill you get the best result for you.

Using the rectangle tool or the rectangular marquee tool create a small rectangle underneath your navigation. Add these layer styles to your rectangle.

Underneath your rectangle create another one, but make it taller. Fill the 2nd rectangle with the color #080808 and apply a 1pixel stroke using the color #181818.

Inside the box add some dummy content.

Using the steps and styles listed above create more boxes, as many as you desire. On the right side of the canvas create slighty bigger rectangles for bigger content.

For the footer we duplicate our navigation bar, flip it vertically then drag towards the bottom of our canvas. Select a small selection of the navigation spanning the whole wide of the canvas. Press CTRL + T and drag the selection down. Add your footer info to complete the effect.

Thats it all done, heres what mine looks like.

Hope you’ve enjoyed this tutorial, dont forget to subscribe via RSS and twitter. Also please share and enjoy this post by using the box below. Many thanks for your help and support. Much appreciated.

• Share