How to Make Website Templates


Templates are useful for common Web design, and can be sold to others for a good profit. Templates can be easily created with a few simple design tools. Artistic skill can help greatly in the process, but isn't required.

Things You'll Need

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

Creating the Graphic Design

  • Open Photoshop and create a new image with a resolution of 1024 x 768. Make sure the image has a transparent background.

  • Use the filler tool to create a background color for the page. Then, in the "Filters" section of the file menu, click on the "Texturizer" tool. Apply a texture to the color.

  • Create a new layer, and use the rectangle or rounded rectangle tools to create a navigation bar and content and logo boxes.

  • Right-click on the layer that the boxes are in, and select "Blending Options." This will open a menu where you can apply bevels, drop shadows and many other effects to the boxes.

  • Save the file as a .jpg image in your Web template folder.

Creating the HTML Template

  • Open Dreamweaver and create a new .html file.

  • Create a new layer, and insert the image you just created. Click on "Page Properties" at the bottom of the screen, and match the page's background with the background of the image.

  • Select the image, and use the rectangle, oval, and polygon tools at the bottom left of the screen to create hot spots around all your navigation buttons.

  • Save the file as "template.html"

Related Searches

  • Photo Credit
Promoted By Zergnet



You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!