| Web
Graphics Formats |
| Graphics continue to play a critical
role on the Web and in online training. The Internet does not support all graphic formats. Internet site developers are generally held to using PNG, JPG, GIF or SVG graphics. |
| · PNG (Portable
Network Graphics) |
 |
| · JPEG or JPG
(Joint Photographic Experts Group) |
| · GIF (Graphics
Interchange Format) |
| · SVG (Scalable
Vector Graphics) |
|
Web and computer-based training (as well as PowerPoint training) may support additional graphic formats, but these are the most common. Course developers and training managers need to set standards for graphics use and include the graphic standard as part of their training style guide. |
| |
| PNG
is an extensible file format for the lossless, portable, well-compressed
storage of bitmap images. The PNG graphic format was created
for use on the Internet. Developers designed the PNG format to replace the older and simpler GIF format and, to some extent,
the more complex TIFF format. Because the PNG format supports up to 48-bit
truecolor and 16-bit grayscale, then saving, restoring and resaving
a PNG image does not degrade its quality. If I need to resize photos for my training, I want them to be PNG files. Be aware that PNG files have a larger file size than GIFs and JPGs. If the file size is a problem, then I resize the photo as a PNG and then save a copy of the file as a JPG before posting on the Internet. I archive the PNG files in case I ever need to reopen the original to resize again. |
| |
| 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. Developers like JPGs because they support layers; in addition, developers
can adjust 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 because file sizes are relatively small even at high
quality levels. However, I am not particularly fond of JPG files because close scrutiny shows that they do not resize well. JPGs are famous for a speckled look. You may not see the speckles at a distance, but you will see them if you zoom in with a graphics application. This speckling does not happen with PNG files. |
| |
| GIF
(Graphics Interchange Format) is a popular
image format for the Internet because the file size is small and GIF images are supported by
all browsers. However, this format only supports 256 colors.
GIF images support transparency and are easily used as image maps. The GIF format is not suitable for photographs (except for thumbnails), and graphics saved as GIFs
cannot be resized - not successfully anyway.
|
| |
| 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. As far as I'm concerned, the SVG format is only suitable for the serious graphic artist. The first comprehensive book about SVG graphics, SVG Unleashed, contains over 1100 pages; few users want to know that much about the SVG format.
|
| |
| |
| |
|
|
| Web
Graphics Applications |
| Time and space prohibit
the discussion of all of the Graphics applications that can
create or modify graphics for the Internet or online training. With apologies
to those applications not described here, I will discuss the
three graphics applications I use the most.
|
| |
 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; after Corel purchased JASC, the application became a Corel product.
PSP is great for taking screenshots for training
and documentation. Some website tutorials require
the user to have access to PSP because it is so affordable and easy to use. Granted, other graphics applications
may offer more features, but
they probably cost more and take longer to learn.
You can download PSP from the Corel website, where you can also read
tutorials. I have included one of my Paint Shop Pro tutorials
["pegasus glitter picture"] on the Examples page.
I learned how to use PSP on my first ID job, and then learned more about it through courses in Virtual University. The resources below offer PSP information and tutorials,
from beginner to advanced. |
| |
| |
| |
 Photoshop
-- Most likely the graphics application considered the industry standard is
Photoshop from Adobe.
This application has the most complete set of tools of any graphics
application. Naturally these tools and benefits come
at a price: PhotoShop is more expensive than other graphics applications. It also has the longest learning curve.
By the same token, however, Photoshop has the largest number of
reference books, along with awesome tutorial websites. When it comes to digitizing photographs,
Photoshop treats pictures with kid gloves. After all, this application was created
for working with photos. This application also makes it easy to protect your
artwork from being copied when posted to the Internet.
These are just a few of the many resources available for Photoshop: |
| |
| |
| |
 Fireworks
-- Fireworks, created by Macromedia and now owned by Adobe, is easy to use; tasks like editing text, altering shape, changing color, and adding special effects are straightforward. PNG is the default file format for Fireworks. Fireworks is different from other graphics applications in that
it is vector-based, which means it uses vectors (rather than rasters) to create bitmap images.
The learning curve for Fireworks is much shorter than Photoshop.
Perhaps the best news
is that Fireworks is easily shared with Flash and Dreamweaver. You can use Fireworks to design interactive Web graphics, which are popular with online training. You can even design and build a whole website with Fireworks and then convert the site to HTML and optimize it with an HTML editor.
Fireworks has multi-page rapid prototyping abilities. For use on the Internet, some users think Fireworks beats PhotoShop hands down. Check out these online resources: |
| |
| |
| |
|
|
| Web
Movies and Animation |
On the Internet and in online training the .swf movie file extension
is probably the most popular, mostly because HTML, PowerPoint and Word processing programs all recognize SWF file formats. The following extensions also
represent movie formats: .swt, .spl, .avi, .and .mov, plus .gif
(for single graphic animations).
Note: Camtasia is now widely used for animated videos, along with PowerPoint and Presenter. The applications listed below are the ones I used when I began creating online courses. |
| |
Flash
-- Macromedia's Flash has been the industry standard
for interactive vector graphics and Web-based animation. Many of the newer applications use timelines just like those in Flash. Like Fireworks, Flash is now an Adobe product. Flash
started as an animation tool, popular for creating splash
pages, but then it grew into an interactive development
tool capable of building complete courses and entire websites. Although
Flash is rather pricey, the
Flash Player for Internet plug-in is free. Flash works seamlessly with Dreamweaver (also a Macromedia product in the beginning).
Flash can take a long time to learn, especially if you plan on mastering ActionScript. But if you use templates, you can more easily create good-looking animations for your online training. These are some Flash resources I have used: |
| |
|
|
| |
 ViewletBuilder
-- I like
ViewletBuilder a lot (it's created by Qarbon). The application 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? This application is available for Windows, Linux and Macintosh. Check out a free download of
from Qarbon (www.qarbon.com) -- and check out the Viewlet Gallery (http://www.qarbon.com/presentation-software/viewlet/viewlet_gallery.php). I have used this application with several clients.
|
| |
Captivate (was RoboDemo) -- RoboDemo
was created by the same folks who created RoboHelp. Macromedia
purchased RoboDemo and after that, Adobe and Macromedia merged.
Soon, Adobe expanded RoboDemo and turned it into Captivate. You can purchase Captivate as a stand-alone application or as part of the eLearning Suite from Adobe. This suite is pricey - but it's very nice! Most corporate training departments I've worked in use this suite.
Captivate has been voted
the best simulation solution by thousands of readers of Elearning!
It is easy to learn and use -- many think it is the industry standard for developing e-Learning. You will find training videos on YouTube and the Adobe website. |
| |
| Swish --
Swish is the inexpensive precursor of
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 video with this program. To get started, check out Swishzone.com. |
| |
| |
| |
| Judicious
Use of Animation |
| Too Much Animation Can Be Annoying
-- Website Designers and
Course Developers would do well to remember that graphic and
text animation can be irritating - there is such a thing as
"too much." Granted interactive graphics applications have numerous dynamic tools, but the developers should
use them judiciously. Users have reported that overuse of animation
and text blinking actually defeated the purpose of the training
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 this jumping character to the right cannot
be turned off. The author of the website below is
devoted to spreading the word about how annoying and distracting
Internet animations can be.
|
| |
|
|
| |
|
|
