How to create a web 2.0 type web hosting template – with psd
A web hosting website should always look professional and unique. In this tutorial we will learn how to make a web 2.0 type web hosting template layout in Adobe Photoshop.
The tutorial is explained step by step and with images so, that you can understand it easily. This is a comprehensive tutorial guide and will take atleast 2.5 mb of your bandwidth to open this tutorial
This is final look of the tutorial.
Step1:
Create a new document (File -> New)
Width -> 1200px
Height -> 1200px
Background Contents -> white
Step 2:
Now we will define some equal margin in both left and right side. I will leave 150px margin from both side. To create the guides, go to View -> New Guide, in the box select vertical and enter 150px (as shown in below image).
This will create a left margin line.
Repeat the process for right side margin line.
View -> New Guide
in the box again select vertical and enter 1050px (as shown in below image).
in the box again select vertical and enter 1050px (as shown in below image).
We have now 150px margin both the sides and our center part if of 900px. Everything that we will create will be in center region.
Step 3:
Create a new layer (Layer -> New). Select “Rectangle Tool” and black color. Draw a rectangle shape from top of about 180 px and covering complete width.
Step 4:
Now we will create menu buttons. Select “Rounded Rectangle Tool” and create few buttons of equal width with following specifications.
Color: #212121
Radius: 5px
Step 5:
Now add some text on these buttons.
For active link:
Font: Napapiiri
Size: 20 pt
Color: #ffffff
For General Link:
Font: Napapiiri
Size: 20 pt
Color: #6bb00b
Step 6:
Now we will create live chat icon. Select “Rounded Rectangle Tool” and create a live chat button in right side with following specifications.
Color:; #666666
Radius: 5px
And apply following layer style from blending options.
Our layout looks like this.
Step 7:
Press and hold “ctrl” key and click on the live chat button layer. This will select only live chat button.
Now, Go to:
Select -> Modify -> Contract -> Contract By 1px
Select “Rectangular Marquee Tool”. Press and hold “Alt” key and select lower half of live chat button.
You will find that only upper half of the button is select.
Step 8:
Create New Layer (Layer: New). And fill the upper half with white color and set:
Layer Mode: Soft Light
Opacity: 70%
Fill 70%
Step 9:
Type “Live Chat” on upper part of live chat button with following specification:
Font: Arial Rounded Bold
Size: 24 pt
Color: # c7c3c1
Apply following layer style to text from blending options.
The live chat button looks like this:
Now create another layer, and type “online: just below the text “Live Chat”.
Font: FrancophilSans
Size: 18 pt
Color: # 6bb00b
Step 10:
Now we will add logo, website name. Create new layer (Layer-> New -> Layers..) and select “text” tool. Type your website name in left side and above menu.
Font: FrancophilSans
Size: 60 pt
Color: # 6bb00b and # a5a4a4
Step 11:
Press and hold “ctrl” key and click on the text layer. This will select only the webhost text. Select “Rectangular Marquee Tool”. Press and hold “Alt” key and select lower half of the text. On releasing mouse, you will find that only upper half of the button is select.
Create new layer (Layer -> New -> Layers) and fill the selection with white color and set:
Layer mode: Soft Light
Opacity: 75%
Fill: 75%
Step 12:
Select “Rectangle Tool” and set color to #6bb00b draw a shape of about 250px height and of complete width.
Step 13:
Create new layer. Select “Rounded Rectangular Tool” with radius 5px and color #000000
And draw a shape from left margin as shown in below image.
Press and hold “ctrl” key and click on the “Rounded Rectangular shape”. This will select only the runded shape.
Now, Go to:
Select -> Modify -> Contract -> Contract By 3px
Create a new layer. Select gradient tool and set following color.
Foreground color: # 3c3d3b
Background color: #000000
Press and hold “Shift” key and drag mouse from topm to bottom of selection.
Step 14:
Select “Text” tool and type “User Login” with following specifications.
Font: Calisto MT
Size: 18 pt
Color: #ffffff
Step 15:
Select “Rectangle shape” and set color to # 9cbd76 and draw two shape as shown in below image.
Step 16:
Select “Text” tool and type “Username:” above first box and “Password:” above second box.
Font: Arial
Size: 18 pt
Color: # 6bb00b
Step 17:
Create new layer. Select “Rounded Rectangular tool”, set color to # 73c600 and draw a shape left to login box as shown below.
And apply following layer style in blending options.
Our layout looks like this:
Step 18:
Select “Text” tool and type some text in the box. Use different color combination and font to make it attractive.
Step 19:
Select “Rounded Rectangular tool” and draw a shape below the text as shown. Use following specification for shape:
Radius: 10px
Color: #ffffff
Apply following layer style.
Step 20:
Select “Text” tool and type “Search domain name…” in the box we created in last step.
Font: Bookman Old Style
Size: 18 pt
Color: #000000
Step 21:
Select “Rounded Rectangular tool” and draw another shape to the left of search box shape. Use following specification for shape:
Radius: 10px
Color: # fc7206
Step 22:
Right click on the layer that we created in step 20 and select “Copy Layer style”. Than right click on the layer that we created in step 21 and select “Paste layer style”.
Press and hold “ctrl” key and click on the layer that we created in step 23. Than go to:
Select -> Modify -> Contract -> Contract By 1px
Now Select “Rectangular Marquee Tool”. Press and hold “Alt” key and select lower half. After releasing mouse, you will find that upper half is selected. Create new layer and fill the selection with white color. And set:
Layer mode: Soft Light
Opacity: 50%
Fill: 100%
Step 23:
Select “Text” tool and type “Start” on the shape.
Step 24:
Select “Rounded Rectangular tool” and draw another shape. Start the shape from left margin. Use following specification for shape:
Radius: 5px
Color: # f3f2f2
Apply following layer style from blending option.
Step 25:
Create another rectangular shape above the shape that we created in step 24. It should look like a button. Please see the below image.
After creating the shape, apply following layer style from blending options.
It should look this:
Step 26:
Select “Text” tool and type your plan name on the button shape..
Font: Cambria
Size: 18 pt
Color: # 3b6600
Step 27:
Again select “Text” tool and type price of the plan in left of plan name.
Step 28:
Select “Custom shape” and set color to # 6bb00b. Add some arrow like shape as shown below.
Add plan details after every arrow shape.
Step 29:
Now we will add two buttons below the package details. Select “Rounded Rectangular shape” and use following setting:
Color: #fc7206
Radius: 5px
Draw a shape below the package details.
Press and hold “ctrl” key and click on the button layer. This will select only button layer.
Now, Go to:
Select -> Modify -> Contract -> Contract By 1px
Now Select “Rectangular Marquee Tool”. Press and hold “Alt” key and select lower half. After releasing mouse, you will find that upper half is selected. Create new layer and fill the selection with white color.
And set:
Layer mode: Soft light
Opacity: 30%
Fill: 100%
Step 30:
Repeat step 29 and create one more button.
Step 31:
Select “Text” tool and type “Details” on first button and “order” on second button.
Step 32:
Repeat steps 24 to step 31 and create two more package, like below image.
Step 33:
Create a new rectangular shape same as we have created in step 24 in right of packages, as shown in below image.
Step 34:
Use custom shape and text tool to enter your webhosting feature like, 24X7 Support, cPanel, Fantastico, 99.9% Uptime etc as shown in below image.
Step 35:
Select “Rounded Rectangular shape”, set radius to 5px and color to # dcdcdc
Make a shape from left margin to right margin. And apply following layer style from blending options.
Our layout looks like this.
Step 36:
Add another rounded rectangular tool over the shape that we created in step 34 with radius 5px and color # 6bb00b.
And add following later style.
Step 37:
Press and hold “ctrl” key and click on the layer. This will select only the rounded rectangular shape that we created in step 36.
Now, Go to:
Select -> Modify -> Contract -> Contract By 2px
Select gradient tool and set foreground color to white, also set as shown in image.
Create a new layer and drag mouse from upper selection to lower selections.
Now, select “text” tool and type “Why Choose Us” on this rounded shaped.
Font: Castorgate – Distort
Size: 30 pt
Color: #000000
Step 38:
Select text tool and add 10 good points about your web hosting service.
Font: Castorgate – Distort
Size: 30 pt
Color: # 504f4f
Step 39:
Again select “Rounded Rectangular Tool” and set following:
Radius: 5px
Color: # a2d226
Draw two shapes as shown below and apply following layer styles.
Step 40:
Add some custom shapes and text on both rectangular shapes like “Our Awards” and “Testimonial”.
Step 41:
Now we all add footer. Again select “rectangular rounded tool”.
Radius: 5px
Color: #000000
Draw a shape from left margin to right margin. And add some text on the shape.
Text color: #4b4b4b
Our web hosting template is ready.
PS – if you want a PSD if this template, contact me Contact Us with the reason why you want it and can provide some donation or link back or not.
Hope you enjoyed it. 
Related Tags
- 60 web 2 0 gradient buttons ( psd) ,make a web 2 0 button psd ,web 2 0 arrow psd ,24pt psd to web ,hosting layout psd ,hosting psd ,hosting template psd ,arrow 2 0 psd ,arrows-ffffff psd ,best 2 0 hosting templates psd ,black web 2 0 template [psd] ,button 2 0 light psd ,button template round psd ,button web2 psd ,chat button template photoshop ,chat live buttons templates ,click for details button psd ,contract template psd ,create hosting psd template tutorial ,create hosting template
Nobody seems to have posted yet. Why not be the first!?