Simple Web Hosting Design

This tutorial is meant for beginner who has at least some photoshop basic knowledge and would like to start on web design. We’ll not be using any stocks except your company logo and more on the blending options. I hope you enjoyed the tutorial and do let me know if you’ve any comments. Do not claim or sell the layered .PSD file available for download at the end of the post as your own. You may use the reference file, excluding the stock and renders only for personal usage.




Step 1
Open up a new document with 875×610 pixels, white canvas. Create a new text layer and type in your website name and slogan. I’m using Walkway UltraCondensed font, #82bfd5, 48pt, Underline and Sharp for the word LOGO. Make a new layer named “Line Seperator” and do a x1 line selection. Duplicate the layer for the second line seperator.

Step 2
Create a new layer named “Navigation Bar” and make a white 857×39 pixels selection using the rectangle tool. Apply a gradient overlay from #000000 to #ffffff and set the opacity to 4%. Apply the following pattern overlay and stroke.

Step 3
Create a new text layer and add in your first navigation text using Tahoma, 30pt, Crisp and #877373. Make a new layer next named “Link Hover” below the navigation text layer. Make a selection of 74×30 pixels square using the Rectangular Marquee Tool and fill with #15f60a.

Step 4
Make a new layer named “Banner” and make a selection of 857×105 pixels, filling up with #81bed4. Apply inner glow using the blending option, setting the opacity to 45% and size to 24%. Create a new text layer and type in the selling point of your web hosting company. I’m using the ISCOT and 176MKSD font respectively in this case. Make a new layer naming “Button” then create a selection of 186×37 pixels and #2ae02e using the rounded rectangular tool. Apply the following bevel and emboss effect.



Step 5
Next, apply a 1x pixel #000000 stroke effect and set the opacity to 41%. Make a new text layer and add in some button text. The font I’m using here is 176MKSD, 30pt, Sharp and #ffffff. Duplicate the layer for the second button and we’re done with the banner.

Step 6
Make a new text layer and fill in the subtitle text using the Walkway Condensed font and 36pt. Create another text layer and fill in with some content texts from the Limsum generator using Tahoma, Regular, #000000, None and 12pt. Create the third text layer and fill in with dots using the Arial font, Regular, 6pt, #000000 and None.

Step 7
In your layer palette, create a new layer and name it “Hosting Box”. Make a 234×187 pixels square selection using the rectangle tool and fill up with 82bfd5. Apply the drop shadow effect with 3px distance and 1px size, setting the opacity to 44%. Make a new layer named “Tittle Box” and make a selection of 231×41, filling in with #2ae02e. Create a new text layer and type in the subtitle text. The font I’m using here is 176MKSD, 30pt, Sharp and #ffffff. Apply the following outer glow and stroke effect on the subtitle text layer.

 

Step 8
Make a new text layer and fill in with some content texts describing the main features and pricing of your hosting plan. I’m using the ISCOT font, #000000, Regular and 14pt for the PRICING sentence. Duplicate the layers and repeat the instruction from step 7 onward if your web hosting company is offering more than one hosting package.



Step 9
Create a new layer named “Footer” and make a white selection of 857×35 pixels using the Rectangular Marquee Tool. Apply a 1x pixel stroke effect and set the opacity to 31%. Last but not least, make a new text layer and type in your copyright informations. I’ll be using the font Tahoma, 12pt,
Regular, None and #877373 in this example.

Step 10
We’re done for now but you can always complete your template design by adding a live chat button, company logo on the banner and a customer testimonials section.



For PSD Pm Me!