HV-Designs.co.uk

September 30th, 2007 in Photoshop Tutorials by Richard Carpenter

Car Layout Tutorial

• Share

Open up your image in photoshop im going to be using a picture of a car, then create a new document “800×600″ and copy and paste your image over to your new document. This is how my image looks once pasted.

Now press “ctrl + T” to transform your image, just resize it to a reasonable size, baring in mind you need room for titles, slogans, logos etc…! ive resized mine and also flipped it as i want the car pointing the other way.

Now once your image is set in place highlight the last 1 or 2 pixels in the image and press “ctrl + T”

Then start to drag towards the right of the canvas, drag it right off the canvas, the image proberbly wont stretch right across the first time so just apply it then do the same again until it has been stretched right across the screen.

Now do the same with the bottom part of the image selecting the first 1 or 2 pixels then pressing “ctrl + T” then drag down.

Now you will notice on my image below that there is a big white streak.

To remove this select the eye dropper and select the color of the background, then fill that color on the background layer. Now add a mask to your image and drag a black gradient over the image.

You should then have something like this.

Now lets start to add a few bits and peices, add title, slogon, logo, copyrights etc… try to use some nice looking fonts and be creative. Lets also add our menu bar, im just going to use some text nothing too fancy. We also need to create our content boxes, so by using the “rectangular marquee tool” draw out your content boxes.
Now its just a case of slicing your image up and coding it
ALL DONE!

heres how it looks. (click for full size)

• Share