Grafpedia

In this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact! You will learn step by step how to create a web layout with Adobe Photoshop.
I will provide you also a set of vector icons to help you design this layout.

Preview full size layout

Apply for a VIP account to download this layout

Open a new document with the following size: 960 x 900 pixels. For the background color please use: #292929
Select Rectangle Tool, and create a black shape at the top of your layout. I have used this color #111111

Select Line Tool, and create two lines. Both lines should have the weight of 1 pixel

I will create a new layer (press CTRL+SHIFT+ALT+N), and with Brush Tool, and with 300 pixel smooth brush I will make a point on my layout.

Then I will change the blending mode for this layer to Soft Light.

I will select Rounded Rectangle Tool and right under the header I will create three shapes.

For all these three shapes I will add the following layer styles:

This is my result so far.

Under these three shapes I will add another one. It will be the body of our layout. I will use one more time Rounded Rectangle Tool, and for the color I will use #e1e1e1.

On the left side I will create a shape with Pen Tool.

With Rectangle Tool, I will create a new shape, and I will place it like in the following image.

I will select Custom Shape Tool, and with the following shape:

I will place the shape on the right side of the previous shape. For the shape I will use the same color as the big shape #e1e1e1.

I will create other shapes with Rounded Rectangle Tool. I will use the following color: #cacaca

I will provide you the following set of icons. You can apply for a VIP account and you can download this nice set of vector icons.

I will open the eps file in Photoshop, and with Rectangular Marquee Tool, I will select each icon.

I will make sure I will have the layer with icons selected.

If the layer is selected in your layer palette, you can press on CTRL+J (this is the shortcut for layer via cut). This means a new layer with a single icon will be created on top of the previous layer.

Drag this icon over the layout document. To drag the layer from one document to another you need to have both documents visible on your screen. Repeat the steps until you have the following result.

Change the opacity value to 10% for each icon.

This is my result

I will select Horizontal Type Tool, and I will add the text.  For the header I will use the following fonts:

For Grafpedia Company I will use:

For the slogan line I will use: Tahoma, with a size of 11 pt, and the font style to Regular.

On the right side I will add another text for menu. I will use the following settings for my menu buttons.

This is how it looks

Using the same fonts I will add the alone the text over my layout

Click on the following image to see the real size layout

On the top I will add another button

I will rasterize the layer by right clicking on the layer palette

With Rectangular Marquee Tool I will make a selection.

I will hit the Delete Key from my keyboard, and then I will press on CTRL+D to deselect. This is my final result.

If you want to download this layered PSD layout, please apply for a VIP account. For a small price you can download all resources from Grafpedia + the future releases for the period of subscription you choose. Please note: you will not be charged again at when the subscription period is over.

Almost 80 % from our subscribers choose to apply for one year.
Subscribing to one year it will bring down the monthly fee to 5.80 $