Rapid Fire #1: Photo-Realistic

A demonstration of realism

Make your digital images more convincing and lifelike with just a handful of gradients and custom shadows. Once you’re done, your pictures will look like real photo prints, you’d swear they popped out of the screen.

Note 1: This is the first issue of Rapid Fire, a series of tutorials aimed at intermediate and advanced users of Macromedia Adobe® Fireworks®. I’ll be demonstrating some tips and tricks that take advantage of Macromedia Adobe® Fireworks®’ vector tools and Live Effects. No schedules are planned for subsequent releases, so I’ll just post my tutorials as I finish them.

Note 2: This tutorial was done in Macromedia Adobe® Fireworks® 8, and requires knowledge of gradient fills and Pen Tool usage.

Update 2006-03-10: Thanks to simonline and Greg for pointing out that the Average blend mode can be substituted with a decrease in opacity. Not only would this make the tutorial applicable to Macromedia® Fireworks® MX (and MX 2004), it also creates further flexibility in adjusting the darkness of the corner shadow afterwards. For those of you looking for an Adobe® Photoshop® version of this tutorial, Chris has “roughed up” an adaptation.

Update 2006-09-20: Thanks to Uriel, this tutorial is now available en español!

Update 2009-02-02: Blog Angel did a fantastic job adapting the tutorial for GIMP users. Thanks!

Setting Up The Photo

First, we create the base photograph. Use the Rectangle Tool (Icon) to draw a rectangle with (more or less) the proportions of a standard 4R print, then fill it with a gradient going across the diagonal, from dirty white to pure white. This will serve as your base rectangle.

Base rectangleGradient information

Follow it up with another rectangle, this time colored solid, slightly smaller than and centered on top of the base rectangle. This will serve as your image mask, and creates a nice “white border” around the image. Nobody likes fingerprints on their glossies, y’know.

Image mask

Next, import your image (Ctrl+R) into the current document, and set it’s opacity to 30%. Doing this will make it easy for you to fit and align your image over the mask. Make sure that your image subject is properly cropped inside the mask, and that no part of the mask is “peeking” outside the image.

Image subject and mask aligned

Tip: Before transforming an imported image, convert it first into a symbol (F8) to retain the original image information that you normally lose when resizing or rotating an image as is.

Once you’re satisfied with the adjustments, bring the image’s opacity back to 100% and cut it (Ctrl+X). Select your image mask and paste your image inside of it (Ctrl+Shift+V). Now you have a complete base photograph! Give yourself half-a-pat on the back.

Masked image

Highlights & Lowlights

Here is where the realism starts to fill in. Select and copy your base rectangle (Ctrl+C) into the topmost layer. Change its gradient, going from black (100%) to black (0%), and set its opacity to 50%. Adjust the gradient so that it covers only the upper corner of the base photograph. Decrease the rectangle’s width and height by 2px each, and center it on the base rectangle; this gives the appearance of a highlighted edge contrasted against a gradient shadow.

Gradient shadowGradient and blend mode information

Clone the rectangle you just made (Ctrl+Shift+D) and rotate the new copy 180° (Modify > Transform > Rotate 180°). Then, change its gradient, going from white (100%) to white (0%); this produces the effect of a gradient highlight and a shadowed edge.

Gradient highlightGradient and blend mode information

Nothing Like A Good Shadow

Select all the objects on your canvas and to rotate them (Ctrl+Shift+T, Rotate) 12-15° clockwise. This will give your photograph a more natural and spontaneous placement. Also, this tops off the highlight effect with the earlier gradient fills, as it aligns their directions with our light source situated directly above.

Rotated photograph

And now for the final element: lets add our shadow. But instead of using the built-in Drop Shadow Live Effect, we make use of a more flexible technique.

Natural Shadow Mini-Tutorial

Start off by cloning your base rectangle and moving the copy to the bottommost layer (Ctrl+↓). Give it some shadow-like characteristics with a solid black fill, 60% opacity, and a Gaussian Blur Live Filter (Blur Radius: 4). Nudge it 10px down (Shift+↓) so our shadow coincides with the position of our light source.

Note: make sure to access the Gaussian Blur filter from the Properties Panel. If you use the menu for this filter (Filters > Blur > Gaussian Blur…), you’ll be warned that “This operation will convert vectors to bitmaps,” and you won’t be able to adjust the shape of your shadow afterwards, which we’ll be doing in the next couple of steps. Thanks for the tip, Richard!

Custom shadow part I

Ungroup your “shadow rectangle” (Ctrl+Shift+G) to turn it into an editable path. Use the Pen Tool (Icon) to add some Bézier points to it, one on each side. This will help remove the stiffness that digital images usually suffer from, and allow you to produce more natural-looking shadows.

Custom shadow part II

Now, arrange the points of your shadow such that the Bézier points are lined up with the edges of your base rectangle. Pull each of the corner points down a little further to emphasize “lift” on the corners of the photograph.

Custom shadow part III

Select everything on your canvas and group them together (Ctrl+G). Now your photograph is ready for use as a template for photos on your swanky blog or as part of an edgy digital collage! Life is great, isn’t it?

Finished product

Finishing Touches

After you’ve set a backdrop for your photograph, you’ll need to make some minor adjustments to the opacity of your shadows and highlights. Also, if you change your mind about the position of your light source, you’ll have to make the direction of your gradients and the shape of your custom shadow conform to it. In my example, I gave the base rectangle a slightly rounded edge to make it look dented.

Sample usage

I hope you enjoyed reading my first tutorial as much as I did working on it. Drop me a note if you get to use it in one of your projects.

Need a quick sample to study? Download the source PNG (tutorial01.zip, 677KB) for this tutorial.

186 Responses to “Rapid Fire #1: Photo-Realistic”


Comments are currently closed.