An interesting Art Site , www.ljudmila.org/~vuk/

Table tag structure

Borders, cell spacing and cell padding

Table vs. row and cell alignment

The valign property

Inheritance

Backgrounds, bgcolor's

Who's on top

Spanners

Tables within tables

First release around 1997

Created by Macromedia's Freehand team

Fireworks roots are in vector graphics

Photoshops roots are in bitmap graphics

Use what you're comfortable with

Link to Macromedia's (biased) comparison chart

The biggest advantage: None, really. But it's cheaper than Photoshop and comes with MX Studio

Fireworks $299 (list)
vs
Photoshop $649 (list)

Fireworks uses the 32bit PNG file format.

Size

Anything other than pixels and 72 dpi is irrelevant

Canvas Color

White - default

Transparent - useful for index-transparent PNGs and gifs

Custom - good 'ol hex

Quick export in upper right corner.

File

Export & Export Preview

View

Hide Edges

Modify

Canvas

Trim & Fit Canvas

Text

Convert to paths

Filters

Different organization than Photoshop

UI Gestures

The Adobe/Macromedia lawsuit's influence

Drag-able panes

Popup menu with more options for each window

Modify is really handy

Shows the type of selected object, its position, fill...

...border, transparency and effect. Effects are cool.

Take the Tutorials for a good basic introduction to image editing.

Allows adjusting individual slice's export settings

Includes web layer with slices

Styles

A menu of pre-set properties. Explore these, but don't use'm

New Style - very cool! Take any settings for an object and save them as a style.

Mixer - multiple colorspaces to work in. Handy for matching colors from other applications.

Swatches - create your own palette to take color from

Align-able anchors - weird!

Which is all about information

Three flavors among many:

8bit

Up to 256 colors

24 bit

Millions of colors

32 bit

Millions of colors plus an 8 bit grayscale alpha channel

Graphic Interchange Format

File format with patented elements inside it. CompuServe created the format, but Unysis held patents on parts of the compression algorithm. Patent recently expired in the US, but is still in for in parts of Europe.

Burn All GIFs!

Avoid using them. Use 8bit png's instead

Compression

A good technical description is here

Sometimes called LZW (Lempel-Ziv-Welch, the inventors) compression, it is a “loss-less” type compression. That is, none of the information about the original image is “lost” when it’s compressed.

The first step is to “index”the images color palette to no more than 256 colors.

Often, an image that looks good in 256 colors can look good with 128 colors, or fewer.

256 colors	128 colors
64 colors	32 colors
16 colors	8 colors

The next step uses Run Length Encoding, which looks at each horizontal line of pixels for runs of consecutive colors. So if you have eight pixels across a one-pixel row with the same color value (white, for example), the RLE would see that as "8W" rather than "WWWWWWWW," which saves file space.

This works great with images that have lots of solid blocks of color, but not so well with photos or gradients.

Joint Photographic Experts Group

JPEG is a technique, not a format. Not copyrightable since the inventors have officially surrendered it.

.jpg format is a particular implementation of JPEG called JFIF (JPEG File Interchange Format)

Lossy format, the higher the compression, the greater the loss

Compression

Divides the image into 8x8 pixels squares and rounds-off color differences.

JPG setting: 100 - loss-less File size: 123673 bytes	JPG setting: 90 - some loss. File size: 50046 bytes
JPG setting: 60 File size: 18121 bytes	JPG setting: 40 File size: 10714 bytes
JPG setting: 30 File size: 4761 bytes	JPG setting: 2 File size: 2095 bytes

Another image

JPG setting: 100 - lossless File size: 48818 bytes	JPG setting: 90 - some loss. File size: 17458 bytes
JPG setting: 80 File size: 11106 bytes	JPG setting: 60 File size: 4932 bytes
JPG setting: 40 File size: 6009 bytes	JPG setting: 20 File size: 2591 bytes

Portable Network Graphics

The story of PNG is here

Better compression than GIF, typically 5% to 25%

Un-patented and un-patentable

Loss-less

How? Too darn complex to get into. But it does take advantage of solid blocks of color like GIFs. Good detail on how is works is here.

Has 1,2,4,8,16,24 and 32bit support

Has alpha transparency with 8bit, but it doesn't work in IE Windows. Test pages here.

The goal: get the smallest size balanced with the best appearance. It's an art form in itself.

Here's a rule of thumb

Two kind of transparency in PNGs, one in GIFs.

Index transparency

Alpha tranparency

But it doesn't work in Windows IE

Here's a test page

Here.

The method to get custom alpha channels in Fireworks

Better control over text and more portable source .png's

Tricks from vector graphic programs

Cool stuff!

Macromedia Support Site

The Fireworks Zone Site

Playing With Fire Site

Macromedia's list of sites, listservs and books

Download sample images here, or get from the in-class CD

With each of the images, export it with the smallest file size.

With each of the images, export it with best look.

With each of the images, get the best balance between size and look

Practice anti-aliasing text and exporting it with a transparent index background over different pattern.

This is a dark background you can use

This is a light background you can use