Request a meeting room reservation at Northside Learning Center
Everything You Wanted to Know About Images
(and Fireworks, and Photoshop.com, etc.)
 

Introduction

Images may be secondary to text content in Web pages and other documents, but they can definitely enhance the experience for your visitors and/or readers. Poorly used, however, images can interfere with the readability of the finished product. These hints, tips and tricks should help you to make effective use of images.

How big can pictures be for CMS Outreach pages?

Remember that there are two ways to measure the "size" of images: (1) the dimensions, and (2) the file size.

Recommended dimensions:

  • Maximum width of 300 pixels.
  • Height is not as critical, but 500 pixels is suggested as a maximum image height.
  • The Thumbnail size (256 pixels wide) at Photoshop.com is suitable for Outreach pages.

Maximum filesize for CMS Outreach:

  • 100K is the maximum filesize that can be uploaded for an Outreach page.

Photoshop.com (https://www.photoshop.com/)

Photoshop Express screenshot
Photoshop.com. Click the circled link to
upload your images for viewing and editing.
Photoshop.com is a free (!) Web-based product. It takes a few minutes to join, and members can upload photos and images, edit them, and save them for use in CMS Outreach pages, PowerPoint presentations, etc. It has better features -- and is easier to use -- than Microsoft Photo Manager.

Use Photoshop.com to resize images for use in Outreach pages. Outreach pages allow a maximum file size of 100K. Space availabe on Outreach pages is also a factor. A maximum height or width of 300 pixels (whichever is larger) is therefore suggested. This has the double benefit of not taking up too much content area in the page, and it speeds up the Outreach page download time.

The easiest way to use Photoshop.com to resize an image to be suitable for posting on a CMS Outreach page is to use the download feature to resample and save it in the proper size in one easy step.

  1. Once your photos are uploaded, click the My Photos to view the pictures.
  2. Hover over the image and click the Photo Options link.
  3. Choose Save Photo.
  4. In the Save Photo window that appears, select Thumbnail and click Save.
  5. Browse to a location on your computer and save the image.

Not every Northside campus can access Photoshop.com, but NISD employees can access it from home for free.

Image Formats

There are many formats for pictures. Here are a few of the more common ones:

JPG (or JPEG) - Joint Photographic Experts Group.

  • JPGs and GIFs are the only formats that should be used in Web pages.
  • The JPG is an excellent format for photos and other complex images.
  • It has millions of colors available.
  • JPG uses compression to achieve a small file size. For this reason, you need to keep a working copy as a PNG and export JPGs as finished images. If you repeatedly open, edit, and save a JPG, the repeated compression will result in lower image quality.
  • JPGs are "flat." They cannot contain multiple layers.

Rotating Earth GIF
Rotating Earth GIF
Image courtesy of Wikipedia
GIF - Graphics Interchange Format.

  • GIFs and JPGs are the only formats that should be used in Web pages.
  • GIFs are great for simple images.
  • They are a poor choice for complex images and/or photos, because they only have 256 colors available. This can result in "banding" in photos, especially in the sky, in lawns, and other areas with gradual color change.
  • GIFs are the only choice for animated images, such as the globe to the right. Animated GIFs can be created with Flash. See these two links for examples:
    Bubbling Flask     Jumping Fish or Dolphin
  • GIFs are the only way to create images with transparent backgrounds. Transparent backgrounds are images without a rectangle in white or another color around the main part of the image. They can be placed on colored or complex backgrounds.
  • GIFs are "flat." They cannot contain multiple layers.

PNG - Portable Network Graphics (sometimes "PNG's Not GIF")

  • PNGs should not be used in Web pages.
  • PNGs work very well in Microsoft Office programs, such as Word and Excel.
  • PNG is the default format for Fireworks. It can contain multiple layers.
  • PNGs does not lose image quality if they are opened, edited and saved repeatedly.
  • They can be saved as high resolution images for printing.
  • PNGs generally have a larger file size than comparable JPGs and GIFs.

PSD - Photoshop Document

  • PSDs are the default format for Adobe Photoshop.
  • They can contain multiple layers.
  • Photoshop is required for opening PSDs.

Look for Copyright-Free Images in Government Websites and Wikipedia

Government websites and government documents are an excellent source for copyright-free images. Good places to look include:

Wikipedia has images on a huge variety of subjects. They are in two locations:

  • Featured Pictures:
  • Wikipedia featured picture
    Wikipedia Featured Picture
    • On the Wikipedia front page, scroll down to find Today's featured picture.
    • Click the More featured pictures... link to a collection of other pictures that were chosen by Wikipedia community as exceptional images. This collection is divided by subject.
  • Individual Entries:
    • Search for information on any topic. Within the entry, click any image that appears.
    • A file page will appear, with information about the origin of the image. Scroll down to see copyright information on the image. Look for one of the following images:

      Public DomainPublic Domain - This image indicates that the image in question is in the Public Domain and is not protected by copyright. Typically, there is information detailing how the image moved into the public domain, along with copyright information for one or more countries.

      GnuGnu Free Documentation License - The gnu image indicates that the image falls under the Gnu Free Documentation License, designed by the Free Software Foundation for the Gnu Project. Anyone using the image must credit its author, but the image may be freely used in educational activities.

Keep the Original in a Safe Place!

Don't edit your original image. Keep it somewhere safe and work on a copy. If you mess up your original, you're done. Working on a copy is much safer. If you make a mistake, you still have the original.

An easy way to do this is to open the image and immediately save a PNG.

  1. Open the image.
  2. Go to File > Save As... and save a PNG version of the image. (The default format in Fireworks is the PNG. The default format in Photoshop is the PSD.)
  3. Edit the PNG

Optimizing for Print

Programs like Fireworks allow you to change the resolution of a picture. Resolution only affects the way an image looks when printed. Everything you see on a computer is displayed at 72 dpi (see below).

  • 72 pixels per inch (also dots per inch, or dpi) is the resolution that computer monitors and projectors display. It is the resolution level for Web page images. If printed, a 72 dpi image looks "fuzzy."
  • 150 dpi is generally the minimum resolution for printed images.
  • 300 dpi is generally the standard resolution for printed images.
  • Higher resolutions are possible, but not all printers can take advantage of them.

Changing resolution in Fireworks
Changing resolution in Fireworks
To change the resolution of an image:

  1. Select Modify > Canvas > Image Size.
  2. Uncheck the Resample image box. Notice how the Pixel dimensions part of the window is now grayed-out. Changing resolution does not change the number of pixels in an image, but rather how closely they are "packed" when printing.
  3. Highlight and change the Resolution: from 72 Pixels/Inch to another number, such as 150 or 300.
  4. Notice that, although the pixels are unchanged, the Print size does change. In the example shown to the right, the Print size changed from 11.111 x 8.333 inches at 72 dpi to 2.667 x 2 inches at 300 dpi.
  5. Click OK to keep the changes. The appearance of the image on the screen will not change.
  6. Use File > Save As to save the image in an appropriate format (such as PNG or JPG). Do not Export it, as this will reduce the resolution to 72 dpi!

The best way to demonstrate resolution change is by printing. Print a 72 dpi image, change the resolution to 300 dpi and print again.

Printing HUGE Pictures

Karnak 1838 - by David Roberts RA, artist and Haghe, Louis, 1806-1885, lithographer
Karnak in 1838
Image courtesy of Wikipedia
Some pictures, like many of the full-size images from Wikipedia, are not printable on one piece of paper in their original (72 dpi) form. Click the image to the right to view and save a huge (6 Megapixel) picture. Open it in Fireworks and follow the steps outlined below to raise the resolution to 300 dpi and to print it on an 8½ x 11 inch piece of paper.

  1. Click the image to open the full-size version.
  2. Right-click the picture and save it to your computer.
  3. Open the image in Fireworks.
  4. Select Modify > Canvas > Image Size. The Print size of the image should be 28 x 41.7 inches!
  5. Uncheck the Resample image checkbox.
  6. Highlight the Resolution and change it to 300 Pixels/Inch. The Print size should now be 6.7 x 10 inches.
  7. Click OK.
  8. Choose File > Print to print the image. If the image were short and wide, it would be necessary to select File > Page Setup and change the Orientation to Landscape before printing.

Preparing Images for Web Pages and PowerPoint

This is generally called Exporting. If images are in a higher resolution, this reduces their resolution to 72 dpi, without changing their appearance on a computer screen.

Images are generally exported as either a JPG or a GIF.

Exporting an image:

  1. Choose File > Export Preview (File > Image Preview in later versions of Fireworks).
  2. The Preview window will appear.
  3. In the upper-left part of the window, select the Format (GIF or JPEG). If a GIF, you can choose the number of colors in the image, up to 256. If it's a JPEG, you can set the Quality (a Quality of 65-80 is generally a good balance of Quality vs. File Size). Watch the Preview as you adjust settings, to ensure that the image appearance is not adversely affected.
  4. Check the File Size in the top-center part of the window, to see if the file size is acceptable.
  5. When the appearance and file size are acceptable, click Export.
Fireworks Image Preview
Fireworks Preview window: showing a JPG image. The Image Format and Quality are circled in RED. The File Size is circled in BLUE.

Layers! Layers! Layers!

Layers are one of the most useful features of professional-quality image manipulation programs such as Fireworks, Photoshop and Photoshop Elements. Layers contain the various elements of an image and allow the user to edit parts of the image separately. Practice is needed to make effective use of layers, but layers are not as difficult to use as one might think.

Although the terminology varies, layers work in much the same way in different image editing programs. If you can use layers in Fireworks, for example, layers in Photoshop Elements would be easy to use.

The Layers Panel

Fireworks Layers Panel

Creating an Image Without Knowing How to Draw

Many of us have little artistic talent when it comes to drawing, especially on a computer. It's fairly easy, though, to use an existing image to help us to draw one of our own, much like we traced pictures as children. While the use of clip art is tacky, and it raises copyright issues, a piece of clip art can be used as a guide to help us draw an image of our own.

  1. Open Microsoft Word.
  2. Select Insert > Picture > Clip Art.
  3. Type one or more words in the Search for: box, then browse to find a suitable image.
  4. Select the image to insert it into the Word document.
  5. Click the image, then choose Edit > Copy.
  6. Open Fireworks.
  7. Select File > New and click OK in the New Document window that appears.
  8. Choose Edit > Paste.
  9. If Fireworks asks if you want to Resample the image you're pasting, click the Resample button.
  10. Click the Pointer Tool (tool that looks like a black arrow) and click the new image to select it.
  11. In the Layers panel, reduce the opacity of the clip art image (circled in BLUE, below), to about 15-25.
  12. At the bottom of the Layers panel, click the icon to add a New Bitmap Image (circled in RED, below).
  13. Use the Pencil, Brush Tool, or other tools to draw your new image.
  14. In the Layers panel, click the "eye" next to the clip art that you pasted, to make it invisible.
  15. Save your image as a PNG.
  16. Choose File > Export Preview and export your new image as a GIF or a JPG.
Tracing clip art in Fireworks
Tracing Microsoft Word clip art in Fireworks, to create an original image

 

Printer-friendly version of this exercise (PDF)