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 Massive Networks 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. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
"The Striim platform is a full end-to-end streaming integration and analytics platform that is middleware that covers a lot of different use cases," explained Steve Wilkes, Founder and CTO at Striim, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that Calligo, an innovative cloud service provider offering mid-sized companies the highest levels of data privacy and security, 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. Calligo offers unparalleled application performance guarantees, commercial flexibility and a personalised support service from its globally located cloud plat...
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, will examine the regulations and provide insight on how it affects technology, challenges the established rules and will usher in new levels of diligence...
SYS-CON Events announced today that DXWorldExpo has been named “Global 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. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, 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. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
In his session at @ThingsExpo, Sudarshan Krishnamurthi, a Senior Manager, Business Strategy, at Cisco Systems, discussed how IT and operational technology (OT) work together, as opposed to being in separate siloes as once was traditional. Attendees learned how to fully leverage the power of IoT in their organization by bringing the two sides together and bridging the communication gap. He also looked at what good leadership must entail in order to accomplish this, and how IT managers can be the ...
DX World EXPO, LLC., a Lighthouse Point, Florida-based startup trade show producer and the creator of "DXWorldEXPO® - Digital Transformation Conference & Expo" has announced its executive management team. The team is headed by Levent Selamoglu, who has been named CEO. "Now is the time for a truly global DX event, to bring together the leading minds from the technology world in a conversation about Digital Transformation," he said in making the announcement.
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
In the enterprise today, connected IoT devices are everywhere – both inside and outside corporate environments. The need to identify, manage, control and secure a quickly growing web of connections and outside devices is making the already challenging task of security even more important, and onerous. In his session at @ThingsExpo, Rich Boyer, CISO and Chief Architect for Security at NTT i3, discussed new ways of thinking and the approaches needed to address the emerging challenges of security i...
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
"DX encompasses the continuing technology revolution, and is addressing society's most important issues throughout the entire $78 trillion 21st-century global economy," said Roger Strukhoff, Conference Chair. "DX World Expo has organized these issues along 10 tracks with more than 150 of the world's top speakers coming to Istanbul to help change the world."
"We provide IoT solutions. We provide the most compatible solutions for many applications. Our solutions are industry agnostic and also protocol agnostic," explained Richard Han, Head of Sales and Marketing and Engineering at Systena America, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We are focused on SAP running in the clouds, to make this super easy because we believe in the tremendous value of those powerful worlds - SAP and the cloud," explained Frank Stienhans, CTO of Ocean9, Inc., in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We've been engaging with a lot of customers including Panasonic, we've been involved with Cisco and now we're working with the U.S. government - the Department of Homeland Security," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
The financial services market is one of the most data-driven industries in the world, yet it’s bogged down by legacy CPU technologies that simply can’t keep up with the task of querying and visualizing billions of records. In his session at 20th Cloud Expo, Karthik Lalithraj, a Principal Solutions Architect at Kinetica, discussed how the advent of advanced in-database analytics on the GPU makes it possible to run sophisticated data science workloads on the same database that is housing the rich...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
What sort of WebRTC based applications can we expect to see over the next year and beyond? One way to predict development trends is to see what sorts of applications startups are building. In his session at @ThingsExpo, Arin Sime, founder of WebRTC.ventures, discussed the current and likely future trends in WebRTC application development based on real requests for custom applications from real customers, as well as other public sources of information.
"MobiDev is a Ukraine-based software development company. We do mobile development, and we're specialists in that. But we do full stack software development for entrepreneurs, for emerging companies, and for enterprise ventures," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.