How do web pages use graphics

how to design web graphics and creating web page graphics
JohenCorner Profile Pic
Published Date:02-08-2017
Your Website URL(Optional)
a WEB GRAPHICS BASICS Unless you plan on publishing text-only sites, chances are you’ll need to know how to create web graphics. For many of you, that might mean getting your hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer accustomed to print, you may need to adapt your style and process to make graphics that are appropriate for web delivery. This chapter covers the fundamentals of web graphics production, beginning with some options for finding and creating images. From there, it introduces the file formats available for web graphics and helps you decide which to use. You’ll also learn the basics of image resolution, resizing, and transparency. As always, there are step-by-step exercises along the way. I want to point out, 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. 3a Image Sources Scanning Scanning is a great way to collect source material. You can scan almost anything, from flat art to 3-D objects. Beware, however, the temptation to S Scanning canning T Tips ips scan and use found images. Keep in mind that most images you find are IIf f y you ou ar are e scanning scanning images images f for or use use probably copyright-protected and may not be used without permission, on on the the W Web eb, , these these tips tips will will help help y you ou cr creat eate e images images with with bett better er qualit quality y.. even if you modify them considerably. See the Scanning Tips sidebar for  B Because ecause it it is is easier easier t to o maintain maintain some how-to information. image image qualit quality y when when r resizing esizing Digital cameras smaller smaller than than r resizing esizing lar larger ger, , it it is is usually usually a a good good idea idea t to o scan scan You can capture the world around you and pipe it right into an image- the the image image a a bit bit lar larger ger than than y you ou editing program with a digital camera. Because the Web is a low-reso- ac actually tually need need. . T This his g giv ives es y you ou lution environment, there is no need to invest in high-end equipment. mor more e flexibilit flexibility y f for or r resizing esizing lat later er. . D Don on’’t t go go o ov ver erboar board d, , ho how we ev ver er, , Depending on the type of imagery, you may get the quality you need with because because if if y you ou ha hav ve e t to o r reduce educe a standard consumer digital camera. its its siz size e t too oo much, much, y you ou’ll ’ll get get a a blur blurr ry y r result. esult. Issues Issues of of image image siz size e Electronic illustration ar are e discussed discussed in in mor more e detail detail in in If you have illustration skills, you can make your own graphics in a draw- the the IImage mage Siz Size e and and R Resolution esolution ing or photo-editing application. The sidebar, Tools of the Trade, intro- sec section tion lat later er in in this this chapt chapter er.. duces some of the most popular graphics programs available today. Every  S Scan can black black and and whit white e images images in in g gra rayscale yscale (8-bit) (8-bit) mode mode, , not not in in designer has her own favorite tools and techniques. I sometimes create my black black-and- -and-whit white e (1-bit (1-bit or or bitmap) bitmap) logos, illustrations, and type effects in Adobe Illustrator, then bring the mode mode. . T This his enables enables y you ou t to o mak make e image into Photoshop to create the web-ready version. However, for most adjustments adjustments in in the the midt midtone one image types, Photoshop has all I need, so it is where I spend the majority ar areas eas once once y you ou ha hav ve e siz sized ed the the image image t to o its its final final dimensions dimensions and and of my design time. r resolution. esolution. IIf f y you ou r really eally want want only only black black and and whit white e pix pixels els, , con conv ver ert t Stock photography and illustrations the the image image as as the the last last st step ep..  IIf f y you ou ar are e scanning scanning an an image image If you aren’t confident in your design skills, or you just want a head-start that that has has been been pr print inted ed, , y you ou will will with some fresh imagery, there are plenty of collections of ready-made photos, need need t to o eliminat eliminate e the the dot dot patt patter ern n illustrations, buttons, animations, and textures available for sale or for free. that that r results esults fr from om the the pr printing inting pr process ocess. . T The he best best wa way y t to o do do Stock photos and illustrations generally fall into two broad categories: rights- this this is is t to o apply apply a a slight slight blur blur t to o managed and royalty-free. the the image image (in (in P Phot hotoshop oshop, , use use the the G Gaussian aussian Blur Blur filt filter), er), r resiz esize e Rights-managed means that the copyright holder (or a company representing the the image image slightly slightly smaller smaller, , then then them) controls who may reproduce the image. In order to use a rights-man- apply apply a a shar sharpening pening filt filter er. . T This his will will aged image, you must obtain a license to reproduce it for a particular use and eliminat eliminate e those those pesk pesky y dots dots. . M Mak ake e for a particular period of time. One of the advantages to licensing images is sur sure e y you ou ha hav ve e the the r rights ights t to o use use the the pr print inted ed image image, , t too oo, , of of course 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- 3 0 Part IV: Creating Web Graphicsa 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 T Tools ools of of the the T Tr rade ade 30 bucks an image, and from other sites for less (even free). What What f follo ollows ws is is a a br brief ief intr introduc oduction tion t to o the the most most popular popular g graphics raphics Following is a list of a few of my favorite resources for finding high-quality t tools ools among among pr prof ofessional essional g graphic raphic stock photography and illustrations, but it is by no means exhaustive. A web desig designers ners. . T Ther here e ar are e man many y other other search will turn up plenty more sites with images for sale. t tools ools out out ther there e that that will will crank crank out out a a GIF GIF or or a a JPEG; JPEG; if if y you ou’v ’ve e f found ound one one IStockPhoto ( that that w wor orks ks f for or y you ou, , that that’’s s fine fine.. If you’re on a tight budget (and even if you’re not), there’s no better place A Adob dobe e P Phot hotoshop oshop to find images than IStockPhoto. The photo collections are generated by W Without ithout a a doubt, doubt, the the industr industry y standar standard d f for or cr creating eating g graphics raphics ordinary people who contribute to the site and all the images are roy- is is P Phot hotoshop oshop, , in in v version ersion CS3 CS3 alty-free. Prices start at just a buck a pop It’s my personal favorite image as as of of this this wr writing iting. . IIt t includes includes resource. man many y f featur eatures es specifically specifically f for or cr creating eating w web eb g graphics raphics. . IIf f y you ou ar are e Getty Images ( int inter erest ested ed in in mak making ing w web eb sit sites es Getty is the largest stock image house, having acquired most of its com- pr prof ofessionally essionally, , I I r recommend ecommend getting getting up up t to o speed speed with with petitors over recent years. It offers both rights-managed and royalty-free P Phot hotoshop oshop r right ight a awa way y. . D Do ownload wnload photographs and illustrations at a variety of price ranges. a a tr trial ial cop copy y of of this this and and all all A Adobe dobe sof soft twar ware e at at adob adobe e.c .com om.. Jupiter Images ( and PictureQuest (www.picturequest. com) A Adob dobe e Macr Macromedia omedia F Fir irew eworks orks T This his is is one one of of the the first first g graphics raphics Jupiter Images and its PictureQuest division offer high quality rights- pr prog ograms rams desig designed ned fr from om the the managed and royalty-free photo collections. g gr round ound up up t to o addr address ess the the special special r requir equirements ements of of w web eb ( g graphics raphics. . IIt t has has t tools ools f for or cr creating eating This is a great resource for affordable, royalty-free photographs of people both both v vec ect tor or (line (line-based) -based) and and rast raster er (pix (pixel-based) el-based) images images. . IIt t and places from around the globe. f featur eatures es side side-b -by-side y-side pr pre evie views ws of of output output settings settings, , animation, animation, Veer ( g gr reat eat file file optimization, optimization, I like Veer because it tends to be a little more hip and edgy than its and and mor more e. . A Af ft ter er acquir acquiring ing competitors. It offers both rights-managed and royalty-free photographs, F Fir ire ew wor orks ks fr from om M Macr acromedia, omedia, A Adobe dobe subsequently subsequently r retir etired ed illustrations, fonts, and stock video. IImageR mageReady eady, , P Phot hotoshop oshop’’s s w web eb g graphic raphic sidek sidekick ick.. Clip art A Adob dobe e Illustr Illustrat ator or IIllustrat llustrator or is is the the standar standard d dra drawing wing Clip art refers to collections of royalty-free illustrations, animations, buttons, pr prog ogram ram in in both both the the pr print int and other doo-dads that you can copy and paste into a wide range of uses. and and w web eb desig design n industr industries ies. . IIt t Nowadays, there are huge clip-art collections available specifically for web int integ egrat rates es nicely nicely with with P Phot hotoshop oshop.. use. A trip to your local software retail store or a browse through the pages of C Cor orel el P Paint aint Shop Shop P Pr ro o P Phot hoto o a software catalog will no doubt turn up royalty-free image collections, some IIf f y you ou use use W Windo indows ws and and ar are e on on boasting 100,000 pieces of art. Clip art collections may also come bundled a a budget, budget, P Paint aint Shop Shop P Pr ro o P Phot hoto o with your graphics software. off offers ers similar similar func functionalit tionality y t to o P Phot hotoshop oshop at at a a much much lo low wer er There are a number of resources online, and the good news is that some pr price ice. . Y You ou can can do download wnload a a tr trial ial v version ersion at at c cor orel el.c .com om.. of these sites give graphics away for free, although you may have to suffer through a barrage of pop-up ads. Others charge a membership fee, anywhere from 10 to 200 a year. The drawback is that a lot of them are poor quality Chapter 1 , Web Graphics Basics 3 1a Meet the Formats or kind of hokey (but then, “hokey” is in the eye of the beholder). The follow- ing are just a few sites to get you started. ( This service charges a membership fee, but is well-organized and tends to provide higher quality artwork than the free sites. Original Free Clip Art ( As the name says, they’ve got free clip art. This site has been around a while, unlike many others that come and go. 1 Free Clip Art ( Another no-frills free clip art site. Hire a designer Finding and creating images takes time and particular talents. If you have more money than either of those things, consider hiring a graphic designer to generate the imagery for your site for you. If you start with a good set of original photos or illustrations, you can still use the skills you learn in this book to produce web versions of the images as you need them. Meet the Formats Once you’ve got your hands on some images, you need to get them into a format that will work on a web page. There are dozens of graphics file for- mats out in the world. For example, if you use Windows, you may be familiar with BMP graphics, or if you are a print designer, you may commonly use images in TIFF and EPS format. On the Web, you have only three choices: GIF (pronounced “jif”), JPEG (“jay-peg”), and PNG (“ping”). If this sounds like alphabet soup to you, don’t worry. By the end of this section, you’ll know a GIF from a JPEG and when to use each one. Here is a quick rundown: Name Name F Files iles P Pr roperly operly GIF images are most appropriate for images with flat colors and hard edges B Be e sur sure e t to o use use the the pr proper oper file file or when transparency or animation is required. ex ext tensions ensions f for or y your our image image files files. . GIF GIF files files must must be be named named with with the the .gif .gif JPEGs work best for photographs or images with smooth color blends. suffix. suffix. JPEG JPEG files files must must ha hav ve e .jp .jpg g ( (or or PNG files can contain any image type and are often a good substitute for the the the less less common common .jp .jpeg eg) ) as as a a suffix. suffix. PNG PNG files files must must end end in in .png .png. . Br Bro owsers wsers GIF format. They can also contain images with transparent or partially look look at at the the suffix suffix t to o det deter ermine mine ho how w transparent areas. t to o handle handle var various ious media media t types ypes, , so so it it is is best best t to o stick stick with with the the standar standardiz dized ed These formats have emerged as the standards because they are platform- suffix suffixes es f for or image image file file f for ormats mats.. independent (meaning they work on Windows, Macs, and Unix operating systems) and they condense well to be easily ported over a network. The remainder of this section tackles terminology and digs deeper into the fea- tures and functions of each format. Understanding the technical details will help you make the highest-quality web graphics at the smallest sizes. 3 2 Part IV: Creating Web Graphicsa Meet the Formats The ubiquitous GIF The GIF (Graphic Interchange Format) file is the habitual favorite for web pages. Although not designed specifically for the Web, it was the first format was quickly adopted for its versatility, small file sizes, and cross-platform compatibility. GIF also offers transparency and the ability to contain simple animations. Because the GIF compression scheme excels at compressing flat colors, it is the best file format to use for logos, line art, graphics containing text, icons, etc. (Figure 18-1). You can save photographs or textured images as GIFs, too, but they won’t be saved as effi- ciently, resulting in larger file sizes. These are F Figur igure e 18-1. 18-1. T The he GIF GIF format format is is gr great eat for for gr graphic aphical al images images c comprised omprised mainly mainly of of flat flat best saved as JPEGs, which I’ll get to next. However, GIF does work well for c colors olors and and har hard d edges edges. . images with a combination of small amounts of photographic imagery and large flat areas of color. To make really great GIFs, it’s important to be familiar with how they work under the hood and what they can do.  -bit, indexed color In technical terms, GIF files are indexed color images that contain 8-bit color information (they can also be saved at lower bit depths). Let’s decipher that statement a term at a time. 8-bit means GIFs can contain up to 256 colors— 8 the maximum number that 8 bits of information can define (2 =256). Lower bit depths result in fewer colors and also reduce file size. Indexed color means that the set 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 of colors in the image, its palette, is 1 1 1 1 3 3 3 3 3 3 3 3 3 3 1 1 1 1 stored in a color table (also called a 1 1 3 3 1 1 3 3 3 3 2 2 2 2 3 3 3 3 color map). Each pixel in the image 1 1 3 3 1 1 3 3 3 3 3 3 4 4 3 3 3 3 1 1 2 2 3 3 4 4 contains a numeric reference (or 1 1 1 1 3 3 3 3 3 3 3 3 3 3 2 2 2 2 Color table Color table “index”) to a position in the color 1 1 1 1 3 3 3 3 2 2 2 2 2 2 3 3 3 3 table. This should be made clear 3 3 3 3 3 3 3 3 3 3 1 1 1 1 1 1 1 1 with a simple demonstration. Figure 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 18-2 shows how a 2-bit (4-color) The pixels in an indexed color image The pixels in an indexed color image The color table matches The color table matches The image displays with the The image displays with the contain numerical references to the contain numerical references to the numbers to RGB color numbers to RGB color colors in place. colors in place. indexed color image references its color table for the image. color table for the image. values. This is the map for values. This is the map for a a color table for display. For 8-bit 2-bit image with only 2-bit image with only images, there are 256 slots in the 4 colors. 4 colors. color table. F Figur igure e 18-2. 18-2. A A 2-bit 2-bit image image and and its its c color olor table table. . Chapter 1 , Web Graphics Basics 3 3a Meet the Formats Photoshop Fireworks When you open an existing GIF in Photoshop, you can view (and even edit) its color table by selecting Image → Mode → Color Table (Figure 18-3). You also get a preview of the color table for an image when you use Photoshop’s Save for Web & Devices to export an image in GIF format, as we’ll be doing later in this chapter. In Fireworks (and The Color Table displays the 64 the discontinued ImageReady, not pixel colors used in the image. shown), the color table is displayed in the Optimize panel. Figure 18-3. A view of the Color Table in Most source images (scans, illustrations, photos, etc.) start out in RGB format, Photoshop and Fireworks. so they need to be converted to indexed color in order to be saved as a GIF. When an image goes from RGB to indexed mode, the colors in the image are reduced to a palette of 256 colors or fewer. In Photoshop, Fireworks, and (now retired) ImageReady, the conversion takes place when you save or export the GIF, although you can see a preview of the final image and its color table. Other image editing programs may require you to convert the image to indexed color manually first, then export the GIF as a second step. In either case, you will be asked to select a palette for the indexed color image. The sidebar, Common Color Palettes, outlines the various palette options available in the most popular image tools. It is recommended that you use Selective or Perceptual in Photoshop, Adaptive in Fireworks, and Optimized Median Cut in Paint Shop Pro for the best results for most image types. GIF compression GIF compression is “lossless,” which means that no image information is GIF compression stores repetitive pixel colors GIF compression stores repetitive pixel colors as a single description. as a single description. sacrificed in order to compress the indexed image (although some image information may be lost when the RGB image is converted to a limited color palette). Second, it uses a compression scheme (called “LZW” for Lempel- “14 blue” “14 blue” Ziv-Welch) that takes advantage of repetition in data. When it encounters a string of pixels of identical color, it can compress that into one data descrip- In an image with gradations of color, it has to store In an image with gradations of color, it has to store tion. This is why images with large areas of flat color condense better than information for every pixel in the row. The longer information for every pixel in the row. The longer images with textures. description means a larger file size. description means a larger file size. To use an extremely simplified example, when the compression scheme encounters a row of 14 identical blue pixels, it makes up a shorthand nota- “1 blue, 1 aqua, 2 light aqua...” (and so on) “1 blue, 1 aqua, 2 light aqua...” (and so on) tion that means “14 blue pixels.” The next time it encounters 14 blue pixels, it uses only the code shorthand (Figure 18-4). By contrast, when it encounters F Figur igure e 18-4. 18-4. A A simplified simplified demonstr demonstration ation a row that has a gentle gradation from blue to aqua and green, it needs to of of L LZ ZW W c compr ompression ession used used b by y GIF GIF images images. . store a description for every pixel along the way, requiring more data. What actually happens in technical terms is more complicated, of course, but this example is a good mental model to keep in mind when designing GIF images for maximum compression. 3 Part IV: Creating Web Graphicsa Meet the Formats Transparency You can make parts of GIF images transparent so that the background image or color shows through. Although all bitmapped graphics are rectangular by nature, with transparency, you can create the illusion that your image has a more interesting shape (Figure 18-5). GIF transparency is discussed in detail later in this chapter. C Common ommon C Color olor P Palett alettes es All All 8-bit 8-bit index indexed ed color color images images use use palett palettes es t to o define define the the colors colors in in the the image image, , and and ther there e ar are e se sev veral eral standar standard d palett palettes es t to o choose choose fr from. om. S Some ome ar are e methods methods f for or pr producing oducing a a cust custom om palett palette e based based on on the the colors colors in in the the image image. . O Others thers apply apply a a pr preexisting eexisting palett palette e t to o the the image image.. Exac Exact t.. Cr Creat eates es a a cust custom om palett palette e out out of of the the ac actual tual colors colors in in the the image image if if the the image image alr already eady contains contains f fe ew wer er than than 256 256 colors colors.. F Figur igure e 18-5. 18-5. T Tr ranspar ansparenc ency y allo allows ws the the strip striped ed back backgr ground ound t to o sho show w thr throu ough gh the the A Adaptiv daptive e.. Cr Creat eates es a a cust custom om palett palette e using using the the most most fr frequently equently used used pix pixel el colors colors image image on on the the b bott ottom. om. in in the the image image. . IIt t allo allows ws f for or color color- -depth depth r reduc eduction tion while while pr preser eserving ving the the or orig iginal inal charac charact ter er of of the the image image. . P Per erc ceptual eptual (P (Phot hotoshop/I oshop/ImageR mageReady eady only). only). Cr Creat eates es a a cust custom om color color table table b by y g giving iving pr prior iorit ity y t to o colors colors f for or which which the the human human e ey ye e has has g gr reat eater er sensitivit sensitivity y. . Unlik Unlike e A Adaptiv daptive e, , it it is is based based on on algor algorithms ithms, , not not just just a a pix pixel el count. count. IIt t generally generally r results esults in in images images with with bett better er color color int integ egr rit ity y than than A Adaptiv daptive e palett palette e images images.. S Selec electiv tive e (P (Phot hotoshop/I oshop/ImageR mageReady eady only). only). T This his is is similar similar t to o P Per erceptual ceptual, , but but it it g giv ives es pr pref efer erence ence t to o ar areas eas of of br broad oad color color and and the the pr preser eservation vation of of w web eb-saf -safe e colors colors. . W Web eb, , R Restr estric ictiv tive e, , or or W Web216. eb216. Cr Creat eates es a a palett palette e of of colors colors ex exclusiv clusively ely fr from om the the w web eb- - saf safe e palett palette e (see (see Chapt Chapter er 13, 13, C Colors olors and and Back Backg gr rounds ounds f for or mor more e inf infor ormation mation on on the the w web eb palett palette). e). IIt t is is no no longer longer necessar necessary y t to o use use colors colors fr from om the the w web eb palett palette e, , so so this this is is not not r recommended ecommended.. W Web eb A Adaptiv daptive e (F (Fir irew ewor orks ks only) only).. T This his adaptiv adaptive e palett palette e con conv ver erts ts colors colors t to o the the near nearest est w web eb palett palette e color color. . B Because ecause the the w web eb palett palette e is is obsolet obsolete e and and limit limited ed, , this this is is no no longer longer r recommended ecommended. . Unif Unifor orm. m. Cr Creat eates es a a palett palette e that that contains contains an an e ev venly enly st stepped epped sampling sampling of of colors colors fr from om the the R RGB GB spec spectrum. trum. C Cust ustom. om. T This his allo allows ws y you ou t to o load load a a palett palette e that that was was pr pre eviously viously sa sav ved ed and and apply apply it it t to o the the cur curr rent ent image image. . O Other therwise wise, , it it pr preser eserv ves es the the cur curr rent ent colors colors in in the the palett palette e.. S Sy yst stem em ( (W Windo indow ws s or or M Macin acint tosh). osh). Uses Uses the the colors colors in in the the specified specified syst system em’’s s default default palett palette e.. Optimiz Optimized ed M Median edian C Cut ut (P (Pain aint t Shop Shop P Pr ro o only). only). T This his r reduces educes the the image image t to o a a f fe ew w colors colors using using something something similar similar t to o an an A Adaptiv daptive e palett palette e.. Optimiz Optimized ed O Oc ctr tree ee (P (Pain aint t Shop Shop P Pr ro o only). only). Use Use this this palett palette e if if the the or orig iginal inal image image has has just just a a f fe ew w colors colors and and y you ou want want t to o k keep eep those those exac exact t colors colors.. Chapter 1 , Web Graphics Basics 3a Meet the Formats Interlacing Interlacing is an effect you can apply to a GIF that makes the image display in a series of passes. Each pass is clearer than the pass before until the image is fully rendered in the browser window (Figure 18-6). Without interlacing, some browsers may wait until the entire image is downloaded before display- ing the image. Others may display the image a few rows at a time, from top to bottom, until the entire picture is complete. Over a fast connection, these effects (interlacing or image delays) may not even be perceptible. However, over slow modem connections, interlacing large images may be a way to provide a hint of the image to come while the entire image downloads. Whether you interlace or not is your design decision. I never do, but if you have an especially large image and an audience with a significant percentage F Figur igure e 18-6. 18-6. Int Interlac erlaced ed GIF GIFs s display display in in a a of dial-up connections, interlacing may be worthwhile. series series of of passes passes, , each each clear clearer er than than the the pass pass b befor efore e. . Animation Another feature built into the GIF file format is the ability to display simple animations (Figure 18-7). Many of the spinning, blinking, fading, or otherwise moving ad banners you see are animated GIFs (although Flash movies have become increasingly popular for web advertising). F F U U R R t t H H e e R R R R e e A A D D I I n n G G A Anima nimat ted ed GIFs GIFs W With ith so so much much t to o sa say y about about C Cascading ascading St Style yle Sheets Sheets, , I I ran ran out out of of r room oom in in this this edition edition f for or a a chapt chapter er on on animat animated ed GIFs GIFs. . T The he good good ne news ws is is that that y you ou can can do download wnload a a PDF PDF of of the the Animated Animated GIFs GIFs chapt chapter er Figure 18-7. All the frames of this simple animation are contained within one GIF file. fr from om the the second second edition edition of of Learning Learning W Web eb Design Design at at w ww ww w. . learningw learningweb ebdesign.c om. . T The he chapt chapter er Animated GIFs contain a number of animation frames, which are separate includes includes detailed detailed explanations explanations of of images that, when viewed together quickly, give the illusion of motion or the the animation animation settings settings and and st step ep-b -by- y- change over time. All of the frame images are stored within a single GIF file, st step ep instruc instructions tions f for or ho how w t to o cr creat eate e along with settings that describe how they should be played back in the animations animations. . browser window. Settings include whether and how many times the sequence repeats, how long each frame stays visible (frame delay), the manner in which one frame replaces another (disposal method), whether the image is transpar- ent, and whether it is interlaced. Adobe Photoshop CS3, Fireworks, and the discontinued ImageReady have interfaces for creating animated GIFs. Another highly recommended tool is GIFmation by BoxTop Software, available at 3 Part IV: Creating Web Graphicsa Meet the Formats The photogenic JPEG The second most popular graph- ics format on the Web is JPEG, which stands for Joint Photographic Experts Group, the standards body that created it. Unlike GIFs, JPEGs use a compres- sion scheme that loves gradient and blended colors, but doesn’t work especially well on flat colors or hard edges. JPEG’s full-color capac- ity and compression scheme make it the ideal choice for photographic images (Figure 18-8). 2 -bit Truecolor images F Figur igure e 18-8. 18-8. T The he JPEG JPEG format format is is ideal ideal for for JPEGs don’t use color palettes like GIFs. Instead, they are 24-bit images, phot photo ogr graphs aphs ( (c color olor or or gr graysc ayscale) ale) or or an any y image image with with subtle subtle c color olor gr gradations adations. . capable of displaying colors from the millions of colors in the RGB color space (also referred to as the Truecolor space, see note). This is one aspect that makes them ideal for photographs—they have all the colors you’ll ever need. With JPEGs, you don’t have to worry about limiting yourself to 256 colors the way you do with GIFs. JPEGs are much more straightforward. N N oott ee R RGB GB c colo olor r is is e exp xpla lai in ne ed d i in n C Cha hap pt te er r 1 14 4, , Lossy compression Colo Colors rs a and nd Ba Bac ckg kgr ro ounds unds. . The JPEG compression scheme is lossy, which means that some of the image information is thrown out in the compression process. Fortunately, this loss is not discernible for most images at most compression levels. When an image is compressed with high levels of JPEG compression, you begin to see color blotches and squares (usually referred to as artifacts) that result from the way the compression scheme samples the image (Figure 18-9). Original Maximum compression Figure 18-9. JPEG compression discards image detail to achieve smaller file sizes. At high compression rates, image quality suffers, as shown in the image on the right. Chapter 1 , Web Graphics Basics 3a Meet the Formats You can control how aggressively you want the image to be compressed. This involves a trade-off between file size and image quality. The more you com- press the image (for a smaller file size), the more the image quality suffers. Conversely, when you maximize quality, you also end up with larger files. The best compression level is based on the particular image and your objectives for the site. Compression strategies are discussed in more detail in Chapter 19, Lean and Mean Web Graphics. Progressive JPEGs W A R n I n G Progressive JPEGs display in a series of passes (like interlaced GIFs), start- ing with a low-resolution version that gets clearer with each pass as shown Cumulative in Figure 18-10. In some graphics programs, you can specify the number of Image Loss passes it takes to fill in the final image (3, 4, or 5). Be aware that once image quality is lost in JPEG compression, you can never get it back again. For this reason, you should avoid resaving a JPEG as a JPEG. You lose image quality every time. It is better to hang onto the original image and make JPEG copies as needed. That way, if you need to make a change to the JPEG version, you can go back to the original and do a fresh save or export. Fortunately, Photoshop’s Save for Figure 18-10. Progressive JPEGs render in a series of passes. Web & Devices feature does exactly that. Fireworks and ImageReady also preserve the originals and let you The advantage to using progressive JPEGs is that viewers can get an idea of save or export copies. the image before it downloads completely. Also, making a JPEG progressive usually reduces its file size slightly. The disadvantage is that they take more processing power and can slow down final display. Decompression JPEGs need to be decompressed before they can be displayed; therefore, it takes a browser longer to decode and assemble a JPEG than a GIF of the same file size. It’s usually not a perceptible difference, however, so this is not a reason to avoid the JPEG format. It’s just something to know. The amazing PNG The last graphic format to join the web graphics roster is the versatile PNG (Portable Network Graphic). Despite getting off to a slow start, PNGs are now supported by all browsers in current use. In addition, image-editing tools are now capable of generating PNGs that are as small and full-featured as they ought to be. Thanks to better support across the board, PNGs are finally enjoying the mainstream popularity they deserve. 3 Part IV: Creating Web Graphics Photo courtesy of Liam Lyncha Meet the Formats PNGs offer an impressive lineup of features: PNGs PNGs in in M Motion otion • The ability to contain 8-bit indexed, 24-bit RGB, 16-bit grayscale, and One One of of the the only only f featur eatures es missing missing in in even 48-bit color images PNG PNG is is the the abilit ability y t to o st stor ore e multiple multiple • A lossless compression scheme images images f for or animation. animation. T The he first first eff effor ort t t to o add add motion motion t to o PNGs PNGs was was the the MNG MNG • Simple on/off transparency (like GIF) or multiple levels of transparency f for ormat mat (M (Multiple ultiple-image -image Net Netw wor ork k Graphic). Graphic). IIt t gained gained some some br bro owser wser • Progressive display (similar to GIF interlacing) suppor support, t, but but its its popular popularit ity y suff suffer ered ed fr from om the the fac fact t that that MNGs MNGs w wer ere e not not • Gamma adjustment information back backwar ward d compatible compatible with with PNGs PNGs. . IIf f a a br bro owser wser didn didn’’t t suppor support t MNG, MNG, it it • Embedded text for attaching information about the author, copyright, w would ould displa display y a a br brok oken en g graphic raphic. . and so on M Mor ore e r recently ecently, , ther there e has has been been a a This section takes a closer look at each of these features and helps you decide pr proposed oposed ex ext tension ension t to o PNG PNG called called APNG APNG ( (Animat Animated ed P Por ortable table Net Netw wor ork k when the PNG format is the best choice for your image. Graphic) Graphic) that that addr addresses esses the the issue issue of of back backwar ward d compatibilit compatibility y. . IIf f a a Multiple image formats br bro owser wser does does not not suppor support t an an APNG, APNG, it it displa displays ys the the first first frame frame as as a a static static The PNG format was designed to replace GIF for online purposes and TIFF image image PNG PNG inst instead ead. . for image storage and printing. A PNG can be used to save many image types: B Both oth of of these these f for ormats mats ar are e in in 8-bit indexed color, 24- and 48-bit RGB color, and 16-bit grayscale. de dev velopment elopment and and ar are e not not w well ell suppor support ted ed as as of of this this wr writing iting. . 8-bit indexed color images Like GIFs, PNGs can store 8-bit indexed images with a maximum of 256 colors. They may be saved at 1-, 2-, and 4-bit depths as well. Indexed color PNGs are generally referred to as PNG-8. RGB/Truecolor (24- and 48-bit) In PNGs, each channel (red, green, and blue) can be defined by 8- or 16-bit information, resulting in 24- or 48-bit RGB images, respectively. In graphics programs, 24-bit RGB PNGs are identified as PNG-24. It should be noted that 48-bit images are useless for the Web, and even 24-bit imag- es should be used with care. JPEG offers smaller file sizes with acceptable image quality for RGB images. Grayscale PNGs can also support 16-bit grayscale images—that’s as many as 65,536 shades of gray (216), enabling black-and-white photographs and illustra- tions to be stored with enormous subtlety of detail, although they are not appropriate for the Web. Transparency Like GIFs, PNGs can contain transparent areas that let the background image or color show through. The killer feature that PNG has over GIF, however, is the ability to contain multiple levels of transparency, commonly referred to as alpha-channel (or just alpha) transparency. Chapter 1 , Web Graphics Basics 3a Meet the Formats Figure 18-11 shows the same PNG against two different background images. The orange circle is entirely opaque, but the drop shadow contains multiple levels of transparency, ranging from nearly opaque to entirely transparent. The multiple transparency levels stored in the PNG allows the drop shadow to blend seamlessly with any background. The ins and outs of PNG transpar- ency will be addressed in the upcoming Transparency section. W WA A R R N N I I N N G G M Mu ul lt ti ip pl le e l le ev ve el ls s o of f t tr ra an ns sp pa ar re en nc cy y a ar re e n no ot t sup suppo port rte ed d b by y Int Inte ern rnet et Exp Explo lor re er r 6 6 a an nd d e ea ar rl li ie er r f fo or r W Wi in nd do ow ws s. . F Fo or r d de et ta ai il ls s, , s se ee e t th he e I In nt te er rn ne et t E Ex xp pl lo or re er r a an nd d A Al lp ph ha a T Tr ra ans nspa par renc ency y s sideb ideba ar r i in n the the T Tr ra ans nspa par renc ency y PNG PNG C Color olor S Shif hifting ting Figure 18-11. Alpha-channel transparency allows multiple levels of transparency, as Due Due t to o incor incorr rec ect t gamma gamma handling handling, , shown in the drop shadow around the orange circle PNG. PNGs PNGs will will look look dar dark ker er in in IInt nter ernet net Explor Explorer er (all (all v versions). ersions). T The he upshot upshot of of it it is is that that it it is is difficult difficult t to o get get a a mat match ch Progressive display (interlacing) bet betw ween een a a PNG PNG and and a a back backg gr round ound color color, , e ev ven en if if the the R RGB GB values values ar are e the the PNGs can also be coded for interlaced display. When this option is selected, same same. . M Mak aking ing the the edges edges transpar transparent ent the image displays in a series of seven passes. Unlike interlaced GIFs, is is the the solution solution in in man many y situations situations.. which fill in horizontal rows, PNGs fill in both horizontally and vertically. T Ther here e is is a a g gr reat eat ar article ticle wr writt itten en b by y Interlacing adds to the file size and is usually not necessary, so to keep files as A Aar aron on Gustaf Gustafson son ( (w ww ww w.easy .easy-r -reader eader. . net/ar net/archiv chives/2006/02/18/png- es/2006/02/18/png- small as possible, turn interlacing display off. c color olor- -o oddities ddities-in-ie/ -in-ie/) ) that that identifies identifies the the pr problem oblem and and ser serv ves es as as a a g gr reat eat Gamma correction jumping- jumping-off off point point f for or fur further ther r resear esearch. ch. Gamma refers to the brightness setting of a monitor (see note). Because gamma settings vary by platform, the graphics you create may not look the way you intend for the end user. PNGs can be tagged with information regarding the gamma setting of the environment in which they were created. This can then be interpreted by the software displaying the PNG to make appropriate gamma compensations. When this is implemented on both the N N oott ee creator and end user’s side, the PNG retains its intended brightness and color Ga Gamm mma a is is d dis isc cuss usse ed d i in n C Cha hap pt te er r 3 3, , The The intensity. Unfortunately, as of this writing, this feature is poorly supported. N Na atur ture e of of W Web eb De Des si ign gn. . Embedded text PNGs also have the ability to store strings of text. This is useful for per- manently attaching text to an image, such as copyright information or a description of what is in the image. The only tools that accommodate text annotations to PNG graphics are Corel Paint Shop Pro and the GIMP (a free image editor). Ideally, the meta-information in the PNG would be acces- sible via right-clicking on the graphic in a browser, but this feature is not yet implemented in current browsers. 3 0 Part IV: Creating Web Graphicsa Meet the Formats When to use PNGs W Work ork in in RGB RGB M Mode ode PNGs pack a lot of powerful options, but competition among web graphic R Regar egardless dless of of the the final final f for ormat mat of of formats nearly always comes down to file size. y your our file file, , y you ou should should alwa always ys do do y your our For images that would typically be saved as GIFs, 8-bit PNG is a good option. image image- -editing editing w wor ork k in in R RGB GB mode mode (g (gra rayscale yscale is is fine fine f for or non- non-color color You may find that a PNG version of an image has a smaller file size than a GIF images). images). T To o check check the the color color mode mode of the same image, but that depends on how efficiently your image program of of the the image image in in P Phot hotoshop oshop, , selec select t handles PNG compression. If the PNG is smaller, use it with confidence. IImage mage ➝➝ M Mode ode and and mak make e sur sure e ther there e is is a a check checkmar mark k nex next t t to o R RGB GB C Color olor.. Although PNG does support 24-bit color images, its lossless compression JPEG JPEG and and PNG-24 PNG-24 files files compr compress ess the the scheme nearly always results in a dramatically larger file than JPEG com- R RGB GB color color image image dir direc ectly tly. . IIf f y you ou ar are e pression applied to the same image. For web purposes, JPEG is still the best sa saving ving the the file file as as a a GIF GIF or or PNG-8, PNG-8, the the choice for photographic and continuous tone images. R RGB GB image image must must be be con conv ver ert ted ed t to o index indexed ed color color mode mode, , either either manually manually The exception to the “smallest file wins” rule is if you want to take advantage or or as as par part t of of the the Sa Sav ve e f for or W Web eb or or of multiple levels of transparency. In that case, PNG is your only option and Expor Export t pr process ocess. . may be worth a slightly heftier file size. IIf f y you ou need need t to o edit edit an an existing existing GIF GIF or or PNG-8, PNG-8, y you ou should should con conv ver ert t the the The following section takes a broader look at finding the best graphic format image image t to o R RGB GB bef befor ore e doing doing an any y for the job. edits edits. . T This his enables enables the the editing editing t tool ool t to o use use colors colors fr from om the the full full R RGB GB spec spectrum trum when when adjusting adjusting the the image image. . Choosing the best format IIf f y you ou r resiz esize e the the or orig iginal inal index indexed ed color color image image, , y you ou’ll ’ll get get lousy lousy r results esults Part of the trick to making quality web graphics that maintain quality and because because the the ne new w image image is is limit limited ed download quickly is choosing the right format. Table 18-1 provides a good t to o the the colors colors fr from om the the existing existing color color starting point. table table.. IIf f y you ou ha hav ve e exper experience ience cr creating eating g graphics raphics f for or pr print, int, y you ou ma may y be be Table 18-1. Choosing the best file format accust accustomed omed t to o w wor ork king ing in in CM CMYK YK mode mode (pr (print inted ed colors colors ar are e made made up up If your image... use... because... of of C Cyan, yan, M Magenta, agenta, Y Yello ellow w, , and and blacK blacK Is graphical, with flat colors GIF or They excel at compressing flat color. ink). ink). CM CMYK YK mode mode is is ir irr rele elevant vant and and 8-bit PNG inappr inappropr opriat iate e f for or w web eb g graphics raphics.. Is a photograph or contains JPEG JPEG compression works best on graduated color images with blended color. Because it is lossy, it generally results in smaller file sizes than 24-bit PNG. Is a combination of flat and GIF or Indexed color formats are best at photographic imagery 8-bit PNG preserving and compressing flat color areas. The dithering that appears in the photographic areas as a result of reducing to a palette is usually not problematic. Requires transparency GIF or PNG Both GIF and PNG allow on/off transparency in images. Requires multiple levels of PNG PNG is the only format that supports transparency alpha-channel transparency. Requires animation GIF GIF is the only format that can contain animation frames. Chapter 1 , Web Graphics Basics 3 1a Meet the Formats Saving an image in your chosen format Virtually every up-to-date graphics program allows you to save images in GIF, JPEG, and PNG format, but some give you more options than others. If you use Photoshop, Fireworks or Corel Paint Shop Pro, be sure to take advan- tage of special web graphics features instead of doing a simple “Save As..” Start with an RGB image that is at an appropriate size for a web page (image size is discussed in the next section). Edit the image as necessary (resizing, cropping, color correction, etc.), and when you are finished, follow these instructions for saving it as GIF, JPEG, or PNG. Photoshop (versions 6 and higher, see note) Open Photoshop’s Save for Web & Devices dialog box (File ➝ Save for Web & Devices) (Figure 18-12) and select the file type from the pop-up menu. When you choose a format, the panel displays settings appropriate to that format. The Save for Web window also shows you a preview of the resulting image and its file size. You can even do side-by-side comparisons of different settings; for example, a GIF and PNG-8 version of the same image. Once you have selected the file type and made your settings, click Save and give the file a name. We’ll see the Save for Web & Devices dialog box again later in Photoshop CS3 Photoshop CS3 this chapter when we resize images Select the file type in the Select the file type in the Save for Web Save for Web & & and work with transparency. It also Devices Devices dialog box. You can change the settings dialog box. You can change the settings pops up in Chapter 19 when we and compare resulting images before you Save. and compare resulting images before you Save. discuss the various settings related to optimization. N ot e This feature was called simply “Save for Web” in Photoshop versions 6 through CS2. F Fi ig gu ur re e 1 18 8- -1 12 2. . Se Sel le ec ct ti in ng g a a f fi il le e t ty yp pe e i in n P Ph ho ot to os sh ho op p’ ’s s h ha an nd dy y S Sa av ve e f fo or r W We eb b & & D De ev vi ic ce es s d di ia al lo og g b bo ox x. . 3 2 Part IV: Creating Web Graphicsa Image Size and Resolution Fireworks (all versions) With the image open and the Preview tab selected, the file type can be select- ed from the Optimize panel (Figure 18-13). When you are finished with your settings, select Export from the File menu and give the graphic file a name. Fireworks 8 Select a file size in the Optimize panel prior to Exporting the graphic. Figure 18-13. Selecting file type in the Fireworks Optimize panel. Paint Shop Pro The GIF Optimizer, JPEG Optimizer, and PNG Optimizer are accessed from the Export option in the File menu. Each opens a multipanel dialog box with all the settings for the respective file type and a preview of a portion of the compressed image. The Colors panel of the GIF optimizer is shown in Figure 18-14. When you have made all your settings, click OK. Note that you need to choose your file type before accessing the settings, and there is no way to compare image type previews as is possible in Photoshop and Fireworks. Image Size and Resolution One thing that GIF, JPEG, and PNG images have in common is that they are all bitmapped (also called raster) images. When you zoom in on a bitmapped image, you can see that it is like a mosaic made up of many pixels (tiny, single-colored squares). These are different from vector graphics that are made up of smooth lines and filled areas, all based on mathematical for- mulas. Figure 18-15 illustrates the difference between bitmapped and vector F Figur igure e 18-14. 18-14. W Web eb optimization optimization options options in in C Cor orel el P Paint aint Shop Shop P Pr ro o. . graphics. Chapter 1 , Web Graphics Basics 3 3a Image Size and Resolution Bitmap images are made up of a grid of Vector images use mathematical variously colored pixels, like a mosaic. equations to define shapes. Figure 18-15. Bitmapped and vector graphics. Goodbye inches, hello pixels If you’ve used bitmapped images for print or the Web, you may be familiar with the term resolution, the number of pixels per inch. In the print world, image resolutions of 300 and 600 pixels per inch (ppi) are common. Dots Dots P Per er I Inch nch On the Web, however, images need to be created at much lower resolutions. B Because ecause w web eb g graphics raphics exist exist solely solely on on 72 ppi has become the standard, but in reality, the whole notion of “inches” the the scr screen, een, it it is is cor corr rec ect t t to o measur measure e and therefore “pixels per inch” becomes irrelevant in the web environment. In their their r resolutions esolutions in in pix pixels els per per inch inch the end, the only meaningful measurement of a web image is its actual pixel (ppi). (ppi). dimensions. This statement deserves a bit more explanation. When When it it comes comes t to o pr print, int, ho how we ev ver er, , de devices vices and and pr print inted ed pages pages ar are e When an image is displayed on a web page, the pixels map one-to-one with measur measured ed in in dots dots per per inch inch ( (dpi dpi), ), the display resolution of the monitor (see note). Because the monitor reso- which which descr describes ibes the the number number of of lution varies by platform and user, the image will appear larger or smaller pr print inted ed dots dots in in each each inch inch of of the the image image. . T The he dpi dpi ma may y or or ma may y not not be be depending on the configuration, as the following example demonstrates. the the same same as as the the ppi ppi f for or an an image image.. IIn n y your our tra trav vels els, , y you ou ma may y hear hear N ot e the the t ter erms ms dpi dpi and and ppi ppi used used Some modern browsers have a feature that scales large images to fit inside the browser int inter erchangeably changeably (albeit (albeit incor incorr rec ectly tly so). so). IIt t is is impor important tant t to o understand understand the the window. If this feature is turned on, the one-to-one pixel matching no longer applies. diff differ erence ence.. I have created a graphic that is 72 pixels square (Figure 18-16). Although I may have created that image at 72 pixels per inch, it’s likely that it will never measure precisely one inch when it is displayed on a monitor (particularly the higher-resolution monitors that are prevalent today). On the high-resolu- tion monitor, the pixels are smaller and the “one-inch” square graphic ends up less than three-quarter-inch square. 3 Part IV: Creating Web Graphicsa Image Size and Resolution one inch 72 ppi 72 pixels W Work orking ing in in L Lo ow w Image appears one inch R Resolution esolution by one inch on 72-ppi D Despit espite e the the fac fact t that that r resolution esolution is is monitor. ir irr rele elevant, vant, cr creating eating w web eb g graphics raphics at at one inch 72 72 ppi ppi puts puts y you ou at at a a good good star starting ting point point f for or images images with with appr appropr opriat iate e pix pixel el dimensions dimensions. . T The he dra drawback wback t to o w wor ork king ing at at a a lo low w r resolution esolution is is 100 ppi that that the the image image qualit quality y is is lo low wer er because because ther there e is is not not as as much much image image inf infor ormation mation in in a a g giv iven en space space. . T This his Image appears smaller t tends ends t to o mak make e the the image image look look mor more e on 100-ppi monitor. g grain rainy y or or pixilat pixilated ed and and, , unf unfor ortunat tunately ely, , that that is is just just the the natur nature e of of the the W Web eb. . Figure 18-16. The size of an image is dependent on the monitor resolution. On On the the upside upside, , image image edits edits that that ar are e noticeable noticeable in in high-r high-resolution esolution g graphics raphics (such (such as as r ret etouching ouching or or For this reason, it is useless to think in terms of “inches” on the Web. It’s all cloning) cloning) ar are e vir virtually tually seamless seamless at at lo low w relative. And without inches, the whole notion of “pixels per inch” is thrown r resolution. esolution. IIn n addition, addition, lo low w r resolution esolution out the window as well. The only thing we know for sure is that the graphic means means smaller smaller file file siz sizes es, , which which is is is 72 pixels across, and it will be twice as wide as a graphic that is 36 pixels alwa always ys a a concer concern n f for or media media shar shared ed o ov ver er a a net netw wor ork k.. across. After this example, it should be clear why images fresh from a digital camera are not appropriate for web pages. I commonly shoot images at 1600 × 1200 pixels with a resolution of 180 ppi. With browser windows commonly as small as 800 pixels wide, all those extra pixels are unnecessary and would cause half the image to hang outside a typical browser window. Users would have to scroll vertically and horizontally to see it. Even though some modern browsers scale the image down to fit the browser window, that doesn’t solve the problem of forcing an unnecessarily large download on users when a much smaller file will do. Resizing images The images you get from a digital camera, scanner, or stock photo company are generallly too large for web use, so you need to resize them smaller. In fact, I’d say that resizing images smaller makes up a large portion of the time I spend doing graphics production, so it’s a good basic skill to have. N N oott ee If If yo you u do don n’’t t ha hav ve e Pho Phot tosho oshop p, , yo you u ca can n In Exercise 18-1, I’ll show you an easy way to resize an image using Photoshop’s do dow wnlo nloa ad d a a f fr re ee e tri trial al v ve ers rsi io on n a at t www www. . “Save For Web & Devices” feature. With this method, the exported web a adob dobe e.c .co om/do m/dow wnlo nloa ads ds. . graphic is resized, but the original remains unaltered. Adobe Photoshop Elements has a similar feature, so you can follow along if you have either of these programs. For other programs, or if you want more control over the final image quality, see the Using Image Size sidebar following the exercise. Chapter 1 , Web Graphics Basics 3 72 pixels one inch one incha Image Size and Resolution exercise 18-1 Resizing an image smaller in Photoshop In this exercise, we’ll take a high- resolution photo and size it to fit on a web page. The source image, ninja.tif, A is available with the materials for this The Image Size dialog box (Image chapter at www.learningwebdesign. Image Size) is one way to view the com/materials/. starting dimensions of the image. You 1. Open the file ninja.tif in Photoshop. can also select the whole image and look at the Info window (Window A quick way to find the pixel Info, not shown) dimensions of the image is to open the Image Size dialog box (Image ➝ Image Size) shown in Figure 18-17 . This image is 1600 x 1600 pixels, A Select the Image Size tab in the Save which is too big for a web page. for Web & Devices dialog box to enter Close the Image Size box for now new dimensions for the exported (we were only using it to peek at our graphic. starting point). The Info window (not shown) also shows pixel dimensions when the whole image is selected. F 2. Now we’ll resize the image and save it as a JPEG in one fell swoop. Select Save for Web & Devices from the File menu. Because this image is a photograph, select JPEG from the BB Formats pop-up menu. The default High/60 compression setting is fine for this example. 3. With the format chosen, it’s time to get to the resizing. Click on the C Image Size tab in the bottom half of the settings column C. Enter the dimensions that you’d like the final JPEG to be when it is saved. I’m going to set the width to 400 pixels. When “constrain proportions” is checked, the width changes D automatically when you enter the E new height. 4. Next, select the Quality D. I usually go for Bicubic or Bicubic Sharper for the best results then click Apply E. You will see the resized image in the Optimized Image view (select the tab at the top if it isn’t already). You must click Apply to apply the 5. Click Save F, give the file a name, new dimensions. The Optimize view and select a directory in which to shows the image at its new size. save it. You can close the original image without saving, or save it to preserve the Save for Web settings. Figure 18-17. Using the Save for Web & Devices dialog box to resize an image. 3 Part IV: Creating Web Graphicsa Working with Transparency Working with Transparency Both GIF and PNG formats allow parts of an image to be transparent, allow- ing the background color or image to show through. In this section, we’ll take U Using sing I Image mage Siz Size e a closer look at transparent graphics, including tips on how to make them. T The he disadvantage disadvantage t to o the the method method sho shown wn in in Ex Exer ercise cise 18-1 18-1 is is that that y you ou The first thing to know is that there are two types of transparency. In binary lose lose contr control ol o ov ver er the the qualit quality y of of the the transparency, pixels are either entirely transparent or entirely opaque, like an image image. . IIf f y you ou ar are e an an image image qualit quality y on/off switch. Both GIF and PNG files support binary transparency. contr control ol fr freak eak (lik (like e me), me), y you ou ma may y pr pref efer er r resizing esizing the the image image using using the the In alpha (or alpha-channel) transparency, a pixel may be totally transparent, IImage mage Siz Size e dialog dialog bo box x ( (F Figur igure e 18-17 18-17 totally opaque, or up to 254 levels of opaqueness in between (a total of 256 AA). ). IIn n F Fir ire ew wor orks ks, , M Modify odify ➝➝ C Can anvas vas... ... ➝➝ IImage mage Siz Size e... ... g giv ives es y you ou a a similar similar set set opacity levels). Only PNGs support alpha transparency. The advantage of of of options options.. PNGs with alpha transparency is that they blend seamlessly with any back- Although Although y you ou can can set set the the pix pixel el ground color or pattern, as shown back in Figure 18-11. dimensions dimensions r right ight at at the the t top op, , it it is is bett better er t to o tak take e car care e of of a a f fe ew w other other In this section, you’ll become familiar with how each type of transparency settings settings first. first. works, and learn how to make transparent images using Photoshop. B Be e sur sure e that that R Resample esample IImage mage and and C Constrain onstrain P Pr ropor oportions tions ar are e check checked ed How binary transparency works at at the the bott bottom, om, selec select t Bicubic Bicubic ( (or or Bicubic Bicubic Shar Sharper) per) as as the the Qualit Quality y Remember that the pixel colors for GIFs and PNG-8s are stored in an indexed setting setting, , then then set set the the R Resolution esolution t to o 72 72 color table. Transparency is simply treated as a separate color, occupying a pix pixels/inch. els/inch. T Then hen ent enter er the the desir desired ed final final pix pixel el dimensions dimensions at at the the t top op position in the color table. Figure 18-18 shows the color table in Photoshop for of of the the bo box x and and click click OK OK. . D Double ouble- - a simple transparent GIF. The slot in the color table that is set to transparent click clicking ing on on the the mag magnifying nifying glass glass is indicated by a checker pattern. Pixels that correspond to that position will t tool ool (not (not sho shown) wn) displa displays ys the the r resiz esized ed be completely transparent when the image displays in the browser. Note that image image at at 100%. 100%. only one slot is transparent—all the other pixel colors are opaque. No Now w y you ou can can apply apply shar sharpening pening filt filters ers and and other other eff effec ects ts and and use use Sa Sav ve e F For or W Web eb t to o output output the the image image in in a a w web eb f for ormat. mat. I I find find that that r resizing esizing a a v ver ery y lar large ge image image in in a a couple couple of of st steps eps helps helps pr preser eserv ve e qualit quality y. . F First, irst, I I r resiz esize e it it t to o an an in- in- bet betw ween een dimension dimension and and shar sharpen pen it it with with a a shar sharpening pening filt filter er. . T Then hen I I r resiz esize e it it t to o its its final final dimensions dimensions and and shar sharpen pen again. again. Y You ou can can’’t t do do that that with with the the Sa Sav ve e F For or W Web eb method method.. Transparent pixels get a slot in R Remember emember that that the the IImage mage Siz Size e the indexed color table. settings settings r resiz esize e the the original original image image. . D Don on’’t t sa sav ve e it, it, or or y you ou’ll ’ll lose lose y your our high- high- qualit quality y v version ersion B Be e sur sure e t to o “Sa “Sav ve e A As s” ” in in or order der t to o k keep eep a a cop copy y of of y your our or orig iginal inal. . Figure 18-18. Transparency is treated as a color in the indexed color table. Chapter 1 , Web Graphics Basics 3a Working with Transparency How alpha transparency works RGB images, such as JPEGs and PNG-24s, store color in separate channels, one for red, one for green, and one for blue. PNG-24 files add another chan- I In nt ternet ernet Explor Explorer er nel, called the alpha channel, to store transparency information. In that chan- and and A Alpha lpha nel, each pixel may display one of 256 values, which correspond to 256 levels T Tr ranspar ansparenc ency y of transparency when the image is displayed. The black areas of the alpha Alpha Alpha transpar transparenc ency y is is r really eally cool cool, , but but channel mask are transparent, the white areas are opaque, and the grays are unf unfor ortunat tunately ely, , it it comes comes with with one one on a scale in between. I think of it as a blanket laid over the image that tells major major headache headache—it —it is is not not suppor support ted ed each pixel below it how transparent it is (Figure 18-19). in in IInt nter ernet net Explor Explorer er 6 6 and and ear earlier lier f for or W Windo indows ws. . Users Users with with those those br bro owsers wsers (and (and ther there e ar are e a a lot lot of of them) them) will will see see Blue the the PNG PNG as as entir entirely ely opaque opaque.. Green T Ther here e is is a a w wor ork kar around ound using using Red M Micr icrosof osoft t’’s s pr propr oprietar ietary y Alpha AlphaI AlphaImageL mageLoader oader filt filter er. . T The he details details of of the the pr process ocess ar are e be bey yond ond the the scope scope of of this this chapt chapter er, , but but these these r resour esources ces ar are e good good places places t to o star start t if if y you ou want want t to o ensur ensure e cr cross-br oss-bro owser wser suppor support t f for or y your our transpar transparent ent PNGs PNGs.. Star Start t with with the the AlphaI AlphaImageL mageLoader oader Original transparent image filt filter er documentation documentation on on the the MSDN MSDN (M (Micr icrosof osoft t D De ev velopers elopers Net Netw wor ork) k) sit site e Black areas in the alpha channel at at msdn.micr msdn.microsof osoft.c om/workshop/ orkshop/ correspond to transparent image areas; white areas are opaque; and grays are author/filt author/filter/r er/refer eferenc ence/filt e/filters/ ers/ variable levels of transparency in between. alphaimageloader alphaimageloader.asp .asp.. T These hese ar articles ticles intr introduce oduce var variations iations Figure 18-19. Transparency information is stored as a separate (alpha) channel in 24-bit and and alt alter ernativ native e t techniques: echniques: PNGs.  “Cr “Cross-br oss-bro owser wser V Var ariable iable Opacit Opacity y with with PNG: PNG: A A R Real eal S Solution, olution,” ” b by y M Michael ichael L Lo ovitt vitt at at w ww ww w.alistapar .alistapart. t. Making transparent GIFs and PNGs c com/ar om/articles/pngopacit ticles/pngopacity y..  “PNG “PNG B Beha ehavior vior,,” ” w webfx.eae .net/ The easiest way to make parts of an image transparent is to design them that d dh ht tm ml l/ /p pn ng gb be eh ha av vi io or r/ /p pn ng gb be eh ha av vi io or r. . way from the start and preserve the transparent areas when you create the html html.. GIF or PNG version of the image. Once again, Photoshop’s Save for Web & Devices feature or Firework’s Optimize panel are perfect tools for the job. It is possible to add transparent areas to a flattened opaque image, but it may be difficult to get a seamless blend with a background. We’ll look at the process for making portions of an existing image transparent later in this section. N N oott ee But first, follow along with the steps in Exercise 18-2 that demonstrates how to preserve transparent areas and guarantee a good match with the back- The The p pri rinc ncip iple les s a and nd s sett etti in ngs gs o ou utl tli in ne ed d i in n ground using Photoshop’s Save for Web & Devices dialog box. There are some E Ex xe er rc ci is se e 1 18 8- -2 2 a ar re e n ne ea ar rl ly y i id de en nt ti ic ca al l i in n new concepts tucked in there, so even if you don’t do the exercise, I recom- F Fi ir rew ewo or rk ks s, , s so o the the sa sam me e g gen ene er ral al i instr nstruc uc- - t ti io on ns s a ap pp pl ly y, , a al lt th ho ou ug gh h t th he e i in nt te er rf fa ac ce e i is s mend giving it a read, particularly steps 5, 6, and 7. sl sli ig ghtly htly d dif iff fe er rent ent. . 3 Part IV: Creating Web Graphics