Design a Hosting Template using Photoshop

In this tutorial you will learn how to design a Hosting Template Design using photoshop.

Preview:

Hosting Template Design

Step 1:

Let’s start out by creating a new file. I used a 1000×700 pixels canvas set at 72dpi, and I filled my background with #FEFFE0 color shade. Now in a new layer draw a long brown rectangle with #2F0B00 color shade and 1000 x 58 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the long rectangle layer.

Result:

Step 3:

Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, smooth and white color shade. In a new text layer type out your navigation links with spaces between each link.

Step 4:

Now set the font family to Brush Script MT, 36 pt, strong and white color shade. Then type out your website name.

Step 5:

In a new layer draw a large rectangle with #F1F2D5 color shade and 1000 x 278 px dimensions on center of your template. Then under Layer Style(Layer > Layer Style) add a Drop Shadow and Inner Shadow blending options.

Result:

Step 6:

Now grab the Monitor Design here then insert it into the center of your template.

Step 7:

On the top center of your template add a ‘Why Choose Us’ section. First draw a red rectangle in a new layer then add the section title in a new text layer. Below the red rectangle add the features.

Step 8:

Create a new layer then draw a rounded rectangle with #1E1E1E color shade and 147 x 52 px dimensions. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Result:

Step 9:

Create a new layer then draw a large white rectangle with 318 x 260 px dimensions.

Step 10:

Now add the text for the reseller host package.

Step 11:

Add two more content boxes for two hosting packages.

 

Step 12:

Make a new layer set and name it Footer. In a new layer draw a large brown rectangle with #170500 and 1020 x 100 px dimensions. Then in a new layer draw a smaller rectangle with #3D0E00 color shade and 1020 x 30 px dimensions.

Step 13:

With the Horizontal type tool add your navigation links on the smaller rectangle. Then add your copyright information on the brown rectangle space.

Results:

Hosting Template Design.

>

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

{ 3 trackbacks }

Photoshop Tutorials » Design a Hosting Rack using Photoshop
March 11, 2009 at 2:40 am
Ouech.net » Blog Archive » Design a Hosting Rack using Photoshop
March 30, 2009 at 5:04 pm
Photoshop Tutorial: Trendy Monitor Design | Photoshop Tutorials
May 19, 2009 at 11:06 pm

{ 2 comments… read them below or add one }

psaddict March 2, 2009 at 5:00 am

Added to psaddict.com

VA:F [1.9.17_1161]
Rating: 0.0/5 (0 votes cast)
VA:F [1.9.17_1161]
Rating: 0 (from 0 votes)
Murray March 2, 2009 at 7:20 am

Excellent, I shall try it when I get home from work.

Love these things, really helps me learn :)

VA:F [1.9.17_1161]
Rating: 0.0/5 (0 votes cast)
VA:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Leave a Comment

Previous post:

Next post: