Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Stylish Business Layout in Photoshop

Create a Stylish Business Layout in Photoshop


Let's start with a new document with the following size: 960 x 900 pixels. I am using this value because you can use a Photoshop grid system and most of them are using these values.
Select Paint Bucket Tool, and with the following color: f5f5f5 press one time inside your canvas.
I will select Rectangle Tool, and I will create 2 shapes .

Img

I will use a gradient from our huge set of 27.000 Photoshop gradients. This is the biggest pack you will ever find on internet and is available four Grafpedia VIP members.
I will load this and I will add the following layer styles:

Img

Img

Img

Img

Note: to access the layer styles you can go to Layer - Layer styles
This is my result so far

Img

I will select Rounded Rectangle Tool, and I will set my corner radius to 6 pixels

Img

With this tool I will create four shapes. Click on the following image to see better how I place the shapes

Img

I will add one more time some layer styles. You can add the same layer style for all the shapes

Img

Img

Img

Img

This is my result. Click on the following image to see better my result

Img

Under the top shape I will create another one. You can use Pen Tool to create a shape similar with mine.  With this black shape I will create a nice shadow

Img

I will right click on this layer in my layer palette, and I will choose Rasterize Layer

Img

I will select Eraser Tool with this brush selected

Img

Then I will delete the top part of the black shape

Img

For a realistic effect I will lower the opacity value to 20 %

Img

Under this shape I will create another 2 small buttons.

Img

I will load the following set of pixel arrows
In this set you will find over 300 pixel arrows. It will be a life saver, when you design websites. These small details will make the difference when you create layouts
I will place two arrows over the previous buttons

Img

I will select the Horizontal Type Tool, and I will write the text over my layout. The fonts I have used are Myriad Pro, and Trebuchet MS (both fonts are included in Vista)
Click on the following image to see how my corporate layout looks so far

Img

Now I will add also some images, and this is my final result

Img



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


Like us to: