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

Cars & Transportation Layout


Open a new document in " Photo shop "

Size 760 x 770
Background color: #343e48

Then select Rectangle Tool and create a simple shape.

Please use the following color: #a00000

Place the rectangle like in the following image

image 1

Then add the following layer style

image 2

Now add a image with a car,

image 3
Click to enlarge

Duplicate the layer with the car ( to duplicate be sure you have the car layer selected, then press on Ctrl+J )

Then go to Edit > Transform > Flip Vertical.

With move tool place the image like me

image 4

Now press on the Add Layer mask button from the bottom of the layer palette

Select Gradient Tool .

Be sure you have the following settings

image 5

Then draw a line with Gradient Tool exact like the blue arrow

image 6

This is your result

image 7

Now we will create a new pattern

Open a new document 8 x 8 pixels with a transparent background

Zoom the document to 1600 % and with Pencil tool ( brush size = 1 pixel ) make the following drawing

image 8

I will include the PSD file with the pattern for you in the attachment area so you can download it

After you make the pixel art drawing go to Edit > define pattern

Choose a name for you pattern and click OK

Now you can close your 8 by 8 pixel document

And we will continue to work on our layout

Select Rectangular Marquee Tool and make a selection on the top of your layout

image 9
Click to enlarge

Create a new layer ( press Ctrl+Shift+Alt+N )

Grab Paint Bucket Tool and fill the selection with the pattern from above

Then press Ctrl+D to deselect

image 10
Click to enlarge

Then go to Filter > Render > Lightning Effects and use the following settings

image 11

This is the result

image 12
Click to enlarge

Now Create another selection

image 13
Click to enlarge

Create a new Layer ( press Ctrl+Alt+Shift+N ) Then fill the selection with the same pattern

Press Ctrl+D to deselect

image 14
Click to enlarge

Then add the following layer style

image 15

This is the result

image 16
Click to enlarge

Now press on Ctrl+F ( this will apply the same filter we have applied on our header )

image 17
Click to enlarge

Now add some text on your layout with Type Tool

image 18
Click to enlarge

Now add some images. I will use the same pattern as above to create some boxes

And i will drag some images from my stock collection

image 19
Click to enlarge

Now with Type Tool, create some dots ,

Rasterize the type ( to rasterize go to Layer > Rasterize > Type )

And rotate the dots until they are vertical

Place as many dots inside your layout

image 20
Click to enlarge

Now select The red Shape ( the first layer from our tutorial )

Go to Layer > Rasterize > Shape

Then go to Filter > Render > Lightning Effects and use the following settings

image 21

This is my result

image 22
Click to enlarge

Now i will add the following layer styles for my CAR DEALER text

image 23

image 24

image 25

image 26

image 27

This is my final result

Cars & Transportation Layout
Click to enlarge


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

No comments yet...
Add comments to "Cars & Transportation Layout"

Captcha