I will be teaching a half-day intensive  class and giving one presentation:

• On Wednesday, May 16 I will be teaching “From Desktop to Mobile: Designing Responsively,” an intensive half-day class in wireframing for responsive web design.
• On Thursday, May 17 from 3.20p to 4.20p I will be giving a presentation “Understanding Complexity, Designing for Simplicity.”

I will be at the conference for all three days, so come join me and many of the best speakers and teachers around at one of the best conferences for designers and developers this summer!

Live Filters are non-destructive, which means you can edit the settings and tweak the results as much as you want without worrying about destroying or altering the original image. These photo styles were optimized for images from 300 x 300 to 750 x 750 pixels, which makes them perfect for use on web sites and sharing pictures by email.

Here are the 17 styles included in this set (with an original photo shown for reference):

To use these photo styles:

1. Download InstaHip Photo Styles (ZIP file)
2. Unzip the package
3. Start Fireworks
4. Open the Styles Panel
5. Choose “Import Style Library…” from the options menu (top right corner)
6. Navigate to and choose  the .STL file unzipped in step #2
7. Instahip Photo Styles will now be in your Style Libraries
8. Import or open a photo with Fireworks
9. Choose and apply an InstaHip Photo Style
10. Share and Enjoy!

Different effects will work better with different photographic content. For example, the Pinhole style works well on still life and scenery, but not on fast action shots. Try different styles to find what looks best for the photo, and you can always modify the style by editing the Live Filter settings.

Have fun, create your own photo styles, and share your instantly hip photos with us!

Index Transparency

Index transparency is the simpler. A GIF file has two parts: a color table and the image pixel data. The color table is a list of the colors used in that image (an 8-bit GIF can have up to 2^8 = 256 colors in the color table, but a 4-bit GIF can have only 2^4 = 16 colors), and each color is assigned a number. The image pixel data are for the image itself, and each pixel is assigned a number that points to its color in the color table. For example, if color #10 in the color table is red (#FF0000), then any pixel in the image with the number 10 will be displayed as red. The colors in the color table will vary from GIF file to GIF file based on the image itself; color #10 will not always be red. The color table is the set of up to 256 colors necessary to render that image.

When we add index transparency, every color in the color table is given a transparency designation in addition to its color data  (i.e., RGB values):

• zero (o = False in Boolean algebra) means do not display this color, or
• one (1 = True in Boolean Algebra) means display this color.

There are no intermediate opacities; the color is either displayed or it is not. The end result is that a pixel with an index transparency color will not be displayed and whatever is in the background behind that pixel will show through. For example, if color #10 is red (#FF0000) and is designated as transparent (index transparency = 0), then any pixel that is color #10 will not be displayed and the background will show through.

There can be multiple transparent colors in index transparency, because every color in the color table has a designation of either opaque (1) or transparent (0). Most graphics programs assume that the canvas color (often white, but it could be any color) is the default transparent color, but you can specify any color (or any number of colors) as transparent or not.

This type of transparency is very common in GIF and PNG8 files and is easy to identify, because there is no fading, there are no partially transparent pixels, and the edges are often described as “hard” or “pixelated.”

Alpha Transparency

Alpha transparency is more complex. Every color in a graphic has an alpha channel value to indicate how transparent it is (i.e., the degree of opacity.) When you see references to the RGBA color space, the color is defined by the (R)ed, (G)reen, and (B)lue channels, and the (A)lpha value defines the opacity for that color where:

• zero (0) = completely transparent (there is 0% rendering of that pixel’s color – all of the background “shows through”), and
• one (1) = completely opaque (there is 100% rendering of that pixel’s color – none of the background “shows through.”)

Alpha transparency is a way to support gradations of opacity on a continuum. Values between zero (0) and one (1) allow some of the background to “show through” and “mix” with that color. Values closer to zero (0) show more background, and values closer to one (1) show less background. A range of opacity makes it possible to create graphics that fade away or have smoother edges.

PNG32, PNG24, and Alpha Transparency

In Adobe Fireworks, alpha transparency is most often used with the PNG32 format. In a PNG32 file, there are four bytes (8 bits per byte) for each color: (R)ed, (G)reen, (B)lue, and (A)lpha, which adds up to 32 bits per color (24 bits for color and 8 bits for opacity via the alpha channel.) This means that alpha transparency in a PNG32 file is one (1) byte (8 bits) and can have a value from 0 (0%) to 255 (100%). Each step in the opacity continuum for 8-bit alpha transparency equals a 0.392% change in opacity; this is small enough that our eyes see a relatively smooth change along that opacity continuum.

Note that Adobe Photoshop uses the name PNG24 for the same 32-bit file type, because it only counts  the three RGB color channels, but a Photoshop PNG24 does support alpha transparency (and really should be called a PNG32, because each color has four bytes, or 32 bits, of color and opacity data.) The PNG24 format in Fireworks includes only the three RGB color channels and does not support any transparency.

PNG8, GIF, and Alpha Transparency

You may also have seen references to alpha transparency support in PNG8 files exported from Adobe Fireworks. For many years this has been a way to display alpha transparent images more cleanly in Internet Explorer 6, because Internet Explorer 6 does not support PNG32 with alpha transparency, but it treats a PNG8 file with alpha transparency like a GIF with index transparency. The result is not as smooth and aesthetically pleasing as true alpha transparency, but it also avoids the “grey box of doom” that Internet Explorer 6 would normally display for the PNG32 with alpha transparency file. Luckily, Internet Explorer is no longer a dominant browser, but there are enough people still using it that this PNG8 technique is still useful.

So, how does PNG8 support alpha transparency? It adds a four (4) bit alpha channel to the color table for the PNG8 file. This increases the file size slightly, and there are only 16 levels in the opacity continuum (2^4 = 16 levels, where 2^8 = 256 levels for PNG32 alpha transparency), so a gradual fade is more likely to look pixelated or exhibit banding.

If you look in the Optimize panel in Adobe Fireworks, you will notice that the GIF file format has three choices for transparency: None, Index, and Alpha. However, GIF files do not support alpha transparency, so the Index and Alpha options work exactly the same way. (I suppose that alpha transparency should not even be offered as an option for the GIF format, since GIF only supports index transparency.)

Creating Images with Alpha Transparency

The most obvious examples of alpha transparency are glows and shadows: they seem to fade as they get farther from the object, and when placed over a background pattern or image you can see that more and more background “shows through” as the glow or shadow gets lighter.

You can also create an opacity continuum with alpha transparency by:

• Creating a gradient fill and setting the opacity at one end to 100% and to 0% at the other, and you can even create bands of transparency by inserting multiple opacity points along the gradient:

• Applying a grayscale vector mask to an image:

Using a grayscale mask works by calculating the opacity of an image pixel based on the amount of white in the mask pixel:

• If the mask pixel has 0% white (i.e., it is black, #000000), then 0% of the image pixel is shown (i.e., the image becomes completely transparent),
• If the mask pixel has 100% white (i.e., it is white, #FFFFFF), then 100% of the image pixel is shown (i.e., the image is completely opaque),
• The shades of grey between black and white produce graduated opacity, and the image appears to fade from transparent to opaque along a gradual continuum.

Filter: Convert to Alpha

Finally, Adobe Fireworks provides the ability to take any image or object and calculate the alpha transparency based on the luminosity of each color by adding a filter (Filters > Other > Convert to Alpha.) The lighter the original color, the more transparent it becomes. The darker the original color, the less transparent it becomes. The end result is a grayscale image where lighter grays are more transparent than darker grays. This is useful if you want to create a mask to help isolate or extract a portion of an image or superimpose one image over another and have the two images appear to blend.

Photographs, JPEGs, and Transparency

Most images with transparency are graphics like logos and icons. There is a reason we rarely see transparency with photographs: the consolidation of colors in the color table for GIF and PNG8 files reduces the number of colors from many to a few.

When you have a photograph, there is a wide range of colors – usually far more than the 256 limit imposed by an 8-bit image format – so when you constrain the color palette of an image to 256 or fewer colors, the graphics program must calculate which colors are near one another and then assign them all to the same color value. For example, anything that is “near white” will be assigned to “white”, and when white is a transparent color, anything “near white” in the original image will also become transparent. This is simply the way that any 8-bit image format works – 8 bits only allow for 256 colors, so all “near colors” are combined into a single color value. All of the “near reds” become red, all “near blues” become blue, etc. This makes it possible to represent the image relatively accurately with far fewer colors.

This is also why 8-bit formats (GIF, PNG8) are not good for photographs: there are simply too many colors in most photographs to be accurately rendered with 256 or fewer colors. The JPEG format allows for many more colors, but it does not support transparency, and it is a lossy format (i.e., it uses compression algorithms that compress the image data, therefore some original image data are lost.)

For more information about alpha transparency and how it is calculated, read about Alpha Compositing on Wikipedia.

Watch “Create More Efficient Files in Adobe Fireworks” >

I showed how to use the Master Page, Shared Layers, Symbols, and Styles to save time and effort when working in Adobe Fireworks. These techniques are relevant if you use Fireworks for interaction design or visual design.

Download the demo file from the video here.

Thank you to everyone who attended, and if you have ideas or requests for future Adobe Fireworks screencasts, please leave me a note in the comments below.

I will be teaching one all-day class and giving two presentations:

• On Thursday, July 14 I will be teaching an all-day seminar “Introduction to Adobe Fireworks CS5″  that takes students through a series of hands-on projects to introduce the most important features of Adobe Fireworks CS5 and how it can be used for wireframes, prototypes, visual design, and asset and image preparation and optimization.
• On Friday, July 15 from 1.00p to 2.00p I will be giving a presentation “Design 101 with Adobe Fireworks for Developers.”
• On Friday, July 15 from 4.40p to 5.40p I will be talking about prototyping in “It’s OK to Throw it Away: Prototypes as a Collaboration Tool.”

I will be at the conference for all three days, so come join me at one of the best conferences for designers and developers this summer!

Download the Fireworks CSS Export Demo File Here

Due to popular demand I am making available the simple demonstration file for these common layout issues:

• Overlap – when the bounding boxes of objects overlap in Fireworks, Fireworks switches to Absolution Positioning Mode in order to preserve the layout, but this is not ideal for the exported CSS and HTML. Avoiding the overlapping objects can make it easier to get the layout you intend.
• Vectors – Since Fireworks is both a bitmap and a vector tool, we often use vectors to draw objects that will become icons or other bitmap images in the actual web page; slices are used to indicate what to export as bitmap images with the CSS and HTML, but if a slice does not completely cover the vector art or if the vector art is not sliced at all, then Fireworks will either export the vector art as generic DIVs in the code or will tell you that there are overlapping objects and switch into Absolute Positioning Mode.
• Floats - Fireworks uses floats and margin and padding values to position all of the objects on the web page, and it has some built-in algorithms to identify whitespace to help it identify rows and columns in the layouts; sometimes the algorithms do not accurately identify the layout we intend in the design, and even though the export occurs without error, the layout of the web page does not match the desired layout in the design. We can use background rectangles to define DIVs and force Fireworks to create the layout we intend in the exported code.
• Font Face – If we non-standard web fonts (e.g., Arial, Times New Roman, Verdana, etc.) for live HTML text, Fireworks will warn us during the CSS export that we have used a non-standard font. Fortunately, Fireworks will still assign that font name in the CSS, so if we are using embedded web fonts in a project, the web pages will look correct. However, if we use a non-standard font and do NOT use embedded web fonts, then people without that font installed on their computers will not see the correct font and the design as we intended.
• Font Decoration – Fireworks will export blocks of text with paragraph tags in the HTML, and the style of the text in each block is defined by the style of the FIRST character in that text block. If we use inline styles in the design in Fireworks, they will NOT be exported in the CSS and HTML. Inline styles need to be added to the exported code using a code editor like Dreamweaver. The same issue occurs for inline links: Fireworks cannot export inline links, so they will need to be added to the exported code.
• Gradients - Fireworks does not currently support CSS3 features, including gradients, in the CSS export feature. If we have gradients, repeating textures, or repeating patterns in the background of a DIV, we need to place a slice over the gradient or pattern and identify it as a background image that repeats. (There are few Fireworks extension developers working on adding CSS3 export support to Fireworks, so look for these features to become available in the future.)

A recording of the Adobe MAX 2010 session is available online:

If you are interested in getting a copy of the Portfolio template file shown in the session recording, it is available in a previous post.

The Grid and Swipe autoshapes can be used to create tables, but each of these autoshapes will create tables with different features. When you first drag them out from the Auto Shapes panel and place them on the canvas they will look something like this:

Download the Grid Autoshape from Aaron Beall

Download the Swipe Autoshape from Senocular

Fireworks autoshapes are special drawing objects that be modified using their different control points and handles, and they remain editable as long as they remain autoshapes. (If you ungroup an autoshape it will lose all of its special control points and handles and become a normal vector object. Once ungrouped it cannot be turned back into an autoshape.)

Using the Grid Autoshape

The Grid autoshape has multiple control points and handles:

The Grid autoshape offers the ability to change the horizontal and vertical cell padding for all cells in the table (while the Swipe autoshape cannot do this):

There are also control points for changing the number of rows and columns:

Although the Grid autoshape can quickly create tables, one limitation is that all of the rows must have the same height and all of the columns must have the same width. The row height is always the total height of the table divided by the number of rows, and the column width is always the total width of the table divided by the number of columns. Although this may be sufficient for quick wireframes, it is often unrealistic for actual tables on real web pages where rows and columns may have variable heights and widths.

Styling the cells in tables created by the Grid autoshape is easy. The styles assigned to the four cells in the top left corner of the table will be repeated throughout the entire table:

To create a table with alternating fill colors in the rows, use the Subselection Tool to select table cells and give the top two cells in the corner a different fill color than the bottom two cells, then click on the center control point to redraw the table.

To create a table with alternating fill colors in the columns, use the Subselection Tool to select table cells and give the left two cells in the corner a different fill color than the right two cells, then click on the center control point to redraw the table.

To create a table with a checkerboard fill, use the Subselection Tool to select table cells and give the diagonal cells a different fill color from each other, then click on the center control point to redraw the table.

Finally, the entire table may be resized with the top left and bottom right control handles. You can either drag the corner to change the size of the entire table, or you can double-click the control handle and enter specific dimensions in a dialog.

Using the Swipe Autoshape

The Swipe autoshape does not appear to have been originally intended to create tables, it appears to have been intended to create design elements and shapes like this:

However, it can be used to create tables with multiple rows and columns that can have variable heights and widths. The Swipe autoshape has multiple control points and handles:

When the Swipe autoshape is first dropped on the canvas, it has only one cell. Before adding rows and columns, adjust the height of the shape to be the desired height of the entire table, then use the bottom center control point to create rows within the table:

Once you have the desired number of rows in the table, create additional columns to build the table:

Use the middle control points on the vertical axes to adjust the width of each column, and use the middle control points of the horizontal axes to adjust the height of each row. This can be done to produce tables with variable row heights and column widths, which is common in actual HTML tables.

If you need to create additional rows later, you will need to add rows by ALT/OPT click and dragging a row control point upward. You can add rows from the bottom middle control point or any middle control point for an existing row.

If you need to create additional columns later, you can create them within the table or at the right side of the table by ALT/OPT click and dragging the column control points on the vertical axes then adjusting the internal column widths accordingly. The Swipe autoshape can produce unexpected results if you try to create new columns by ALT/OPT click and dragging a column control point to the left, so always drag the column control points to the right.

HINT 1: Make certain that snap to grid and/or snap to guides is turned on when using the Swipe autoshape to create tables, because the control handles do not automatically maintain perpendicular lines, and you may find the rows and columns becoming skewed as you draw them.

HINT 2: The Swipe autoshape uses a Soft Line for strokes by default, but this can result in “fuzzy” anti-aliased lines in the table as you create or modify it. To retain crisp strokes for the table cell, select the entire Swipe autoshape table and change the stroke style to Hard Line.

Once you have the desired number of rows and columns in the table, you can use the Subselection Tool to select individual cells and apply the desired styles to those cells. The Swipe autoshape does not have a center control point for applying table cell styles (like the Grid autoshape), so you will need to subselect all cells that will have the same style.

Once the cells have been subselected, it is easy to create tables with alternating rows:

It is also easy to create tables with alternating columns:

Deleting rows and columns from tables created with the Swipe autoshape can be difficult. The only way to delete rows and columns is to ungroup the Swipe autoshape and use the Subselection Tool to select and delete the nodes for the cells you want to remove, but remember that once an autoshape is ungrouped all of the autoshape editability is lost and it cannot be turned back into an autoshape.

Conclusion

The Grid and Swipe autoshapes can help you create wireframes and comps with tables more quickly than drawing the tables manually, but neither of these autoshapes will create HTML tables when pages are exported as CSS and Images. They are graphic tables only for illustration. There is no HTML Table component symbol in the Common Library, but if you would like to see this added to Fireworks in the future, you can submit features requests via the Adobe web site.

• Consistency
  • BIG KID
• Visibility
  • Anthony Neil Dart
  • Diesel Clothing
• Learnability
  • Cristof Echard
• Predictability
  • Acura TSX
  • IKEA Kitchen
• Feedback
  • Slow Food Membership

If you attended the presentation, thanks! If you missed it, you can download a PDF here.

Interaction Design for Graphic Designers

The recording of the session is now available online via Adobe TV or you can watch it below.

Download the Fireworks Portfolio Template Here

The zip file contains the portfolio template, instructions on how to add it to the Fireworks templates, and examples of the exported CSS and HTML for the pages in the template.

The Adobe MAX 2010 session recording is now available online:

However, they do not offer a template for designers who use Fireworks, so I created one using their 28 pixel square grid (35 columns at 980 pixels wide.)

Download the Square Grid Template for Fireworks Here

There are many grid systems out there, but I like how the creator of this grid took the time to identify a few golden ratio column widths. Nice touch.