File Under: HTML, Multimedia

Web Graphics for Beginners

As an autistic, purebred Himalayan runt, my cat Rufo poses a triple threat of cuteness the whole world can enjoy. Sound like the everyday delusions of an average cat owner? Perhaps. But if Rufo is indeed a superstar dying to be born, then it’s my responsibility to help him, via the Internet. After all, what better use of the Web than as cat promotion?

At first, Rufo’s site was nothing more than a few paragraphs describing his unique kitty allure. Although a good start, mere words failed to convey the complete Rufo experience. For that, I needed graphics. Not just photographs – if Rufo was to be taken seriously as a cat celebrity, his Web presence had to look fun and professional. So I needed other collateral as well, like a logo, page banners, and graphic navigation.

My initial attempts were less than flattering. Pictures had blurry fur, the colors were pale and washed out, and the images took forever to download. So I taught myself how to create the kind of fast, sleek, and professional images that Rufo deserves. And now I’m going to share that hard-won knowledge with you. In the pages that follow, you’ll find tips, hints, and links to off-site resources or more advanced Webmonkey tutorials – everything an aspiring graphics designer needs to transform a texty site into a graphic sensation.

We begin at the very beginning: Getting images into the computer. For Rufo’s site, this meant importing photographs and finding usable graphics.

Contents

  1. Imports Are In
  2. Edits Big and Small
  3. Starting from Scratch
  4. Formats for Every Occasion
  5. Exporting We Will Go
  6. Images in Motion
  7. Uploading, HTML, Plus a Peek at Tomorrow

Imports Are In

There are two ways to approach the creation of Web graphics:You can make something out of nothing, or you can import an image from an outside source. We’ll create a from-scratch Rufo Web graphic later, but first, let’s take at the different ways you can import an existing image.

For photographs, most local film developers offer digital processing, which transforms your old-school pics into digital images stored on a disc or CD. However, if you plan to take and use a lot of photographs for your site, you need to learn the basics of digital photography. Digital cameras import images directly into your computer, bypassing the need to print and scan the photo. Plus, most digital cameras offer a preview feature, which comes in handy whenever Rufo squirms out of the picture at the last second. If Rufo doesn’t like what he sees on the preview screen, the offending image can be zapped with the push of a button.

For digitizing those cheap and cool analog photos or illustrations, you need to learn how to use a scanner. High-end scanners are great for print projects, but for scanning Web images, most inexpensive models do just fine.

Web-ready clip art is another possible source for images. Usually the collections are so extensive, you can find something for almost any situation. Several online resources offer free or reasonably priced clip art:Creativepro, Mediabuilder, and EyeWire, and Webmonkey-sister-sites Tripod and Angelfire offer their users an extensive Image Library. In addition, book and CD collections are relatively cheap and surprisingly handy.

Another great place to find graphics for the Web is the Web itself. Saving pictures from a website is as easy as right clicking on the image (ALT + click for Macs) and selecting Save, or simply SnagIt. It’s important to remember, however, that most online content is protected by copyright. To use an image from the Web, you must either first get permission from the original owner or edit the image beyond all recognition.

Edits Big and Small

After importing an image into your computer, the next step is to open the file with one of the many graphic editing software programs available to you. Adobe’s Photoshop has been the professional’s choice for years, but there are cheaper alternatives. Jasc’s Paint Shop Pro and the open source GIMP offer many of the same features and capabilities of their more expensive counterparts. And the GIFworks tool offerd by both Tripod and Angelfire is always good for some down-and-dirty image editing.

Image editing can encompass a wide range of different processes, and in the following example I’ll take you through some of the most common and useful graphic edits. For my example, I used picture of Rufo (of course) to illustrate image resizing, color correction, and cutouts. I did everything with Photoshop, but whatever image editing software you choose to work with should let you do something similar using comparable commands.


rufoedit1.jpg

Resizing

Chances are, your imported image isn’t the exact size it needs to be for your site. To resize an image, choose Image Size under the Image menu and convert the increment setting to pixel for exact resizing. Also, since monitors only display 72 dpi (Dots Per Inch), any finer resolution is lost on your computer views, so make sure the Resolution is set to 72. Once the image has been resized, you may notice a loss of resolution quality. Unsharp Mask (under Filter > Sharpen) is an invaluable tool for precisely sharpening an image into focus.
rufoedit2.jpg

Color Correction

Another thing people often like to do with imported Web graphics is correct the color. Simple tweaking of the Contrast and/or Saturation (under Image > Adjust) can enrich even the most washed out photos. For more complex corrections, the Color Levels feature is helpful, offering both subtle and extreme color changes.

rufoedit3.jpg

Cropping

The easiest way to remove a portion of an image is with the Rectangular Marquee Tool. Simply click and drag the “marching ant” trail to surround what you want to keep of the image (to make your selection perfectly square, hold down the shift key as you work), go to Select > Inverse, then hit Delete. If your cut is more complex, begin by making a general selection either with the Marquee/Lasso tools or by color range. From there, the selection can be refined in the Quick Mask mode. Quick Mask mode enables a selection to be finely edited with the Pen and Eraser tools. Such flexibility is important in making good selections, which in turn makes for good cutouts.

That should be enough to get you started, but I encourage you to play around with the many other tools that come with image editors to see what other startling effects you can come up with. That said, editing imported images is only part of the Web graphics game. Occasionally, you have to start with nothing and create an image from scratch.

Starting from Scratch

When only original art will do – the creation of a Rufo logo, for instance – building Web graphics from the ground up is sometimes necessary. Whether you have a clear plan of what you want to create or no idea at all, there are a few things to take into account. In the step-by-step example that follows, I used Macromedia’s Fireworks program, but you could also use a product like Adobe’s Illustrator.

Getting Started

Under File, select New. A New Document window will pop up with settings for canvas size and pixel resolution. As I said before, since monitors display at 72 pixels per inch, Web graphics are limited to that resolution.

Type Casting

Creating a graphic usually begins by adding shapes and/or type to the canvas. For unique shapes, start with something simple like a circle or square, then experiment by reshaping it with the Pen tool. Combining shapes via Union, Intersect, and Punch (under Modify) can sometimes produce pleasing results.

As a general rule, you should use HTML to create text on your site whenever possible – type should only be used in a graphic when absolutely, aesthetically necessary (logos, banners, etc.). This is because the file size of graphic type slows the overall page download time, plus extensive use of graphic type can alienate people with disabilities or old-schoolers running a text-only browser like Lynx (test your site with Bobby to see how it measures up). Alt text (a description included in an image tag, such as <img src=”archiveufo.jpg” alt=”The Precious Little Sweety Meow”>) can help text based Web surfers better understand graphic content and navigation.

If you choose to use type in an image, anti-aliasing may become an issue. Anti-aliasing is an effect that counters the jagged edge of rounded graphics by blending the pixels along the graphic’s edge with the background color. This blending creates an illusion of smoothness and is usually preferred in most cases. However, the added colors do increase file size and sometimes anti-aliasing can blur small type.

Finally, a diverse font collection is paramount, although it’s important to use them sparingly. There are several online resources that offer free or cheap fonts.

rufocreate1.gif



Browser-safe Colors

The inconsistencies between how different browsers and operating systems display colors is a nightmarish mess. To make sure images look the same no matter what a viewer uses to look at them, the limited yet relatively Web safe palette of 216 colors was born. Select the “Web 216 palette” from the list of swatches and choose your colors from amongst those provided. For the ultimate in Web color safety, try the really safe palette.

rufocreate2.gif

Try, Try, Again

Once you have a basic design set, the real fun can start. Experiment with different enhancing features like fills, strokes and effects. And there’s all sorts of fun to be had with Photoshop filters – the lighting effects are especially nice.

rufocreate3.gif

The key is to try an endless combination of shapes and fonts while remaining mindful of a few important factors, like the limited color palette. For additional support and ideas, peruse some of the various online design resources – AIGA is a great place to start.

With your from-scratch and edited graphics now complete, your now ready to place them on the Web. But before you can export anything, you have to first decide on which Web file format best suits your image. For this, you’ll need a basic understanding of the nature of computer graphics and the features that distinguish them.

Formats for Every Occasion

Whether they’re Rufo-related or not, computer graphics boil down to two basic types:bitmaps and vectors.

Bitmap (or raster) graphics are stored as a series of tiny dots called pixels. Each pixel is assigned a color, and when theyre viewed all together, they form the picture. Bitmap graphics can be edited by erasing or changing the color of individual pixels. There are many different bitmap file formats:TIFF for print; Photoshop’s PSD and BMP; and finally GIF, JPG, and PNG for the Web.

Unlike bitmaps, vector graphics are not based on pixel patterns, but instead use mathematical formulas consisting of lines and curves that make shapes. Vector graphics are ideal for illustrations, line art, and type. However, with the exception of Adobe’ Flash and Microsoft’s Silverlight formats, most browsers do not support vector graphics. As a result, vectors have to be converted to bitmap ( rasterized) before being displayed on the web. Some file formats include: EPS; Illustrators’ AI and WMF; and PICT for the Mac.

The two primary file formats for Web graphics are GIF and JPEG, although support for PNG is growing. Both GIF and JPEG formats use different methods of compression and have respective strengths and weaknesses.

The Gift of GIF

GIF (Graphic Interchange Format) is the most common Web graphic file format. GIF compression is 8-bit and has a maximum of 256 colors. As a general rule, GIFs are better suited for graphics with areas of solid or flat color such as illustrations and logos. Other advantages to the GIF format is that it lets you create transparencies, interlacing, and animations.

A transparent GIF allows one color to be set as transparent, usually a background color. All Web graphics are square or rectangular and transparencies are a way to create the illusion of irregularly shaped images. Interlaced images display a rough version of the entire image quickly and then gradually fill in the details. This affords the viewers a sense of the image before it fully downloads, a godsend to those with low bandwidths. Animated GIFs are files that contain multiple images set to display like a slide show. They work on all major browsers and require no plug-ins.

The JPEG/JPG Option

The JPEG format (Joint Photographic Experts Group) was especially designed for images of photographic quality. JPEG compression is 24-bit, which means files can contain up to 16.7 million colors. As a result, JPEGs are ideal for photographs, drawings, and any image with complex or subtle color gradations. Unlike GIFs, the standard JPEG file is not interlaced, a problem addressed by the Progressive JPEG. However, some older browsers do not support progressive JPEGs.

PNG Pong

PNG (Portable Network Graphic) is largely considered the format of the future. PNG compression can be 8-bit, 24-bit, or 32-bit, making it the ideal format for almost any kind of graphic. However, some older browsers (like IE 6) do not support the format entirely, and some newer versions still have sporadic problems. Despite some well-founded skepticism, the future still looks somewhat bright for the license free PNG.

Armed with this basic overview of graphic file formats, we are now ready to export our images for the Web.

Exporting We Will Go

Now that your image has been edited to perfection, it’s time to prepare it for online viewing. Export an image largely involves optimization techniques, GIF transparencies, and image slicing.

Optimizing a Web graphic file can be tricky. There’s a fine line between reducing file size for faster download speeds and maintaining the integrity of the image. Most of the major graphic programs like ImageReady offer a file optimizing toolbar with preview capabilities. From this toolbar, select a file format. Depending on the type of image, the format will usually be either a GIF or a JPEG.

For GIFs, experiment with the different color palettes (Adaptive, Web 216, Exact, etc.) to find the best one for your particular image. After choosing a palette, the next step is to reduce the amount of colors as much as the image will allow. Once the palette has been reduced, you may wish to experiment with the level of dithering. Dithering is a process where unsupported or eliminated colors are simulated by combining different colors from the existing palette. The result can sometimes be grainy or noisy, depending on the type of image. For extensive dithering, the adaptive palette usually produces the best results.

When exporting transparent GIFs, after optimizing, select the transparent color (usually the background color). This will sometimes produce an unseemly edge or halo around your image. Setting the matte color to match the background can help counter this effect by blending the anti-aliased pixels into the background color.

Exporting JPEGs is even easier. The amount of compression is based on a scale from 1 to 100. The lower the number, the more compressed the file and the more loss of quality. The compression requirements for each JPEG image are different, but most can get away with a level between 30 and 70.

Large images that appear on several Web pages and only change slightly on each page can often be sliced into pieces. By slicing an image, the consistent pieces are carried over to the next page in the browser’s cache. Only the smaller, swapped portion is downloaded, thus greatly improving the overall download speed of each page. Image slicing is also sometimes necessary to accommodate complex HTML designs.

You now have the know-how to import, create, edit, and export impeccable Web graphics. However, static imagery isn’t always enough. In these instances, graphic rollovers and animated GIFs can help bring a Web page to life.

Images in Motion

When used effectively, simple mouse rollovers and animated GIFs add interactive excitement to any site, and they’re easy to make.

All Over the Rollover

A rollover is an image that changes with another image when a cursor moves over it. In most cases, this change is activated by a simple JavaScript, which most graphic programs create as a part of exporting rollovers. Since rollovers are usually used to enhance navigation, our example will be an “Email Rufo” link. I used Fireworks to create this, but you can do it by hand if you’re willing to learn a little JavaScript.

ruforollover1.gif

Start by creating or importing the first image and draw a slice or hotspot around it. With the slice or hotspot selected, open the Object window and name the image. The program will automatically generate the name of the second frame. Then fill out the ALT text and assign the URL you’d like the image to link to or, in this case, assign a mailto.

Next, open the Frames window and add a new frame or duplicate the first one.

ruforollover2.gif Create or import the second image within the second frame. Once the second image is roughly in place, “onion skinning” (a handy feature that lessens the opacity of each frame, allowing you to see and compare both at once) helps with final adjustments.

When both frames are ready to go, select the slice or hotspot and then open the Behaviors window. From the menu, select Simple Rollover. This will generate the JavaScript code necessary for the rollover action. Also from this menu, you can set the text for the browser’s status bar.


Export the image as usual, only this time save the HTML as well. This contains the JavaScript code and can be integrated into a larger page design with programs like Dreamweaver or cut and pasted into any HTML text editor.

Your simple rollover is now complete. They can get more complicated, but the basic principles stay the same.

Animated GIFs

Animated GIFs are similar to rollovers inasmuch as they are images with multiple frames. However, animated GIFs aren’t usually triggered by a cursor, and they’re capable of rotating through many more frames. Animated GIFs enjoy all the benefits of a regular GIF and are supported by the major browser without additional plug-ins. There are many reasonably priced programs like GIF Constructor Set for the PC and GIFBuilder for the Mac that can [/webmonkey/99/18/index1a.html produce animated GIFs] and are easy to use. For this example, I used Fireworks again to create a four-frame, animated GIF of Rufo’s archenemy, Dogbot.

Step 1) Create or import an image into two or more frames.

Step 2) Adjust and compare each image with onion skinning.

Step 3) Fireworks sets the default frame rate at 20/100 per second, but this can be adjusted for each selected frame in the Frames window, under Properties. Also, determine how many times the animation cycles with the Looping icon at the bottom of the Frames window.

Step 4) Optimize the image and then export as an Animated GIF.


dogbot1.gif

Create

dogbot2.gif

Adjust

dogbot3.gif

Set Frame Rate

dogbot.gif

Export Animation


It’s that simple. Animated GIFs can really draw attention to a page, but they can also be very distracting. It’s usually wise to use them only when the design or content requires it.

Now all that’s left to do is upload those GIFs and JPGs to your site.

Uploading, HTML, Plus a Peek at Tomorrow

Once you have your images saved in the proper formats, all you have to do is upload them to your site for all the world to see. And all you need to do that is FTP (File Transfer Protocol) software like the free and open-source FlieZilla. Some users prefer something with a cleaner interface, like CuteFTP (or Fetch or Transmit for Mac).

Once your image is on your server, all that’s left to do is include an img tag in your HTML file, and that’s it! Finally your site has got the picture. Congratulations!

But now that you’ve managed to give your site the right image, how to make sure it stays au courant with all the latest image technology? With that in mind, let’s finish this overview with a list of a few up-and-coming image formats that you might want to keep your eye on.

Imagining the Web Images of Tomorrow

The future of Web graphics is both exciting and frustrating as browsers slowly continue to develop support for alternate file formats.

At the forefront is the PNG, which despite its relatively long history and glaring advantages is only now becoming supported by all the current browsers. Still, web graphic enthusiasts look forward to the day when PNGs completely replace GIFs altogether. More advanced formats like the MNG are still in development and may never enjoy widespread support.

As for vector graphics, Flash’s formats continue to lead the way. However, a vector standard built around XML called SVG (Scalable Vector Graphic) is currently being considered by the W3C. This has prompted graphic giant Adobe to support and develop the format.

Also on the horizon is the new language called Canvas, which promises even more vector display and animation options. By supporting both simple and complex graphics, Canvas may soon even rival Flash.

In the meantime, the workhorse GIF and the adequate JPEG will have to suffice. By recognizing the strengths and weaknesses of each format, it’s possible to produce graphics worthy of a pet site.

As for Rufo’s future, his campaign to become America’s favorite cat continues to gain momentum, thanks in part to well-crafted Web graphics. At this rate, it won’t be long before he purrs his way into the hearts of people just like you.