Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Sailing the Wine Dark Sea With Macromedia Fireworks MX

A Fireworks masking project

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
The winery is a real one here in the Niagara region, and it's truly awesome. If you're a red wine drinker, try their Black Cab - very nice. I created the wine shot as a quick test image for some new lighting equipment I was trying out. The winery is a real one here in the Niagara region, and it's truly awesome. If you're a red wine drinker, try their Black Cab - very nice. (See Figure 1) The sailboat was shot while on holiday last summer. (See Figure 2)

Preparing the Images

  1. I started by opening the file named "wine," then selecting the object itself by clicking on the thumbnail in the Layers Panel.
  2. 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.
  3. Go to Effects in the Properties Inspector (P.I.) and click on the "+" sign.
  4. 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.
  5. Click OK.
  6. Save this file with a new name, such as "wine_sail.png."
  7. 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..
  8. 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.
Who Was That Masked Schooner?
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.
  1. 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.

  2. Select both objects in the Layers panel by Shift-clicking them.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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!
  8. 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.

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!

IoT & Smart Cities Stories
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Early Bird Registration Discount Expires on August 31, 2018 Conference Registration Link ▸ HERE. Pick from all 200 sessions in all 10 tracks, plus 22 Keynotes & General Sessions! Lunch is served two days. EXPIRES AUGUST 31, 2018. Ticket prices: ($1,295-Aug 31) ($1,495-Oct 31) ($1,995-Nov 12) ($2,500-Walk-in)
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.