Clean corporate layout

Clean corporate layout

I will create a web 2.0 company layout. You can use this clean layout also for a web hosting company. basically it will work for any type of website you want to create. For start create a new document with the following size 980x1000 pixels
To create a new document you have to go to File > New ( or press CTRL+N )

I will select Rectangle tool



and with a black color i will make a rectangle #000000
I will place this shape at the top of the document. It will be our header.



I will create another rectangle with this color #f9f9e1
and i will place it the same in the header of the website



With Line tool



i will create a thin line ( 1 pixel ) and with the following color #eb9800
Right at the top of the website



After this step i will select Rounded rectangle tool



and i will place the rounded rectangle like in the following image
For this shape i will use the color #40332b

Choosing the color in your next projects is very important. Try to use only 2-4 colors, and your projects will look great



I will create another rounded rectangle with the same color #40332b



Right above this brown shape i will make a white one #ffffff



and again i will create another shape on the left side of my business layout with the following color #000000



i will add the layer styles for this small black shape:

Inner Glow



Gradient overlay



Gradient



Stroke



The color for the stroke is #bb6a00

This is my result



I will duplicate the shape bu pressing CTRL+J, and with move tool i will place the shape on the header of the website. In this spot we will add later our logo



With a black color #00000 i will create another rectangle on the left side of my layout



For this one , i will use the following settings for the layer styles.

Gradient Overlay



Gradient



Stroke



My result



I will grab one more time rectangle tool
and with the following color #d0cece i will create a shape in the midle of our layout.



I will create another one. this time i will make a smaller one



With Rounded rectangle tool, and with the following color #d0cece i will create a shape



After that i will grab Custom Shape tool



with the following shape. You will find this custom shape with ease in Photoshop. it is default set of custom shapes:



I will place this shape



I will select one more time rounded rectangle tool and with a black color #00000 i will create another shape. I know it is boring to show you each time i place a new rectangle, but more details you add the better your layout will look like



I will add the following proprieties.

Gradient Overlay



Gradient



Stroke



For the stoke i have used the following color #a9ccde

this is my result



After that i will select Rectangle tool
and i will create a new rectangle with the following color #000000



As you can see i have placed the shape in the footer of the layout

I will select line tool again, and with the following color #9f9c9c i will create a line



With Horizontal type tool



I will write some text



I will add more lines with Line Tool. i will try to place the lines vertically between the menu text button. More detail will make our navigation button look more special



I will right click on the line layer, and i will choose Rasterize layer
With eraser tool, and with a smooth brush, i will delete the top , and the bottom part of the line

This is my result



i will duplicate this layer a few times by pressing CTRL+J, and with Move tool, or by pressing on the arrows on your keyboard



i will select Polygon tool



On the top of photoshop you have to select 3 sides



And with the following color #f9f9e1 i will create some small triangles. I will place under each menu button



The next step is o add some images. i\\\\\\'ve placed the images like in the following image



I hope you liked my tutorial. I will post another one very soon, because i need credits to download some great stuff from resources. And maybe i will create also a listing in the marketplace. Thank you guys

Download Resource

Download

1 Responses to this Post!

  1. Ercole says:

    Very nice

Leave a comment and earn 1 credit

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