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

How to Create a Web Hosting Layout


For start we will need to create a new document. the size is as always 1000x1100 pixels, and I will create this document with a white background.
I will select Rectangle Tool, and I will create two shapes. For the top shape I will use the following color: #393e43, and for the bottom one I will use another color: #373a3e

Img

Then I will create another shapes like in the following image. Please click to see the full size image.

Img

As you can see I have some layer styles applied to the layers:

Img

Img

Img

Img

With custom shape tool, I will add some arrows. And I will add the same layer style as above.

Img

Now I will create a button, with Rounded Rectangle Tool.

Img

For this button I will add the following layer styles.

Img

Img

Img

Img

This is how my button will look like.

Img

I will set my foreground color to #25272a, and I will create two shapes with Rounded Rectangle Tool. please click on the following image to see the full size.

Img

For both shapes I will add the following layer styles.

Img

Img

Img

Img

This is my result

Img

Over the top shape I will add another shapes, and I will use the same layer styles. here I will create the hosting plans. If you have more than three plans you can create more shapes.

Img

With Horizontal Type Tool, I will add some text, and in the same time I will add some images with some servers. please click on the following image to see the full size image.

Img

I have used the following font: Myriad Pro ( italic )
In the middle of the layout I will add a nice image and another text.

Img

My last step is to create a search box, where your customers will be able to search available domain names. I will use the same layer style I have used for the button.

Img

In the footer of the layout, I will add there another shape ( use the same layer styles as above ), and some text. This is my 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: