Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Hosting Layout

Create an advanced professional layout for your hosting company, 100% expandable with a 100 steps to follow.

Step 61

Here is what you should have!

Step 61 diagram

Step 62

Now make a new layer, using the styles and methods used to create the main big border, create a similar border as shown below.

Step 62 diagram

Step 63

Now grab the pencil tool and draw a thick line in the middle as shown below.

Step 63 diagram

Step 64

Now arrange the layer so its at the bottom of the layers pallet. "Layer > Arrange > Send to Back".

Step 64 diagram

Step 65

Now make a selection similar to below and make a new layer. Fill the selection in with white. Then bring up the blending options.

Step 65 diagram

Step 66

Now make a selection similar to below and make a new layer. Fill the selection in with white. Then bring up the blending options. Gradient Overlay and then press OK.

Step 66 diagram

Step 67

Here is what you should have:

Step 67 diagram

Step 68

Make a new layer, CTRL click the gradient layer, grab the rectangular marquee tool, hold ALT and form a similar selection like below.

Step 68 diagram

Step 69

Fill the selection in with white, set the mode to "Overlay" and opacity to "31%". (enjoy step 69 :).

Step 69 diagram

Step 70

Now fill out the box with various hosting information, try and find an image of some sort of server to give the box that "professional look".

Step 70 diagram

Step 71

Now we need to produce 2 more boxes, (business, extreme). Using your knowledge of duplicating duplicate the first box and edit the text and so on. Sorry if i'm going too fast but nothing really needs explaining that well, just allot of duplicating, however if you keep your layers in layer sets then this will be done 10x quicker.

Step 71 diagram

Step 72

Make a new layer (above the first background layer - very bottom), make a selection like below, fill it in with the colour #3E4663. This will leave you with a nice background for the packages. Then press CTRL+D to deselect.

Step 72 diagram

Step 73

We now need to code the packages into our layout in Dreamweaver. We first need to save each package box as a separate image. Make a selection for the first package, zoom in to keep to the borders and to make a more exact selection.

Step 73 diagram

Step 74

Hold "Shift + CTRL + C" to copy the box. Then "CTRL + N" to start a new document (keep the default size). Then press "CRTL + V" to paste the box into the new document.

Step 74 diagram

Step 75

Now simply "File > Save" and save the file (name it starterpackage) either a .gif or .jpg into your layout images folder. Do the same process for the other 2 boxes.

Step 76

Open up Dreamweaver and your current layout. Click in the left column and set the background as shown below to: #454E6D

Step 76 diagram

Step 77

Insert your package images in the left column. We now need to add a dotted border. The easiest way to do this is to right click save target on this link and save the image in your images folder. YOU MUST DO THIS. Then find the below code, edit it to the code I highlighted.

Step 77 diagram

Step 78

Save and preview in your browser. This is what my layout looks like:

Step 78 diagram

Step 79

Now go back to your Photoshop document and remember to save it. Make a new document, width: 476, height: 27 and a white background.

Make a new layer and fill the canvas in with any colour and then bring up the blending options. Gradient Overlay:

Step 79 diagram

Step 80

Stroke (colour: #242A3C) and then press OK.

Step 80 diagram

Tutorial comments

26.07.2009 -

Ricky_ACM says …

Fantastic!!!

25.07.2009 -

SkullTraill says …

Totally awesome!

10.02.2009 -

theof says …

Excellent!

20.01.2009 -

mifi05 says …

very very nice

07.12.2008 -

Xylar says …

I LOVE this tutorial. congratulations and THANK YOU for ALL your hard work. My Web address is: smashbrossaga.uuuq.com

View all user comments for this tutorial.

Tutorial statistics

Date added:
11.02.2005
Author:
Zymic
User rating:
5/5
Rate tutorial:
Total views:
66533
Total comments:
19

Advertisements