|
|
Image Manipulation
Using Fireworks 4
by Christopher L. Shearer, Kat Belk, and L. L. Grable
|
| |
|
Crop an Image
Resizing
an Image
Changing
Resolution of an Image
Minimize
the Colors
Export Preview
|
Upon completion of this tutorial,
you will know the procedures of image manipulation using Fireworks 4.
At the end of this session, participants should be able to:
- Crop an image
- Resize an image
- Change the resolution of
an image
- Maximizing images for the
web
- exporting preview images
from a .png file to a .jpg or .gif
|
| |
1.
Visit http://www.google.com to get an image of a tree frog. Click on the
google image search option above the search box to search only for images.
Type in tree frog. Click on a desired image and then right click on the
image and select Save Picture As. A box appears. Make sure you are
in the right directory/folder/disk to store your image. Give it a meaningful
file name (remember--no spaces and no capital letters!). |
| 2. Open Fireworks
in your applications launcher. Select File > Open and open your
tree frog image from your disk. |
|
3. To crop picture, in order
to eliminate much of the background, use the crop tool as follows:
- select the crop tool (highlighted
below)
(if Tool Palette not visible; goto Windows-->Tools and click
it once. It will now appear.
|
|
4. Your cursor changes to that
crop tool ( ).
|
|
5. Position the cursor in the
top, left-hand position of the picture. Click and hold the left-mouse
button, dragging it to enclose the desired section of the picture. For
instance, in the picture below, we only want our frog. We want to remove
some of the extra leaf. Let go and you will see a bounding box (see
below)
|
| 6. You
can now adjust the box by clicking and dragging any of the crop boxes in
any direction. |
| 7. Once
you adjusted the box the way you want it, simply click Enter; you
will now see the selected image only; the parts outside the box have been
cropped and discarded. If you find that you missed some of your image, simply
redo steps 2-6. |
|
|
Resizing an Image
|
|
| |
Within Fireworks, you can resize your images two different ways. Let us
imagine we want our tree frog picture larger, after we crop it.
|
1. Goto Modify-->Image Size
|
|
2. When we resize, we keep everything in the units of pixels, a much more
exact unit for computers. Decide on the size you want (we can always change
it later). I will change my picture to 270 by 288. As you enter the first
number, for length, the height changes automatically to keep our image
in proportion (make sure Constrain Proportions is checked below). Click
OK and see your new picture. This works for making pictures larger
and smaller.
|
Another way to resize, although less exact, is by simply using to mouse
to stretch the picture. We first need our canvas
size larger so we have more area to work.
|
1. Goto Modify-->Canvas Size; In the box that appears, set the
two numbers at least 100 more than their current value. For example, in
my project, I will set the horizontal to 370 and the vertical to 388. Hit
OK and you will see your image with white space around it.
|
|
2. Click on the center of your image once. (Make sure your black arrow
cursor is selected!) A blue box will appear around the picture. Just like
in other applications, click one of the blue squares in the corners, hold
the mouse button down, and drag picture to a desirable size. Once you
have the appropriate size, let go of the mouse button.
|
|
|
Changing the Resolution and Minimizing the
Colors of Your Pictures
|
|
|
When
we make web pages, we want to keep the page size small enough so all people,
whether on broadband, cable modem, or dial-up connections can access them
in a reasonable amount of time. In order to do this, we need to manipulate
our photos and images for the web. In this lesson you will learn how to
make your images more web-friendly. |
| 1. Click
in the center of your picture. Goto Modify-->Image Size |
|
2. The Image Size box appears.
Near the bottom, in the Print Size section,you will see Resolution. Many
images will be at 72 already, but we need to check each image to ensure
this.
|
| 3. Click
OK |
| 4. Now
we want to minimize the amount of colors used. On the right side of our
screen we should see a palette with the title Optomize. If you do not see
yours, click Window-->Optomize. |
|
5. In the palette, click on
the pull down menu beside Settings. Choose JPEG--Smaller File.
This will reduce the memory our picture needs.
|
|
6. Now your picture is Optomized
for the web. You can now feel confident your image can be downloaded by
everyone, regardless of their Internet connection!
|
