by Sally Cox
When it comes to adding images to websites, PowerPoint presentations, or eLearning projects, you will likely be given JPEGs, GIFs, or PNGs. Let's review the three most common image formats and why/when to use them.
|COLORS||16 MILLION +||256||16 MILLION +|
Last week I wrote about how you can use Reflector to create software simulations and demonstrations from your mobile device.
December 18, 2014 in Adobe Captivate, Adobe's Technical Communication Suite, Design, Documentation, e-learning, eLearning, HTML5, Instructional Design, iOS, mLearning, TCS5, TechComm, Technical Communications, Technical Writing, Technology, UA, User Assistance, User Experience, UX | Permalink | Comments (0)
| | | | | |
Previously I shared some tips for creating your own great looking flat design eLearning. A recurring trend in flat design is the use of simplified icons in lieu of detailed drawings, images, or photos. Many icons can be found by inserting symbols or certain Clip Art images from within PowerPoint. Creating your own icons from scratch is also not terribly difficult. As an alternative, I'd like to share a fun (and free!) tool for quickly creating and customizing icons for use in eLearning.
Iconion is a free download that is still currently in Beta. After you've downloaded Iconion, you can choose from a large array of icons from four different icon font sets: Typeicons, Linecons, Font Awesome, and Entypo.
To create an icon, simply select an icon from the left of the Iconion window, preview it in the center panel, and then add a style from the right panel. The styles are many and varied and, in addition to looking great in your eLearning, would blend seamlessly with Windows and iOS. After you've chosen a style, you can make stylistic tweaks to fills, background colors, gradients, blurs, etc. From there you can save your icon to your desktop in a number of fully scalable sizes. Fast, easy, and great looking!
Here's an example of how I incorporated some icons from Iconion into the slide deck for an online training course here at IconLogic:
When it comes to eLearning, I develop content for many government and education organizations where Section 508 Compliance is required. Section 508, the Rehabilitation Act of 1973, requires all Federal agencies to make electronic and information technology accessible to people with disabilities.
If you want to make your eLearning courses accessible for everyone, it's a good idea to think about people who are hearing, visually, and dexterity (motor skills) impaired. Additionally, it's important to consider the elderly population and people who speak English as a second language.
Assistive devices provide a way for people with disabilities to communicate and train using technology. People who are visually impaired or blind need devices such as:
People with hearing impairments need visual representation of auditory information such as:
People who have mobility impairments may need:
Although creating accessible eLearning can feel like an additional task, the goal is to enhance your eLearning courses by ensuring that all learners can master the instructional material and meet the learning objectives. When learning is accessible to all types of learners, you are not only complying with regulations, but you are reaching a larger audience, upholding social responsibility, and increasing your effectiveness as an eLearning developer and instructor.
Note: This is the first in a series of articles covering accessible eLearning from Anita. Stay tuned for more! And if you'd like to take a 3-hour deep-dive into the best practices for creating accessible eLearning, check out Anita's live, online course.
In my Optimizing PowerPoint Design for eLearning & Presentations class I like to sing the praises of Microsoft's free online image gallery. But then, a few weeks ago, the unthinkable happened. I went to pull an image from said image gallery, and was met instead with this:
Do you know what this is? I'll tell you what this is. Useless. It looks like maybe you can search here, but believe you me-you cannot. Where once I found easily searchable free images, I am now met with a screen telling me how to use the newest Office to search for Images (which doesn't work for me as I have Office 2010), how to use Office Web Apps to find images (does anyone use that?), or how to use Bing to find these images (which I tried with zero success). The bottom of the page gives me links to images for Office 2010 or 2007, which I thought would be just the ticket. But no. Those links instead navigate to a page outlining how to insert clip art. Thanks for nothing.
I guess I shouldn't have been upset that a free service had disappeared. But, ya know what, I was upset. (Spoiler alert: I was upset enough that I kept digging until I found a solution. Read on for more!)
If you've used the free image gallery you probably know how great it is. But if you haven't, here's why it's such a valuable tool for eLearning designers:
You Can search by Style numbers
Let's say you found this image:
If you found the image in Microsoft's free image gallery, then it came complete with a linked style number.
Clicking the style number pulls up other images from the same style that can all be used together for a cohesive design. That's awesome.
Unless you already know the Style number, you cannot search by style number from the Office Clip Art pane. Nor does the clip art mention anywhere in its keywords what the style number is.
Search by General Style
Maybe a particular style doesn't have quite enough images for you. That's okay, the image gallery has a feature allowing you to search by general style--pulling up other images that look similar, even if they aren't technically part of the same style group.
The Search feature within Office's Clip Art pane does not have this feature.
Note: This feature did not work for me in Chrome or Internet Explorer without first downloading Microsoft's Silverlight. I'm running Parallels, however, so I used Safari on the mac side without having to do any additional downloading.
When I search within PowerPoint's Clip Art pane using the keyword "construction" for illustrations, including content from office.com, I get back 106 images to choose from. The same search online in the MS Image gallery brings back 156 images.
When I found I could no longer access my beloved Images section of MS Office's site I spent two hours being bounced around between Microsoft's live online chat and multiple tech support hotlines. I tried explaining what was missing every way I knew how and no one seemed to know what I was talking about. If I couldn't access the site anymore I was hopeful that someone could at least tell me how to identify a clip art image's style number from within MS Office for easy searching. This was not the case.
Luckily (and I know it is cruel to make you wait this long for the solution, but at least you weren't on the phone for two hours), I found the solution on my own. By bypassing the image search page of the Microsoft Office page and instead searching the Office site as a whole, I was able to find the hidden images! For your convenience, here is a direct link.
(Note: When you click the direct link above, the resulting page will say "found no results” because you haven't searched for anything yet. Go ahead and type your search keyword into the search bar above the text to look for images. After you search you can adjust the Media Types at the left to filter your results.)
Tantalized by typography? Gaga for good design? Head over heels for history? Gung-ho for a bit of gamification in your free time? Then you must try Type:Rider, available for iOS and Android. Right off the bat I'll tell you it isn't a free app, but the educational value as well as the simple and visually stunning design will make it worth the $3 (or $3.64 for Android--sorry folks!).
The game starts with a six-step tutorial level where you travel through a world of cave paintings (aka the origin of typography) as the gallant [horizontal] colon; rolling, jumping, dodging, and moving objects in your pursuit of collecting typographic symbols and unlocking content for further reading.
In this first tutorial level, the content is cave painting, cuneiform writing, Egyptian hieroglyphics, Chinese characters, the Greek alphabet, and the Latin alphabet.
To advance to the next level, you must find a third "dot" and move it along with your colon character into three designated slots, forming an ellipsis.
The "Origins" tutorial moves on to the Gothic era, where game play takes place in a land of cathedral ruins consisting of books, ink bottles, and misplaced type.
The content you're working to unlock is visually appealing, relevant, and interesting. But if you find yourself caught up in game play, you can always skip the reading and circle back to it after you've finished the level.
To date, I have only gotten as far as the Gothic level. Eight additional levels adorned with mysterious question marks still await me (each decorated in the style of the times so I could probably guess what each has in store).
Aside from the obvious fun and visual interest I've found in this game (that I think fellow designers will find as well), I've also found inspiration for future eLearning courses. Thoughts of creating a game-based course for the medical field with a scalpel as the main character, cutting through to each new level, dance in my head. Or maybe a hard hat in the construction industry-protecting the head of a new character for each level. Have I gotten your creative juices flowing too? Don't be shy (or greedy)--share those ideas with your ol' pal AJ by posting comments below!
And if you've gotten past the Gothic level in Type:Rider, don't give me any spoilers. ;)