| 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) |
|
Although Web and computer-based training (as well as PowerPoint training) can support even more graphic formats, course developers and training managers need to set standards for graphics use and make this standard part of their 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, (2002) 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 graphics for the Internet or online training. With apologies
to those applications not described here, I will discuss the
four 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 after Corel purchased JASC, the application became a Corel product.
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 probably cost much more and take longer to learn.
You can download PSP from the Corel Software
website, where you can also read & view tutorials. I have included one of my Paint Shop Pro tutorials
["pegasus glitter picture"] on the Examples page.
I learned PSP on the job, and learned even more about its expandability on the Virtual University website. 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. Naturally these tools and benefits come
at a price: PhotoShop is more expensive than other graphics applications,
and most will tell you it has a long 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, PhotoShop was created
for working with photographs. With PhotoShop, you can even protect
artwork posted to the Internet (from being copied).
Online resources below: |
| |
| |
| |
Fireworks
--  Fireworks, originally created by Macromedia, which was purchased by Adobe years ago,
is a vector-based graphics application. It 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, which uses vectors (rather than rasters) to create bitmap images. Perhaps the best news
is that Fireworks uses an integrated workspace that is shared with other formerly Macromedia apps like Flash, Freehand 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, Fireworks beats PhotoShop hands down (IMHO).
However, the bad news is that it appears Adobe is not going to continue upgrading Fireworks. So if you aren't using Windows 10, you can still find and install a previous version of Fireworks. You'll probably need to look for it on eBay, a great place to purchase older versions of software. |
| |
| These are some 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). |
| |
Flash
-- Macromedia's Flash was once the industry standard
for interactive vector graphics and Web-based animation. Like Fireworks, Flash became 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. Flash was rather pricey, but worth it, and it worked seamlessly with Dreamweaver and Fireworks.
Now Adobe has stopped updating Flash too, and HTML 5 isn't as friendly to Flash animations as HTML 4.
Flash can take a long time to learn, especially if you plan on mastering ActionScript. But if you can find some templates, you will be able to create good-looking animations much easier for your websites and online training. These are some Flash resources I have used: |
| |
|
|
| |
 ViewletBuilder
-- I like
ViewletBuilder a lot (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? ViewletBuilder 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).
|
| |
Captivate (was RoboDemo) -- RoboDemo
was created by the same folks who created RoboHelp. Macromedia
purchased RoboDemo and after that, Adobe and Macromedia merged.
Later, RoboDemo became Captivate. You can purchase Captivate as a stand-alone application or as part of the eLearning Suite from Adobe. This suite is pricey - but very nice!
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. Check out this application here: Adobe
Captivate. |
| |
| 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 Flash movie with this program. |
| |
| |
| |
| 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
Internet animations can be.
|
| |
|
|
| |
|
|
