Web Graphics Basics

CHAPTER 18 WEB GRAPHICS BASICS Unless you plan on publishing text-only sites, chances are you’ll need to know IN THIS CHAPTER how to create web graphics. For many of you, that might mean getting your Where to get images hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer accustomed An overview of GIF, JPEG, to print, you may need to adapt your style and process to make graphics that and PNG formats are appropriate for web delivery. Image size and resolution This chapter covers the fundamentals of web graphics production, beginning Resizing images in with some options for finding and creating images. From there, it introduces Photoshop the file formats available for web graphics and helps you decide which to use. Binary and alpha You’ll also learn the basics of image resolution, resizing, and transparency. transparency As always, there are step-by-step exercises along the way. I want to point out, Preventing “halos” however, that I write with the assumption that you have some familiarity with an image-editing program. I use Adobe Photoshop (the industry standard) in the examples and exercises, but you can follow along with most steps using other tools listed in this chapter. If you are starting at square one, I recommend spending time with the manual or third-party books about your graphics software. Image Sources You have to have an image to save an image, so before we jump into the nitty-gritty of file formats, let’s look at some ways to get images in the first place. There are many options: from scanning, shooting, or illustrating them yourself, to using available stock photos and clip art, or just hiring someone to create images for you. Creating your own images In most cases, the most cost-effective way to generate images for your site is to make your own from scratch. The added bonus is that you know you have full rights to use the images (we’ll address copyright again in a moment). Designers may generate imagery with scanners, digital cameras, or using an illustration or photo editing program. 359 Image Sources Scanning Scanning is a great way to collect source material. You can scan almost Scanning Tips anything, from flat art to 3-D objects. Beware, however, the temptation to If you are scanning images for use scan and use found images. Keep in mind that most images you find are on the Web, these tips will help you probably copyright-protected and may not be used without permission, create images with better quality. even if you modify them considerably. See the Scanning Tips sidebar for Because it is easier to maintain some how-to information. image quality when resizing smaller than resizing larger, it Digital cameras is usually a good idea to scan You can capture the world around you and pipe it right into an image- the image a bit larger than you actually need. This gives you editing program with a digital camera. Because the Web is a low-reso- more flexibility for resizing later. lution environment, there is no need to invest in high-end equipment. Don’t go overboard, however, Depending on the type of imagery, you may get the quality you need with because if you have to reduce a standard consumer digital camera. its size too much, you’ll get a blurry result. Issues of image size Electronic illustration are discussed in more detail in the Image Size and Resolution If you have illustration skills, you can make your own graphics in a draw- section later in this chapter. ing or photo-editing application. The sidebar, Tools of the Trade, intro- Scan black and white images in duces some of the most popular graphics programs available today. Every grayscale (8-bit) mode, not in designer has her own favorite tools and techniques. I sometimes create my black-and-white (1-bit or bitmap) logos, illustrations, and type effects in Adobe Illustrator, then bring the mode. This enables you to make image into Photoshop to create the web-ready version. However, for most adjustments in the midtone areas once you have sized the image types, Photoshop has all I need, so it is where I spend the majority image to its final dimensions and of my design time. resolution. If you really want only black and white pixels, convert the image as the last step. Stock photography and illustrations If you are scanning an image If you aren’t confident in your design skills, or you just want a head-start that has been printed, you will need to eliminate the dot pattern with some fresh imagery, there are plenty of collections of ready-made photos, that results from the printing illustrations, buttons, animations, and textures available for sale or for free. process. The best way to do Stock photos and illustrations generally fall into two broad categories: rights- this is to apply a slight blur to managed and royalty-free. the image (in Photoshop, use the Gaussian Blur filter), resize Rights-managed means that the copyright holder (or a company representing the image slightly smaller, then them) controls who may reproduce the image. In order to use a rights-man- apply a sharpening filter. This will eliminate those pesky dots. Make aged image, you must obtain a license to reproduce it for a particular use and sure you have the rights to use for a particular period of time. One of the advantages to licensing images is the printed image, too, of course. that you can arrange to have exclusive rights to an image within a particular medium (such as the Web) or a particular business sector (such as the health care industry or banking). On the downside, rights-managed images get quite pricey. Depending on the breadth and length of the license, the price tag may be many thousands of dollars for a single image. If you don’t want exclusive rights and you want to use the image only on the Web, the cost is more likely to be a few hundred dollars, depending on the source. If that still sounds too steep, consider using royalty-free artwork for which you don’t need to pay a licensing fee. Royalty-free artwork is available for a one-time fee that gives you unlimited use of the image, but you have no con- 360 Part IV: Creating Web Graphics Image Sources trol over who else is using the image. Royalty-free images are available from the top-notch professional stock houses such as Getty Images for as little as Tools of the Trade 30 bucks an image, and from other sites for less (even free). What follows is a brief introduction Following is a list of a few of my favorite resources for finding high-quality to the most popular graphics tools among professional graphic stock photography and illustrations, but it is by no means exhaustive. A web designers. There are many other search will turn up plenty more sites with images for sale. tools out there that will crank out a GIF or a JPEG; if you’ve found one IStockPhoto (www.istockphoto.com) that works for you, that’s fine. If you’re on a tight budget (and even if you’re not), there’s no better place Adobe Photoshop to find images than IStockPhoto. The photo collections are generated by Without a doubt, the industry ordinary people who contribute to the site and all the images are roy- standard for creating graphics alty-free. Prices start at just a buck a pop! It’s my personal favorite image is Photoshop, in version CS3 as of this writing. It includes resource. many features specifically for Getty Images (www.gettyimages.com) creating web graphics. If you are interested in making web sites Getty is the largest stock image house, having acquired most of its com- professionally, I recommend petitors over recent years. It offers both rights-managed and royalty-free getting up to speed with photographs and illustrations at a variety of price ranges. Photoshop right away. Download a trial copy of this and all Adobe Jupiter Images (www.jupiterimages.com) and PictureQuest (www.picturequest. software at adobe.com. com) Adobe Macromedia Fireworks Jupiter Images and its PictureQuest division offer high quality rights- This is one of the first graphics programs designed from the managed and royalty-free photo collections. ground up to address the special requirements of web JuicyStock.com (www.juicystock.com) graphics. It has tools for creating This is a great resource for affordable, royalty-free photographs of people both vector (line-based) and and places from around the globe. raster (pixel-based) images. It features side-by-side previews Veer (www.veer.com) of output settings, animation, great file optimization, I like Veer because it tends to be a little more hip and edgy than its and more. After acquiring competitors. It offers both rights-managed and royalty-free photographs, Fireworks from Macromedia, illustrations, fonts, and stock video. Adobe subsequently retired ImageReady, Photoshop’s web graphic sidekick. Clip art Adobe Illustrator Clip art refers to collections of royalty-free illustrations, animations, buttons, Illustrator is the standard drawing and other doo-dads that you can copy and paste into a wide range of uses. program in both the print and web design industries. It Nowadays, there are huge clip-art collections available specifically for web integrates nicely with Photoshop. use. A trip to your local software retail store or a browse through the pages of Corel Paint Shop Pro Photo a software catalog will no doubt turn up royalty-free image collections, some If you use Windows and are on boasting 100,000 pieces of art.

Load more