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
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:
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.
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.
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
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.
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.
A tutorial to aide in changing the color of any or
all graphical portions of your template.
This tutorial provides instructions on using guidelines of
a template to create new slices.
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.
This tutorial provides some good naming conventions
to follow when saving your slices after you have completed your work in
Photohsop.
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
Simple instructions for centering a web template design when
it is positioned to the left side of the page.
How to add a background image to fill
in the white space behind a template.
Intermediate Template Customizations in Flash
The
first step to begin customizing your flash template is to open the flash
source file.
This tutorial will provide instructions on how to
change the text and links in the “Flash Templates” without using the Flash
program.
Instructions on using the FLA source file to replace
the text within a Flash Template or Full Flash Site
This
tutorial provides instructions to change the language of a flash template
or full flash site to include non English characters.
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
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.
This tutorial provides instructions on removing or
changing both the background music and sound effects present in a Flash
Template or Full Flash Site.
This tutorial will provide you with instructions on
adding additional pages to a website template that is built entirely in
Flash.
Common Problems and Error Messages:
I saved the PSD file for the web, and the new images
are not appearing in the template
I edited my flash source files and the changes do
not show in the template.
I made changes to my template in flash and now text
does not appear in the flash portion of my template.
When I try to open the source files I receive an
error message and the files will not open.
I opened the HTML file and it does not show any
images or all of the images are broken.
Other Website Template Management Tips
Customizing and Managing Print Template Products
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.
Instructions for swapping out or removing the photos and
images in a print 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
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.
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
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.
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.
This tutorial will show you the details on designing a trendy and glossy top navigation tabs for your own web templates and website designs.
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!
|