Welcome!

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!

@ThingsExpo Stories
SYS-CON Events announced today that SIGMA Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. uLaser flow inspection device from the Japanese top share to Global Standard! Then, make the best use of data to flip to next page. For more information, visit http://www.sigma-k.co.jp/en/.
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp em...
Real IoT production deployments running at scale are collecting sensor data from hundreds / thousands / millions of devices. The goal is to take business-critical actions on the real-time data and find insights from stored datasets. In his session at @ThingsExpo, John Walicki, Watson IoT Developer Advocate at IBM Cloud, will provide a fast-paced developer journey that follows the IoT sensor data from generation, to edge gateway, to edge analytics, to encryption, to the IBM Bluemix cloud, to Wa...
There is huge complexity in implementing a successful digital business that requires efficient on-premise and cloud back-end infrastructure, IT and Internet of Things (IoT) data, analytics, Machine Learning, Artificial Intelligence (AI) and Digital Applications. In the data center alone, there are physical and virtual infrastructures, multiple operating systems, multiple applications and new and emerging business and technological paradigms such as cloud computing and XaaS. And then there are pe...
SYS-CON Events announced today that B2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. B2Cloud specializes in IoT devices for preventive and predictive maintenance in any kind of equipment retrieving data like Energy consumption, working time, temperature, humidity, pressure, etc.
DevOps at Cloud Expo – being held October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real r...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that Suzuki Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Suzuki Inc. is a semiconductor-related business, including sales of consuming parts, parts repair, and maintenance for semiconductor manufacturing machines, etc. It is also a health care business providing experimental research for...
SYS-CON Events announced today that Fusic will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Fusic Co. provides mocks as virtual IoT devices. You can customize mocks, and get any amount of data at any time in your test. For more information, visit https://fusic.co.jp/english/.
SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...
SYS-CON Events announced today that Keisoku Research Consultant Co. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Keisoku Research Consultant, Co. offers research and consulting in a wide range of civil engineering-related fields from information construction to preservation of cultural properties. For more information, vi...
SYS-CON Events announced today that Interface Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Interface Corporation is a company developing, manufacturing and marketing high quality and wide variety of industrial computers and interface modules such as PCIs and PCI express. For more information, visit http://www.i...
SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Daiya Industry specializes in orthotic support systems and assistive devices with pneumatic artificial muscles in order to contribute to an extended healthy life expectancy. For more information, please visit https://www.daiyak...
In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
Elon Musk is among the notable industry figures who worries about the power of AI to destroy rather than help society. Mark Zuckerberg, on the other hand, embraces all that is going on. AI is most powerful when deployed across the vast networks being built for Internets of Things in the manufacturing, transportation and logistics, retail, healthcare, government and other sectors. Is AI transforming IoT for the good or the bad? Do we need to worry about its potential destructive power? Or will we...
SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.