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.

There are a few different techniques for creating button images, and the method you use depends on how you are using the button images. The traditional JavaScript method (and even some CSS-based methods) use separate images for each button state, and the CSS Sprite method uses one larger image as a background image with all of the button states in that single image then changing the position of the background image to show the different button states. You can use Adobe Fireworks to create button state images for either of these methods.

Creating One Image with All Button States

Create a Fireworks document with a page size large enough to contain all of your button images on a single page. Buttons may have from two to four states:

• Up – the default state of the button when the web page loads,
• Down – the state of the button when the visitor clicks or taps on it, and this state is often used as a persistent indicator for a button that has been selected,
• Over – the state of the button when the visitor hovers their mouse cursor over it while it is in the Up state,
• Over while Down – the state of the button when the visitor hovers their mouse over it while it is in the Down state.

Draw the Up state of your button first, then select it, Duplicate it (Edit > Duplicate or CTRL+ALT+D), and move the duplicate adjacent to the original. I prefer to stack the button states vertically on the page, but some designers like to create a horizontal button states. Either approach will work.

Modify the duplicate button image to create the Down state. Duplicate the Down state, and move the duplicate adjacent to the Down state, then modify the appearance to create the Over state. Finally, duplicate the Over state, and move the duplicate adjacent to the Over state, then modify the appearance to create the Over While Down state. Here is a simple example of four button states stacked vertically in a single image:

Since we duplicated the button graphics, we know that each state has the same size graphics, and we can use either the grid (View > Grid) or guides (View > Guides) to make certain that they are all aligned on the left and right sides. I like to put at least one pixel of blank space between button states, but some designers like to put more blank space (especially if they are using live HTML text over the background image instead of flattening the text into the button state image) and some designers place the button states without any blank space at all. How you position the button state images is your choice.

The text in this example varies from state to state (though this is unusual for most real buttons), so to make certain that the text remains properly positioned from state to state I use area text object in Fireworks. Area text objects have a defined width and are created by selecting the Text tool, and slicking and dragging on the drawing canvas to define the width of the text object. The width of an area text object can also be edited in the Properties panel. Area text objects will automatically wrap when the pre-defined width is reached. (Point text objects are created by simply clicking on the drawing canvas with the Text tool, and they have no pre-defined width, so the text will not wrap and continue to produce one potentially very long line.)

The area text object is centered within the button graphic, and the text within it is center aligned, so that when the text is edited (either from state to state or if you create multiple buttons with the same graphics but different labels) it remains properly aligned within the button.

To export all of the button states in a single image, select all of the buttons (or select everything on the page with CTRL+A), then right-click and choose Insert Rectangular Slice. Since you have selected multiple objects, Fireworks will present a dialog asking if you want to insert a single or multiple slices. Choose single slice, and Fireworks will place one large slice over all of the button states.

Select the slice just created, and define the image optimization settings in either the Properties panel or the Optimization panel. Right-click on the slice and choose Export Selected Slice to get a single image with all of the button states. This single image can now be used as a background image for the CSS Sprite technique to create buttons by changing the position of the background image.

Creating Multiple Images for All Button States

If you prefer to work with separate images for the states when creating buttons, you can easily export each button state as a separate image. Select only the main button shape objects (in this case, select only the rounded rectangles) and not any of the text or other graphic objects, then right-click and choose Insert Rectangular Slice, and select Multiple slices (instead of Single slice as we did previously.) This will insert a separate slice over each button state.

If you happen to select more than just the main button shape, Fireworks will insert MANY slices, one for each object selected, and you may not get single images for each button. If you have irregularly shaped buttons or are using multiple vector objects to define the button shape, you may need to use the Slice tool to draw slices. If you use the Slice tool to manually draw slices, you will need to make sure that each button state has a slice of the same size and shape. Luckily you can select a slice, duplicate it, and position the duplicate slice over the next button state image to ensure that each exported image will be the same size. Give each slice a unique name in the Properties panel, because this name will become the filename when the images are exported.

To export multiple slices as multiple images, use File > Export, select Images Only, set “Slices:” to Export Slices for the Current Page, and UNcheck “Include areas without slices.” Fireworks will export a separate image for each button state which you can use with your preferred button method.

Why Do the Filenames All Have “_s1″ Appended?

Fireworks will automatically append “_s1″ to the end of each button state filename. This is the default behavior, and the “_s1″ is used to differentiate the images exported from State 1 of a page from images exported from other states under the same slice on the same page. This is handy if you regularly export images for the same slice from multiple states in the Fireworks document, but if you are only exporting images from State 1 it makes less sense, so you may want to change the default behavior.

To stop Fireworks from appending “_s1″ to exported image filenames, choose File > HTML Setup and go to the Document Specific tab. In the third row for “State Names:” choose “none” for both of the options. Click OK to save, and when you export the button images they will no longer have “_s1″ appended.

Keep in mind that if you want to export multiple images from different states under the same slice on a page in the future, Fireworks will not append “_s#” to each image to differentiate images from the different states, and you may find that images are being over-written, because each state is being given the same filename for that slice. You will need to turn the automatic appending of filenames for each state back on to prevent accidental over-writing.

Calculating Background Image Offsets

Finally, if you are using a single image and the CSS Sprite technique for your button states, you will need to know the coordinate position for each button state to specify the background image offset in the CSS.

Fireworks can also make this very easy. On the page with all of the button state images, make sure no objects are selected and choose “Fit Canvas” from the Properties panel. Fireworks will resize the drawing canvas to include only button states and the large slice over them. The top left corner of the canvas is the origin (i.e., the 0,0 coordinate position), and since the buttons are vertically stacked the value of the Y coordinate for each button will be the same as the offset value necessary for the CSS background image offset.

In this example, the coordinates for each state are:

• Up – 0,0
• Down – 0,41
• Over – 0, 82
• Over While Down – 0,123

Each button image is 40 pixels high, but with a one pixel blank space between each button state, the position for each state will be 41 pixels below the previous.

No matter which technique you use for button state images, Fireworks can make it easy to create, optimize, export, and position the images in the final HTML and CSS.

UPDATE: CSS Sprite Commands for Fireworks

Just after publishing this post, I heard from three very talented Fireworks experts about commands to export slices and/or states into images for CSS sprites, and one of the commands event exports preliminary code to use the CSS sprites in your web projects.

1. John Dunning’s Frame and Layer Utilities contains a Stack command that will take images from multiple states (previously called frames in earlier versions of Fireworks, hence the name of the commands) and create either horizontal or vertical sprite images.
2. Orange Commands just released (today! what great timing!) a new command to export CSS Sprite images and the preliminary code to use the sprite in your web projects.
3. Aaron Beall has generously given us access to a beta version of a command he wrote to export multiple states of a slice or multiple slices to a single sprite image. You can get a copy of the command by right-clicking and saving this JSF file: Export Image Sprites. (Copy the saved JSF file into the Commands folder for Fireworks.)

These commands can be real time-savers and boost your productivity by automating some of the steps I described above, and they support using multiple slices or states and either vertical or horizontal stacking of the images.

Please give these experts your thanks and let them know if you use their commands.

Resources to Learn More About CSS Sprites

• A List Apart – CSS Sprites
• Smashing Magazine – The Mystery of CSS Sprites
• Peachpit – CSS Sprites
• Skyje – CSS Sprites
• CSS Tricks – CSS Sprites