Learn how to create a webhosting layout from scratch! In this part, you will be focused mostly on the design of the header of the layout. Part 1 of 3
Written By Ed
8/21/2006
Product: 
Disclaimer:
This layout was created for education purposes
ONLY. There will be no resell or any type of reuse of the layout without WebDevTutorial'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.
Background Info:
This tutorial is very extensive and consists of many techniques and photoshop skills. Therefore it is definately not suitable for Beginner or Novice photoshop users, but I will try my best to explain each step in detail. I have split this tutorial into 3 parts, each creating a part of the whole layout itself. Also all the techniques which are used to create this layout are from other tutorials featured on WebDevTutorial.com. Therefore you can either press on the link to learn that technique first, or follow the whole tutorial step by step to finally recreate the product layout. Once again, the layout created for this tutorial is for education purpose only. Please read the disclaimer if you haven't yet. Thanks alot and I hope this tutorial will be helpful to you all. Ed
Downloads:
Product Source File **Not Yet Read**
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.
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!
-- Begin Fading Image 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.
This part of the tutorial requires 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.
Continuing on with the tutorial, 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 Hosting Layout 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.
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:
Ok now we get to the interesting part of this tutorial, actually making the stock images fade away :smile:. 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 (
).
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.
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.
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!)
Both images now are faded, to finish off the effect we turn the Opacity of both "Stock 1" and "Stock 2" layers to 33%.
Congratulations, if you have followed the tutorial up to here, you should have successfully faded your images. The final product should look like:
Click On Image Above to See The Full Version!
-- End Fading Image Tutorial --
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!
