PREMISE: We have just started working in Macromedia Fireworks, learning how to create some basic vector graphics and manipulate some colors and shapes. As a way to practice this art, we will be recreating the look of a popular website, using only Fireworks tricks and tools.

To start, click on the picture below and review ALL of the websites that are available this year. Read over the "Useful Table" below, as well. Select a website that might be of interest to you. If you are comfortable with the Fireworks practice that we have done so far, please select one of the more difficult or challenging websites. If Fireworks so far has not come easily to you, you may wish to select one of the regular websites.

A WARNING ABOUT YOUR WEBPAGE CHOICE: If I think that you should be challenging yourself in Technology class, but you select an easier webpage, you will be graded VERY harshly on your final product and you will need to be almost PERFECT for a good grade. If you select a Challenging website, I will be much more forgiving on your final product grade.

THE WEBPAGES: Click on the image below to bring up the page of the available webpages for this year. There are an unprecedented 34 Webpages to choose from:

A USEFUL TABLE:

EMULATING PHOTOGRAPHS: While it might seem that copying a photograph using only drawing tools might be difficult, it is not impossible and can be done very well, with some time and effort. Consider the two images below. The image on the TOP was the original website, in which the guy on the right is a photograph. In the BOTTOM image, the photograph is almost exactly duplicated using nothing but the PEN TOOL, GRADIENT FILL and TEXTURE.

HOW TO PROCEED: Once you have selected a website to emulate, open a new canvas in Fireworks of the same proportions as your original website graphic. Using some of the Fireworks tools that we have learned so far: Lines, Shapes, Stroke, Fill, Text and so forth, begin recreating your webpage!

Save your work often by clicking File >Save As. Call your file

lastname_EMULATION.png

TUTORIALS THAT YOU WILL FIND USEFUL:

Basic Fireworks Tools, Tips and Techniques:

• Opening Fireworks and Creating a New Canvas.
• LINES and STROKES in Fireworks.
• RECTANGLE TOOL and FILL in Fireworks, including SOLID FILL, GRADIENT FILL, PATTERN FILL and TEXTURE FILL.
• Creating SHAPES and using the PEN TOOL, TEXT and LAYERS in Fireworks.
• Miscellaneous Tools in Fireworks: SCALE, SKEW, DISTORT, OPACITY, COPY and SAVING files in Fireworks, .png and .jpg files and when to use them.
• Bonus Video Tutorial: Saving Files in Fireworks!

Fireworks Effect and Line Adjustment Tools:

• Fireworks Effects: Drop Shadows, Glows and Blurs, plus the Freeform and Knife Tools.

Fireworks Walkthroughs for THIS ASSIGNMENT:

• Fireworks Walkthrough: Setting up the Webpage Emulation Canvas, Zoom Tools and Creating Basic Shapes.
• Fireworks Walkthrough: Using the Pen Tool for Detailed Emulation.

SOME STUDENT EMULATIONS FROM YEARS GONE BY:

Student Emulation	Original Website

STUDENT WEBPAGE EMULATIONS FROM YEARS GONE BY, POSTED ON THE HIGHLANDTECHNOLOGY.ORG GALLERY:

• Samples from the Technology Class of 2009-2010.
• Samples from the Technology Class of 2008-2009

TURNING IN YOUR WORK: When you have completely recreated your webpage, please File >Export Preview>.jpeg (pull down the upper left corner drop down menu, where it says GIF) and then EXPORT your picture as:

lastname_EMULATION.jpg.

Make sure to submit your final JPG file to my M: Drive Drop Box when completed!