NED11: Module 9

Working with images
Do's and don'ts with images:

• Anti-aliasing creates pixels in between the foreground and background colours that blend the two colours and smooth out the jagged edges. It works best with one coloured backgrounds
• Low resolution images cannot display fine details, so avoid them
• Good icons can be enlarged and reduced without losing legibility (like logos)
• Scan images as a high-resolution and save a high resolution version before reducing to 72 pixels per inch (ppi) on screen copy
• For onscreen use at same physical size, scan images at 150ppi if you plan to use at 72ppi on screen
• If enlarging, try scanning in at a proportionally higher resolution, e.g. images used at 300% of the original size should be scanned in at 450ppi. This way the images will be able to be re-used in other media, like print. It also means they are easier to resize
• It is critical that you reduce the size of your image before placing it in your interactive project, this means 72ppi for most of the viewing public. Larger images need longer download times
• Never take an image and increase its resolution - this makes it pixelate
• Current standard display resolution is 72ppi for Macs and 96 for Windows computers
• While it is true that great images will enhance a design, even the best images can not save a website 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 unify your images to the point that they all look the same. The goal is consistency, not to make everything look identical
• Remember - keep it simple.

NED11: Module 8

Images

• It's best to scan images as RGB colour at 72-150dpi PSD format, then crop it, resize it then re-save it as a different name. This results in richer colours
• To clean up your images, use a dust/filter tool and rubber stamp/cloning tool in your photo editing program then sharpen the image
• JPEG = Joint Photographic Experts Group
• GIF = Graphics Interchange Format
• PNG = Portable Network Graphics
• Baseline Standard is the most common form of JPEG
• Baseline Optimised uses a better compression technique but may not be supported on earlier browsers
• Progressive allows your JPEG image to appear as though it's coming into focus as it downloads on your webpage
• Adobe Image Ready allows you to visually compare various JPEG compressions

Images and web-safe colours

Although 256 colours are enough to fool the human eye into thinking it can see more, it does pose some problems in displaying colours outside of the 256 colour gamut. As a result it is quite possible your JPEG images may appear 'dithered' or 'speckled' on older computers. To make matters worse Macintosh operating systems and Windows operating systems use a different set of 256 colours. Most are identical, however 40 of them are different leaving you with only 216 colours to work with. In your swatch pallet in Photoshop, click on the black triangle to see the 'Wide Spectrum' palette. It is best to stick to the 216 colours in web design.

Another way of selecting web-safe colours is through the use of your Colour Picker. Double click on either colour swatch in your palette, tick the box that says 'Only Web-safe Colours'.

GIF's support a variety of special effects including interlacing, transparency and animation.