Friday, 5 August 2011

Module 9: Web Graphics

WEEK 9. Module 9: Web Graphics

9.1. Theory
9.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 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.
9.1.2. Reading: Tips for Working with 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).
  • 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.
9.1.3. Reading: 10 Do's & Don'ts with Images 

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!

Graham, L. (1999), The Principles of Interactive Design , Delmar, Scarborough , Ontario .

9.2. Practice Tutorial: Photoshop Type Features Overview Tutorial: Photoshop Filters Overview

Module 8: Introduction to Web Graphics

WEEK 8. Module 8: Introduction to Web Graphics

8.1. Theory
8.1.1. Reading: Scanning Graphics 

Scanning Graphics

Photoshop doesn't scan, but it does support third party scanner software that comes with most scanners. Once you install your scanner's software, you should be able to scan images through Photoshop's File > Import menu, or directly through your scanner's custom software.
Generic Scanning Tips:
Once you find the analog image you want to use, you'll need to digitize it by scanning it to get it on your computer. Sometimes the frequency a scanner uses to collect dots in the digitizing process can conflict with the dots that were used in the printing process a magazine or book may have used. This generates interference on your scanned image called a moirĂ© effect. You need to get rid of this during the scanning process by “descreening” your scan so your scanner scans at a different frequency. You will need to adjust this on whatever third-party software you use.
Scan your image as RGB color at 72-150dpi (or ppi) and save your master scan in Photoshop's proprietary format: PSD. Once you have this file, crop it using the cropping tool, and resize it down to the size you intend to use it onscreen, making sure Photoshop is displaying it at 100%.
After you crop and resize it, save it as another PSD that is different from your master copy. The PSD format allows you to save the most Photoshop settings, and it's a non-lossy format (which you'll find out more about when you read about file formats).
You will probably want to adjust the dynamic range your image has at this point, but using the levels command. This will give your image richer colors that look better than most muddy raw scans. You may also want to clean up any dust or scratches on your images by using a combination of the dust and scratches filter and the rubber stamp / cloning tool.
You final step in getting your image ready for use online will usually be your unsharp mask filter – which will sharpen the image for you.

Graham, L. (1999), The Principles of Interactive Design , Delmar, Scarborough , Ontario .
Lynch, P. and Horton, S. (1999), Web Style Guide , Yale University Press, New Haven , CT.
Niederst, J. (1999), Web Design in a Nutshell , O'Reilly & Associates, Sebastopol , CA .
Weimann, E. & Lourekas, P. (1999), Photoshop 5.5 for Windows & Macintosh, Peachpit Press, Berkeley , CA .
8.1.2. Reading: Graphic Image File Formats

Graphic Image File Formats

Once you're happy with the look of your image, you will need to make it ready for the Web.
Once upon a time there was only one graphic file format you could use on the Web: GIF87 (Back when Mosaic was the only graphical browser).
Then, with the release of Netscape 1.0, JPEG became common. Today there are three graphic file formats you can use on the Web, although browser support for PNG continues to remain buggy.
Here is the difference between each:
Long Name:
Graphics Interchange Format
Joint Photographic Experts Group
Portable Network Graphics
RGB Support:
Browser Support:
Since Mosaic
Since Netscape
All 4.0 Browsers?
Indexed Support:
Up to 265
Up to 16.7 Million
Up to 16.7 Million
File Size (example):
1/5 a PSD
1/20 a PSD
1/1 – 1/3?
Illustrations, Type, Animations, & Special Effects
Continuous Tone & Photographs
Vector Support:
Blend Background:
8.1.3. Reading: JPEG Image Compression

JPEG Image Compression

Compressing an image into JPEG format is fairly straight forward. Once you've confirmed your image is in RGB mode, you'll need to make sure any layers you have created are flattened (Only file formats like PSD can store layers). To save in JPEG format, just look under your file menu, choose “Save As” and select the JPEG format.
The Image options will range from 1 to 10, with 1 being the most tightly compressed (but lossiest), and 10 being the least compressed (but largest). Format options include saving your JPEG as “Baseline Standard”, “Baseline Optimized”, or “Progressive”. Baseline Standard is the most common form of JPEG, Baseline Optimized uses a better compression technique, but may not be supported on earlier browsers, and Progressive allows your JPEG image to appear a though it's coming into focus as it downloads on your Web page.
Adobe ImageReady (which comes bundled with Adobe Photoshop), allows you to visually compare various JPEG compressions (and other file formats like GIF and PNG) while tweaking their settings so you can see how they will affect your final image before outputting them: