Fireworks Lab

Be cynical—IT people don't believe everything they see because IT can help people lie.

In this lab exercise, we'll work with digital images using digital cameras and Adobe Fireworks. The pictures you take will also serve as the basis for your work in the project.

If you know how to use Photoshop or some other image manipulation program, you are free to use that instead of Adobe Fireworks. Unfortunately, we do not have Photoshop installed on our computers because it costs a good deal of money for the license; the ITC does have some computers with Photoshop installed. You may actually be able to find image-manipulation programs online, many of which work similarly to Fireworks and Photoshop (at least as far as this lab is concerned).

Modifying a Photo

1. Take a digital photo. Obtain a digital photo of yourself. If you don't have one handy, you can ask someone to take your picture with a camera (in fact, the instructor will have a camera at the beginning of class). However, this must be a full resolution image (a minimum of two megapixels).
2. Digitally modify your photo. Transfer (or copy) your chosen picture to your H: drive. You can now digitally modify your file, as follows:
   • First, make a copy of your image file, and work on the *copy* for the rest of the lab. If you have problems, you can then get back to the original version:
     1. Open Windows Explorer (the icon looks like a file folder on the bottom of your screen).
     2. Maneuver to your H: drive where you stored your picture file.
     3. Right-click on the picture file and choose "Copy"
     4. In some empty space of the folder, right-click and choose "Paste" -- this will put a copy of the picture file in the folder
     Rename your files to give them more helpful names: the original should be called "smn4.jpg" (where smn4 is replaced with your user id), and the picture you will be changing should be called "smn4-modified.jpg"
     • To rename a file, slowly click on the file name until it becomes editable, or simply right-click on the file name and choose "Rename"
     At this point you should have two picture files which are the same size, both stored on your H: drive.
   • Open the image you wish to change in Adobe FireWorks by starting the FireWorks program, and then using "File"-"Open" to open the file to be modified (smn4-modified.jpg). When the picture displays, you will probably only see the top left corner of your image. Look at the bottom right corner of the frame and you should see an indication of the dimensions of the picture (maybe something like 2448x3264). Next to this will be an indication of the current zoom level. Click on the zoom indicator and you can change the magnification to something smaller that allows you to view the entire picture.
   • Annotate the image with your name: Select the "Text" tool on the tool bar and type your name onto the image. Note: the "Text" tool looks like the letter 'T'. To change the font properties of your text (make it a different size or font), highlight your text and then make changes in the bottom panel of the screen.
   • Save your modified picture as a JPEG file (by choosing "File"-"Save"). If you inadvertently saved it as a PNG file, you can choose "File"-"Export Wizard" to revert to the JPEG format (JPEGs tend to be much smaller).

Here's an example image of Prof. Vander Linden that he modified.

Shrinking a Photo

When you build a webpage and would like some photos to decorate it (like Calvin's website and Vander Linden's personal homepage), you need to work to make the images as small as they can be.

Vander Linden chose to reduce his image's size down to 15–20 kilobytes. Photos taken by a digital camera are much larger than this. (An iPhone picture is around 70kb; an image from a real digital camera will be at least 800kb, even at modest resolutions. Scanners will also produce very large files.)

Modern suggestions for websites say that images should be 30–100kb in size, and the images on one webpage should add up to no more than 100kb. Wait five years, and these numbers will go up again.

Try shrinking down your image twice, into these two ranges: 15–20kb and 30–100kb. Here's how:

1. Make two more copies. Follow this instructions above to make two copies of your modified image . Be sure to use small and medium in the names of these copies so that you know which file is supposed to be small and which one medium sized. You should now have 4 files named with your user name: smn4.jpg, smn4-modified.jpg, smn4-small.jpg, smn4-medium.jpg.
2. Shrink up the images. Start with the small file. Open the image in Fireworks, and shrink the file size by modifying the image. Some things to try:
   • Crop the image. Use the Crop tool (located under the white arrow on the upper left side of your FireWorks screen) to select a section of your image; double click on the selected area to keep only that area.
   • Reduce the resolution. Right-click on the image, and select "Transformations"-"Scale". Resize the image by dragging on one of the corners or sides. If you can see a checkerboard pattern "behind" your image, click on that pattern, and hit the "Fit Canvas" button, which will be near the bottom of the screen.
   • Reduce the JPEG quality. Choose "File"-"Save As"; make sure the file type is set to "JPEG". Then hit the "Options" button. You can tweak the quality of the JPEG encoding from the dialog that pops up, which in turn changes the size of the file. You can also see the size of the file from this dialog!
   You don't have to try all three of these things. Use as many as you like to get the file size down.
3. Check your work.When you're done, you should check to see that the new image files are at the right sizes. Use Windows Explorer to navigate to the folder with your images. Selecting the image will likely cause detailed information about the file to appear at the bottom of the explorer window. Alternatively, you can right-click on the image file, and then choose "Properties" to see the file size. Check to be sure that the small file is between 15 and 20kb, and the medium file is between 30 and 100kb.

Mess Around with Fireworks

If there is time, you can play around with some of the image manipulation features provided by Fireworks. This is to prepare you for the project! You could do any of the following:

• Try out any of a number of predefined filters by choosing "Filters" and then choosing a filter from the given list.
• Remove colors from the image by clicking on them with either the "magic wand tool" or one of the "lasso" tools, and then clicking the delete button. This is a good way to remove the background of an image (e.g., the boring white wall in our lab) so you can replace it with something more interesting (e.g., the Great Wall of China).
• Add additional images by choosing "File"-"Import".
• Change the layering order of multiple bitmap images by dragging the bitmap image up or down in the layer list on the far right.
• Change the file format by selecting the desired image type in the "Optimize" panel, and then saving the new format by choosing "File"-"Export".

Submitting your Work

Submit the following files as attachments for Lab 3 in Moodle:

• Your modified photo (with text annotation) e.g. smn4-modified.jpg.
• Your small photo e.g. smn4-small.jpg.
• Your medium photo e.g. smn4-medium.jpg.