Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Car Layout
rss

Car Layout

Author: Hv-Designs.co.uk More by this author


Step 1

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

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

Step 2

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

image 3

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.

Click to enlarge
Click to enlarge

Step 3

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.

Click to enlarge
Click to enlarge

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

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

You should then have something like this.

Click to enlarge
Click to enlarge

Step 4

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)

Car Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Car Layout"