Disclaimer

This layout was created for education purposes ONLY. There will be no resell or any type of reuse of the layout without Ed’s consent. But that does not mean you may not learn the skills we are teaching you today from this tutorial to create your own webhosting layout to sell or use.

Final Product

Creating a Webhosting Layout Design Final Product

Downloads

Source File not yet ready

Tutorial

Create a New Transparent Document. Set the sizes to 778 x 500. The height of the canvas is optional but for my tutorial, I used these numbers.

Transparent Canvas

Use the Fill Tool to fill () the Canvas with white. Create a new layer and name it “Top Bar”. With the Rectangular Marquee Tool () and the “Top Bar” layer selected, create a selection around 10 pixels high and with the full width of the canvas. Use the Gradient Tool () and fill the selection from top to down with the Foreground color set to: #384C61 and the Background color set to: #53708E.

Click On Image Above to See The Full Version!

Create a New Layer and name it “Header Bottom”. Once again we use the Rectangular Marquee Tool () and make a selection that is around 80 pixels high and full width of the canvas. Then using the Gradient Tool () we fill in from top to bottom again with foreground color set to: #0084FF and background color set to: #42BEF9. Press Control+D or from the top menu Select > Deselect to deselect the selection. Then with the Move Tool () move the Rectangular gradient box that we just created one pixel under the top bar we created in the previous step. After this step your image should look somewhat like:

Click On Image Above to See The Full Version!

This step is very much like the previous step where we start off with creating a new layer again and naming it “Hearder Top”. With the Rectangular Marquee Tool () and make a selection that is around 50 pixels high and full width of the canvas. Then using the Gradient Tool () we fill in from bottom to top this time with foreground color set to: #0084FF and background color set to: #42BEF9 (Same as previous step, but gradient from bottom to top). Press Control+D or from the top menu Select > Deselect to deselect the selection. Then with the Move Tool () move the Rectangular gradient box that we just created on top of the previous Rectangular gradient box.

Click On Image Above to See The Full Version!

Starting Fading Images Tutorial

This part of the tutorial uses the techniques taught in the Fading Image Tutorial. This technique is very useful in making header images and collages. In this part of the tutorial, we require the use of the two images below. Both are royalty free stock images downloaded from ComStock.com. Right click on each image and “Save Target As” on both images to save them into your computer to use them in the tutorial.

Right Click on Image and Press “Save Target As” to save onto computer.

Right Click on Image and Press “Save Target As” to save onto computer.

You should have the two images above saved on the hard drive of your computer. First we open those images in photoshop. In the top menu, choose File > Open . Browse for your image on your computer and press Open. With the stock image opened in photoshop, either press Cntrl+A or go to the top menu and press Select > All and select the image. Then either press Cntrl+C or go to the top menu and press Edit > Copy. Then with the stock image copied, we switch back to the template canvas and either press Cntrl+V or go to the top menu and press Edit > Paste. Redo the previous step for the 2nd stock image. After doing the step for both images, your canvas should look like:

Click On Image Above to See The Full Version!

How you position your layers are also a vital part of this tutorial, therefore a screenshot of my layer window with the layer names indicated in the previous steps.

Layer Screenshot

With the layers as the image above, you should have the layers Stock 1 and 2 on top of the “Header Top” layer. With the “Stock 1″ layer selected position it with the Move Tool () so that the Stock 1 image is on top of the “Header Top” rectangular gradient box. With the Stock 1 layer still selected, press on your keyboard Cntrl+G. Your “Stock 1″ image should be cut so that it is restricted to the dimensions of the “Header Top” rectangular box. Repeat the above step for the “Stock 2″ Layer and Image. Position the Globe stock image at around the middle of the canvas and the Man stock image on the right side. Your canvas should look something like:

Click On Image Above to See The Full Version!

After the previous step, your layer window should now look like:

Layer Screenshot

Ok now we get to the interesting part of this tutorial, actually making the stock images fade away . We first have the press and hold the marquee tool on the tool bar. A sub menu should appear and select the Eliptical Marquee Tool ().

Eliptical Marquee Tool”

After selecting the Eliptical Marquee Tool, the tools option menu should appear under the top menu bar. In the Feather field, enter in 10 px.

Eliptical Marquee Tool Options

Now with the “Stock 1″ layer selected (The Globe Layer), use the Eliptical Marquee Tool () and create eliptical marquees around the globe and press Delete on the keyboard.

Fading Globe Image Preview

Fading Globe Image Preview

Fading Globe Image Preview

Fading Globe Image Preview

Fading Globe Image Preview

The above images were the selections I used to fade the image. By pressing delete after each of the above selections we successfully faded the Globe Image. Next up is the “Stock 2″ layer and image. Select the “Stock 2″ layer and like before we use use the Eliptical Marquee Tool () but in the Eliptical Marquee Tool options, we punch in 20 px for the feather field instead of 10 px like before. Now we select the left hand side of the Stock 2 image and press delete. (Note if the image doesn’t fade nicely, you may press delete more than once. Experiment around!)

Fading the Man Image Preview

Both images now are faded, to finish off the effect we turn the Opacity of both “Stock 1″ and “Stock 2″ layers to 33%.

Turning the Opacity Down

Click On Image Above to See The Full Version!

Conclusion

Well, this is the end of the first part of Creating a Webhosting Layout tutorial. Up until now, we have been focusing on the header design of our web layout. In the upcoming parts of the tutorial, we will finish off the header design, and go into the navigation design of our layout. Hope this was a helpful tutorial to you all!