How to Make a Web Site Template

Web template

Website templates can be very useful in many aspects. Professional-looking designs can be created and sold for an enormous profit. Also, website templates of your own design can be very useful in creating your own websites.

Things You'll Need

• Adobe Photoshop 6+ or The GIMP (see Resources) Adobe Dreamweaver (see Resources)

Instructions

Creating the Visual Design

1. Open Adobe Photoshop or The GIMP and create a new image. This file should have a resolution of 1024 x 768 and a transparent background.

2. Click on the filler tool (the paint bucket) and fill the background of the image with a color of your choice. Then, navigate to the "Filters" section of the file menu, and select the "Texturizer" tool. Apply a texture to the background to add some visual flair to the design.

3. Create a new layer. Within this layer, use the rectangle, rounded rectangle, or ellipse tools to create a navigation bar, body content box, logo box, and copyright bar.

4. Right-click on the layer you were just working with, and click on "Blending Options." In this window you can apply many different effects to the boxes you just created. Apply drop shadows, bevels, glows and other effects as desired.

5. Upon finishing the design, save the file as a .jpg in your website folder.

Creating the Template

1. Open Dreamweaver and create a new .html file.

2. Click on "Layer" in the "Layout Objects" section of the file menu. This will create a new layer of design that you can move anywhere within the page.

3. Insert the image you just created within the layer. Move the layer to the top right corner of the screen, so that the edge is hidden.

4. Click any empty section on the screen, then click on "Page Properties" at the bottom of the screen. In this window, select a background color for the web page that matches with the background color of the design.

5. Click on the layout image, and using the polygon, rectangle and oval tools on the bottom left of the screen, create hotspots around all the navigation buttons.

6. Save the file as "template.html" in your website folder.

Tips & Warnings

• Take your time when creating the graphic design. This alone will determine most of the professionalism of the site.

• Always use your own work when creating publishable content.

Resources

• Adobe Photoshop CS4 (Professional Image Editing Software)
• The GIMP (Open Source Image Editing Software)
• Adobe Dreamweaver CS4 (Professional Web Design Software)