Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Trace and Draw an Image   


Featured Fireworks & Dreamweaver Template

Family Template 7
Family & Kids

Trace and Draw an Image in Fireworks

In this tutorial we are going to learn how trace and draw an image using Fireworks. You will learn how to draw a Panda in Fireworks by tracing an image. The source .png file can be downloaded at the end of the tutorial.

Panda Picture

Tutorial Details

Program: Adobe Fireworks CS4

Estimated Completion Time: 30 Minutes

We have selected the below "Panda" picture to trace and draw. You can copy this image to Fireworks and start tracing the image as shown in the steps below.

Panda Picture

Draw a circular object with the stroke color #0000 above the ear of the panda using the Ellipse tool. Make sure that the Stroke Category should be Basic > Soft Rounded and size > 2px. Next select the drawn circular object and clone (Ctrl+Shift+D) it. Then move the selected cloned object to the other ear of the panda picture.

Panda PicturePanda Picture

Now maximize the screen size using the "Set magnification" to 300%, so that It will be easy for you to draw the details of the picture. The maxzimize option will be present in the bottom-right of the screen.

Panda Picture

By using the Subselection Tool you can modify the anchor points of the object. Here using the Subselection tool select the circles that you have drawn and adjust the lines according to the ears of the Panda picture.

Panda Picture

Panda Picture

Draw an ellipse for the head portion of the Panda. Then using the Pen tool create some bezier points and adjust it, so that you should end up like a Panda image. Follow the image guidelines below. (Note: Pen tool is used for all kinds of options like creating, removing and tweaking bezier points and curves.)

Panda Picture Panda Picture

Panda Picture

Next step is to draw the eyes of the Panda. The same way you should follow to draw an ellipse object using the Ellipse Tool as described above. Select the Scale tool or Modify > Transform > Scale. Then rotate(i.e, Move the pointer outside the object until the rotation pointer appears) and resize the ellipse object to match with the eyes of the Panda.

Panda Picture
Panda Picture

Similar to the steps above draw the eyes, nose and mouth parts of the panda picture. Finally select all the objects which is on the face of the Panda such as eyes, nose & mouth parts and go to Modify > Group (Ctrl + G) to group them.

Panda Picture

Draw the legs and remaining portion of the panda by plotting points with the Pen tool.

Panda Picture

Now go to Modify > Combine Paths > Union(Ctrl+Alt+U) to combine all the selected paths of the image.

Panda Picture

Panda Picture

Now draw the stomach part of the Panda through the pen tool. Hence we have completed the drawing of the entire Panda.

Panda Picture

If we delete/remove the original Panda image from the screen of the Adobe Fireworks, then the outlines drawn by us can be seen clearly.

Panda Picture

After that, set the Fill Color to #F2F1EC for head and stomach, eyes - #97946B, nose - #4D4948 and for rest of the body #1E1A17.

According to the picture, you can make the shape of the object to be placed front or back. Go to Modify > Arrange > Bring to Front

Panda Picture

The final output of the Panda image drawn by us will be as below.

Panda Picture

If you wish, you can set some colorful Fill Color to the image. Here I have given an example of using different color for the same Panda.

Panda Picture

Download Source File

Source File ( .png )

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage