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

Design a SEO Layout


For start i will create a new document with the following size: 1220 x 1160 pixels.

I will select Paint Bucket Tool, and i will fill the document with black.

Img

As you can see from my previous image you will see a brighter area on the top of the layout. That spot was made with Brush Tool ( please use a smooth round brush )

On the top right side i will create some buttons with Rounded Rectangle Tool.

Img

As you can see i have used some different styles for three buttons. Bellow you will find the layer styles :

Img

Img

Img

Img

Under these buttons i will create another shape with Rounded Rectangle Tool

Img

I will use the following set of cloud brushes:

http://www.grafpedia.com/vip-downloads/photoshop-cloud-brushes

On a a new layer i will add some random clouds. If you want the clouds to be aligned perfectly you need to make a selection around the big round shape.

Img

With Rounded Rectangle Tool i will create another shape. This Shape will be used for our body of layout.

Img

Here i will crete another shapes with Rectangle Tool. I will use different colors. In this way i will outline different parts of the layout.

Img

Feel free to use different colors for your layout

Img

Img

On the top of the layout i will create a area where i will add a search form

Img

And i will add some text

Img

In the middle of the layout i will add some text with different size, and colors

Img

On the right side i will add also a nice looking laptop. You will find the vector laptop inside the zip file from the bottom of the layout. You will need to sign up for a ViP membership in order to download the vector file.

Img

As you can see from the next image i will add some thin lines ( 1 pixel lines between the different shapes )

Img

On the right side i will add some text, and with Rounded Rectangle Tool, i will add also a simple round shape.

Img

I will use some stars. You can add these small stars with Custom Shape Tool

Now i will add also a simple image from my personal stock collection

Img

On the bottom of the layout i will use some icons from this set:

http://www.grafpedia.com/vip-downloads/universal-icon-vector-pack

Img

Img

On the footer of our SEO layout i will add a round shape with Ellipse Tool

Img

Then i will go to Filter - Blur - Gaussian Blur. The white shape will be transformed into a nice smooth shape. If you want you can lower the opacity to have the small result as mine

Img

I will add a simple text for our logo

Img

This is final result. I hope you like it.

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: