| By Jim Babbage | Article Rating: |
|
| August 3, 2005 02:15 PM EDT | Reads: |
26,010 |
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!
Combining images is part of the fun with programs like Fireworks. Making those images look like they belong together - to fool the eye, as they say - is challenging and rewarding. Take this unlikely pair of images, for example: a studio beauty shot of a wine bottle with a glass and a sailboat. Wouldn't it be neat to make the sailboat seem as if it were floating inside the wine glass?
If you answered "yes," continue on. If you answered "no," re-read the previous paragraph and answer, "yes," this time.
Now that we're all in agreement, let's set sail - errr - get to work.
The final result of this collage makes use of a few layers and two masks, one vector mask and one bitmap mask: To neaten things up a little, I also work with the Rubber Stamp, Blur, Sharpen, Dodge, and Burn tool and Replace Color tools. This is a full project from start to finish, so we'll be doing more than just adding the masks.
On that note, I would also mention that it's a good idea if you at least have a passing understanding of the Layers Panel, general masking techniques, and the Pen tool. There are several good introductory tutorials on CMX that can help you get acquainted with these Fireworks Features:
- Understanding the Pen Tool
- The Elements of Vector Graphics
- Fireworks MX - The Basics - Part 2
- Using Masks in Fireworks
- Retouching Images in Fireworks MX
- Fireworks MX 2004 Piece by Piece - Bitmap Tools: Part 1
- Fireworks MX 2004 Piece by Piece - Bitmap Tools: Part 2
Preparing the Images
- I started by opening the file named "wine," then selecting the object itself by clicking on the thumbnail in the Layers Panel.
- The image needs a couple adjustments to the Levels. I'd like a bit more snap from the wine shot, but not so much that we lose highlight detail. I find that almost any digitized image will benefit from a bit of tweaking with Curves or Levels.
- Go to Effects in the Properties Inspector (P.I.) and click on the "+" sign.
- Choose ADJUST COLOR > LEVELS. I set my Input Levels to the following from left to right: 10, 0.92, 236. Your Levels dialog box should look like Figure 3 below if you're using the wine image.
- Click OK.
- Save this file with a new name, such as "wine_sail.png."
- I then opened the sailboat shot. This file has two layers: the background layer is the original image, untouched. The mask layercontains a masked version of the sailboat..
- I want to darken this image a bit, so we have better separation and contrast when the two shots are merged. Once again, go to EFFECTS > ADJUST COLOR> LEVELS. The Input Levels for this image should be: 79, 0.94, 255.
Our first mask is for the sailboat. We want to hide as much of the background as possible. To do this, we'll create a Vector Mask by using - gasp - the Pen tool. The Pen tool will give us a lot of control when creating the mask, and flexibility in editing the mask after it's initially created.
- Zoom in to 150%, and using the Pen tool, click at the top of the sail to start the path, then follow the main shape of the boat, clicking the mouse to change direction, to create an outline around the major shape of the sailboat. To create a curve section of the path, click, and drag the mouse. Don't worry if you're not 100% accurate at this point; after we've created the main outline, we can tweak the individual points with the Sub-Selection tool (try doing that with the Polygon Lasso!). Basically, we need to trace the main outline of the sailboat. You can see the completed path in Figure 4. Set the fill for white, since we'll be using this same shape as a bitmap mask later on in the tutorial, and without the white fill, it won't work.
For much more information on the Pen tool, be sure to check out Kim Cavanaugh's Pen tool tutorial, complete with video segments. In fact, you may want to see Kim's tutorial BEFORE you go any further. It's a freebie on CMX.
- Select both objects in the Layers panel by Shift-clicking them.
- Go to MODIFY > MASK > GROUP AS MASK. Instant hidden background! Well, most of it, anyway. Take a look through the sails; zoom in if you need to. We can still see water in the background as in Figure 5. No worries though, and no need to start over. Fireworks will let us add to the mask while it's grouped with our bitmap image. This next part is cool, I must admit.
- Select the Mask object in the Layers panel by clicking on it. You'll see it outlined in yellow when it's active, and the path itself also displays in yellow. Zoom in to at least 300%, and select the Pen tool. We'll start at the top of the sail. If you don't see the tip of the sail, hold down the space bar and your Pen tool will switch to the Hand tool. Click and drag to scroll higher in your image.
- When you're at the top of the sail, release the space bar and click once at the highest point where you still see the sky/water background. Continue to click the Pen tool, following the outline of the sail (it's important that you go in this direction first, rather than following the easy straight line of the mast). If you run out of canvas area, just hold the space bar down again and scroll lower. The Pen tool will wait until you've let go of the space bar before it starts to work again.
- Continue to follow the outline of the sail until you reach the bow of the boat. Click to change direction, and begin to follow the top railing, back towards the mast. Don't panic if part or all of your sail gets covered by the mask; this is only temporary. As you trace the outline, feel free to click the Pen tool to set a straight point, or click and drag to create a curved path section. If you need to adjust the path after it's been created, use the sub-selection tool.
- When you get to the mast, click one last time to change direction, and move your Pen tool back to your starting point at the top of the sail. Click on the starting point to close the path. You've just added to your vector mask, knocking out more of the background. Cool, huh? And you didn't even need to ungroup the two objects!
- Continue this process to mask out other parts of the background until all you see is the sailboat. Make sure to save your file as you go; you're doing a lot of work and I'd hate for it to get lost in a crash.
Published August 3, 2005 Reads 26,010
Copyright © 2005 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
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.
![]() |
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! |
||||
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Adobe Flex Developer Earns $100K in New York City
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Ph.D. in Twitter Anyone?
- Eolas Sues the Internet
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Adobe Betas Target RIAs and Cloud Computing
- Special Report on the Emerging Cloud Computing Trend
- Adobe Cans Another 9% of its Workforce
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Ulitzer Live! New Media Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Software Flexibility in the Cloud - Part 4 of 5
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Is Microsoft as Free as Open Source?
- Adobe Reader Sued
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Where Are RIA Technologies Headed in 2008?
- Cover Story: How to Increase the Frame Rates of Your Flash Movies
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Your First Adobe Flex Application with a ColdFusion Backend
- Adobe Flex 2: Advanced DataGrid
- i-Technology Blog: Death-Knell For "Rich Media? Hardly!
- Adobe/Macromedia - Microsoft, Look Out!
- How To Create a Photo Slide Show ...
- Adobe Flex Interface Customization - Themes, Styles, Skins
- Personal Branding Checklist
- Has the Technology Bounceback Begun?
- "Real-World Flex" by Adobe's Christophe Coenraets





































