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

Designed for the Focus Series Templates and Modules

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.

 

 
 

Overview | Basic | Intermediate | Advanced