Welcome!

Adobe Flex Authors: Yakov Fain, Keith Swenson, Jacques Durand, Pat Romanski, Liz McMillan

Related Topics: Adobe Flex

Adobe Flex: Article

Sailing the Wine Dark Sea With Macromedia Fireworks MX

A Fireworks masking project

A Tempest in a Teapot or a Sailboat in a Wine Glass
Now for the first real step in our collage. Make sure you can see both images in the workspace.

  1. Create a new layer in the wine glass image. Make sure this is the active layer.
  2. Using the Pointer tool, select the bitmap object in our sailboat image.
  3. Click and drag it onto the canvas of the wine shot over the top of the wine glass. By dragging the bitmap object, we bring along the image and the mask.
  4. Use the Transform (scale) tool to shrink the boat to a size that fits in the bowl of the wine glass.
  5. Position the boat so that it's resting on the wine, centered on the surface of the wine.
If you take a good look at the new image, it looks like the boat is on top of the glass. We need to change this to make our illusion more realistic. There are a couple ways to do this:
  • Use the Eraser tool
  • Use a Bitmap mask
Guess which one we're going to use? Yes, we're going the Bitmap mask route, for a couple reasons. While this method isn't as fast as using the eraser tool, it's non-destructive; we're not deleting any pixel data. It's also more flexible in terms of editing. It's not so easy to "un-erase" pixels, but it's a snap to change what a mask shows or hides.
  1. Create a duplicate layer of the background (wine glass) layer, by dragging the background layer onto the New Layer icon in the Layers Panel. Move this layer to the top of the Layers panel by clicking and dragging it. Our sailboat is now hidden.
  2. Rename this layer to "glass mask."
  3. Adding the bitmap mask is quite easy in this case. Make sure the glass mask layer is active.
  4. Move your cursor over top of the sailboat vector mask.
  5. Hold down the Control/Command key and click once. Instantly, you will see a bitmap selection - identical to the vector mask - appear on the canvas.
  6. Invert the selection by going to SELECT > SELECT INVERSE
  7. Ensuring that the glass mask layer is still active, click on the Add Mask icon at the bottom of the Layers panel. Our sailboat reappears! But wait - it looks just like it did before. Not to worry; that's why we created the bitmap mask. Notice that this mask is the opposite of the vector mask. The white area represents the part of the image we can see through the mask. It may be a little strange to wrap your head around in this case; we usually thing of a mask as hiding a lot and showing a little. In this case, we're showing a lot and only hiding the area occupied by the sailboat.
  8. Choose the Zoom tool, then click and drag a box where the sail and glass rim are located. This should zoom you in to about 650%.
  9. Now, we're going to alter this bitmap mask. Unlike a vector mask bitmap masks are changed by using the Brush tool. White color subtracts from the mask, black adds to the mask.
  10. Select the Brush tool, and set its size to 1 pixel and choose Soft Rounded from the Stroke Category dropdown menu in the Properties inspector. Make sure the stroke color is set to white and that the mask is selected.
  11. Carefully draw a line through the sails where the rim of the wine glass should be. The goal here is to show just the rim; that's why we chose a very small brush, and zoomed in so close to the work area. If you make a mistake, or go off course, don't worry; change the stroke color to black and paint over the mistake. Problem solved, and no need to use the undo command. Figure 8 shows a close-up of this in action.
  12. Use this same technique, but with a larger soft brush (15, for example) to touch up any areas around the boat that seem to stand out. For example, your original vector mask may have left behind a few dark blue pixels from the original water background. You can add to the bitmap mask to hide any of these artifacts. I also used this method to soften up the area where the hull of the boat and the wine meet.
This Is NOT the Blue Nose!
  1. One thing you might notice now - if not before - is that our sails look a little on the blue side. Too cool a color with all that wine, so we'll warm things up a little by using the Replace Color tool, found in Fireworks MX 2004. This tool will selectively replace one color - or range of hues - with another color.
  2. Select the sailboat layer. Make sure the sailboat image is active, NOT the mask.
  3. Zoom in so that the sailboat fills the workspace.
  4. Choose the Replace Color tool from the tool bar. Look down at the Properties Inspector.
  5. Click on the color well that says Change. When the Color Picker appears, move your cursor midway up the sail at the bow of the boat. Click once. You'll see that the Change color has switched to a pale blue.
  6. Now click on the To color well. Rather than picking a color, put this value in the input box of the Color Picker: #FFF3CE. Use the following settings for the tool's attributes:
  • Size: 40
  • Shape: Round
  • Tolerance: 55
  • Strength: 100
  • Colorize: Un-checked
  1. Now just paint over the sailboat. Don't even worry about going outside the lines. Between the tolerance setting and the mask, there will be no problems to see. Below are before and after examples of using the Replace Color tool.
If you're using Fireworks MX or earlier, you can get the same effect by using the Hue/Saturation Live Effect, or the Curves Live Effect. It takes a bit more time, but the results should be decent.

The Clean Up
With our boat afloat in the wine, and the color cast taken care of, we just have a last few touch-ups to make, all of which are applied to our glass mask layer. As I mentioned earlier, this wine shot was done fairly fast, and as a result, there are a few reflections in the wine bottle and glass that I'm not happy with. Our friend, the Rubber Stamp tool will be coming to our aid.

  1. Make the glass mask layer active, and click on the bitmap object to make sure it's active.
  2. Choose the Rubber Stamp tool from the Toolbar (Shortcut key: S). Sample a clean area of the wine in the wine glass, and stamp over the weird reflections in the wine glass.
  3. Use the Blur Tool to soften the edges of your Rubber Stamp work where necessary. Try an Intensity of 50 or lower for the Blur tool. You can also use the Blur tool to soften up some of the shadowy reflections on the wine bottle itself.
  4. Select the Sharpen tool. Set the size to 20 and the Intensity to 15. Paint over the VQA logo only once to give it a bit of added snap. Don't keep painting it, or the sharpening will become heavy and undesirable.

More Stories By Jim Babbage

Jim Babbage (contributor from CommunityMX) comes from the photographic world, and has spent many years as a professional studio photographer. His involvement with the Web began in the mid-90s when the company he worked for had just gotten online. Born and raised in Toronto, Jim teaches imaging, Web design, and photography at Centennial College's Centre for Creative Communications (www.thecentre.centennialcollege.ca). He is a partner in Newmedia Services (www.nms123.ca), a small communications company, specializing in the things he teaches. He is a regular contributing partner to Community MX (www.communitymx.com), where he's written many articles and tutorials for Fireworks, Dreamweaver, and other general Web topics. He has been a guest speaker at TODCON for several years.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
SYS-CON Germany News Desk 08/03/05 01:49:13 PM EDT

Sailing the Wine Dark Sea With Macromedia Fireworks MX. Sailing, sailing over the bounding sea... Or in our case, inside a wine glass. We've all seen the ship-in-a-bottle knick-knack. Well, I'm here to show you how to set a sailboat afloat in a wine glass, using Fireworks MX or MX 2004, vector AND bitmap masks. Heave ho, matey, and don't forget to buckle your swash!