Unit 23: Computer Graphics

Adobe Fireworks Tools

Exercise

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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/

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

Next, import your image (Ctrl+R) into the current document, and set its 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 youre satisfied with the adjustments, bring the images 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.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

Decrease the rectangles 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.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

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), youll be warned that This operation will
convert vectors to bitmaps, and you wont be able to adjust the shape of your shadow
afterwards, which well 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 Bzier 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 naturallooking shadows.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

Now, arrange the points of your

shadow such that the Bzier 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!

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies

Finishing Touches
After youve set a backdrop for your photograph, youll need to make some minor
adjustments to the opacity of your shadows and highlights.

Tutors: M Gosling / A Rafique

Diploma in Web Based Technologies