The BoxedArt Guide to Using Website Templates

The below template guides and template tutorials will provide basic insight about using website templates, as well as more advanced instruction on making customizations to website templates.

Getting Started With Templates

What is a Website Template, and Who is a Website Template for?

A basic description of the uses of a website template, as well as a summary of the differences between a website template, a turnkey website, and a CMS template.

What Software Will I Need to Edit a Website Template?

A breakdown of the different file types you will encounter within the contents of a website template accompanied by a list of software solutions.

Getting Your Template Online

A summary of the basic services and software that will be required to take your template public.

Basic Customization of HTML and Partial Flash Templates


Unzipping the Template

View the process of extracting the zip file package of your template that you downloaded.

Using HTML Editors to Change the Text and Content of a Template

This section provides several examples from the many WYSIWYG (What You See is What You Get) HTML editing solutions available including:

Using Adobe Dreamweaver to Edit a Template
Using Microsoft FrontPage or Expression to Edit a Template
Using Adobe Golive to Edit a Template

Editing Text that is Part of a Graphic or Image in a Template

This section provides two methods of changing the text that is a part of a graphic within a template. These methods include using Adobe Photoshop to edit the PSD file and using any alternative graphics editor to place text onto the “blank version” graphics.

Using Adobe Photoshop to Edit Graphical Image Text
Using Alternative Graphic Programs to Edit Graphical Image Text
Changing the Links and Text in a Partial Flash Template's TXT File

The section explains how to edit the text and links that are embedded in a Flash Template using nothing more than a TXT editor, and without using the Adobe Flash software.

Making Additional Content Pages for a Template

If you require more pages than are included in the template download, follow these instructions for several simple methods of creating additional pages for your website's content.

Intermediate Template Customizations in Photoshop


Opening the PSD file in Photoshop

A basic refresher as to where to locate the PSD source file in your template pack and how to open it, which is the first step required before moving ahead.

Changing Photos That Are Part of the Template Layout

Sometimes the photos in a template are integrated into the graphical design of that template and cannot be removed using a HTML editor. This tutorial will illustrate how to replace or remove photos when they are integrated as part of the design.

Adjusting the Color of a Photo or Graphic Element

A tutorial to aide in changing the color of any or all graphical portions of your template.

Using Guidelines as an Alternative to Slice Lines

This tutorial provides instructions on using guidelines of a template to create new slices.

Using the Slice Lines in a Template or Producing New Slice Lines

Most templates are provided with full slice lines. This tutorial provides instructions on editing the slices or creating new slices, as well as saving the slices as web-ready images for use in your template.

Appropriate Naming Conventions for Saving Your Sliced Template

This tutorial provides some good naming conventions to follow when saving your slices after you have completed your work in Photohsop.

Optimizing Website Template File Size when Saving for Web

Reduce the file size and loading time of your template on the web with the information provided in this lesson.

Intermediate HTML Tips for Your Website Template

How Do I Center a Left Justified Website Template Design?

Simple instructions for centering a web template design when it is positioned to the left side of the page.

How Do I Remove a Stretched Background Image from a Website Template?

How to Add a Repeating, Solid, or Stretched Background to a Template

How to add a background image to fill in the white space behind a template.

Intermediate Template Customizations in Flash

How to Open a Flash .fla File using Adobe Flash

The first step to begin customizing your flash template is to open the flash source file.

How to Change Text and Links in a Flash Template Using the txt File

This tutorial will provide instructions on how to change the text and links in the “Flash Templates” without using the Flash program.

How to Change the Text in a Flash Template Using Adobe Flash

Instructions on using the FLA source file to replace the text within a Flash Template or Full Flash Site

How to Change the Language in a Flash Template

This tutorial provides instructions to change the language of a flash template or full flash site to include non English characters.

How to Add or Change Links in a Flash Template using Adobe Flash

This tutorial provides details on adding or removing links in a flash template, including how to add pop-up windows for txt file and non txt file enabled versions of templates.

How to Replace images in a Flash Template using Adobe Flash

How to Create Additional Buttons for a Flash Template Using Adobe Flash

This tutorial will show you how to make additional buttons for your Flash template that will keep the characteristics of the existing buttons yet will display different words and have a different URL link.

How to Remove a Search Box or other Item in Adobe Flash

How to Replace or Remove Music and Sound Effects in a Flash Template

This tutorial provides instructions on removing or changing both the background music and sound effects present in a Flash Template or Full Flash Site.

How to Add an Additional Page to a Full Flash Site

This tutorial will provide you with instructions on adding additional pages to a website template that is built entirely in Flash.

How to Publish Your Modified Flash File to Your Template


Common Problems and Error Messages:

Save for Web Produces Different File Names than Expected

I saved the PSD file for the web, and the new images are not appearing in the template

Saved Flash Changes Do Not Appear in the Template

I edited my flash source files and the changes do not show in the template.

Text Does Not Appear in the Flash After Making Changes

I made changes to my template in flash and now text does not appear in the flash portion of my template.

Unrecognized File Format When I Try to Open a Flash or Photoshop File

When I try to open the source files I receive an error message and the files will not open.

There Are No images in My Template

I opened the HTML file and it does not show any images or all of the images are broken.

Other Website Template Management Tips

How to Install a New Font

Getting a Contact Form to Submit with a Formmail Script

How to Use FTP to Upload my Template

Customizing and Managing Print Template Products

How Do I Customize the Text on a Print Product?

This tutorial provides instruction on changing the text for any type of print product, whether it be a print menu, print brochure, print flyer, corporate ID or the like.

How Do I Change the images in a Print Product

Instructions for swapping out or removing the photos and images in a print product.

How Do I Print Out my Print Template Product?

Tips on setting print margins and adjusting printer settings to set the size and print out your print ready products.

Customizing Other BoxedArt Products

How Do I Reassemble A Product Box or Ebook Cover?

After editing the text on the PSD files on a product box or ebook cover follow these instructions to reassemble the box or book shape of the product.

How Do I Edit the Text on an Animated Banner Pack?

Animated banner packs are provided with source files for Adobe Photoshop or Illustrator as well as individual blank .gif or .jpg cells. This tutorial illustrates how to add text using eithe rPhotoshop, Illustrator or the graphics software of your choice.

Advanced Photoshop Techniques

How to Design a Glossy Web 2.0 Badge

The 3D badges are everywhere! Yes, it is the latest trend on those Web 2.0 web designs. These are the star-shaped labels that you see stuck on web pages, alerting you to something important.

How to Design a Diagonal Corner Text Message Strip

Another common convention of web 2.0 website design is the corner text message strip. It gets out a message like the 3D glossy badge, however the message strip is a more subtle way of doing so.

How to Design a Tabbed Web 2.0 Style Navigation Bar

This tutorial will show you the details on designing a trendy and glossy top navigation tabs for your own web templates and website designs.

How to Design a Glossy Photoshop Web 2.0 Logo - Orb Style!

The Adding a web 2.0 style logo added into your website template is a brilliant idea! Here, in this tutorial you will learn how to make a juicy web 2.0 style logo. Creating this logo does not require any filters or effects, it's all about simple!