Setup Guide V1 (last updated January 4th, 2007)

Designed for the Gen7 Series Templates and Modules

Colorize overview

Check out our 11 minute video, and watch while our design team colorizes this web template in under 10 minutes.

Advanced Tutorials

Recommended for: Any one wanting to learn how to modify the template artwork, colors (background, interface) or graphical elements (menu buttons, icons etc).

Overview: learn how to modify the source PNG (graphic source files for Macromedia Fireworks) and source FLA (animated source files for Macromedia Flash). Learn from the experts, how to simplify the process of 'updating' an existing web site using your new template.

Objective: by the end of the Advanced tutorials, you'll learn how to completely modify the template background, interface, and element colors using Macromedia Fireworks 8. You'll also learn how to update the flash header and image displays using Macromedia Flash 8. Create a unique template from the provide source files. Great for web developers!

Software Required: HTML Editor (FrontPage, Dreamweaver, Expression Web, or a Standard HTML editor) Macromedia Fireworks 8*, Macromedia Flash 8*.

The advanced tutorials are specifically geared for our web developers, and adventurous members wanting a unique look and feel for their web sites.

Legal Jargon: Prior to downloading the source files, please read the EULA completely.

Getting Started:

Please view the 'prep' videos:

We have a few different tools to help you modify the color of your template:

Colorization overview (text)

The colorization instrucitons are divided into 3 sections:

Hello folks, and thanks for joining me in this overview of colorizing your template.

We're offering you the complete DIY (do it yourself) package. Part of the package requires 'EASY' to work with source files, so beginners and experienced developers alike, will be able to modify the provided source files, to create your own unique color combinations.

The advantage for you:

  • time saved in hiring someone to do this for you
  • immediate updates as you can do them yourself
  • cost savings (no longer a paid server, as you can do this yourself following the text and video instructions)

We've broken the instructions down into a step by step process, or you can view our one step video, and learn how to modify the look and feel of your entire site in less than 10 minutes. ( for folks just looking for the 'highlights')

Before you get started, please review the 'prep' videos:

  • color prep
  • flash prep

If you would like to watch our one step video, just click on the first link below.

  • One Step ( just the highlights )

 If you want to watch our individual videos:

  • change the background color
  • change the interface color
  • change the content area color
  • change the horizontal menu bar color
  • change the vertical menu bar color
  • change the page element / flash images color
  • change the flash intro color

The colorization instrucitons are divided into 2 sections:

With the number of request we recieve on colorizing the page background, or adding a pattern we added this section first as many of you may not require the full set of instructions.

Colorize the page background

Hello folks! I have some fairly detailed instructions on how to modify the template background color, using Macromedia Fireworks 8. Although the instructions are quite detailed and lengthy, once you've been through the process, it shouldn't take you more than a couple of minutes once you understand the process. We do have video instructions available as well but there may be times when you just want a 'quick' how do you do, and get the job done.

If this is your first attempt at colorizing your web template, please MAKE a BACKUP of your:

  • installed website
  • PNG source files
  • FLA source files

It may take a few attempts to get 'just the right color' and it's easier to start from scratch, than it is to repair or make changes.

Once you have the process down 'pat' it might take you a total of 15-20 minutes to colorize a web template. Creating a unique color for your web site, is a creative process, so please take your time, create as many 'test' webs as you need, and try some different things out to see what you like best. Once you have the process down 'pat' you can tweak away, or change as often as the seasons change.

For all colorizations, I recommend opening the following source files included in the PNG folder of your source file download package.

  • 1_background.png
  • 2_index.png
  • 3_template.png
  • 4_elements.png
  • 5_flash_header.png
  • template-header-cover.png

Start Fireworks, then drag all 7 files into the Fireworks program to create a 'tab' menu of your open files (ex:a1)

PREP 1: prepare Fireworks, and Flash.

Please review the following videos, to help prepare yourself and your software:

  1. setting your stage for Fireworks 8
  2. setting your stage for Flash 8

PREP 2: modifying the source PNG files

Instructions

Step 1:

  1. start Macromedia Fireworks 8
  2. open the following source PNG files

    1_background.png
    2_index.png
    3_template.png
    4_elements.png
    5_flash_header
    template-images-cover.png

With all the source files open, it will make a 'site wide' update much easier.

Step 2: select the '1_background.png' tab in Fireworks

Step 3: select the background layer in the layer panel

Step 4: click on the Filters menu >> Adjust Color >> Hue/Saturation...

Step 5: select the 'Colorize' option ( 1 )

Step 6: adjust the color properties

  • slide the 'Hue' ( 2 ) slider to change the color
  • slide the 'Saturation' ( 3 ) slider to change the color intensity
  • slide the 'Lightness' ( 4 ) slider to change the brightness / darkness (recommended to leave at the default 0 )

Step 7: once satisfied with the new color, write down the values for each (for future updates, or if you accidentally close Fireworks)

  • Hue = ( example 5 = 180 )
  • Saturation = ( example 6 = 25 )
  • Lightness = ( example 7 = 180 )
  • click OK

Step 8: Make sure your color selection is what you wanted, repeat the above steps until it is.

The next steps are basically repeating your actions with the (2_index / 3_templates / 4_elements) png files. The difference being you can now use the 'Repeat Hue/Saturation' option in the Filters menu. So lets get started.

Step 9: click the 2_index.png tab

  • select the 'background' layer in the layer panel
  • with the 'background' layer selected click on the Filter menu
  • click 'Repeat Hue/Saturation'

And that's it for the 2_template.png file.

Step 10: Click on the 3_template.png tab and repeat the procedure from Step 9

  • select the 'background' layer in the layer panel
  • with the 'background' layer selected click on the Filter menu
  • click 'Repeat Hue/Saturation'

Step 11: Click on the 4_elements.png tab and repeat the procedure from Step 9

  • select the 'background' layer in the layer panel
  • with the 'background' layer selected click on the Filter menu
  • click 'Repeat Hue/Saturation'

Step 12: With all 4 background colors modified you can now safely export the PNG files to your website 'graphics' folder

  • click on the 1_background tab

  • click on the File menu >> select Export (Ctrl+Shift+R)

  • Use the following Export settings in the Export Properties window
  • ( 1 ) make sure you are exporting to your website 'graphics' folder (often located in the 'Templates/graphics' folder)
  • ( 2 ) the file name is not important at this point, just leave at the default setting
  • ( 3 ) change the Export setting to 'Images Only'
  • ( 4 ) change the Slices setting to 'Export Slices'
  • ( 5 ) make sure the 'Include areas without slices' IS NOT CHECKED
  • ( 6 ) click the Export button, once your settings are correct
  • when prompted to over write existing files, click YES

Step 13: export the remaining PNG files ( 2_index / 3_template / 4_elements )

  • click the 2_index.png tab and export using the same method as for the 1_background.png file
  • repeat for the 3_template.png and the 4_elements.png files

Step 14: preview your web pages

  • open your website in your favorite editor
  • open your index.htm page
  • click on the file menu, and select Preview in Browser
  • click on the menu buttons once you've had a chance to view the index page, and check out the template pages

if all went as planned your done!

or you can move on to colorizing specific elements of your website. I suggest viewing the online video instructions for details on how to colorize specific area's of your web pages.

Colorize your template

Hello folks! I have some fairly detailed instructions on how to modify the template colors, using Macromedia Fireworks 8 and Macromedia Flash 8. Although the instructions are quite detailed and lengthy, once you've been through the process, it shouldn't take you too long once you understand the process. We do have video instructions available as well but there may be times when you just want a 'quick' how do you do, and get the job done.

If this is your first attempt at colorizing your web template, please MAKE a BACKUP of your:

  • installed website
  • PNG source files
  • FLA source files

It may take a few attempts to get 'just the right color' and it's easier to start from scratch, than it is to repair or make changes.

Once you have the process down 'pat' it might take you a total of 15-20 minutes to colorize a web template. Creating a unique color for your web site, is a creative process, so please take your time, create as many 'test' webs as you need, and try some different things out to see what you like best. Once you have the process down 'pat' you can tweak away, or change as often as the seasons change.

For all colorizations, I recommend opening the following source files included in the PNG folder of your source file download package.

  • 1_background.png
  • 2_index.png
  • 3_template.png
  • 4_elements.png
  • 5_flash_header.png
  • template-header-cover.png

Start Fireworks, then drag all 7 files into the Fireworks program to create a 'tab' menu of your open files (ex:a1)

PREP 1: prepare Fireworks, and Flash.

Please review the following videos, to help prepare yourself and your software:

  1. setting your stage for Fireworks 8
  2. setting your stage for Flash 8

PREP 2: modifying the source PNG files

Instructions

Step 1:

  1. start Macromedia Fireworks 8
  2. open the following source PNG files

    1_background.png
    2_index.png
    3_template.png
    4_elements.png
    5_flash_header
    template-images-cover.png

With all the source files open, it will make a 'site wide' update much easier.

Step 2:

  • select the '1_background.png' tab in Fireworks

Step 3:

  • select the background layer in the layer panel

Step 4:

  • click on the Filters menu >> Adjust Color >> Hue/Saturation...

Step 5:

  • select the 'Colorize' option ( 1 )

Step 6:

adjust the color properties

  • slide the 'Hue' ( 2 ) slider to change the color
  • slide the 'Saturation' ( 3 ) slider to change the color intensity
  • slide the 'Lightness' ( 4 ) slider to change the brightness / darkness (recommended to leave at the default 0 )

Step 7:

once satisfied with the new color, write down the values for each (for future updates, or if you accidentally close Fireworks)

  • Hue = ( example 5 = 180 )
  • Saturation = ( example 6 = 25 )
  • Lightness = ( example 7 = 180 )
  • click OK

click on the File menu, select SAVE

Step 8:

Make sure your color selection is what you wanted, repeat the above steps until it is.

The next steps are basically repeating your actions with the (2_index / 3_templates / 4_elements) png files.

There are two things that will vary slightly from the steps you just took to colorize the 1_background.png.

  • you will need to select ALL the layers in the layer panel, not just the 'background' layer
  • you can select the 'Repeat Hue/Saturation' option in the Filters menu instead of using the Hue/Sat properties panel

Step 9:

  • click the 2_index.png tab
  • select 'ALL' the layers in the layer panel (hold down the Shift key on your keyboard, while you click on each layer)



  • with ALL the layers selected click on the Filters menu

  • click 'Repeat Hue/Saturation'

click on the File menu, select SAVE

Step 10:

  • Click on the 3_template.png tab and repeat the procedure from Step 9

click on the File menu, select SAVE

Step 11:

  • Click on the 4_elements.png tab and repeat the procedure from Step 9

**There are 2 layers in this PNG file that you may not want to modify the colors of, the:

  • vertical menu (layer)**
  • index menu (layer)**

These two layers contain the vertical menu buttons for your website. If you are looking for a 'contrasting' look for your buttons, then colorize these buttons manually.
(watch the video instructions included)

Step 12:

  • Click on the 5_flash_header.png tab

**This PNG file uses a modified layer arrangement. We created main layers, and attached a layer object to each. This helps us modify the colors of the flash intro / header much easier than trying to modify individual elements or graphics within flash itself. Now, we can modify the layers, save and import directly into our editable flash files.

  • select each layer object (press and hold the Shift key on your keyboard, and click on each 'layer' object)



  • with ALL the layers (layer objects) selected click on the Filter menu

  • click 'Repeat Hue/Saturation'

click on the File menu, select SAVE

Step 14:

  • click on the template-header-cover.png tab

  • click on the 'header' layer in the layers panel



  • click 'Repeat Hue/Saturation'

click on the File menu, select SAVE

Step 15:

With all 6 source files colorized you can now safely export the PNG files to your website 'graphics' folder, then update the 2 flash files in the flash folder.

  • click on the 1_background tab



  • click on the File menu >> select Export (Ctrl+Shift+R)



  • Use the following Export settings in the Export window
  • ( 1 ) make sure you are exporting to your website 'graphics' folder (often located in the 'Templates/graphics' folder)
  • ( 2 ) the file name is not important at this point, just leave at the default setting
  • ( 3 ) change the Export setting to 'Images Only'
  • ( 4 ) change the Slices setting to 'Export Slices'
  • ( 5 ) make sure the 'Include areas without slices' IS NOT CHECKED
  • ( 6 ) click the Export button, once your settings are correct
  • when prompted to over write existing files, click YES

Step 16:

switch to, then export the following 3 PNG files ( 2_index / 3_template / 4_elements )

  • click the 2_index.png tab and export using the same method as for the 1_background.png file
  • repeat for the 3_template.png and the 4_elements.png files

Step 17:

Time to update the colors of the 2 flash files in your template. Make sure you've downloaded the editable source files from your members page, and have easy access to the intro.fla and the template-header.fla.

  • open your website in your favorite editor
  • import or drag and drop the following 2 editable flash files, directly into the flash folder of your web
    • intro.fla
    • template-images.fla

Step 18:

  • open / expand the flash ( 1 ) folder of your website
  • double click on the 'template-images.fla' ( 2 ) file to open in Flash MX  / 8

Step 19:

  • with the template-header.fla file open in Flash MX  / 8 expand the Library panel (F11) and locate the 'template-header-cover.png' file

Step 20:

  • double click on the bitmap icon  located on the left side of the template-header-cover.png file to activate the Bitmap Properties window

Step 21:

  • click on the Import... button

  • browse to the 'template-image-cover.png' file you recently updated in Fireworks and click on it to select it



  • click the Open button if you don't automatically return to the Bitmap Properties window
  • once you've returned to the Bitmap properties window click the button

Step 22:

  • click on the file menu and click on the Publishing settings option



  • on the Formats Tab, select 'Flash' as the only Publish option



  • on the Flash tab make sure you use the same settings as in this example

Step 23:

  • once you've set your publish setting, click on the file menu (again), this time click on Publish



  • this action will publish an updated 'template-images.swf' file directly into your flash folder

Step 24:

Now we'll review the steps required to update the flash intro.

  • open your website
  • open the flash folder
  • double click on the intro.fla ( 3 ) file to open the file in Flash (mx 2004 or 8)

(we have a 2 step process for updating the flash graphic, first we'll create a blank flash movie and import our updated graphics, then we'll copy these graphics into our intro.fla movie file. The reason we do this, is to prevent Flash renaming our bitmaps. Just follow our steps and you'll find this a handy trick for any time you wish to update the intro colors)

with the intro.fla file open in Flash

  • click on the File menu
  • select New


  • select Flash Document
  • click OK


  • make sure you have the new document window selected (should display as Untitled-1 on the tab)


  • click on the File menu
  • select Import >> Import to Library


  • browse and select your colorized 5_flash_header.png file


  • once selected, you'll see a Fireworks PNG Import Settings window:
    • uncheck the (Import as a single flattened bitmap)
    • check the following options as in this example

    • click OK
    • flash will import the 5_flash_header.png file, placing the Bitmaps (1-7) and the  'Fireworks Objects' folder into the Untitled-1 Library panel
  • click on the intro tab


  • click on the New Library Panel button on the Library panel


  • this action will create an additional library panel
  • drag this new panel to the center of your workspace


  • on the New Library Panel, use the drop menu to select the (Untitled-1) Library


  • you may want to resize the new Library panel, to make it easier to select the items in the next step, just grab the bottom of the panel with your mouse (look for the double arrow when grabbing the bottom of the Library window ) and pull down to reveal all the items


  • select all the Bitmap images from the Untitled Library, and drag them into the main (intro) Library panel


  • **CRITICAL**  When you drag the Bitmaps from the (Untitled-1) Library, into the (intro) Library, flash will recognize these new Bitmaps as 'duplicates' and prompt you to select one of the following actions:

  • **ALWAYS** Select the second option: Replace existing items
  • click OK

If in error, you select the first option, flash will not be forgiving. You will need to close (don't save) both the intro and the Untitled-1 and start fresh.

Once you've successfully replaced the existing bitmaps, your pretty much done!

  • close the Untitled-1 Library panel


  • click on the Untitled-1 tab


  • click on the File menu
  • click on Close

  • don't save when prompted
  • with the intro.fla*  being the only open movie
    • click on the file menu
    • click on Publish
    • Save and exit

Step 25: preview your web pages

  • open your website in your favorite editor
  • open your index.htm page
  • click on the file menu, and select Preview in Browser
  • click on the menu buttons once you've had a chance to view the index page, and check out the template pages

if all went as planned your done!

or you can move on to colorizing specific elements of your website. I suggest viewing the online video instructions for details on how to colorize specific area's of your web pages.

 

 

 

 
 

Back...