Photo Effect Tutorial v3

8/17/2019 Photo Effect Tutorial v3

1/12

Unit 23: Computer Graphics

Adobe Fireworks Tools

Exercise

Tutors: M Gosling / A RafiqueDiploma in Web Based Technologies


2/12

Realistic Photo Tutorial

In this tutorial you will use the following tools:

Copy, Cut, Paste, Paste Inside, Rotate, Crop, Flip 180˚, Resize, Pen, Shape,

Gradient & Solid Colours, Gaussian Blur, Opacity, Group & Ungroup,

Layers,Grid.

Adapted August 2011

http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/


http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/


3/12

Create a new document

Canvas size 500 x 500

Save As

Save the document as realisticPhoto.Date

Layout Grid

If you prefer to work with grids showing choose View | Grid | Show Grid



4/12

Setting up The Photo

First, we create the base photograph. Use the Rectangle Tool to draw a rectangle

with (more or less) the proportions of a standard A4 print, (416 x 278)

LIGHT GREY STROKE 1 PIXEL, CHOOSE ANY COLOUR FILL

Next fill it with a gradient going across the diagonal, from grey to pure white. This will

serve as your base rectangle.

Change to diagonal



5/12

Name the Layer Base Photograph

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.

Note: If the photograph you intend to use is

landscape now is the time to select both objects and

rotate

90˚

Modify | Transform | Rotate 90˚

Rename the new layer TheMask and lock both layers so that you do not move them.



6/12

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.

Once you’re satisfied with the adjustments, bring the image’s opacity back to 100% and

Tip:Convert the image into a symbol (F8) to retain the original image information. Name it

Photo

Unlock the two layers and select the photo layer cut it (Ctrl+X). Select your image mask

and paste your image inside of it (Ctrl+Shift+V) or Edit | Paste Inside. Now you have a

complete base photograph! Give yourself half-a-pat on the back.



7/12

Highlights & Lowlights

Here is where the realism starts to fill in. Select and

copy your base rectangle (Ctrl+C) into thetopmost 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.



8/12

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.

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.



9/12

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.

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 withthe position of our light source.



10/12

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!

Ungroup your “shadow rectangle” (Ctrl+Shift+G) to turn it into an editable path. Use the

Pen Tool 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.


http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/#comment-31944http://graphicssoft.about.com/od/glossary/l/blbezier.htmhttp://graphicssoft.about.com/od/glossary/l/blbezier.htmhttp://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/#comment-31944


11/12

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.

Using the subselection tool

reshape the edges (This will

take extreme care, mistakes

can be undone Ctrl + Z)

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!



12/12

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.


Documents

Photo Effect Tutorial v3