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 serve as the basis for
your work in project #5.
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
- 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.
- Digitally modify your photo. Transfer your chosen
picture to your
H: drive. You can now digitally modify your
file, as follows:
- For safety's sake, make a copy of your image file, and work on that
copy for the rest of the lab. If you have problems, you can then get back
to the original version.
- Open the image in Adobe FireWorks and annotate it with your name
somewhere on the image (by selecting the "Text" tool on the tool bar and
typing your name onto the image -- the "Text" tool looks like the letter 'T').
- 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).
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:
- Make two more copies. Take the modified copy of your
image (the JPEG one) and make two more copies. Be sure to use
medium in the names of these copies so
that you know which file is supposed to be small and which one medium
- Shrink up the images. Open the images in Fireworks, and
shrink each one in turn. Some things to try:
- Crop the image. Use the Crop tool 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.
- 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.
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 Project 5! 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
Parts of Project 5 are "due" earlier than normal, so it's
worthwhile getting started immediately! Again, you can do any of this
work in Photoshop or another image manipulation program if you like.
Submitting your Work
Submit the following files as attachments for Lab 5 in Moodle:
- Your modified photo (with text annotation).