WEEK 9. Module 9: Web Graphics
9.1. Theory9.1.1. Reading: Using Anti-aliased Graphics
Using Anti-aliased Graphics
Because lower resolution screens won't appear to be as sharp as higher ones, there are several strategies you should use to show nice looking graphics:- Use Anti-aliased graphics. Preparing successful anti-aliased graphics requires knowledge of the background color they'll be used on. Anti-aliasing creates pixels in between the foreground and background colors that blend the two colors and smooth out the jagged, stair stepped edges on an object. Anti-aliasing works better with one colored background. Otherwise you will get halos around your images — see http://www.lunaloca.com/tutorials/antialiasing/ for tutorials on this).
- Low resolution images cannot display fine details, so avoid them.
- If you need images with fine details, enlarge them to show the details.
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
- 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.
- 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.
- 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.
- Do use anti-aliased images in standalone images if:
- your image is part of a standalone image you created on a computer, such as an illustration;
- the image will not be moving across the screen; or
- the screen will not be changing behind the image.
- 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.
- 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.
- 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.
- 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.
- Don't unify your images to the point that they all look the same: The goal is consistency; not to make everything look identical.
- Don't make every image flash, buzz, beep, whir, rotate, flash, change color, or otherwise move onscreen. Remember: Keep It Simple!
| References | |
| Graham, L. (1999), The Principles of Interactive Design , Delmar, Scarborough , Ontario . |
9.2. Practice
9.2.3.1. Tutorial: Photoshop Type Features Overview
9.2.3.2. Tutorial: Photoshop Filters Overview
