SixThings

This dual serving of Rapid Fire demonstrates some basic image compositing techniques in Adobe® Fireworks®. This is the first of two parts, and will serve as a simple intro showing how to create and match perspectives using the Distort Tool. And what better example than putting a screenshot over an empty screen?

Starting With A Blank Screen

To kick things off, we load our base image into a squeaky clean canvas. In this case, we use a nice photo of an Apple laptop from stock.xchng. (Can you tell i’m clueless of Mac models?) Turn it into a symbol (Modify > Symbol > Convert To Symbol…, or F8) so you don’t wreck it resizing over and over.

The Right Screenshot

Similarly, place an appropriate screenshot onto the canvas. Convert it into a symbol, then set it’s opacity to 50% to later aid in positioning it over the LCD screen of the laptop. (Thank you, GreenCapsule for educating me in the choice of screenshot.)

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 placing the distort handles of the screenshot.

Note: The perspective produced by this distortion (at least in Adobe® Fireworks®) is pretty convincing, as it seems to recreate the principle of objects farther away being smaller. This becomes noticeable as you and increase the distortion. Try it out.

When you’re done matching the screenshot with the screen, bring the opacity of the screenshot back to 100%. We don’t want a faded screen, now do we?

Adding Some Realism

What LCD viewed from a non-perpendicular angle is complete without a little discoloration? Let’s give our now-lit screen a more truthful look. To accomplish this, first use the Pen Tool to draw a four-sided shape that matches the LCD screen outline as close as possible.

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.

We end up with an imperfection that provides enough realism, yet subtle to avoid distracting viewers. We now have an image of a laptop that looks more alive with a screen that actually displays something! When you’re ready for more image compositing, head on over to the next installment. There you’ll also find the source PNG to study all the steps we performed.

Related posts

1. Rapid Fire #5: Image Editing Tricks Part II
2. Rapid Fire #1: Photo-Realistic
3. Rapid Fire #8: Extracting Logos