Creating a professional hosting template

Adobe Photoshop

In this tutorial i will explain how to make a smooth looking template for a hosting company.

Welcome to this tutorial!
In this tutorial i will explain you how to create a Hosting template using Photoshop CS 3.
This is what we will be creating today:

First lets create a new document, my settings:

Width: 765px
Height: 900px
Background Color: White

Thats the basic setting for this template.
Now lets start at the top of the template!

First we need to create the buttons, for the buttons we will use this tool and settings:

Tool

Settings

Now lets draw our first button, anywhere you want.
It should look like this! :) (width: 92px, height: 37px)

Now we need to remove off the top off the image.
But before we can do that we have to Rasterize the layer.
You can do this by clicking your right mouse on the shape in the layer menu:

Now you can edit the shape :)
So grap the Rectangular tool and draw a selection around the top of the shape:

Now click delete! And the top should be removed, and it should look like this:

Now right click the shapes layer and choose blending options:

Now apply a drop shadow and gradient using these settings:

Now the button looks like this! :D

Now lets add some text, like Contact, using Trebuchet MS 12pt, bold text.
I'm using white as font color because that looks the best ;)

Now to make it easier we are going to group this button and then duplicate it.
So select the shape, and the text layer and press CTR-G, or CMD-G(apple)
This will group the layers into a folder, rename the folder to contact.

Now move the button to the top right of the template, and then duplicate the group.

Move the button to the left, and rename it to pricing for example:

Now repeat that step 1 more time, and this time rename it to Home :)

That looks good right ? :)
Ok now its time to add a logo.
I will show you how to create a logo using photoshop's custom shapes.
So get the custom shape tool!

Now from the top navigation bar, choose the circle shape:

Now its time to draw the circle using the shape tool.
Remember to HOLD SHIFT! This is very important! This keeps the ratio good ;)

Now draw a circle on the left side of the template, at the top.
You can use any size you want, but dont overdo it ;)

Thats pretty easy right ;)
Now its time to grab another shape, i chose the Nuke shape:

Now it's time to use a other color! Orange!
So change the shape color to #fc6c2c.
And now draw the nuke shape in the circle, remember to HOLD SHIFT.

That looks good :)
Ok so now we need a name... Well for this example ill use X Hosting.
So get a nice font, i used Trebuchet MS, 30px, Smooth
And Place it next to the icon we just made:

 

Now what you might have noticed at many web hosting websites is that they have this Domain Checker, so visitors just have to enter the domain name they want to buy, and the script checks if its taken or not.
So let's add that to the design.

Use the  Rectangular Marquee tool to draw a inputbox, width about 200px, and height about 20px. When you have the selection fill it white.

When you filled it with white, go to the layer blending options and select stroke.
Now set Size to 1px, Position to Outside and change the color to #c9c9c9:

Now infront of the inputbox add some text like Domain:

 

Ok! The Top Header is finished! Now its time to add a sub-header.
Most of the time this shows you some information about the company or the latest offers, discounts etc..

So grab the Rectangular Marquee tool again, and draw a selection, Width: 100% and Height about 220px. After the , right-mouse the selection and fill it with any color you want, it doesn't matter because where going to apply a gradient.

Now hit blending options and select gradient:

Ok :) Good!
Now its time to add some text, a slogan or something.
Grab a nice font, i use Abadi MT Conden... 30px, smooth
I type "cheap Hosting", using a white color:

Now duplicate the text layer and right click the layer, then click rasterize

Now while you have the text layer selected, go to edit->transform->flip vertical

Now move it a bit down like this:

Now its time to erase a part of the text, so get the eraser and remove about 80% of the text:

Now right click the shape layer and chose blending options.
Now apply these settings:

Looks good right :) ?
Now grab the text tool, and draw a text box in the shape.
I use Trebuchet MS, 12px, #b0b0b0:

And thats finished!! :)
Now its time to start with the page shade.
So grab the Rectangular Marquee tool and draw a box like this below the header:

Now right click and fill it with white (#FFFFFF).
When you have done that, selected the layer and right click it, then click blending options.

This will look like this:

Where almost done!!
The last part is the content place holder.
So lets grab the Rectangular Marquee tool again, and draw a content box ;)
And lets fill it with white (#FFFFFF):

Now right click the layer and hit blending options.
Lets apply these settings:

This should look like this:

Now its time to add some content!

And thats the end of the tutorial!!

I hope you enjoyed it and learned something!

Comments

Creating a professional hosting template has no comments! Be the first and fill in the form!

Leave a comment

Name:
Email:
Message:
Anit-Spam: