Basic Philosophy 

The Digital Universe (DU) wishes to maintain high-quality standards for images used for stewarded portals. Images need to encapsulate the primary message and experience intended for DU users and need to be consistent with the DU visual identity. They should solicit a universal recognition and appeal that is cross-cultural and international. Photo-realistic, color images rather than cartoon-like illustrations are preferred whenever possible. Software programs that provide good platforms for quality graphic creation are: Photoshop, Image Ready, and Fireworks.

Specifics for Images used in the Digital Universe

Banners

The recommended banner width is 996 pixels and up to 150 pixels tall.  If the banner image is larger, it will be automatically resized; if the width is less than 996 pixels, the banner image will be horizontally tiled. 

Portal Logo

The recommended logo height is 55 pixels or less and up to 996 pixels wide -- if it is larger, it will be automatically resized with some loss in quality 

Thumbnails

Completed thumbnail images should have a size of 256 x 192 pixels, saved in a jpg format with a resolution of 72.  The thumbnails must solicit a universal recognition and appeal that is cross-cultural and international. Some images may be individual images such as a landscape (see the plants portal), while others may be well-done and tasteful compilations or montages (see the ecosystem portal). Keep in mind that images that work well in larger resolution often will not work well as thumbnails, because thumbnails need to be simpler due to their smaller display size. 

Optimizing and Sizing Images

It is important to understand what is acceptable for an image’s resolution. Each image is different and responds differently to the available processing tools. The human eye is the most sensitive tool there is, and a bit of training will enhance the ability to achieve the best balance of image quality and overall size. The optimization of an image with many colors, fine details or a combination of both requires expertise, so professional advice may be necessary. 

Image File Format for Stewards’ Sites and the DU Universal Browser 

Photo-realistic color images should be saved in jpg file format. With Photoshop use “save to web,” and make the image as small in KB without diminishing the quality of the image noticeably for display. Generally it is best to save to the high quality option. For instance, the target for a file size of 256 x 192 pixel image should be below about 20 -30 KB whenever possible for rapid loading. 

Sometimes a single large image for a Steward’s individual site could be split into several smaller images that could be used separately and therefore streamline on-line viewing. 

Although Adobe Photoshop is considered to be the best photo software program by many, other programs (commercial and shareware) may be purchased for significantly lower prices. Some of the other consumer level applications for photo processing are easier to use than Photoshop and have many standard filters and presets, such as sharpen, blur and color correction (to correct for indoor lighting, for instance).

Finalizing a Photoshop File 

With Photoshop, use the built in “Save-for-Web” option (under the “File” menu). Within the “save for web” dialogue box, split the view to “original” and “optimized.” One can use two or four window views, trying both methods and comparing with the original.

In the upper right corner of the dialogue box there is a dropdown with different format presets for different file types including jpg, png, gif, and original. Jpg has a few settings, low/med/high, but these may not work for the particular image. 

Try several of the different methods until the best quality compression is achieved. Experimentation will reveal the uniqueness of each image. Some images will optimize quite easily and others may be seriously degraded if excessively optimized.  The Jpeg is the preffered format for final uploading.

Artistic Design for All Images

It is important to consider some of the rules of good artistic composition in the selection of images. Some visual design aspects to consider are: the line, color, texture, shape (2-D), form (3-D), the effects of compositional structure such as balance, repetition, variety, unity, rhythm, and the impression of movement in the image (organizing principles). Images should appear in a size that looks good in its context. Crop images as necessary to highlight what is important. We encourage you to seek advice from or solicit review by experienced designers, artists or editors whenever possible. 

Tips for Improving Thumbnail Images 

Because of the resizing which occurs in the UniNav, thumbnails often need to be enhanced using some of the image correction recommendations listed below. The appropriate method of touch up should be determined once the thumbnail is placed in the UniNav, since it is not possible to determine the final appearance on a flat computer screen. Sometimes it is a matter of trial and error and each image has it’s own special set of conditions.

• try to focus on the most important part of a diorama and crop the image to emphasize
  this.
• simplify images — erase or clone over unnecessary details with a simple background.
• get rid of unnecessary lines
• saturate the colors to help the image stand out
• use the burn tool to emphasize edges of striking geometric patterns
• sharpen the images
  
• do color correction to bring out mid tones.
• Jagged edges can sometimes be improved with the blur tool.
• Cutouts on black backgrounds can be improved by:
  • advanced feathering can be done by first contracting 3–10 pixels and then feathering;
  • use an outer glow with the specifications of: red: 255; green: 255; blue: 255; spread: 2; 
  • blur.  This creates a nice white glow around the icon;
  • inner glow according to visual judgment is sometimes effective;
  • A gaussian blur of .3 pixels sometimes gives a nice overall smooth appearance.
  • feather the edges of the cutout between 3–15 pixels, depending on the image; 
• Use the contrast option layer>new adjustment layer>contrast. Play with the contrast and     lightness/brightness. A more advanced way of adjusting the contrast and brightness would be inside the image>adjustment>curves function. Adjust the mid-range in the RGB menu with 2 points, high and low.

How to Edit an Image in Photoshop 

It is generally best to make Photoshop enhancements using the Adjust Layers option “Layer | New Adjustment Layer | choice” and also to work with a duplicate layer of the original to preserve the original image’s integrity for archival purposes.  Pay attention to the following details, especially when editing an image taken by a digital camera: 

Cropping— Make sure the subjects of the photo are in the center, and that extraneous space is not wasted on background.

Brightness— Photos taken with a digital camera are often too dark. Adjust the levels menu in Photoshop (not the brightness option) accordingly. Choose "Image | Adjust | Levels," move the right-hand marker to the upper end of the level distribution, move the left-hand marker to the lower end of the level distribution, and adjust the center (gamma) control so the image appears nice and bright (but not washed out).

Color Balance— Especially under fluorescent light, images tend to have a yellow cast. Most importantly, adjust mid-tones and highlights to make flesh tones look correct. In Photoshop, choose "Image | Adjust | Color Balance" and play with the controls until the image color is balanced. It is also important to be sure that your monitor is properly calibrated for good color balance evaluation.

Saturation— In many cases, the colors may appear muted. Go to "Image | Adjust | Saturation" to add a little color, if necessary. Be careful to maintain a photo-realistic quality and avoid a cartoon-like brightness.

Glare— Often, the flash will cause unsightly glare, especially on people who wear eyeglasses. Use the Smudge Tool(the little finger) to darken these areas out. Be careful to select a brush that is of appropriate size.

Clutter— If an image is cluttered, you may use a combination of creative cropping and cloning to clean it all up. The Rubber Stamp Toolcan replicate areas of the image, and allows one to remove clutter (like the arm of a person otherwise cropped from the photo).

Selecting Areas— Often, adjustments should not be applied uniformly to the entire image. To brighten a subject's face, but not the whole image, select just the face with the lasso tool or by using a mask. If a cold day is making a subject's face too red around the nose and cheeks, select just those areas to decrease the reds.

Feathering— To avoid unusual transitions when you apply changes in colors or levels to a selected area, use the Featheroption ("Select | Feather...") to blend these changes in gradually around the edges of the selections.

Focus— Images may be out of focus. Use the Unsharp mask to correct for this as much as possible. Choose "Filter | Sharpen | Unsharp Mask..." and adjust the radius and threshold to sharpen images. Be careful not to overuse this function. Experiment by turning the preview on and off to see how the image looks.

Size— As the last step, save the edited image separately from the original file, of which all layers should be kept intact, in the event that future editing work is needed. Then reduce it in size to the specifications noted above. Make sure that the cropping is consistent with the desired size (more complex photos may need a larger final size). Save the reduced image as a separate file, so you can continue to make adjustments to the original.

Recheck— After shrinking the image, recheck the levels; losing pixels almost always makes the image get darker as the brightest pixels are blended with darker ones. 

Web Images 

Many images that can be found on the web are too small or copyrighted and illegal for use. U.S. government websites have some larger useful images that can be used without fees, but this is not the rule. Some government sites have images loaned to them and are not for free use. In all cases, look for the details of the image rights on the site and if there is no disclaimer or rights information, remember, it does not necessarily mean they are free to use. 

Scanning Photographs

An image may need to be scanned with a flatbed scanner. It should be scanned in as large of a size as is practical. Be sure to archive the original and keep image information. NOTE: To “archive” is to keep the original as-is and make a copy that can be sized and optimized. 

For a small original, a higher resolution scan is recommended. There are many rules for good scanning. For example, a postage stamp scanned at 1200dpi will not work because that resolution is beyond the resolution of the printing process that created the stamp. When enlarged to this size, the dot or halftone from the press process can be seen. Therefore try to select larger original images.

Images from digital cameras look good if they are larger than 2 megapixels (because 2 megapixels is a good match for the DU image format. A smaller size will yield the same as scanning a print at too low of a resolution. You will not have as much control over the color and detail as you would with a 3, 4 or 5 megapixels camera where there is much more overall size, detail and color information to play with. Be sure to plan for cropping. The best policy is to shoot images at a higher resolution and decrease the size with the methods listed here. 

Stock Photography 

The best sources are images purchased from “off the shelf” image collections or stock image houses like Corbis, PictureQuest , etc. The cost is based on the resolution of the image. Sometimes an image can be used that might scale up with acceptable quality and therefore save money. Be sure to only choose "rights free" images or it is possible that the same fee must be paid for each additional year of use. There are not as many choices with rights-free images, but the image can be used as long as desired. Some "rights managed" images have limitations for use that are difficult to track over time. Explore image providers’ legal pages to understand more about how images are sold and rights are managed. 

Copyright Guidelines 

Images that are not owned by the DU or the Steward cannot be used without the prior, written consent of the copyright holder. These images include, but are not limited to, images that appear in published print material and images that appear on other web sites. To obtain a copyright release, contact the copyright holder and explain its intended use and get permission in writing for use on the portals. Obviously, it is preferable to use copyright-free images, but in some cases, images will have to be paid for either in a purchased collection or on a case-by-case basis. 

For people shots, it is important to obtain a signed model release. Marsha Sims, marsha@trunity.com, has official DU  forms for this. 

It is important to keep records on copyright information and author credits for every image used. Copyright tracking will be internal to producers and partners.  

DU is also a visual experiment in convergence. Media vary greatly in their on-line forms. Starting with the latest working standards, the DU will develop, support or convert to make visual, audio and other media available to all users. Because technologies are always advancing, an on-going internal awareness to make as much media available to all, as can be practically offered, is a DU policy.