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)

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.
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 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.
PSP Resources
PSP Tutorials  http://www.corel.com/corel/pages/index.jsp?pgid=1400065&storeKey=us
PSP Videos  https://www.youtube.com/user/CorelPaintShopPro
JASC PSP Tutorials  http://www.tutorialized.com/tutorials/Paint-Shop-Pro/1
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:
PhotoShop Resources
Adobe PhotoShop Tutorials  http://www.smashingmagazine.com/2008/01/10/adobe-photoshop-tutorials-best-of/
PhotoShop Tutorials  http://photoshoptutorials.ws/
PhotoShop Star Tutorials  http://www.photoshopstar.com/
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:
Fireworks Resources
Fireworks Tutorials & Downloads  http://fireworks.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-and-downloads-best-of/
50+ Fireworks Tutorials  http://www.noupe.com/tutorial/50-excellent-examples-of-adobe-fireworks-tutorials.html
Fireworks Tips & Tricks  http://www.vineyardesigns.com/resources/fireworks/tips_tricks.shtml
·  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).

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:

Flash Resources
Flash Developer Resource Site  http://www.flashkit.com
Flash Tutorials & Templates  http://www.pinoy7.com/flash/default.htm
Flash Advice from Experts  http://www.flashadvisor.com/tutorial/index.php
Flash Tutorial Videos (for beginners)  https://www.youtube.com/results?search_query=Flash+tutorial+beginner

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

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