10.02.2009 -
Excellent!
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 41
We will now slice the header, although this will be the only thing we will slice on the layout as the rest of the layout will be hand coded to allow 100% stretchable content. Grab the slice tool (press k on keyboard) and slice the separate parts of the image, follow my below image carefully though no need to be exact to the pixel however you need the right slices in the right places (8 slices).
Step 42
Now go to [file > save for web], use the below options for each slice.
Step 43
Click save (top right), and save it as header (as shown below).
Step 44
Click save (top right), and save it as header (as
shown below).
Okay, now lets open up Macromedia Dreamweaver and
make a new document. Delete the existing pre-made code Dreamweaver adds until
the top code window is blank. Now copy the below code and paste it in the code
view.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Zymic Web Host Layout Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
background-color: #586687;
border: 1px solid #48546F;
}
-->
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0"
bgcolor="#363E59">
<table width="700" border="0" align="center"
cellpadding="0" cellspacing="0">
<!-- MAIN HEADER --> <tr>
<td colspan="3"> </td>
</tr> <!-- MAIN END-->
<tr>
<!-- LEFT COLUMN --> <td valign="top"> </td>
<!-- DOTTED BORDER --> <td valign="top"> </td>
<!-- MAIN CONTENT AREA --> <td valign="top"> </td>
</tr>
</table>
</body>
</html>
Step 45
Right, save the document as "index.html". Now open up the file header.html. Select the main header table and copy it, as shown below.
Step 46
Go back to index.html (tabs are at the bottom) and paste the header in the top row (line 11).
Step 47
Click on the image below the "Domain search" heading.
Step 48
Now we need to make it so we can add text and so on on top of this image. The trick is to make a background with the same width and height of the image. To do this you need to add the below code but obviously use your own height and width of your header_03.gf image. Click the image to enlarge.
Step 49
Now delete the header_03.gif image leaving the background still in place.
Step 50
Paste the below code into the new section.
You should have something like below. Preview in your browser and you will notice the boxes change colour to match the site. This form is an example and will not work! You need to actually code or download a pre-made whois domain checker PHP script in order for it to work. Try hotscripts.com.
Step 51
Now lets configure the link buttons. Click on each button and configure the address of it, in the example below I did the home button.
Step 52
Okay, we have basically finished the main header and coding now. Lets go back into Photoshop and make some more of the site. We will now make 3 boxes to advertise the hosting packages your company offers (it's a must have as it will advertise the hosting on all pages of your site and will also make it easy for the potential buyer to find). Grab the "Rounded Rectangle Tool", any colour, make a shape roughly the same size and same position as shown below. Then right click on the layer in the layers pallet and select "Rasterize". Then bring up the blending options for the shape.
Step 53
Drop Shadow:
Step 54
Bevel & Emboss:
Step 55
Gradient Overlay and press OK.
Step 56
Hold CTRL and click on the shape layer in the layers pallet to make a selection. Then go to "Select > Modify > Contract" by 5 pixels and then hit OK. With the selection in place simply hit DELETE on your keyboard and viola!
Step 57
Grab the "Magic Wand Tool" and click anywhere within the border of the box to make a selection.
Step 58
Make a new layer (underneath the current border layer), fill the selection in with any colour and bring up the blending options.
Inner Shadow:
Step 59
Make a new layer (underneath the current border layer), fill the selection in with any colour and bring up the blending options.
Inner Glow:
Step 60
Gradient Overlay and press OK!
Tutorial comments
26.07.2009 -
Fantastic!!!
25.07.2009 -
Totally awesome!
20.01.2009 -
very very nice
07.12.2008 -
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
- Total views:
- 66514
- Total comments:
- 19