2 weeks ago


180 The Principles of

180 The Principles of Beautiful Web Design Figure 5.28. A sampling of Photoshop filters As far as Photoshop effects go, I’ve only shown the tip of the iceberg here. Not even the whole tip—this quick tour has been more like a chip off the tip. There’s so much that you can do within Photoshop, and my best recommendation for learning it all is to tinker. Online tutorials will accelerate that process, but there’s no substitute for solid experience. Open an image and explore what each toolbar button, drop-down item, menu action, and filter can do to that image. Once you’ve messed up that image well enough, open another one and start again. File Formats and Resolutions No matter which photo-editing program you use, to prepare images for the Web, you’ll need to know a few basics about the standard image file formats and when each should be used. Currently, three image formats are widely supported by web browsers: JPEG, GIF, and PNG. Choosing the format that’s right for your image is a matter of determining which will provide the smallest file size for the highest quality image. JPEG JPEG (.jpg) is an image compression format that was developed by the Joint Photographic Experts Group specifically to store photographic images. Unlike GIF and PNG images, JPEGs can provide fairly small file sizes at 24-bit color. This makes them great for any type of photography, or graphics with heavy textures or long gradients. Although there’s no limit to the number of colors the JPEG format can display, it’s a lossy format that can create visual artifacts depending on how much you compress the file. When saving a .jpg file, you’ll have to carefully consider the

Imagery 181 amount of compression you apply. As you can see in Figure 5.29, a highly compressed image might be great for page load speed, but if you go as far as I did with the rightmost strawberry, it’s very unappetizing. Figure 5.29. An image of a strawberry saved at increasingly higher levels of JPEG compression GIF GIF (Graphics Interchange Format) is an 8-bit format that compresses files on the basis of the number of colors in the image. Although the compression ratio of the GIF format is good, it supports a maximum of only 256 colors, and is therefore useless for photographic pages. Two nifty features of GIF are that it displays transparency (see figure Figure 5.30), and supports animation. In the late 1990s, UNISYS (the company behind the compression algorithm used in GIF images) tried to claim that GIF was a proprietary format, and charged companies royalties for any program that created GIF files. This—as well as the 256-color limitation of the format—led to the creation of the PNG format. Although the GIF format is still widely used on the Web, using PNG instead is strongly encouraged. Figure 5.30. A transparent GIF and a 24-bit PNG, shown against different backgrounds PNG The PNG (Portable Networks Graphics) format was developed by the W3C as an alternative to GIF. The lossless compression style of the PNG algorithm works similarly to that of GIF, in that files with fewer colors end up having the smallest file sizes. PNG images can be saved in either

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
Responsive Email Design Guide - e-Dialog
How to build a department web site (starter pack) - University of ...
PDF Specimen Booklet - Fontworks UK Ltd
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
Visual Design for Library Websites - WebJunction
Visual Design and Web Site Usability