--
Published on Fri, Mar-13-2009 by Dainis

Create Hosting Template in Photoshop


In this photoshop tutorial, I will show you how to create a unique and professional hosting template. This tutorial goes through the steps to create a website header, footer and content area.

You May Be Interested In The Following Posts


Final Image Preview

create hosting template in photoshop

Step 1

Let’s start out by creating a new file. I used a 1000×950 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer set and name it ‘Header’. In a new layer draw a large rectangle with #0097F6 color shade and 1000×130 px dimensions on top end of your canvas. Then in a new layer draw a dark gray rectangle with #202020 color shade and 1000×30 px dimensions below the first rectangle.

create hosting template in photoshop

Step 2

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

create hosting template in photoshop

create hosting template in photoshop

create hosting template in photoshop

Result:

create hosting template in photoshop

Step 3

Now crop an image with a 350×212 px dimensions for the screen. Then under Layer Style(Layer > Layer Style) add an Outer Glow and Inner Glow blending options.

Result:

create hosting template in photoshop

Step 4

In a new layer draw a gray rectangle with #828282 color shade and 395×11 px dimensions below the rectangle design.

create hosting template in photoshop

Step 5

Select the Horizontal Type Tool then set the font family to Arial, bold, 11 pt, none and white color shade. In a new text layer type your navigation links on the long gray rectangle design.

create hosting template in photoshop

Step 6

Now set the font family to Arial, bold italic, 30 pt, smooth and white color shade. In a new text layer type your website name on the header space. Then in a text layer add your slogan with smaller font size.

create hosting template in photoshop

Step 7

On the right end of your header add a section for live support.

create hosting template in photoshop

Step 8

Make a new layer set and name it ‘Content Box’. Now grab the checklist graphic below and insert it into your canvas.

create hosting template in photoshop

Result:

create hosting template in photoshop

Step 9

In a new layer draw a large rectangle with #FAFAFA color shade and 317 x 305 px dimensions on top of the list graphic. Then under Layer Style(Layer > Layer Style) add a Stroke blending option.

create hosting template in photoshop

Create a new text layer then type out your main Features on the content box.

create hosting template in photoshop

Step 10

Create a new layer then draw a long red rectangle with #E20000 color shade and 318 x 21 px dimensions.

create hosting template in photoshop

Step 11

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long red rectangle layer.

create hosting template in photoshop

create hosting template in photoshop

Result:

create hosting template in photoshop

Step 12

Select the Horizontal Type Tool then set the font family to Arial, bold, 12 pt, none and white color shade. In a new text layer type ‘Why Choose Us’ on the red rectangle design.

create hosting template in photoshop

Step 13

Add a content box for your Reseller Hosting Package below the ‘Why Choose Us’ section by duplicate the layer set. Replace the checklist graphic with a hosting server rack design, download it here. Now make a small rounded rectangle with #1E1E1E color shade and 120 x 52 px dimensions below the hosting rack. Then in a new text layer type your price on the rounded rectangle using font Verdana, bold, none and white color shade.

create hosting template in photoshop

Step 14

Now add the Shared hosting package next to the Reseller.

create hosting template in photoshop

Step 15

On the empty space next to the Why Choose Us section add a eye candy graphic for your Monthly special, grab the psd here.

create hosting template in photoshop

Step 17

Make a new layer set and name it ‘Footer’. In a new layer draw a large rectangle with #202020 color shade and 1000 x 150 px dimensions below your Hosting Packages. Then in a new layer draw a black rectangle with 1000 x 30 px dimensions between the white space and the footer background.

create hosting template in photoshop

Step 18

Create a new layer then draw a 1 px line with #383838 color shade right below the black rectangle and by the top end inside the black rectangle.

Select the Horizontal Type Tool then set the font family to Arial, regular, 11 pt, smooth and #7E7E7E color shade. In a new text layer type your phone support number on the right end of the black rectangle.

create hosting template in photoshop

Step 19

In a new text layer type out your navigation links using font Arial, bold, 14 pt, none and #0097F6 color shade. Then in another new text layer type your copyright info using font verdana, regular, 11 pt, none and #CBCBCB color shade.

create hosting template in photoshop

Results: Hosting Template

create hosting template in photoshop

Download Psd file

Advertisement


Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.



     Hostgator Coupons | ThemeLabs | MaxReview theme | Review themes

Recommended Links



Wordpress review theme