How to create a web 2.0 type web hosting template – with psd

admin — Wed, 23 Sep 2009 18:37:16 +0000

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).

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

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:

web 2 0 arrow psd, hosting psd, hosting template psd, undefined, 60 web 2 0 gradient buttons ( psd), rounded box psd, web 2 0 buttons psd, planet hosting template psd, make a web 2 0 button psd, web 2 0 hosting, live chat button psd, chat button psd, web hosting psd, web 2 0 testimonial box PSD, hosting layout psd, hosting plan psd, 24pt psd to web, testimonial box psd, web 2 0 box psd, psd testimonial box

Photoshop video tutorial – Vanishing objects with clone tool

admin — Wed, 12 Nov 2008 03:08:08 +0000

Here I found a nice photoshop video tutorial on creating vanishing objects with photoshop clone tool. Checkout this step by step video tutorial and post your feedbacks.

Click here to view the embedded video.

Related Tags:

vanishing objects photoshop, vanishing objects with clone tool in photoshop, how to vanish objects, photoshop tutorial vanishing objects, photoshop vanish object, photoshop video vanish objects, vanish objects clone tool

Webmaster-Designs.com » Photoshop

How to create a web 2.0 type web hosting template – with psd

Related Tags:

Photoshop video tutorial – Vanishing objects with clone tool

Related Tags: