Webmaster-Designs.com

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

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

Bad Website Designs

admin — Wed, 01 Jul 2009 18:50:14 +0000

Designing and producing a website is a creative endeavor, and it takes a lot of skill to produce a website that is appealing, easy to use and informative, however as you scan through the Internet there are quite clearly some people out there that have absolutely none of the necessary designing or color matching skills necessary to create a website that does not offend to the eyes and cause severe headaches – here are few examples of bad website designs .

Blinding color schemes, annoying flashing lights, data overload and dizzying geometric patterns that can only have been masterminded by a crazy person litter the websites of the daft and inept, and if the graphics alone weren’t bad enough some of them also have scary robotic voice overs that actually send creepy shivers down your spine.

In this day and age where web hosting services offer a vast number of attractive pre-designed templates to suit any kind of personal or business need, there is simply no excuse for websites that are so poorly designed that even experienced website users cannot work out how to navigate around them, or designs so awful and disturbing that you just want to click away from the site as soon as possible so that you stop feeling nauseous.

Just get your sunglasses out and have a look at this one http://www.paperrad.org/ to see what I mean, personally I can’t stay long enough here to work out what this website is actually for, but the flashing psychedelic dog heads are certainly very memorable (especially as they have been burnt onto your retinas).

If you can bear to stay long enough on a bad website, and if you can find anything that resembles a ‘Contact Us’ section send an SOS to the administrative team alerting them to the fact their website seriously sucks, and point them in the direction of a web design manual. You would be doing them a favour in the long run.:)

Related Tags

bad website designs ,bad website examples ,bad websites examples ,bad color websites ,bad websites designs ,bad website ,bad color website ,websites with bad color ,bad colour websites ,bad examples of websites ,websites with bad color schemes ,examples of bad websites ,bad color schemes ,bad website color schemes ,bad website example ,websites with bad design ,bad color design ,bad color scheme ,bad colored website ,bad website colors

Basic Webpage Layout and Design

admin — Mon, 27 Apr 2009 19:02:21 +0000

Fundamentally a website is designed to carry information, whether this be about product, services or subject of interest, and so it should be functional, easy to read and appealing. Design and layout should then focus on getting the information across quickly and efficiently, as any website that looks overcrowded and hectic will put viewers off.

Flashing and scrolling text, animation and auto loading sounds all seem like a good idea at the time, but they can be very irritating to experienced website users, who just want to know what your website is about, and whether it has anything of interest to them. Keep it simple and leave out the gimmicky animations and sounds – industry testing has shown that visitors are more likely to click straight out of websites using these methods immediately, without bothering to read any of the content.

Pop Ups – pop ups carry a significant security risk, and for that reason most people have them blocked or turned off in their browsers. Avoid using them, as you will just annoy any visitors and distract them from what they came to your website for in the first place.

Advertising – this is a good way to make some cash from your website, but try and keep it to a reasonable level, and balance it with the content. Websites should be looking at a ratio of around 80% content, 20% advertising, and this should allow you to create and interesting, and profitable website. For example East of the Web (www.eastoftheweb.com) has some subtle, effective advertising, and by keeping it restricted to the top section of the website it is visible, without being intrusive:

Image Backgrounds – the point is to keep your website simple and easy to read, and image backgrounds are no good for this, creating a confusing, amateurish look, which overwhelms the text and may also cause slow loading times. If you are going to have a background, use a plain colour, leaving any design logos or images in the to the headers and borders. Successful professional websites do this so why not you!

Journalism.co.uk example:

In short – professional web design improves any website and brings better ROI

Related Tags

best webpage layout ,webpage layout ,webpagelayout ,design ,what is layout & design in journalim ,advert layout basics ,basic company webpage layout example ,basic designs ,basic ewbpage design ,basic layout and design ,basic layout design in journalism ,basic layout for a website ,basic layout of a website ,basic web design layout ,basic web layout examples ,basic web page layout ,basic webpage design ,basic webpage design packages ,basic webpage layout ,basic webpage layoutr