Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Old Style Transportation Layout

Old Style Transportation Layout


When you create layouts, one of the most important things are stock images. For this tutorial I will use the following image:

image 1

I will place this image on a new document. To place the image, first you need, to create a blank document, with the following size 760*770 pixels.

On this layout, I will place another image with a car.

image 2

You can rotate this image by going to Edit > Transform > Skew.

image 3

Then I will try to place the car image over the photo frame.

image 4

This is my result:

image 5

After that I will use Rectangle Tool.

image 6

And I will create a shape on the left side of the layout. I will create the shape with a grey color #c5c5c5. In the following image you can see it with a white color. You can see how it will look with 2 different color variations.

image 7

I will add a drop shadow.

image 8

This is my result so far:

image 9

I will select one more time Rectangle Tool, and I will create a small shape. I will create this small shape because I want to create a feather.

image 10

Now go to Edit > Transform > Warp.

image 11

I will select Arch.

image 12

Then I will modify the shape like in the following image:

image 13

Please rasterize this shape, to rasterize this shape, you need to right click on the layer, then choose Rasterize shape.

I will select Erazer Tool.

image 14

And I will delete the left part of the layout until I have the following result:

image 15

With Rounded Rectangle Tool.

image 16

I will create a black shape, and I will place right under the white shape from the lat step.

image 17

I will add some proprieties for the layer styles.

image 18

After that I will create another shape, on the right side.

image 19

I will select Line Tool.

image 20

Then I will create some small lines. The same with warp tool I will modify the lines like I have modified the shape from above.

You can go to Edit > Transform > Warp.

image 11

Then you need to select Arch.

image 12

This is my result so far:

image 23

I will duplicate the layers from above and I will place them like in the following image:

image 24

On the left side I will create a search box. I will use Rectangle Tool and for the shape color I have used #c5c5c5.

image 25

With Eraser Tool I will delete the right part of this shape. Please note that you need to rasterize the shape first, then you can delete from this shape.

It doesn't need to be perfect. Just give some smooth round edges.

image 26

I will add some shadow. I will use the following settings:

image 27

Again with Rounded Rectangle Tool I will create a black shape.

image 28

With Rectangle Tool #dbe1db I will create a rectangle.

image 29

After that I will use Custom Shape Tool with the following Shape selected:

image 30

I will place the arrow near the search box.

image 31

I have placed another image from my personal stock collection.

image 32

For this image I have used the following settings:

image 33

image 34

This is the result:

image 35

The next easy step is to place some text on your layout with Horizontal Type Tool.

image 36

This is my final result:

Old Style Transportation Layout



Author's URL: victor
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

Reader's comments
comments Name May 17, 2010 says:
That's cool dudes!!!!!!!!!
Reply
Add comments to "Old Style Transportation Layout"

Captcha