Creating Photographic Effects Fireworks

8/8/2019 Creating Photographic Effects Fireworks

1/10

Macromedia - Developer Center : Creating Photographic Effects wi... http://www.macromedia.com/devnet/mx/fireworks/articles/photo_ef

of 10 7/1/2005 12:47 P

Try (http://www.macromedia.com/go/devcenter_fw_try) Buy (http://www.macromedia.com/go/devcenter_fw_buy)

Fireworks Article

Creating Photographic Effects with Fireworks

Jim BabbageCommunity MXTeam Macromedia (http://www.macromedia.com/support/forums/team_macromedia/team_members/206.html)

Note: This article first appeared on Community MX .

As I was browsing through the latest issue of my favorite photo magazine Photolife, I came upon a truly inspiring article by photographer StephenPatterson. This article detailed how, digitally, to reproduce (or create) some different traditional film camera techniques. As is the norm, thesetechniques were described using Photoshop. Well, I thought I would share my own take on these creative ideas using my favorite web imagingsoftware, Fireworks.

In section one of this article, I will demonstrate how to mimick the Orton Effect. The original technique, developed by Vancouver Islandphotographer Michael Orton, works by sandwiching two slides together a sharply focused image and a duplicate that is deliberately blurred. Theoverall result is a dreamy, ethereal image, watercolor-like in nature.

In section two, I will show how to use one image to create different types of multiple exposure effects. The traditional technique requires you tomake multiple exposures on a single frame of film. The Fireworks method I describe only requires a single digital image.

Requirements

To complete this tutorial you will need to install the following software and files:

Fireworks MX 2004

Tutorials and sample files:

photo_effects_samples.zip (ZIP, 286K)

Prerequisite Knowledge:Basic familiarity with Fireworks MX 2004

Examples of the Orton Effect

The steps I describe will vary depending on your images, but that is at least half the fun and makes this a creative project for you. You decide whatyou likehow far to push the result. Uses for this effect include page design, header graphics, background images, and the like. Below are four

examples of my finished experiments. You can try this out with the supplied images, or feel free to use your own.

Original Image I mage w ith the Orton Effect applied

Figure 1. Daisies Figure 2. Daisies with the Orton Effect applied
http://www.macromedia.com/devnet/mx/fireworks/articles/photo_efhttp://www.macromedia.com/go/devcenter_fw_try)http://www.macromedia.com/go/devcenter_fw_buy)http://www.macromedia.com/support/forums/team_macromedia/team_members/206.html)http://www.macromedia.com/support/forums/team_macromedia/team_members/206.html)http://www.macromedia.com/go/devcenter_fw_buy)http://www.macromedia.com/go/devcenter_fw_try)http://www.macromedia.com/devnet/mx/fireworks/articles/photo_ef


2/10


of 10 7/1/2005 12:47 P

Figure 3. Yellow maple leaves Figure 4. Yellow maple leaves with the Orton Effect applied

Figure 5. Lake Figure 6. Lake with the Orton Effect applied

Figure 7 . Maple leaves on rocks Figure 8. Maple leaves on rocks with the Orton Effect applied

Applying the Orton Effect

As indicated, the Orton Effect requires two imagesone sharply focused and the other one blurred. When shooting film, a photographer wouldhave to shoot the subject twiceonce sharply focused and once incredibly out of focus. Bracketed exposures might also give you more creativeoptions. In the digital world, you just need a single sharply focused image from which you can create your duplicate, blurry counterpart.

Bracketing is an exposure technique, where you deliberately overexpose (add more light) or underexpose (take away light) your film to get resultsthat are lighter or darker than normal.

Using Live Effects , and the Layer Blending Modes , you can make all the adjustments you need to create exactly what you want. I have foundthrough experimentation, that you get more dramatic results with images that have a light background. You can get equally compellingalthoughmore subtleresults with images that have a darker background.

Begin by opening the fallen_birch.jpg file or one of your own.1.

Set the canvas color to white by selecting Modify > Canvas > Canvas Color and then select the white option.2.

In the Layers panel, rename the background layer to Blur Layer by double-clicking the background layer name.3.

Create a duplicate of the layer by dragging it down to the New Layer icon in the Layers panel.4.

Rename this layer Multiply Layer . This layer should be the topmost layer. If it's not, move it above the Blur layer.5.

Hide the Multiply layer from view by clicking the eye icon next to the layer name.6.

Select the Blur Layer and choose Effects (+) > Adjust Color > Levels. The Effects plus(+) button is in the Property inspector. If the Effectsplus(+) button is not active, try selecting the other layer and then select the thumbnail image in the Blur Layer again.

7.

Set your input values as you see in Figure 9. Those values are, left to right, 31, 2.34, and 194 .8.
http://www.macromedia.com/devnet/mx/fireworks/articles/photo_efhttp://www.macromedia.com/devnet/mx/fireworks/articles/photo_ef


3/10


of 10 7/1/2005 12:47 P

Figure 9. Levels settings for the blurred image. Feel free to experiment with this.

Click OK. In case you are wondering, the idea is to make this blur image lighter than normal. Your image should look similar to Figure 10.

Figure 10. Slightly overexposed and higher in contrast, t his image will change significantly when blurred.

9.

Add a second Live Effect by selecting Effects (+) > Blur > Gaussian Blur.10.

Set the value of the blur to 20 and click OK. The image is now seriously out of focus. Just the way you want it.11.

Make the Multiply layer visible again and select it.12.

You need to alter the tonality of this image, but you'll do so using the Brightness/Contrast Live Effect, found in the Adjust Color menu(Effects (+) > Adjust Color > Brightness/Contrast).

13.

Set the Brightness to a value of 50 . Adjust the Contrastif necessaryso it stays around 0. Click OK. As bad as this looks right now,these changes are necessary so the blending mode works.

14.

With the top layer active, select the Blend Mode pop-up menu in the Property inspector and change the Blend Mode from Normal toMultiply. TA DAAAA! The blending of the two images through the Multiply Blend Mode gives you a soft, dreamy quality. To alter the effectslightly, adjust the Opacity of the top layer to about 80 . The Opacity slider is next to the Blend Mode pop-up menu in the Propertyinspector.

15.


4/10


5/10


of 10 7/1/2005 12:47 P

The digital equivalent only needs one image, but you will treat Fireworks much like a camera, creating your multiple exposures and altering thecomposition of each frame through movement, brightness, blur, and blending modes. I will also show you how far you can take this effect after it'sdone.

Below are some examples of my finished experiments, all from the same image. It is not the goal of this tutorial to demonstrate each and everytechnique; my goal is to get you excited about trying these ideas for yourself.

Figure 14. Original image

Figure 15. Multiple repositioned images with low opacity

Figure 16. Multiple repositioned images with low opacity, a lighten Blend mode, with one bottom image, not repositioned, 100% opacity,and no blending

Figure 17. Nine objects, each rotated 30 degrees, low opacity


6/10


7/10


of 10 7/1/2005 12:47 P

Figure 20. Each repositioned object is named

Select Modify > Canvas > Fit Canvas to resize the canvas to hold all parts of the objects.12.

The result of this positioning should look similar to Figure 21. W e're getting a result similar to tilting a camera up and down, in smallamounts, over a series of exposures.

Figure 21. An effect similar to t ilting a camera up and down, in small amounts, over a series of exposures

13.

If you like this look, you can stop right here, but I want to play a bit more, and I hope you'll follow along. You will notice that you can clearly see aseries of horizontal lines, indicating the edges of each moved image. It's kind of neat, but not what I want.

Select ALL the images that you repositioned. A quick way to do this is to just click the layer name (Layer 1) and then Shift+click theuppermost object to deselect it (the one we didn't reposition).

1.

Now select Effects(+) > Blur > Gaussian Blur and set the value to 5. Out of all the Live Effects available, the Blur effects seem to tax theresources of Fireworks (and your system) the greatest. At best, expect a slight delay as Fireworks processes this change. At worst, see youafter lunch.

2.

Deselect all the images. Your image should look similar to Figure 22. Notice that you still have a hard delineation for the top image. I don'twant to apply a blur to this object, or everything will just look out of focus.

3.


8/10


of 10 7/1/2005 12:47 P

Figure 22. The completed multiple exposure.

Hide the blurred objects from view by clicking their respective eye icons, so that you only see the topmost object.4.

Select the Rectangle tool and set the fill color to white.5.

Draw a box over the top the image. The box should extend past the canvas on the left and right but should not be as tall as the imagebehind it. In all, make the rectangle about 40 pixels shorter than the image.

6.

Center the rectangle vertically, so that there is an even amount of the image poking out of the top and bottom of the rectangle.7.

Change the Edge Properties of the rectangle to Feather by selecting Feather from the Edge pop-up menu in the Property inspector. Give ita value of 10.

8.

Shift+click the edge of the image poking out from either the top or the bottom of the rectangle to select the image along with the rectangle,and then select Modify > Mask > Group As Mask. Make the other objects visible again. The hard edge of the top image is gone, and youhave a very interesting, ghost-like effect. The subtleties of this effect are more noticeable at a larger size.

You can also position your multiple objects in different directions, or even distort them with the Transform tools (Modify > Transform). Tryexperimenting with the different Blend Modes and see what other cool examples you can get.

Figure 23. An example of moving the objects in different directions

9.

More Photo Tricks

Back at the beginning of the Multiple Exposures section, I mentioned I would review ways to take this effect further. The main way is to stopthinking of your photograph aswellas a photograph. Think all the way back to Figure 18. I created the final image using 9 clones, all rotated tomake a 360 spin of the image. I set the opacity for all of them to 39. I applied a Zoom Blur to all nine objects as well. Figure 18 was a cropped

version. Here's the original before cropping:


9/10


of 10 7/1/2005 12:47 P

Figure 24. An uncropped version of Figure 18

I stared at this long enough that it got me thinking what else does this look like? My first thought was an iris of a human eye. So, with a littlemasking and the addition of a couple paths and some vector shapes, *I* made an *eye* as shown in Figure 25.

Figure 25. I've got my eye on you!

I kept thinking about other round things that might look like this, and the next one to enter my brain was no spare thought, by any means:

Figure 26. Strike out on your own and create some original designs

Spare. Get it? I kill me! The rest of you are no doubt too busy groaning to kill me. I masked the main image (as I did with the eye) to create theround shape. I added additional vector ellipses to create the finger holes, the highlight, and the perspective shadow.

ConclusionWhile Fireworks may not have all the doo-dads and what-cha-ma-call-its that Photoshop has, I think you can still do some pretty neat things withphotographs if you take some time and think about what you want to accomplish.

About the authorJim's involvement with the web began in the mid-nineties. The company Jim worked for had just got online. The hosting company designed thewebsite. It sucked. Convinced there had to be a better way, Jim learned basic HTML by reading web page code. It wasn't long before he yearnedfor a more visual way of creating pages. That's when he discovered Macromedia Dreamweaver 1.2 and Fireworks.


10/10


0 of 10 7/1/2005 12:47 P

Company | Site Map | Privacy & Security | Contact Us | Accessibility | Report Piracy | Send Feedback

1995-2005 Macromedia, Inc. All rights reserved.Use of this website signifies your agreement to the Terms of Use.

Search powered by

Born and raised in Toronto, Jim teaches imaging, web design and photography at Centennial College's Centre for Creative Communications . He'sa partner in Newmedia Services , a small communications company. Jim is a regular contributing partner to Community MX , where he has writtenmany articles and tutorials for Fireworks, Dreamweaver, and general web topics. He's even written some photo-related pieces. He has been aguest speaker at TODCON 2003, 2004 and 2005.

Creating Photographic Effects Fireworks

Documents

Transcript of Creating Photographic Effects Fireworks