Web Site Graphics

Tips for Working with Graphics

Good Icons…

  • Should be easily recognizable.
  • Should need no explanation.
  • Can be enlarged & reduced without losing legibility (like logos).
  • Should be universal for worldwide audiences.
  • Use a combination of text and graphic for difficult subjects.

Sources of Graphics

  • You can create images yourself.
  • Commission work from artists.
  • Reuse existing licensed images.
  • Use Clip media from Clip Art.
  • Use Clip media from Clip Photo CDs.

Capturing Images

  • Scan images at a High Resolution and Save a High Resolution Version before Reducing to a 72 pixels per inch (ppi) on screen copy.
  • Reduce Resolution in the Image Used in the Interactive Project.
  • Avoid Image Degradation (by enlarging).

Scanning Images

  • For onscreen use at same physical size, scan images at 150 ppi if you plan to use at 72 ppi on screen.
  • If enlarging, try scanning in at a proportionally higher resolution (Images used at 300% of the original size should be scanned in at 450 ppi, for example).

Reasons…

  • Greater long term flexibility allows future use on high resolution monitors.
  • Can be reused in other media, such as print.
  • Can resize images for larger use.
  • Reducing larger scans to final 72 ppi use cleans up some image problems.

Resolution Reduction

  • It is absolutely critical that you reduce the size of your image before placing it in your interactive project.
  • This means 72 ppi for most of your viewing public.
  • Larger images require longer downloads

Image Degradation

  • Never take an image and increase its resolution!
  • Increasing the resolution in an image makes the image appear to blur, or pixelate.
  • This is due to the process of interpolation, which averages neighboring pixel information to generate new pixels in gaps.

Types of Images

  • Scanned Photographs
  • Special Effects Photographs
  • Cartoons
  • Charts
  • Illustrations
  • 3D Computer Generated Renderings
  • Etc…

Integrating Images

  • The source and type of the images are not as important as how you integrate them into the interface.
  • Whatever the image, it should not only communicate content, but also look good both individually and with other elements onscreen.

Standalone vs. Site-wide Theme Images

  • Standalone Images – can begin as an individual picture like a photograph or scanned piece of artwork. These are usually just used once on a site.
  • Site-wide theme Images – are individual elements that are designed to work together as part of a larger interface. These are used repeatedly throughout a site to help set a design theme.

10 Do’s & Don’ts with Images

  1. Do use standard display resolution: Currently this is around 72 ppi for Macs and 96ppi for Windows computers. As technology improves, so too will display resolution, but for now, many computers are still displaying 72 to 96ppi.
  2. Do work with site-wide themed images: Using these kinds of images offers maximum flexibility and control over the visual layout. Site-wide themed images also can be reused throughout your project to help establish a unified visual style.
  3. Do use aliased images in elements: If your image is intended to function as a site-wide theme element, you should not use anti-aliasing, as that transition of color will be easily visible. An aliased image can be easily placed on a wide variety of backgrounds.
  4. Do use anti-aliased images in standalone images if:
    1. your image is part of a standalone image you created on a computer, such as an illustration;
    2. the image will not be moving across the screen; or
    3. the screen will not be changing behind the image.
  5. Do remember the capabilities of the user’s equipment: Don’t make images so big (in terms of file size) that playback speed is adversely affected.
  6. Don’t think good images will mask poor interface and programming design: While is it true that great images will enhance a design, even the best images can not save a Web site that is riddled with other flaws.
  7. Don’t take a small image and stretch it to fill a whole background: Doing so will cause the image to horribly degrade and show gigantic bitmapped edges.
  8. Don’t overload your screens with too many images. Too much of a good thing can overload both the user and their equipment. This is a particular problem in online design where it takes time to download every image. Often simplicity is best.
  9. Don’t unify your images to the point that they all look the same: The goal is consistency; not to make everything look identical.
  10. Don’t make every image flash, buzz, beep, whir, rotate, flash, change color, or otherwise move onscreen. Remember: Keep It Simple!
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s