| Web
Graphics Formats |
| Graphics continue to play a critical
role in the rapid adoption of the Web. Certain graphic formats
are more widely understood on the Internet than others, and
certain formats are more suited to one type of graphical data
than another. So WBT and CBT Course Developers should make an
informed choice about what graphics format to use. |
| · PNG (Portable
Network Graphics) |
 |
| · JPEG or JPG
(Joint Photographic Experts Group) |
| · GIF (Graphics
Interchange Format) |
| · SVG (Scalable
Vector Graphics) |
|
Most course development team
guidelines specify the preferred graphics format for online
courses, although this could be somewhat flexible depending
upon specific uses or applications. |
| |
| PNG
is an extensible file format for the lossless, portable, well-compressed
storage of bitmap images. The PNG graphic format was created
specifically for the Internet; this graphic format was designed
to replace the older and simpler GIF format and, to some extent,
the more complex TIFF format. Since it supports up to 48-bit
truecolor or 16-bit grayscale, then saving, restoring and re-saving
an image does not degrade its quality. The PNG format does
not support layers and file sizes are larger than GIF or JPEG. |
| |
| JPEG or JPG,
created by the Joint Photographic Experts Group, is a lossy compression
method standardised by ISO in 1990. JPEG images are widely used
on the Internet and the format supports layers. Developers
can adjust the graphic compression in order to achieve the desired
trade-off between file size and visual quality. For
transmission of finished truecolor images, JPEG is the graphic
format of choice. File sizes are relatively small even at high
quality levels. |
| |
| GIF
(Graphics Interchange Format) is one of the two most popular
image formats used on the Internet. GIF images are support by
all browsers, but this format only supports 256 colors. Yet,
GIF images support transparent backgrounds, interlacing,
and can be used as an image map. Photographs saved as GIFs
generally lose their detail along with a wide range of values.
|
| |
| SVG
(Scalable Vector Graphics) is a language for describing two-dimensional
graphics in XML. SVG drawings can be dynamic and interactive.
A rich set of event handlers, such as onmouseover and
onclick, can be assigned to an SVG graphic. This new file
format has been reviewed and recommended by W3C. SVG Unleashed
hit the bookshelves on 10-30-2002 and contains more than 1100 pages.
|
| |
| |
| |
|
|
| Web
Graphics Applications |
| Time and space prohibit
the discussion of all of the Graphics applications that can
create or modify Web graphics. With apologies
to those applications not described here, I will discuss the
three graphics applications I use most often. |
| |
 Paint Shop Pro
-- One of the least expensive and
most versatile graphics applications on the market is Paint
Shop Pro (PSP). This application was created by JASC,
and then Corel purchased it; now you can purchase PSP through Corel.
PSP lends itself well to taking screenshots for training
and documentation. Some website tutorials require
the user to have access to PSP because it is so versatile
and affordable -- and easy to use. Granted, other graphics applications
may be more robust and have more features, but
they may cost much more and take longer to learn.
Read
about PSP on the Corel Software
website, where you can download a Trial version and read
tutorials. I have included one of my Paint Shop Pro tutorials
["pegasus glitter picture"] on the Examples.
Check out the resources below for PSP information and tutorials,
from beginner to advanced. |
| |
| |
| |
PhotoShop
-- Most likely the industry standard graphics application is
PhotoShop from Adobe.
This application has the most complete set of tools of any graphics
application. Of course, all these tools and benefits come
at a price. PhotoShop is more expensive than other graphics applications,
and many will tell you the application has a long learning curve.
By the same token, however, PhotoShop has the largest number of
reference books around, along with quite a few reference websites. When it comes to digitizing photographs,
PhotoShop treats them with kid gloves. After all, PhotoShop was created
for working with photographs. With PhotoShop, you can even protect
artwork posted on the Internet.
Some online resources
are listed below. |
| |
| |
| |
Fireworks
--  Fireworks, created by Macromedia,
is a vector-based
application. It is easy to use, which includes editing text, altering shape, changing color,
adding special effects, and so on. The default file format for Fireworks is PNG.
Fireworks is different from other graphics applications in that
it uses vectors to create bitmap images. Perhaps the best news
is that Fireworks uses an integrated workspace shared with Flash,
Freehand and Dreamweaver. You can use Fireworks to design interactive Web graphics, which are popular with online training. You can design and build a whole website with Fireworks and then convert the site to HTML and optimize it with an HTML editor.
|
| |
| Fireworks is now an Adobe product (since Adobe absorbed Macromedia). There are many Fireworks resources online; these are a few. |
| |
| |
| |
|
|
| Web
Movies and Animation |
| Although the .swf movie file extension
has grown in popularity and use, the following extensions also
represent movie formats: .swt, .spl, .avi, .and mov, plus .gif
(for single graphic animations). |
| |
| Flash
-- Macromedia's Flash is the industry standard
for interactive vector graphics and Web-based animation. Flash
started as an animation tool, popular for creating splash
pages, but Flash has grown into an interactive development
tool capable of building complete courses and websites. Although
Flash is rather pricey, users can download the
Flash Player free of charge. Flash works well with Dreamweaver.
The first link below,
to Layout Galaxy, is my favorite Flash resource online. |
| |
|
|
| |
| Swish --
Swish is the inexpensive precursor of Macromedia
Flash. It is easier to learn than Flash because it doesn't
have as many features and because some of the animation effects
are built in. Although Swish is somewhat limited, users can
quickly develop a great-looking Flash movie with this program. |
| |
|
|
| |
| Note: Other
applications can generate .swf files (Flash-type movies) and
some of them are inexpensive. Check
out the Flash-type application created by CoffeeCup.com. |
| |
| Director
-- Director
was the first full-feature commercial simulation application.
With Director, computer-based training developers could create
software simulations that offered a life-like look and feel.
This approach worked much better than user manuals and static presentation
screens for preparing students to actually work with the application
after class. Note that Director is quite expensive. Director is
a nice program, but it does much more than is needed for building
online training. |
| |
ViewletBuilder
-- I like
ViewletBuilder a lot. It is medium priced, easy to use, and fun, not to mention it has a short learning curve. ViewletBuilder
makes creating a computer task simulation so easy I wonder,
What's not to like? Check out a free download of this application
from Qarbon (www.qarbon.com).
Captivate (was RoboDemo) -- RoboDemo
was created by the same folks who created RoboHelp. Macromedia
purchased RoboDemo and before long, Adobe and Macromedia merged.
Then RoboDemo became Captivate. Captivate has been voted
the best simulation solution by thousands of readers of Elearning!
Learn more about this application here: Adobe
Captivate.
|
| |
| |
| |
| Judicious
Use of Animation |
| Animation Can Be Annoying
-- Website Designers and
Course Developers would do well to remember that graphic and
text animation can irritate the user - there is such a thing as
"too much.". Granted there are numerous dynamic tools available
in contemporary interactive applications, but the developers should
use them judiciously. Users have reported that overuse of animation
and text blinking actually defeated the purpose of the course
because the learning process was disrupted with too much movement
or too many different colors and sounds. |
| |
| 
Remember the Learning Process --
When creating courses that contain a lot of
information, it is wise to be prudent and sparing
with flashy movies and animated graphics. Student retention
may increase to the degree that some developers cut down on unnecessary
movements on the screen. Note that the jumping character cannot
be turned off.
Authors of the websites below are
devoted to spreading the word about how annoying and distracting
Web animations can be. |
| |
|
|
| |
|
|
