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

Designed for the Focus Series Templates and Modules

Logo / Branding intermediate tutorials

• modify 'Website Name' graphic using Macromedia Fireworks
• replace 'Website Name' graphic with your own
• replace 'Website Name' graphic with 'stylized' text

Please review the tutorials on CSS font (types, size, color) if you plan on replacing the logo with Stylized Text.

Modify the Website Name graphic with Fireworks

 You can modify the 'Website Name' graphic using Macromedia Fireworks MX 2004 or 8 as this graphic is also an editable source file.

 ** these instructions are for Macromedia Fireworks MX / 2004 or 8 *

 INSTRUCTIONS:

• open your website

• open the 'includes' folder - [FP] 'Library' folder - [DW]

• open the 'logo.' page

• right click on the 'Website Name' graphic

• move your mouse over the 'Open with' menu

• select Fireworks MX 2004 or Fireworks 8 from the list of available programs

this will open the editable 'Website Name' graphic in Fireworks.

Being the crafty people that we are, we've designed the logo and the logo include page in such a manner that you can resize the image in Fireworks if you like, and when you save, it will update the image size displayed on the logo include page.

• make changes to the image in Fireworks

• when you have completed your edits, click on the file menu in Fireworks, and click SAVE

this action will save the PNG, and update the existing image in your website to reflect the changes you made to it in Fireworks

Replace the Website Name with your own Graphic

This is really quite easy. Most folks run into trouble is when it comes to replacing the default logo graphic with their own graphic, due to various sizing issues, or image quality. The 'Website Name' graphic we use in the template, is a 'transparent' PNG image, created in Macromedia Fireworks. The logo.png uses a high quality 24 bit setting. Few of our members are graphic designers, and most will not even own a graphic editor such as Macromedia Fireworks, or Adobe Photoshop so this terminology will be new territory. But not territory that you need cross into.

To replace the default logo, I would suggest an image with a square or rectangle outline if you are using a JPG or GIF.
If you're logo uses any 'rounded off' or transparent areas, then I suggest that you only use a PNG format. You may have several versions or file types of the logo graphic, such as an Adobe Illustrator (.ai) file type, or a transparent (EPS) or Adobe Photoshop (PSD) file type. Any of these file types can be converted for use on the web, or saved as a transparent 24bit PNG file type.

If you have a logo graphic that was created by a professional design company, you should have been provided a set of logo graphic files. Even if you don't have the originals, you may have a 'transparent' image in the works somewhere. Convert your logo image to transparent PNG format for best results.

INSTRUCTIONS:

• open your web site

• open the 'includes' folder - [FP] 'Library' folder - [DW]

• open the 'logo' page

• remove the 'Website Name' graphic from the page

• drag and drop your replacement image onto the page

• save and preview your index.htm page

(** IMPORTANT** do not position the graphic on the page. Your replacement graphic should be aligned top left on the page. Positioning of the graphic is managed by the stylesheet. For details on positioning, review the 'Case Study video, or contact our design team for details )