Animated GIFs: Not just for dancing hamsters

Animated GIFs: Not just for dancing hamsters

While working on eLearnings, I realized that animated GIFs are wonderful for demonstrating simple concepts. They can explain a concept more concisely than a still image with a paragraph long caption and they work across all browsers and platforms, unlike flash or even video. I’ve been working on a course about GPS and steering for precision agriculture, and below are some of the animations I’ve created.

Multipath GPS errors occur when the GPS signal bounces off a nearby structure and the receiver can't differentiate which is the "real" signal.

Multipath GPS errors occur when the GPS signal bounces off a nearby structure and the receiver can’t differentiate which is the “real” signal.

I drew the graphics in Inkscape and animated them using the Gimp. It works like a flip book, in that you have to create each individual frame of the animation. In the eLearning courses only one animation would appear per page, so it’s less distracting. So what do you think? Do they help demonstrate the concepts? Hopefully even without a lot of context you understand the gist of it.


Workshop: Image Editing for Beginners

My current company is pretty big on internal training. I developed this course on Gimp to teach my colleagues about the differences in file formats, and basic image editing. It also includes a teaser for Inkscape and vector graphics. I’ve taught the course 4 times with attendees from all different roles, from software developer to chef. I received rave reviews for my teaching style and the course content, with an average rating for 3.8 out of 4.
The workshop is about 2 hours long. I start with a lecture on image file types, including color, transparency, and image quality due to compression method. Then I lead step-by-step demos using Gimp and provide time for attendees to practice the techniques on their own images. I wrap it up by discussing resolution as it related to images viewed on screen and images that will be printed.

I’ve uploaded all the class materials on

Gamer Wedding – Recap

In my original post about how my husband and I had a gamer wedding I promised to upload more photos and video. Well here you go! I made a series of three videos to showcase our wedding (don’t worry, the longest is only 5 minutes). They took me a while to finish, but I wanted them to have a high production quality. I had fun making them and got to learn/practice a variety of skills. You can watch them in any order since they all begin with a 10 second intro that provides context.

Tools that I used

  • Gimp: Photo editing, resizing, recolor
  • Inkscape: Create the “Couples that play together stay together” logo.
  • PowerPoint: Believe it or not, I created the majority of the videos using PowerPoint animations. With 2010 you can just save it as a .wmv file, including sound and animation.
  • Audacity: I haven’t done much with audio editing before, so it was fun to learn a few tricks. The most complicated part was the timing for the slideshow of games in part 1.
  • Windows Movie Maker: I used it because it’s free. Definitely not the most robust tool for video editing, and it suffers from some annoying usability problems, but it got the job done for the right price.

I’d love to hear your comments, both on the quality of the videos and on our geeky gamer theme.

Color me insightful

Canon 550d - Pencil ColourColor is a crucial part of the message in any visual design. There are a plethora of color theories and guidelines out there. If you have a good eye, then most of it is common sense. Color Scheme Designer 3 is one of my favorite tools to quickly throw together a color scheme. At first glance it may seem pretty simplistic, but play around with it a bit and you’ll discover the subtleties you can achieve using the “Adjust Scheme” options. Once you have a set of colors you like you can look at the “Color List” to quickly see all of the hex color codes, or export your scheme in a variety of formats. There’s also an option to view your color scheme as a colorblind person would see it, which can help you with accessibility. (Two colors that are distinct to someone with normal vision may be nearly someone who is colorblind.

Color is about more than just what looks good however. Continue reading

Image websites

When  you need images for a design project where do you look? The easiest thing to do is search Google Images and take whatever you find; but what about copyright and the original artist? As an aspiring designer I want to make sure I give credit where credit is due so hopefully others will give me the same respect. So here are the sites I like best for free images:

Open Clip Art Library

All images uploaded to the Open Clip Art Library are released to the public domain, so they are free for personal or commercial use. All images can be downloaded in .png or .svg format, so they are easily scalable to any size you might need. The quality is somewhat variable since it’s all volunteer contributions, but a lot of the images are incredible.

Free source of volunteer-contributed photography, released to the public domain so you can use it for any of your projects. You can’t redistribute the images, but they are free for use.

Flickr: Creative Commons

Flickr provides a way to easily browse images based on the Creative Commons license they were released under. They explain what the different licenses mean, so you can find attribution only images for all your projects, or some of the more restrictive licenses, like attribution, no derivatives, non-commercial. There are millions of images available, although the quality does vary somewhat since they are user-contributed. If you have some patience for browsing and trying a variety of keywords, you can typically find images that will work for your needs.

Icon Archive

I absolutely love icons and iconography. I think there’s genius in taking a complex idea and distilling it down to the simplest representation. I use icons any time I’m trying to convey a complex or abstract idea, but I’ll probably devote a whole post (or several) to this subject. Icon Archive has some wonderful, high quality icon sets, typically available in .png format. You should look closely at the icon set for the licensing though, as it varies depending on what the artist has specified. All images are free to download, but you should still check the licensing to make sure you’re respecting the rights of the creator.

I admit I’m not totally versed in intellectual copyright law, do any of you know some good resources to learn more? What are your favorite sites for images? I highlighted free sites here since I’m mostly a hobbyist, if you frequently use commercial stock images, what are the best sites for that?