Create A Web 2.0 Website Template within half-an hour with photoshop

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


133

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

215

Set your foreground color to #313538

36

Create a few shapes on your document

44

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

56

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

65

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

74

This are my settings

83

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

93

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

102

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

1110

This is the way my buttons looks so far

134

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

143

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

152

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

162

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

172

Then i will add some images

182

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

192

In the middle i will create another shape

20

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

216

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

221

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

231

The i will add another small details over our clock

241

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

251

Then i will go to Filter > Blur > Gaussian Blur

261

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

271

In the Gaussian Blur window i will enter 10

281

This is my result

291

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

30

311

This is my result

321

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

331

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

341

I will create some simple triangles like in the following image

351

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

361

This is my final image

37











[Via grafpedia]


0 comments to "Create A Web 2.0 Website Template within half-an hour with photoshop"

Post a Comment

Recent Posts

Search Medhley

Followers

Blog Archive