For some images (particularly logos or other graphics that contain text or a "spiky" edge rather than the smoothly curving butterfly wing), the feathering technique loses the sharp edges of the original. In such cases, we can do the opposite—create a sharp vector edge.

In this hack, we hide the jaggies by covering them with a vector stroke or by masking them out with a vector mask.

We perform the bitmap manipulation in Photoshop, but you can achieve similar results in other programs, including Fireworks.

Select the image created in the preceding hack and export it as a PNG using File→Save As. You also need to export a second image in which you have turned all the nonzero pixels to black, as shown in . You can do this in Photoshop by selecting Image→Adjustments→ Brightness/Contrast. Set both the brightness and contrast sliders in the Brightness/Contrast window all the way to the left to turn all pixels to black.

Import both of the images into Flash using File→Import→Import to Stage. Select the black silhouette and convert it to a vector using Modify→Bitmap→Trace Bitmap. This leaves you with a black vector shape. You can add a stroke around the shape to create an outline of your bitmap.

You can either use the stroke outline, as seen in , as a cookie cutter or use the shape as a standard vector mask. The latter method is immediately obvious, but the former is more efficient computationally because it doesn't require Flash to constantly apply the mask (which is helpful if you need to animate the bitmap later).

When you convert the PNG into a vector, you do not end up with the black shape encased in a white shape (which would happen if you imported a bitmap consisting of a shape on a white background). Because there is no background in our PNG (and because Flash can correctly convert zero alpha pixels into "no vector"), your vector conversion is faster, with less cleanup afterward.

So let's move forward with the cookie-cutter method, given that it is by far the more hacky and nonobvious.

Place the outline in a layer above the bitmap and align it over the bitmap, as shown in . If necessary, use the Subselection tool to make the stroke follow the edges of the bitmap better. Aim to get the stroke to outline the bitmap with a slight overlap. When you do this, it may be a good idea to view the layer containing the vector as Outlines (you can do this by clicking on the colored square to the left of the layer title).

Break apart the bitmap using Modify→Break Apart. This allows you to edit it with the vector tools.

Move the vector outline from its current layer to the same one as the bitmap. The easiest way to move the vector outline between the layers is via the clipboard:

1. Lock all layers except the one the vector outline is in.

2. Press Ctrl-A (Windows) or &command;-A (Mac) to select the outline; then press Ctrl-X (Windows) or &command;-X (Mac) to cut it to the clipboard.

3. Unlock the layer the bitmap is in. Lock all other layers. With nothing selected, right-click (Windows) or &command;-click (Mac) and select Edit→Paste in Place.

Select all pixels outside the outline and press Delete.

Finally, carefully delete the stroke, as shown in , to reveal a perfectly sharp vector edge around your bitmap!

Your bitmap has become a hybrid shape with the advantages of both vectors (sharp edge) and bitmaps (complex textures). Cooler still, the vector edge remains editable. You guessed it—you can even animate the vector edge, as shown in , should the urge arise.