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

Designed for the Focus Series Templates and Modules

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.

 

 
 

Overview | Basic | Intermediate | Advanced