Skip Main Navigation

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

VIGNETTES: Elliptical Marquee Vignette

Feathering the edges of a photo not only helps blend it into a composite image or HTML page, it can have a significant effect on the viewer’s response to the image. In Fireworks, feathering can be done with the selection tools or with vector masks. Which method is better? My preference is for the non-destructive masking method because the result can be changed at any stage of your work.

  • Choose File > Open.
  • Browse to the PVII_PhotoMagic directory on your hard drive.
  • Locate the phone_lady.jpg file and click on it to select it.
  • Click on Open

phone lady
Figure1: Phone lady

You'll make your selection with the Oval Marquee tool.

oval marquee
Figure2: Selecting the Oval Marquee tool

  • In the Property inspector, set the Style to Fixed Size.
  • Enter the values 180 wide by 260 high into the fixed width and height boxes on the Property inspector.
  • For Edge type, choose Feather. Set the feather amount to 20.
  • Click once on the image to drop the marquee.

A cue in the form of a tiny marquee appears when you move your cursor inside the area marked off by the marquee. That cue indicates that you can reposition the marquee on the image by clicking on it and dragging.

  • Click inside the marquee and drag the marquee to position it over the woman’s head and upper body.

positioning the marquee
Figure3: Positioning the marquee

You'll be using the image again, so instead of deleting the background, copy the selected area into another document window.

  • Choose Edit > Copy.
  • Choose File New.
  • Click OK to accept the default canvas size, color, and resolution.
  • Choose Edit > Paste to paste the selected image into the new document window.
  • Click on the tab of the original image and choose File > Close.
  • Choose No when asked if you want to save the changes.

copied image
Figure4: The feathered image (shown at reduced size)

Although the subject of the image is too modern to apply antiquing techniques, they are fun to play with. I’ll lead you through them in the next steps.

  • Click on Commands > Creative > Convert to Sepia Tone.

To create an old-fashioned deckle edge on the photo, you'll cover the image with a rectangle. Because it’s necessary to pick a color from the image, you’ll enlarge the thumbnail in the Layers panel to make this easier.

  • In the Layers panel, click on the menu expander icon (the wavy line thing at the top right) and choose Thumbnail Options.
  • Click in the Radio button next to the largest image.

The rectangle...

  • Click on the Rectangle tool and drag a rectangle over the image.
  • Deselect the rectangle and click on the Canvas Size button on the Property inspector.
  • Jot down the canvas dimensions.
  • Reselect the rectangle and enter the canvas height and width into the H and W boxes on the Property inspector.
  • Press Enter to accept the changes
  • With the Rectangle still selected, type 0 into the X and Y boxes of the Property inspector and press Enter.

To select the color for the rectangle,

  • Click in the Fill Color box on the Property inspector to open the Swatches pop-up.
  • Use the color picker from the Swatches pop-up to select a color from the darker pixels in the thumbnail of the image, just above the woman’s shoulder.

Figure5: Picking a color from the image thumbnail

Next, you’ll use a customized stroke to create an old-fashioned deckle edge.

  • With the rectangle still selected, click in the Stroke Fill Color box on the Property inspector to open a Swatches pop-up,
  • Select the white swatch.
  • Click on the down arrow of the stroke type selector in the Property inspector
  • For Stroke category, choose Unnatural > Viscous Alien Paint.
  • Click on "Stroke Options" at the bottom of the Stroke Category menu.
  • Click on the Advanced button to open the Stroke editor.

Here are the Options tab settings:

Figure6: Options tab settings

Here are the Shape tab settings:

  • Check the Square box
  • Size - 14
  • Edge - 0
  • Aspect - 100
  • Angle - 304
  • The Sensitivity settings are left at their defaults.

The rectangle is finished. Now it’s time to add the image to it.

  • In the Layers panel, click on the bitmap thumbnail to select it, and then choose Edit > Cut. The image disappears from the Layers panel and is hidden away in your system clipboard.
  • Click on the Rectangle to select it and choose Edit > Paste Inside.

One more antiquing effect to try is adding faux water stains to the image. That’s easily done with one of Fireworks built in textures. To apply it,

  • Click on the thumbnail of the white masking object in the Layers panel. It will become highlighted in bright green.
  • Click on the Fill Color box in the Property inspector to open the Swatches pop-up.
  • Click on the Fill Options button.
  • Click on the down arrow of the Texture selector and choose "Oilslick" from the menu.
  • Set the texture amount to about 30%

finished image
Figure7: Image with vignette, deckle edge, and water stains