Design an impressive web hosting layout

GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Design an impressive web hosting layout

This web hosting template is the best solution for those who want to create a web page for representing web hosting company of any kind.
No matter what kind of hosting service your provider grants , free and low cost web hosting or small business and other types of ecommerce web hosting you can create your own hosting business by following this easy to follow Photoshop tutorial.

Preview full size layout

View all VIP Resources and Register to Download ALL VIP Resources

Let’s start this hosting layout tutorial with a new document with the following size: 960 x 900 pixels. For this layout I will use the following color for the background: #2f2617

With Rectangle Tool I will create another shape, with the following color: #20190f and I will place the shape like in the following image:

I will create another shape and I will place it like on the top of the previous one.

I will add the following layer styles for this orange shape

If you are serious about designing, then apply for a VIP account, and you will be able the following set of Gradients: 27.000 Gradients

The gradient from above was from that pack.
With Rectangle Tool you will need to create another shape. I will use this shape to create a shadow under the header of the layout.

Duplicate the shape, and change the color to black. Place the black shape under the original one, and go to Edit > Transform > Perspective. With Move Tool drag the left right corner of the shape to the right

After you press on Enter to apply the changes, you need to go to Filter > Blur > Gaussian Blur. Feel free to use any value you want.

And this is my result

With the same technique I will create the same effect on the footer of our hosting layout. You can click on the following image to see the full size hosting layout.

With Rectangle Tool I will continue to work on my navigation bar at the top.

For this navigation bar I will add the following layer styles:

I will create now a new layer on top of all layers and I will create a 1 pixel line with Pencil Tool (if you want to create the line perfect horizontally then you need to hold down the shift key)

You can change the blending mode for this layer to overlay

Now I will select Rounded Rectangle Tool, and I will create seven shapes. Please click on the image to see better how I placed the shapes.

I will add the following layer styles for all these shapes

This is hosting layout looks like. Click on the image to see the full size image.

On the left side of the layout I will create a black shape, and I will reduce the opacity to 30 %. The same I will create also on the right side. I want to create a 3D look for this hosting layout.
With Rectangle Tool I will create another shape where I will place the logo with Grafpedia. As you can see it is the same layer style as we have used on our navigation bar.

I will add some text, and on a new layer I will draw a thin line on top of the shape. To create a new layer press on CTRL+SHIFT+ALT+N) then with Pencil toll I will make the line.

I will use Horizontal Type Tool to write some text

Now I will add some shape with Rectangle Tool

For some shapes I will add the same layer styles I have used for the navigation bar:

This is my result

I will create a new layer on top of all layers (press CTRL+SHIFT+ALT+N) and then with Pencil Tool I will create 2 thin lines

I will change the blending mode for this layer to Soft Light, and then with Eraser Tool (and with a smooth round brush) I will delete the left and the right part of the white lines.

The same I will make for the other 2 boxes. Now I will move forward to add a nice shadow. For this I will grab my Ellipse Tool, and I will create a black ellipse under the first box with the “business plan”

I will go to Filter > Blur > Gaussian blur, and I will use a random value between 4 and 7. Please note: if you will be asked to rasterize the shape press on yes (or OK)

Be sure you have this layer selected, and then press on CTRL+J to duplicate the shadow. With Move Tool you can place the shadow on the other boxes.
The same shadow you can add under the orange shapes too

I don’t like the top part where I placed my logo. I think I will add there a shadow. I will not explain how I made that shadow. I am sure you will get the idea.

My final step is to add some stock images with a 3D server, and some logos on the bottom of the layout.

Want to download?

If you want to download this layout please apply for a VIP account. For a small fee you will be able to download all our premium resources (PSD files, vector files, brushes and textures). To see a full list of what you can download please visit our VIP Wall. Over 30.000 items are waiting for you.

Download hosting-layout.zip OR Subscribe now to a VIP account

Responses to “Design an impressive web hosting layout”

Johny 27.08.2009 um 2:29 pm
what kind of monster would need 4TB storage :O
Nardyello 28.08.2009 um 1:22 am
Very nice design. It flows very well and the bright colors really call attention to the website name, navigation, and low prices.

The only thing that I feel would need a change would be the background color for “Flexible Hosting Plans…” The black on orange doesn’t look so smooth. Maybe if you had picked the same orange background and white font color it would look nicer. Not sure if it would make it look better, but it would probably make the color selections flow nicer.

But overall, sleek, smooth, and attractive site design.
John 28.08.2009 um 1:32 am
I am impressed about how often you post this high quality tutorials. All tutorials are unique an i am impressed about the difference between tutorials.

Your website is very new but it is on the top 3 websites i read every day.

This tutorial is great. I really want that pack with 27.000 gradients. i find it very difficult to match the colors when i create a website. I will apply for a VIP account in a few minutes.

Thanks Grafpedia
John 28.08.2009 um 5:53 am
I am impressed about how often you post this high quality tutorials. All tutorials are unique an i am impressed about the difference between tutorials.

Your website is very new but it is on the top 3 websites i read every day.

This tutorial is great. I really want that pack with 27.000 gradients. i find it very difficult to match the colors when i create a website. I will apply for a VIP account in a few minutes.

Thanks Grafpedia
Caleb 28.08.2009 um 10:56 am
Very nice looking layout. I used similar colors on my website. As always great tut. Thank for the info.
Murray 28.08.2009 um 8:54 pm
I like the design, the orange and brown mixes pretty well together. The only thing I don’t like is the footer, just because it sticks out a bit, otherwise it’s awesome
Tracey 28.08.2009 um 10:55 pm
Very very nice. I particularly like the use of bright orange line on top of bands. Thanks for the inspiration today
tirath 29.08.2009 um 3:49 am
Awesome web layout with nice step by step tutorial
Thanks so much
I learn so much from you
Your all web layouts tutorials are valuable for us
Please keep them coming
God bless you
X 29.08.2009 um 4:33 am
Layout tutorial of the year:)
Very well
Clay Jackson 29.08.2009 um 11:54 pm
I love this style. Thanks for taking the time to post this. I definitely appreciate it.
Flex developer 1.09.2009 um 6:12 am
Very good lesson )) Thanks
anngarson 4.09.2009 um 6:01 am
This lessons really helpful to decorate and make more attractive our web hosting layout.
Nice lessons.
Dzinepress 9.09.2009 um 3:51 am
that’s really amazing design with great tips and tricks. thanks
adri_rory 15.09.2009 um 2:19 am
Very good tutorial ! Thanks !
risingsun 18.12.2009 um 4:04 am
Very nice… i just finished this tutorial… I’m surprised it went so quick and easily… Damn i want more..
Heinrich 9.02.2010 um 3:51 am
I would like to thank you so much, i learned so much in this this is the very first tutorial i have been able to follow this well. please continue with your tutorials!.

Thanks, -heinrich.
Web Design 28.04.2010 um 9:13 pm
Impressive indeed thank you for sharing
Matilda Mitchell 24.05.2010 um 10:00 pm
Does anyone know of a cheap but reliable web hosting company?”’
bishua 25.06.2010 um 2:32 am
very beautiful design！！
mohad aladi 15.07.2010 um 11:21 am
Thanks for this beautiful explanation
Greetings to you Mohamed
Sean Perry 2.08.2010 um 10:20 am
there are many webhosting companies these days and most of them are overselling their products`~.
Tyler Clarke 29.09.2010 um 12:59 pm
i always look for reviews about my webhosting server, if they have great review then i choose them`,’
Diesel Engine 6.11.2010 um 11:13 am
Its amazing how simple it is to make a good looking template , i dont think it will take more than 2-3 h to make it from scratch.
Britta Marzigliano 2.05.2011 um 10:25 am
Woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between superb usability and visual appearance. I must say that you’ve done a amazing job with this. Additionally, the blog loads super fast for me on Opera. Outstanding Blog!
Sharon 30.05.2011 um 6:48 am
Nice layout, I like the colors chosen.
series tv 28.09.2011 um 5:22 am
Might you take the time to tell me what social sharing plug-in you utilize on your web blog ? I like it.

Trackbacks

Subscribe for free to the grafpedia’s newletter and get all updates and exclusive free graphic resources every week !

This program is open for all webdesigners, it's easy : send us your best works in a .psd or .ai file format, and if our team select it, we will give you money for it and your work will be on Grafpedia…