| Copying a Digitial Image JPGS and GIFS |
Screen Shots Short-cut and Grab |
Graphic Programs Graphic Converter and Fireworks |
Most images on websites are either "jpgs" or "gifs." You can scroll your mouse over the image and often its name will appear at the bottom of your browser window. If you ever want to use a digital image from another website (assuming it does not violate any copyright laws), you can either "control-click" on Mac or "right-click" on PC, and select "copy image" or "copy image to desktop." This is an excellent way to save time when creating musical examples or using pictures of composers. Both "jpg" and "gif" are web-friendly. You should be careful about files that are either "pict" or "tiff;" they are often larger in size and are not always recognized in web-based applications.
Importing images into your page engages the viewer in your subject. You can take pictures of an image you see on your computer screen, from any application or website, with a few simple steps.
Create your own images using Screen Shots
A three key combination on Macintosh, open-apple/shift/4. This key combination takes a picture of whatever you select on your active screen. Follow these simple steps:
Grab is an application program that comes with Mac OSX. It is a useful program for taking either screen shots or just selected areas on the screen. A picture taken with Grab is saved as a "tiff", which cannot be recognized in Dreamweaver MX (we have found that Flash will recognize it but sometimes makes a fuss about conversion). Grab takes excellent pictures at the size it appears on the screen, and the program works well with OSX.
Here's how to use the program. When you are looking at your screen and want to take a picture (or section) of it, open the Grab application. It may be easiest to keep it in your toolbar so you don't have to search for it (opening up windows looking for it may obstruct the view of what you want "captured" in the picture). Once Grab is open and you can see your picture, follow these steps.
1. Go under the Capture menu and select either "Selection" or "Screen," depending on what you would like.
2. If you are capturing a "selection," put your mouse over the upper
left hand corner of your image, click your mouse and drag the cursor to the
lower left corner of your selection. Don't worry about the window that states
"Drag over the image of the screen that you want to capture"-- it
will not show up in your image.
3. Save it.
Again, your image will be created as a "tiff". Save it to your desktop (or wherever you can remember to look for it later) with a memorable name in case you need to later convert it to another format (see Graphic Converter).
Convert your screen shot using Graphic Converter
Graphic Converter is a useful application that converts screen shots into standard formatted graphic files. Once converted, the graphic file can be imported into Dreamweaver or Flash.
The following "how-to" list will walk you through a simple 7-step process to convert "Picture 1" that you created in the Screen Shot example above.
4. You will notice that your original picture was scaled at 24% (see bottom
left of picture). If you were to import this into your document without scaling
its' size, you would find it to be too large. To change it to a more manageable
size, go to the PICTURE menu.
Drag and select the following: Picture/Size/Scale. Release to select scale,
and a pop-out window will appear "Scale".
6. Change the width number from 100 to 24 %. This will change the numbers on the screen, and rescale the picture to an appropriate size.
7. To save your picture, go to the File Menu. Select SAVE AS, and rename your file. Change only the name before the .pdf extension. The .pdf extension will need to be changed for use in Dreamweaver or Flash. Change the format from PDF (.PDF) to GIF (*.GIF) by pulling down the FORMAT arrow menu and scrolling to select GIF. When finished, it is best to save it to the current folder you will be working in. Click SAVE.
Fireworks works nicely with the other members of Studio MX (i.e., Flash and Dreamweaver). The FANTASTIC feature about Fireworks is that you have sophisticated graphic tools to create buttons, fancy text, and any images you can imagine. You can also create vector graphics, which keep their clarity no matter how much you change their size in another application. Images such as "gif," "jpg" and "tiff" are all bitmaps, which mean that they can start to look bumpy when you change the size. Below is a comparison of two images saved as different file types ("gif" and "png"), then their size was enlarged by 200%.
 |
 |
Another advantage to "png," which is the default format for an image created in Fireworks, is that you can easily edit parts of a "png" without changing other parts. For example, in Graphic Converter, once you write text over an image you cannot edit the text without either blocking it out and using a paint fill then starting over (that is how the "This is 'GIF'" image from above was created), or some other tedious method. When you create a "png" in Fireworks, you can always go back and edit your text without it modifying the other parts of your creation.
Fireworks has an extensive section on tutorials and reference. Once you go through the tutorials, you will be ready to create buttons or images as fancy (and clear!) as you would like.