Design Layout Tutorial(Adobe Photoshop Tutorial)

(22 votes)

Hello World !

This is my first tutorial in Adobe Photoshop, and based on the feedback I will create more tutorials !

Here is my final result:

To make a similar web layout you will need the following:

Adobe Photoshop
Some vectors from www.coolvectors.com
Time to read on: P

If you have all of those, you’re ready to go!

I will begin with the logo, I will continue with the navigation and the final step (and the easiest one) will be to add some dummy text for content.

Let`s start!

First of all you will need to create a new document with the following:

dimensions : 900X900
as a background color, please use : 2c2c2b

After that please create a new layer (Ctrl+Shift+N), pick Rectangle Tool

and create a shape like this one (170X113 px) using a white background.

In the next step we will need to rotate the shape a little bit.

To do that first you will need to select the layer (where the shape was created) and then use this shortcut: Ctrl+T (free transform) or go to Edit>Free Transform from PhotoShop menu.

Rotate it on the left side (as you wish) and after that, move the shape to the top, to cover the right corner of the shape: (to let visible only the left corner)

Now we will need to add the following styles to the shape:

All you have to do now is to add your text and graphics (that red shape is a vector from here: http://www.coolvectors.com/Vector-Graphics/Abstract-Vectors.html )

If you want to have to have the same look for your logo I advise you to download the psd file (is located at the bottom of the page)

We will move to the Navigation now.

To build it we will need to add 3 guide lines. For that please, go to: View>New Guide.

Here choose:

Orientation: Horizontal
For the first Guide choose 200px, for the second one 230px and for the third one :260 px

You result will be something like this one:

Now you will need to choose again rectangle tool and to add 2 rectangles between guides.

After that in the blending mode we will need to add the following styles for both of the partition that we have added with the rectangle tool.

For the first one please use the following style:

Gradient Overlay with the this colors: 9f0e23 and d80c0c

And for the second one :

Gradient Overlay with the this colors: 631c1c and 940c1f

Here is my result:

Now we will need to create that background effect.

Please start another layer Ctrl+Shift+N , I will name it Effect, choose Elliptical Marquee Tool

and draw a shape like this one :

with a white color (be sure that the layer is positioned above the background layer, other ways it will cover the navigation)

Deselect the layer (Ctrl+D) and go to: Filter>Blur>Gaussian Blur

Add a radius of 45.

Here is my result:

Next we will need to add a shadow.

Please start another layer Ctrl+Shift+N , I will name it Shadow choose Elliptical Marquee Tool , draw a shape like this one and fill it with black color

Deselect the layer (Ctrl+D) and go to: Filter>Blur>Gaussian Blur

Add a radius of 8

Here is my result :

Now you will need to create another layer, than pick the Rectangle Tool and create a shape like this one:

Once you have created it, all you have to do is to set the opacity to 15% and to multiply it.

Here is my result:

Next we will continue with the content area:

Create another layer, than pick the Rectangle Tool and creaate a shape like this one:

Add the folowing styles:

The next step and the final one is to add some vectors . I have done these using vectors from http://www.coolvectors.com (exactly this set:http://www.coolvectors.com/Vector-Graphics/Abstract-Vectors.html )

Here it is the result:

The tutorial is almost ready

You will need to populate with some content like I did in this tutorial.

To understand better how the thing are working here, I advise you to download the psd file (where everything is included)

If you want to create a html file from this web layout(psd file) I advise you to watch this tutorial.

At the end I will have another great news.Soon this weblayout will be converted in a wordpress theme, drupal and maybe joomla and it will be posted on this website www.foxtheme.com

Download...