Home Page
 ID Roles
 Distance Ed
 ID Tools
 Sample Jobs
Topics in this section include --

 Graphics Formats

 Graphics Applications


 Web Movies / Animations

 Judicious Animation Use

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.
Graphic Format Resources
Image File Formats  http://en.wikipedia.org/wiki/Image_file_formats
Web Graphics from W3C  http://www.w3.org/Graphics/
PNG Introduction  http://www.libpng.org/pub/png/pngintro.html
·  Formats  ·  Applications  ·  Animation  ·  Animation Use  ··  Top  ·  Home  ·
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.
PSP Resources
PSP Tutorials  http://www.corel.com/corel/pages/index.jsp?pgid=1400065&storeKey=us
PSP Users Group  http://www.pspug.org/
JASC PSP Tutorials  http://www.tutorialized.com/tutorials/Paint-Shop-Pro/1
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:
PhotoShop Resources
Adobe PhotoShop Tutorials  https://www.guru99.com/introduction-to-photoshop-cc.html
PhotoShop Tutorials  http://photoshoptutorials.ws/
PhotoShop Star Tutorials  http://www.photoshopstar.com/
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:
Fireworks Resources
Fireworks Tutorials  http://www.entheosweb.com/fireworks/default.asp
Useful Fireworks Tutorials  http://fireworks.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-and-downloads-best-of/
YouTube Tutorial  https://www.youtube.com/watch?v=ZvaUr67KB00
Halloween Graphics on YouTube  https://www.youtube.com/watch?v=GCYQOeeigKg
·  Formats  ·  Applications  ·  Animation  ·  Animation Use  ··  Top  ·  Home  ·
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:

Flash Resources
Flash Developer Resource Site  http://www.flashkit.com
Flash Tutorials & Templates  http://www.pinoy7.com/flash/default.htm

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.
·  Formats  ·  Applications  ·  Animation  ·  Animation Use  ··  Top  ·  Home  ·
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.

Advocates of Judicious Animation Usage
Developing User-Friendly Flash Content   http://www.flazoom.com/usability
·  Formats  ·  Applications  ·  Animation  ·  Animation Use  ··  Top  ·  Home  ·
© 2003-2020 | ann gordon | gordon computer, llc