Grafpedia

Hello. This is our first photoshop tutorial here on Grafpedia. You can subscribe to the rss feed to receive our next tutorials.

In this tutorial i will show you how to create a web 2.0 business layout.
For start you need to create a new document in Photoshop

I will use the following size for my layout : height 900 pixels, width 1000 pixels
The size is not so important, but if you want to create web 2.0 layouts you need to create large websites, with a lot of empty spaces, and when you choose the text size, it should be a bigger size

Choose Rounded Rectangle Tool, and on the top in the Control panel, you need to set the radious of rounded corners to 15 px

Set your foreground color to #313538

Create a few shapes on your document

With the same tool, create another white shapes like in the following image. I will turn the color to red for a few moments. I want you to see better how i place the shapes

Now i will turn the colors to white.
To change the color fo the shape simply double click on the layer thumbnail. This step is not necessary now. please create the shapes from the first time with a white color

You can see a smooth line around the white shapes. I have applied a stroke to the shapes. To add a stroke you need to go to Layer > Layer Styles > Stroke

This are my settings

At the top of the layout, i will create another shape with the tool : Rounded Rectangle Tool

Over the navigation bar, i will create a simple shape with Pen Tool. It will look like in the following image

For this button, i will add a layer style. Navigate to Layer > Layer style > Gradient Overlay
and use the following settings

This is the way my buttons looks so far

I will select Ellipse Tool, and i will create 2 small circles

Then i will drag the layers right above the background layer. Simple drag each layer one after the other

The circles will be placed  behind the black shape, and in this way we will create a nice 3D effect

With Horizontal Type Tool, i will write down some text.

Then i will add some images

On the left side, i will create a logo with a clock for start i will use Ellipse Tool to create a circle
To create a fixed circle hold down the Shift Key then start

In the middle i will create another shape

I will select Rectangle Tool , and i will create 3 simple shapes like in the following image

Then with Ellipse Tool, i will create another small circles and i will place them in the middle of the clock

I will select Line Tool, and i will set the width of the shape to 1 pixel

The i will add another small details over our clock

I will select one more time Ellipse Tool, and i will show you the easy way on how to create a shadow. Under the clock you can create a shape like in the following image

Then i will go to Filter > Blur > Gaussian Blur

You will be asked if you wnt to rasterize the shape. Click On Ok

In the Gaussian Blur window i will enter 10

This is my result

What i don’t like is the color for the black shape under the ” Business CO.” text logo
I will add a layer style to that shape to fit better within our layout

Select thew layer in your layer palette, then go to Layer > Layer Style > Gradient Overlay

This is my result

I am almost ready with this tutorial. I want to add a few buttons with ” Read more ”

I will select Polygon Tool, and in Control panel toolbar, i will set the number of ides to 3

I will create some simple triangles like in the following image

On the top of the layout, i will add a RSS icon

This is my final image

Want to download the PSD file and the css/xhtml file for this tutorial ? Join our VIP membership for 9.95$. It will allow you to download all our VIP resources from Grafpedia