by Eric Ladd
Some Web site administrators have a dedicated graphic artist or team of artists working with them. For these lucky folks, creating a new graphic or tweaking an existing one is usually a matter of a quick e-mail or telephone call to request the work.
Other site administrators have to do some or all of the graphics work themselves. This chapter is written with this type of administrator in mind. It covers the basics of five very useful graphics programs and several utility programs that you can use to convert graphics between graphics file formats. You may find, once you get accustomed to one of these programs, that doing your own graphics work is quite rewarding!
Microsoft Windows users have a basic graphics program, Microsoft Paint, at their disposal. Paint's main window is shown in Figure 22.1.
Figure 22.1 : Microsoft Paint is a basic graphics program that comes bundled with Windows.
Paint's tool palette lets you select one of many tools to create
and color graphical items and text. The lower four tools are used
to create rectangles with either square or rounded corners, polygons,
and ellipses. You can color the regions you create with the Pencil,
Brush, Airbrush, or Fill tools.
| TIP |
To create circles in Paint, use the Ellipse tool while holding down the Shift key. |
The Text tool enables you to create pieces of text in various sizes and fonts. Be sure to turn on the Text Toolbar under the View menu when placing text, as this will make changing text attributes easy (see Figure 22.2).
Figure 22.2 : Paint's text toolbar lets you set the typeface, size, and formatting effects of text.
The rest of Paint's tools are equally handy. If you just need a simple line or curve, the Line and Curve tools (found just above the Rectangle and Polygon tools, respectively) provide an easy way to produce one. The Magnify tool increases the magnification of the image so you can do detailed work on small parts of it. The Erase tool can be used to erase anything you've drawn by moving the tool over the image and holding down the left mouse button.
Located at the bottom left of the Paint window is the color palette. At program start-up, the palette contains the same colors as the default Windows palette. If you load in an image, the palette will change to the set of colors used to render the image. Left-clicking a color in the color palette sets the foreground color to that color. Right-clicking a color does the same thing for the background. The default foreground/background combination is black on white.
Most of Paint's menu options are fairly standard or self-explanatory. The Image menu gives you options to flip, rotate, stretch, or skew your image, and to modify its size and colors.
One useful feature found in Paint (and most other graphics programs) is a readout of the x and y coordinates of the pointer (cursor) as you move it over the graphic (see Figure 22.3). This information is valuable when preparing image maps without an image mapping software tool because you need coordinates from the image to define the linked regions on it.
For all of its features, Paint has one major drawback in the context
of creating Web graphics: It can't save images in the GIF or JPEG
formats. If you want to use a Paint graphic on the Web, you need
to convert it from a Windows bitmap (.Bmp) to a GIF or a JPEG
using a format converter or a different graphics program. You
do have some flexibility in the color depth of the bitmap file,
however. You can choose from 4-bit (16 colors), 8-bit (256 colors),
and 24-bit (over 16 million colors) bitmaps.
| NOTE |
Microsoft Internet Explorer 3 does support the display of inline .Bmp files, but it is the only major browser to do so. Using the .Bmp format for your graphics will force the rest of your audience to configure a helper application to be able to view them. |
| TIP |
To make a .Bmp file of your Windows 95 wallpaper, choose File, Set As Wallpaper (Tiled) or File Set As Wallpaper (Centered). |
Paint is also limited in its ability to manipulate an existing image. Your only options are to flip the image horizontally or vertically, to rotate it , to skew it a specified number of degrees, to stretch it horizontally or vertically, and to invert its colors. As you'll see when you read about other graphics programs, there are many other types of manipulations you can perform on an image. These more advanced options include:
These manipulations are useful in the context of Web graphics because they enable you to create nice effects, like drop shadows, or to make an image file smaller so that it can transfer faster. If you want to do these advanced types of operations on an image, you have to use one of the other programs discussed in this chapter. However, if you just need access to a decent graphics creation program and can convert to GIF or JPEG later, Paint could be exactly what you need.
LView Pro is a great little shareware program you can use to edit
existing graphics or convert them to GIF or JPEG format. It offers
most of the same image manipulation features-such as flip and
rotate-that Paint does, plus several other options that give you
very fine control over image appearance.
| NOTE |
The information on LView Pro presented here is based on the evaluation copy of version 1.D2. You can download the latest version of LView Pro by pointing your browser to http://www.lview.com/. A license costs $30.00 plus $5.00 for shipping and handling. |
Figure 22.4 shows the LView Pro window along with its extensive tool palette. Almost every tool in the palette corresponds directly to one of LView Pro's menu options.
When you save an image, you can use LView Pro as a format converter and choose a format different from the original. LView Pro enables you to convert between the following file types:
The only LView Pro tool for creating anything is the Add Text tool. It stands to reason that you'll probably have to use a different program to create your graphics. But, what LView Pro lacks in ability to create, it makes up for with its ability to make very particular changes to an image. These program features are found under the Edit and Retouch menus.
LView Pro's Edit menu provides options for many of the basic manipulations that Paint can perform, including horizontal and vertical flips, and rotations by 90 degrees to the right or left. The Add Text option, discussed above, is also found under the Edit menu.
The Resize and Redimension options can create some confusion for the user who is unfamiliar with them. Resize changes the dimensions of an image, with the option to retain the image's aspect ratio (the ratio of the width and height). When you Resize, you can choose from a standard set of sizes or you can enter your own size. Redimension only lets you choose from the standard set of sizes and doesn't permit you to keep the same aspect ratio.
The Capture option under the Edit menu does a screen capture of either the Desktop, the Window, or the Client Area. When you invoke one of the screen capture options, LView Pro will minimize itself and capture the region that you requested on screen.
The options under LView Pro's Retouch menu really expand the program beyond a simple graphics manipulator. From the Retouch menu, you can perform the following advanced actions:
The Properties dialog box (choose File, Properties), mentioned above, lets you do much more than set up retouch instructions. There are eleven different tabs on the panel that enable you to configure LView Pro to run according to your own image editing preferences.
Two of the tabs deserve special attention because of their relevance to creating Web graphics. The GIF tab, shown in Figure 22.7, has two checkboxes which can be used to instruct LView Pro to save a GIF file as either interlaced or transparent.
Figure 22.7 : LView Pro can make interlaced and transparent GIFs if you tell it to do so.
The other noteworthy tab is the JPEG tab, shown in Normal mode in Figure 22.8. From this tab, you can choose compression and decompression options, including progressive decompression for making a progressive JPEG.
Figure 22.8 : LView Pro can also make a progressive JPEG once you acti-vate progressive compression.
| TIP |
Remember, the higher your compression, the lower your image quality. Experiment to find the right degree of compression so that your file is as small as possible, without sacrificing viewability. |
Another good shareware program for graphics work is Paint Shop
Pro from JASC, Inc. Paint Shop Pro handles many types of image
storage formats, enables you to do the most common image manipulations,
and even comes with a screen capture facility.
| NOTE |
The following information on Paint Shop Pro is based on the Shareware 3.11 version of the program. You can download this version from ftp://ftp.the.net/mirrors/ftp.winsite.com/pc/win95/desktop/psp311.zip. A license lists for $69.00 plus $5.00 for shipping and handling. You may be able to find a lower price from your local software reseller. |
Figure 22.9 shows an image loaded into Paint Shop Pro, along with the many available tool panels that give you single-click access to Paint Shop Pro's functions. The Zoom panel lets you zoom in to magnifications as high as 16:1, and out to magnifications as low as 1:16. Tools located on the Select panel allow you to sample colors, move the image around in the window, define a custom area of the image to clone or resize, and change the foreground and background colors.
The Paint panel is a welcome addition that was not available in
earlier versions of Paint Shop Pro. It supports 22 different tools
that you can use to make your own graphics. These tools enable
you to: create brush, pen, pencil, marker, and chalk effects;
draw lines, rectangles, and circles; fill a closed region with
color; add text; sharpen or soften part of an image. The Histogram
window displays a graphic representation of the luminance of all
colors in the image, measured with respect to the brightest color.
| TIP |
You can toggle any of the tool panels on or off by using the options found under the View menu. |
Paint Shop Pro's versatility enables you to open images stored in 25 raster formats (pixel-based), including GIF and JPEG, and 9 meta/vector formats (image components stored as geometric shapes that combine to produce the entire image), including CorelDRAW!, Micrografx, and Ventura. However, it can only save in one of the raster formats. Nevertheless, Paint Shop Pro is still handy for converting to pixel-based formats. The Batch Conversion option under the File menu lets you select any number of files to convert to a new storage format (see Figure 22.10).
TWAIN refers to a set of industry standards that allow graphics
programs to work with image acquisition hardware like scanners.
If you have a TWAIN-compliant scanner attached to your computer,
you can use the File, Ac _quire option to scan in a new image.
The Select Source option, also under the File menu, lets you choose
which device you want to use for the acqui-sition.
The Image menu includes the options used to do many of the standard manipulations like flipping the image upside down, creating a mirror image of an image, and rotating the images. The Image, Resam _ple option is used to change the size of an image, without the jagged edges caused by standard resizing. You'll also find several effect filters under the Image menu that let you add or remove noise, enhance darker or lighter colors, and blur, sharpen, or soften the image. You can even define effect filters of your own.
The Colors menu is host to many of the advanced image manipulations you read about in the LView Pro section, including: adjustment of brightness, gamma correction, and RGB values, and conversion to grayscale or photographic negative versions of an image. You can also load, modify and save color palettes from the Colors menu. The Increase and Decrease Color Depth options allow you to change the number of colors being used to render the image.
Paint Shop Pro adds some color editing functionality that LView Pro doesn't have. The Highlight/Midtone/Shadow option under the Adjust pop-up list lets you skew an image's contrast to emphasize highlights, shadows, or mid-range colors. The posterizing effect (choose Colors, Posterize) makes the image look more like a poster by reducing the number of bits used per RGB color channel. You can also use the Colors, Solarize option to invert colors that are above a luminance level specified by you.
One very useful feature of Paint Shop Pro is its screen and window capture facility. Options under the Capture menu are used to capture the whole screen, a single window on the screen, the client area inside a window, or a user-defined area. You can also choose whether the mouse pointer should be included in the capture and which hotkey will activate the capture.
When it comes to saving an image as a GIF or JPEG, Paint Shop Pro can handle the basic format, but not many of the associated effects. Paint Shop Pro can save GIFs in both the 87a and 89a formats and as interlaced or non-interlaced.
Paint Shop Pro is a very capable image editing program. You can also purchase it bundled with Kai's Power Tools SE for added functionality. To order this combination package, contact JASC sales at 1-800-622-2793. For more information about Kai's Power Tools, consult http://www.metatools.com/. To learn more about Paint Shop Pro, direct your browser to http://www.jasc.com/.
Micrografx Picture Publisher 6.0 is an image creation and editing program included in Micrografx's ABC Graphics Suite. The Picture Publisher's main window is shown in Figure 22.11.
Completely describing all of Picture Publisher's many features would fill several chapters, therefore, the discussion here is limited to those features related to creating Web graphics. In addition to image painting capabilities that exceed those of Microsoft Paint and editing capabilities that, at least, match those of LView Pro, Picture Publisher supports the creation of Web graphics with features like
The other programs that come bundled with Picture Publisher 6.0 add value to the entire ABC Graphics package. ABC FlowCharter makes it easy to create diagrams and charts; Micrografx Designer is a useful graphics illustrator program; and ABC Media Manager puts over 30,000 clip art images, photos, and diagramming symbols at your fingertips.
For all you get, you'd probably expect that the Micrografx ABC
Graphics Suite isn't shareware-and you'd be correct. However,
a license for the entire package costs substantially less than
what other stand-alone graphics programs cost. Micrografx's Web
site lists the street value of the ABC Graphics Suite at $299.95.
| ON THE WEB |
http://www.micrografx.com/ See this site to learn more about the complete Micrografx product line. |
Adobe covers the high-end of graphics creation and editing with
two of its software products: Adobe Illustrator for composing
your images, and Adobe Photoshop for polishing and making them
Web-ready. This section introduces you to the capabilities of
both programs.
| NOTE |
Both Illustrator and Photoshop are such full-featured programs that it would be impossible to describe each of them in detail. For more information on these important graphics tools, consult Adobe's Web site at http://www.adobe.com/. |
Digital media graphic artists frequently use Adobe Illustrator to "draw" their graphics right on their computer screens. Illustrator enables them to create images with text, shapes, and colors stored together in a single file.
Getting Started You can load two different type of files into Illustrator. The first is an artwork file, which contains the graphic itself. The second is a template file, which you trace over to create content for an artwork file. Templates are nothing more than black and white bitmapped images that can be turned on or off as needed, but can never be altered.
As you can see in Figure 22.12 (an artwork file loaded into Illustrator), Illustrator supplies you with an extensive toolbar down the left side of the window and several menus across the top. The toolbar includes tools for selecting and dragging page elements, zooming in and out, adding text, doing freehand sketching, drawing rectangles and ovals, scaling, rotating, reflecting, shearing, and blending.
Figure 22.12 : Adobe Illustrator is a digital designer's sketch pad for creating Web graphics.
In addition to starting with a blank slate, you can use your scanner
to scan an image to act as a template, or you can place an existing
file. Placed files need to be in the .BMP, .PCX, .TIFF, or Encapsulated
PostScript (.EPS) formats.
| CAUTION |
When placing a .Bmp, .Pcx, or .Tiff file, a corresponding .Eps file is created. These files, while temporary, are quite large and can occupy a lot of disk space. |
Illustrator can also import graphics files in nine different formats including:
Illustrator can also import text files in plain-text (.Txt) and rich text (.Rtf) formats.
Drawing and Painting When working with Illustrator, you will spend most of your time either drawing or painting. Drawing refers to the creation of paths on the screen. Illustrator gives you three tools to help you draw:
Painting refers to either coloring the path or, in the case of a closed path, filling the inside of the path with color. You can paint using Illustrator's Paint menu. The main option under the Paint menu is Paint Style. Choosing this option reveals the dialog box shown in Figure 22.13. From this dialog box, you can paint using fill or strokes. You can fill a region or make strokes with a choice of black, white, a process color, or a custom color.
| NOTE |
Process colors in Illustrator are defined in terms of contributions from cyan, magenta, and yellow. Custom colors are special process colors that are stored for subsequent easy reference (choose Paint, Custom Color). |
Text and Graphs Illustrator provides strong support for building text elements into your artwork. The Text tool (labeled with a T) on the toolbar is used to place the text initially. Just select the tool, click the point in the artwork where you want to add text, and type in what you want.
Illustrator really shines when you want to modify the attributes of text you've typed in. The Type menu provides support for changing typefaces, size, leading, word and letter spacing, kerning, and text wrapping.
You can also create graphs easily in Illustrator, thanks to options under the Graph menu. By choosing Graph, Graph Style, you can see the different types of graphs available (see Figure 22.14). Other options under the Graph menu allow you to specify graph data and alter components of graph design.
Saving and Exporting When saving Illustrator
artwork, you have to choose between .AI (artwork) or .Eps file.
Illustrator can also export your artwork into one of ten other
formats. These include the eight formats it can import, plus the
.Bmp and .Pcx formats.
| TIP |
When exporting your work, create a profile for the exported file. A profile stores file-saving parameters that optimize how the artwork will look when opened with another program. |
Adobe promotes Photoshop as the "camera for your mind," but it's really much more. You can use Photoshop to create your own original artwork, scan in an image, or make edits to an existing image. Photoshop can read in files stored in over a dozen formats and save them in just as many formats, including GIF and JPEG. To learn more about what kinds of plug-ins are available for Photoshop, you can check out
Making Your Own Artwork Photoshop supports you in graphics creation with an extensive toolbar, located on the left side of the window (see Figure 22.15). You can choose tools for placing text, filling regions, drawing lines, airbrushing, painting, freehand drawing, smudging, blurring, and lightening.
| TIP |
Many toolbar tools have special options available in the dialog box at the bottom left of the Photoshop window. |
Layers and Channels One of Photoshop's nicest features is image layers-different levels of the image that you can overlay to produce the entire image. Figure 22.16 shows an image that uses layers. The sun is on a separate layer from the checkered background, but when the two are superimposed, they produce the desired image.
A graphic element in a given layer can be painted with RGB color and Photoshop will provide access to each component color through color channels. Figure 22.17 shows the channels for the sun layer from the graphic in Figure 22.16. The sun is painted yellow, which is formed by a combination of green and blue. Notice in Figure 22.17 that there is no contribution from the red channel-only from the green and blue channels.
Figure 22.17 : Color channels split a color into its individual red, green, and blue components.
Web Graphics Effects Photoshop can help you
apply a number of desirable effects to Web graphics. One important
one is anti-aliasing-a process that softens the jagged
edges that often occur at a boundary between two different colors.
Anti-aliasing an edge is fairly easy to do. You just select the
item with the edge to be anti-aliased using the Lasso (freehand
region selection) tool, and then check the Anti-Aliased box on
the Options tab in the dialog box at the bottom left of the window.
| NOTE |
Anti-aliasing is available when using the magic wand, fill, and line tools as well. |
Embossing is an effect that makes an image look "raised," just as lettering on an engraved invitation is raised. Photoshop has an embossing filter that is easy to apply to an image. You select the part of the image to emboss, then choose Filter, Stylize, and then select the Emboss option from the pop-up list that appears. An image and its embossed equivalent are shown in Figure 22.18.
Figure 22.18 : Embossing "raises up" parts of an image and gives your pages the illusion of depth.
Photoshop also supports saving files in GIF, interlaced GIF, transparent GIF, JPEG, and progressive JPEG formats, although plug-in programs are required to accomplish this. Two of the most popular plug-ins are PhotoGIF and ProJPEG from BoxTop Software, Inc. You can download the latest versions from BoxTop's Web site at http://www.boxtopsoft.com/.
So Much More! Trite as it may sound, Photoshop is much more than what has been noted here. Some of the program's other handy features include:
Photoshop is a powerful image creation and modification tool that
makes a worthy addition to your software library. For many folks,
the limiting factor is often price since Photoshop can cost between
$500 and $1,000 per license, depending on which platform you're
running it on. Students can obtain a "light" version
of Photoshop at a substantial discount. If you're running a highly
graphical Web site and you can afford Photoshop, you should seriously
consider purchasing it as your graphics tool of choice.
| NOTE |
For a fuller treatment of Photoshop and its many features, consult Que's Special Edition Using Photoshop 3 for Macintosh. The Windows version of Photoshop 3 has the same functionality, although the interface may be different in places. |
If you just need to convert a file from one graphics storage format to another, there are a number of programs you can use to do so. You've already read about a few of them in this chapter. DeBabelizer is a top-notch conversion program that you can check out at http://www.equilibrium.com/. The "lite" version of DeBabelizer is available for $129.00. LView Pro, Paint Shop Pro, and Photoshop are able to read graphics in a number of different formats and save them as GIFs or JPEGs. Paint Shop Pro has a batch conversion utility that you can use to set up the conversion of a large number of files.
Of course, the programs discussed in this chapter aren't the only graphics utilities in the world. Indeed, there are many more available, depending on which computing platform you use. To explore what else is available to you, check out Brian Stark's Graphics Utilities Site at http://www.public.iastate.edu/~stark/gutil_sv.html, where you can see lists of programs available for different platforms and the file formats they can handle. This should give you a good idea of the programs that can do the conversions you need. The site also includes download links to the different programs, so downloading them is just a matter of point-and-click.