Transportation web layout

Transportation web layout

Hello my friends. This is my first tutorial here on insanelyart. I hope you will like

my transport layout

This is my final result. Please download the PSD file to understand better how this tutorial was made



I have seen on another tutorials that a lot of people use small dimensions when they

write tutorials. I think this small dimension will fit on ant monitor.
Go to File > New and use the following sizes : 760 pixels x 770 pixels

I will select RECTANGLE TOOL



Then i will use the following layer styles:

Outer glow:



Stroke:



And the big shape ( made with Rectangle Tool ) will be placed in the middle of my

layout.



I will duplicate this shape by pressing crtl+j, Then i will press on CTRL+T to bring

up the transformation control. I will rotate the shape like in the following image



Then i will drag this new layer overt the last one. You can notice that i have changed

the image for the previous shape. To change the color for a shape you need to double

click on the layer thumbnail



I will use one set of cloud brushes ( available in the archive )
You need to download the archive from the bottom of this tutorial. Inside this archive

you will find the psd file for this tutorial and the set of hi resolution cloud

brushes

I will create a new layer by pressing on the CTRL+SHIFT+ALT+N in the same time

i will change my foreground color to #93bce5 , then i will select one cloud brush,

and i will make a drawing on the document

I will try to place the clouds inside the big white rectangle the white rectangle

After you will make the clouds drawings, you have to load the selection for the white

shape

For this you have to select the big white rectangle, then go to Edit > load selection

If the load selection is not enabled you need to rasterize the shape

To rasterize the shape right click on the layer, and choose Rasterize
Or you can hold down the CTRL key and you have to click on the layer thumbnail like in

the following image.



You can notice a border surrounding the big white shape
The next step is to inverse the selection by pressing ctrl+shift+i , or you can go to

Select > inverse



I will hit the Delete key from my keyboard, and you can see my clouds placed inside

the white shape



Then with HORIZONTAL TYPE TOOL



I will write some dummy text ( i will use as any professional tutorial writer a text

with Lorem ipsum )



After that i will use a image with a plane from my collection



After that I've selected LINE TOOL



And i will make some lines between the text areas



I will make another line with the following color #85190b
I will place this line in the footer of our layout.



I've duplicated the lines, 2 times ( press on CTRL+J )
Then i have changed the color of the lines to #525453 and #566c72

Then with Move Tool i will place the lines like in the following screen shot



Then with RECTANGLE TOOL

I will create another rectangle with the following color #cecece
I will rasterize this rectangle ( right click on the layer , then choose rasterize

shape )

Then with ERASER TOOL ( and a smooth round brush )



I will delete the right part of the shape. here you have my result



I will duplicate the shape ( press CTRL+J )

And i will place it like in the following image with the Move Tool



i will add another images from my personal collection, and i think i have finished

this tutorial. This is my final transportation layout.

You can use this tutorial as you want, but please link to this page back





Download Resource

Download

2 Responses to this Post!

  1. bresti says:

    yes , i learn how i rotate this :D

  1. Branda says:

    That's a good idea.

Leave a comment and earn 1 credit

Log In to post a comment.
Sign Up if you are not yet a member