Image Editing Tricks I
This tutorial demonstrates some basic image compositing techniques in Fireworks® 8. Learn how to create and match perspectives using the Distort tool as you place a screenshot over a blank laptop screen.
I’ll also show you a technique that will save you from manual-erase horrors that come with placing one photo over another. Using vector shapes and the Multiply blend mode in Fireworks, you can create adjustable superimpositions and preserve the shadows of the superimposed image. This technique works best with photos of objects with a flat white background, which is standard among stock photos.
Load the base image and add a screenshot
To kick things off, we’ll load the base image into a squeaky clean canvas—in this case, a nice photo of an Apple laptop from stock.xchng. First, turn it into a symbol (choose Modify > Symbol > Convert To Symbol, or press F8) so you don’t wreck it by resizing it over and over.
Figure 1: Start with an image of a laptop with a blank screen.
Figure 2: Choose a screenshot to place on the laptop’s screen.
With the screenshot image selected, use the Distort tool to match the shape of the LCD screen. Use the corners and edges of the LCD screen as a guide to place the distort handles of the screenshot.
Tip: The perspective produced by this distortion is pretty convincing, as it supports the principle that objects farther away appear smaller. This becomes noticeable as you increase the distortion. Try it out.
Figure 3: Use the Distort tool to make the screenshot fit the laptop’s screen.
When you’re done matching the screenshot with the screen, bring the opacity of the screenshot back to 100% so the screen isn’t faded.
Bring the opacity of the screenshot back to 100%.
Add some realism
What LCD viewed from a nonperpendicular angle is complete without a little discoloration? Let’s give our now-lit screen a more realistic look. To accomplish this, first use the Pen tool to draw a four-sided shape that matches the LCD screen outline as closely as possible.
Figure 5: Make the image look more realistic by adding a little discoloration.
Give your newly-created shape a gradient fill from the bottom of the LCD screen to about 3/4 of the way to the top, going from 100% gray to 0% black. Imagine a line cutting the screen in half vertically, and align your gradient handle along that line. Finally, set the shape layer’s blend mode to Interpolation to top off the effect.
Figure 6: The image now has a subtle viewing angle effect.
We end up with an imperfection that provides enough realism, yet is subtle enough that it won’t distract viewers. We now have an image of a laptop that looks more alive with a screen that actually displays something!
Figure 7: The completed image
Superimpose an image
Picking up where we left off, we’ll use our laptop composition as a base photo for this one (see Figure 7).
Import your image to be superimposed into the canvas. For this task, choose a stock photo with the subject casting a shadow on a white backdrop. I grabbed an image of mangoes from stock.xchng; an apple was just too predictable. Convert it into a symbol (Modify > Symbol > Convert To Symbol), and then give it an opacity of 50% to allow you to see underneath when positioning and resizing the image.
Figure 8: Import the image you want to superimpose and change its opacity to 50%.
Use the Scale Tool to resize the mango image down to correct scale. Rotate the mango image to ensure that the shadows and highlights of both the base and superimposed photos match light sources.
When you’re done with the placement, set its opacity back to 100%, and change the blend mode to Multiply. This will allow the shadow parts to blend in with the rest of the base photo. We’ll take care of the mangoes themselves in the next few steps.
Figure 9: The shadows blend in perfectly.
Bring back the opacity
Now, trace a shape around the mangoes with the Pen tool. If your object has holes in it, trace over them as separate shapes, select them along with the base shape, and perform a Punch (choose Modify > Combine Paths > Punch). You should now have a shape that encloses the mangoes, excluding the shadows or holes.
Figure 10: Trace around the mango
Give your shape a nice white fill, and remove the outline that may have been there when you drew it.
Figure 11: Fill in any spaced in the shape with white.
Finally, move your shape layer directly below the mango layer. This brings back the full opacity of the mangoes.
Tip: At this stage, you can check and adjust your shape path to make sure that no parts of the shape are peeking outside of the mangoes (evidenced by white edges along the object outline).
Figure 12: The mango image is opaque again.
Now you can enjoy watching your mangoes bask in the light of an LCD screen.
Tip: If you’re superimposing a photo with a black background, use Lighten instead of Multiply as the blend mode for your photo, and fill your back shape with black instead of white. The only downside to using photos with a black background is that their shadows don’t show up. You’ll have to put one in afterwards, by either using the Drop Shadow Live Effect, creating a shadow shape and applying Gaussian Blur to it, or by painting it in manually.
Figure 13: The completed image
