Struggling your way through customisation
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.
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
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.
