Professional Web Host Layout

This is no doubt my longest tutorial yet, so I suggest you save this every few minutes incase you loose it. (ie. computer freeze, which everyone hates)

1. First of all, you will need to find all of the images that you are going to use for your layout. This way, creating your page all in Photoshop will go much faster. For the purpose of this tutorial for a web host layout, I'm using pictures from multiple google image searches. When creating the "real thing", I would avoid using other people's images if possible. If you do for some images (ie. servers, which is popular), please post its source on your page.

Click here for the images I'm going to use.

2. Create a new 725x600 image in photoshop with a white background.

3. Create a new layer. Now, using the rectangular marquee tool, create a selection filing the entire image while leaving a small area on both sides. Fill the selection in white.

(Click each snapshot for a larger view.)

4. Right-click on the layer and select Blending Options. Use the following settings for Drop Shadow and Stroke.

5. Find the header that you are going to use, and place it in a new layer. Move the image all the way to the top and center it inside the box you just made. Right-click on this layer and select Blending Options. Use the settings in the image for drop shadow.

6. Now is a good time to add your text to your top banner. I added the name of the host and navigation in the bottom right hand corner.

7. Click on the layer that includes the box that you made in step 3 and create a new layer. Now, using the rectangular marquee tool, make a selection large enough to place the hosting plans and server picture in. Fill the selection in white and right-click on the layer and choose Blending Options. Use the settings in the image for a Drop Shadow. You will notice that the top side is not filled in black, therefore move the box up underneath the header to hide it. If you don't understand, look at the picture.

8. Duplicate the current layer. Move the layer below the box made in step seven. Use the settings in the images for Drop Shadow, Outer Glow, and Color Overlay.

9. Using the Rectangular Marquee tool, create a large box next to the two boxes you have already made. Select Drop Shadow again. Move the box up underneath the header as done in step 7.

10. You will notice there is a small line at the bottom of your new box that shouldn't be there. So, magnify your image to 200% or larger and create a new layer. Create a selection around the line using the rectangular marquee tool. Fill the selection in white to get rid of the extra line.

11. Find the picture of the server that you are going to use and place it in each of the two small boxes that the webhosting plans will go in. Make a new layer for each.

12. Pull out the supported by images(php, linux, MySQL, and apache). Place them anywhere in the layout you want. I chose to place them in a row along the bottom.

13. Add some text for the plans and you're almost done. All you have to do is slice it up. (If you don't know how to slice images, see the image slicing tutorial.)

Why You Should Have Your Own Domain Name
There are many services on the web where you can create your own web site and host it for free. That may be fine for a personal page, but if you have a business or service that you want to provide, a free web site just may not be the way you want to go for a multitude of reasons. We are going to tak...
8 Things a Web Host Must Do
A web host can make or break your web site business. The success of any business online is as much dependant on its web host as on its business plan.
Search Engine Optimization
Browsing through Yahoo! Once I came to know that people highly search for Search engine optimization , better PageRank in Google etc. Infact I too was one of them , I would like to state some common tips I came across for increasing page rank and better listing in Search Engines.
Achieving Differentiation With Your Website
Internet Marketing is not a miracle marketing strategy
Building Your First Web Site?
Creating your own site can be a satisfying experience. Here are some tips to help get you up and running...
Professional Web Host Layout
This is no doubt my longest tutorial yet, so I suggest you save this every few minutes incase you loose it. (ie. computer freeze, which everyone hates)
All about Website Designing and Web Hosting
If one is looking for an efficiently designed web site at cheap, bargain basement prices, one may find this as close as his/her web-hosting provider. There are many web hosting companies offering web design services also, for their customers at very low prices.
Web Hosting Shopping Guide
What is Web Hosting?
Web hosting means a web host provides the storage, connectivity, and services necessary to serve files for a web site
Should You Self-Host Or Use A Web-Hosting Company?
Web-hosting companies fees have dropped dramatically over the past couple years. Only rarely does it make sense for a small business to host their web site on their own computers. Because web-hosting companies d...
How to Pick a Hosting Company
Choosing a hosting company can be a daunting task especially since there are so many hosting companies trying to lure you in with the best hosting package at the cheapest price. But before you jump at that cheapest deal you find online, there are several things consider.