Tài liệu HTML and Web Design Secrets P2 docx

P1: FCH
WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33
ࡗ
20
Part I: Tools, Planning, and Content
ࡗ ࡗࡗ
Figure 1-14:
Fireworks is extremely popular for bitmap production.
Figure 1-15:
Designing graphics using The Gimp, a freely distributed open-source
imaging program.
P1: FCH
WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33
ࡗ
ࡗࡗࡗ
Chapter 1: Setting up a Master Toolbox
21
note
For information on Adobe Photoshop, please visitwww.adobe.com/.
Macromedia Fireworks can be found at www.macromedia.com/. Corel
products are showcased at www.corel.com/, and JASC’s Paint Shop Pro is
available at www.jasc.com/. The Gimp for UNIX and Windows can be
found at www.gimp.org/, and The Gimp for Mac OS X is at
www.macgimp.org/.
ࡗࡗࡗ
Secret #9: Vector Image Programs
For those of you who create logos, refine type, and enjoy drawing, the two
most common drawing programs are Adobe Illustrator and Macromedia Free-
hand (shown in Figure 1-16). Vector-based images differ from bitmap graphics
in that they contain the mathematical information necessary to allow them to be
scaled without loss of quality. They are extremely useful for creating curves and

shapes. Of course, you will need to rasterize your final work by converting it to
bitmap formats, such as GIF or JPEG, if you’re going to use your illustration on
the Web, but you can achieve far more complex drawing tasks in a vector-based
program.
Figure 1-16:
Drawing geometric shapes in Macromedia Freehand.
As with bitmap programs, there are a few shareware and open source gems that
shouldn’tbe overlooked, especially for those on a limited budget, who have lighter-
weight needs for vector drawing.
P1: FCH
WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33
ࡗ
22
Part I: Tools, Planning, and Content
ࡗ ࡗࡗ
Two such bitmap programs are:
ࡗ
Mayura Draw is a shareware vector drawing program for Windows, at
$39.00 per license. Used mostly by scientists and engineers for technical
illustrations, Mayura Draw can be an invaluable and inexpensive tool in
your design toolbox (see Figure 1-17).
ࡗ
Sketch is a freely distributed open source drawing program for Linux,
with a Windows port version called “Skencil.’’
Figure 1-17:
Using Mayura Draw for vector-based design.
tip
Web designers and developers using Linux platform and open source
software for designing graphics should check out LinuxArtist.Org, at
www.linuxartist.org/2d.php.

For additional free vector drawing software resources, see http://
bourbon.usc.edu:8001/tgif/vector.html.
ࡗࡗࡗ
Secret #10: Web Animation Utilities
Outside of animation for advertising, GIF animations have somewhat fallen out
of favor for use on professional Web sites—except for those instances where very
subtle effects are desired. Of course, much of this has to do with the proliferation
of Macromedia Flash (which has also influenced Web advertising). Nevertheless,
GIF animations are sill desired in some cases, so make sure you have one on hand.
P1: FCH
WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33
ࡗ
ࡗࡗࡗ
Chapter 1: Setting up a Master Toolbox
23
As with all software and utilities, some of the available Web animation utilities are
commercial, and some are completely free. Table 1-6 provides a variety of popular
options from which to choose.
Table 1-6: Popular Web Animation Utilities
Software Platform and Usage Availability
Ulead Gif Animator Windows; very
popular with many
designers
Commercial, low-cost product
with 30-day demo, www.ulead
.com/ga/runme.htm
GIF Construction Set One of the oldest GIF
animators around for
Windows
Low-cost shareware,

www.mindworkshop.com/
alchemy/gifcon.html
GIF Builder Very popular for Mac
OS 9 and earlier
Low-cost shareware,
www.mac.org/graphics/
gifbuilder/
GIF Builder for OS X Mac OS X (will run on
Mac OS 8 and above)
Freeware,
www.macupdate.com/info
.php/id/235
GIF Merge Linux and related
platforms
/>GIFMerge/
The majority of Web designers, however, tend to use Adobe ImageReady for anima-
tions. ImageReady (shown in Figure 1-18) ships with Photoshop and is available
for Windows and Macintosh.
Figure 1-18:
Creating a GIF animation in Adobe ImageReady.
P1: FCH
WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33
ࡗ
24
Part I: Tools, Planning, and Content
ࡗ ࡗࡗ
ࡗࡗࡗ
Secret #11: Screen Capture Utilities
By far, some of the most helpful utilities I’ve ever used are those that assist with
screen capturing. Such utilities are invaluable when creating Web site portfolios,

sharing mockups with co-workers and colleagues, and so on.
While screen captures can be done with almost any imaging program, such as
Photoshop, screen capture utilities let you hone in on specific portions of the screen
and capture menus, dialogs, and toolbars with ease. This can be very helpful and
save a lot of time—instead of cropping full-screen images, you can instantly get
what you need and, in most cases, output it to numerous useful file formats.
Many excellent screen-capture utilities are available for all platforms, but the three
most reportedly beloved are as follows:
ࡗ
For Windows, SnagIt by TechSmith is an amazing utility that I find
myself using almost daily. You can find this low-cost shareware at
www.techsmith.com/products/snagit/.
ࡗ
Find low-cost shareware ScreenShot Pro, for Mac and Mac OS X at
www.code-line.com/software/screenshotpro.html. OSX is
packaged with two screen-capture utilities, one within the operating
system itself, and the other a feature called Grab.
ࡗ
For Linux, the KDE desktop environment has screen shot utilities built in
(www.kde.org/), and The Gimp, discussed in the bitmap imaging
section earlier, does a great job with screen captures.
Figure 1-19 shows me preparing to capture a screen using SnagIt.
Figure 1-19:
Working with SnagIt to create screen shots.