In Part 1 of this series on Photeo, we wrote about what a Photeo is and how you might go about using Photeo in your eLearning projects. Now it’s time to get down to work!
- Pt. 1 - Photo + Movement = Photeo
- Pt. 2 - Putting a Photeo Together
- Pt. 3 - Photeo Tutorial 1
- Pt. 4 - Photeo Tutorial 2
- Pt. 5 - Photeo Tutorial 3
In this article, we’ll first walk through a Photeo needs analysis. Then we’ll discuss the conceptual development of the storyline and script, how to do an asset analysis from the script, how to collect assets, and frame the project around the audio narration (if any). This is not where we add SFX (sound effects) or music. The narration, if any, will give you a framework to build your timeline. And finally, we’ll talk about the various tools that it takes to create Photeo.
Two projects
A learning or training needs analysis is something that every designer of learning (whether eLearning, mLearning, classroom learning, or whatever) does at the beginning of a project. Most of us are familiar with the ADDIE systematic design process. The first part of ADDIE is analysis. In simple terms, you’re presented with a topic, you analyze the topic and figure out the best option to present the learning; Live, eLearning, mLearning, print, and so on, and decide how to go about designing and developing the topic.
We’re going to demonstrate how we decided on Photeo for two very different topics. Consider these as if they were assignments you received from a client. The first assignment is to create a training series for front-line employees and first-level supervisors. Young women in their late teens and early 20s mostly handle the jobs, so the client wants a contemporary tone to it.
The second assignment is a little more esoteric and has a bonus. For a live presentation, there’s usually a slide at the beginning about “housekeeping.” The assignment is to take the three- or four-minute talk that a classroom instructor would deliver about housekeeping and make it into a 30-second Photeo. As a bonus, it’s going to be VERY easy to create. In Part 3, there will be lots of job aids for this small project.
These subjects call for two very different approaches. After going through the analysis, the answer for both turned out to be two very different Photeo applications. One was a photo Photeo and the other would be a scavenger Photeo. We’ll walk through both projects.
Some guidelines for choosing Photeo
How do you even know Photeo is the right tool for the project? Here are some guidelines. They are not rules – they don’t make a proof-positive case that Photeo is still the right medium for your project. But they’ll give you at least a start on the path of Photeo vs. anything else.
- If video would be great, but for some reason isn’t feasible, you could use a Photeo.
- If you’re telling a story, and bullet points would be dull or pointless, you could use a Photeo.
- If you’re building simulation or scenario-based eLearning and want to absorb your audience in the moment, you could use a Photeo.
- If bandwith might be an issue, you could use a Photeo.
- If the visual details or emotional aspects of your eLearning are important, you could use a Photeo.
- If you would otherwise show a still photo for 30+ seconds while nothing moves on screen, your learners will fall asleep or worse, they’ll Cmd+Tab [Mac] or Alt+Tab [PC] away and visit a more interesting Web site, you could use a Photeo.
The first project is a traditional learning topic. In this case, it’s already been decided that it’s going to be eLearning. The second topic is more about pushing information at the learner and in a way that is a little less “traditional” training, but it’s something that all of us have done if we’ve ever done any live training. The second topic was also kept very easy to do so that you cannot only see it and how it came about, but in Part 3 you’ll also be able to easily create it.
Megan’s Project: Training frontline employees
Our client wanted to create a series of eLearning modules that would include a cast of characters who would, through their successes and failures on the job, give life to the content. The client wanted a professional and realistic look and didn’t have a gigantic budget. (Does anyone have a gigantic budget these days?)
This is a little background both on the project and how the name Photeo came about. Steve and I had a brainstorming session in a coffee shop. We had been tossing around the Photeo concept but didn’t have a name for it. I tried it out during an early design meeting with the client. “What if we used photos instead of video? You know ... Photeo.” (The word just popped out of my mouth!) “Not stop-action animation, but more like a Ken Burns documentary. It’d be a lot cheaper and more flexible so they could easily make changes later. Plus, it would require far less bandwidth than video.” The client loved the concept.
We used a pure photo Photeo for this project for a number of reasons. First, there was no way we’d find the right photos anywhere on the Web. We needed the right characters, the right scenes, and just the right expressions. Second, we needed a consistent look and feel from start to finish. A scavenger hunt mash-up style didn’t fit the client’s vision, so we knew we had to find actors, get a photographer, and schedule a shoot.
Design to execution, step-by-step
Here’s how we put the photo Photeo together. (You’ll see how we actually built it in Part 3.)
Step 1: We identified the point of the story. Each of the 25 individual Photeo stories needed to contribute to the learning progression in the course. This required that the instructional designer look across the entire curriculum and identify ways to use stories that were not only fun but also educational.
Step 2: Rough out the story – decide on the characters, scenes, plot, etc. Do you have a narrator or is the storyline carried by the characters? Keep it short – you’re not actually making a Ken Burns documentary, after all. We chose not to have a narrator, but rather to let the characters, voices, and visuals carry the day.
Step 3: Build the script. Remember, it’s a play, not a novel. Unless your plan includes a narrator, everything you intend to communicate needs to be done through the visuals and dialogue. To do this, you have to think like a movie script writer. For our project, the content came from the instructional designer – written like a novel in the third-person with visual elements described in narrative form. For example, “She arrived at 3:05, late, as usual…” It needed to be in the 1st person, but fortunately, the hard work of developing the characters and writing the storylines was already done. We turned the scripts 90 degrees so they read like a play. “Hi dear, sorry I’m late.” VISUAL: V bursting through door, looking frantic.
Step 4: Figure out the assets you’ll need. That’s code for the visual files you’re showing on the screen and the audio files you’ll hear as your story plays out. We typically do this in a two-column format when we work in MS Word (there are standalone programs for this as well), with script on the left and visuals on the right. If we’re working in PowerPoint (like when we use Articulate), we put the script in the Notes section of each slide, and a visuals list on the screen. Remember your assets can be photos you take, photos you source online, graphics you create, visual effects, etc. Do we need any sound effects? Add those to the list, too.
For our project, we compiled all the visual directions into a monster spreadsheet for photography day – who, where, doing what, with whom, holding onto what props, with what look on their face for every single shot. We had over 1,000 shots specified for 25 course modules.
Step 4a: Decide how often things on the screen will need to move – what your pace is. That will clue you in to how many and what assets you need. Assets are anything you see or hear in a Photeo. For a fast moving conversation you’ll need a good clutch of images. For drama or action you’ll need LOTS of images. For a thoughtful exploration of a topic – perhaps only a few with some slow pans across the screen. When we build a Photeo for a conversation, we typically use a new image for every sentence, or even for every phrase. It’s like punctuation.
Step 5: Collect your assets. Do whatever it takes to get as many of the assets you identified in Step 4 as you can. Then, get a few more – more is better. You get to pick and choose from among the best, rather than make do with the images you have.
For talent, we used family, friends, and a local modeling agency. We took over the client’s best retail location for the entire day. On the day of the photo shoot, the first shot for each model was a “mug shot.” He or she stood holding a sheet with their character’s name on it so the course-building team back at the office would know who was who when we brought the photos back and loaded them up on the server.
We had a couple of follow-up shooting days, but for the most part, what we missed on photo shoot day, we had to make up on the fly. We improvised with zoomed-in shots of hands holding mobile phones and various other props, and a few things we faked in our office. (Our tech room still has a “Supply Closet – Employees Only” sign with the client’s logo on it left over from this project.) That’s one of the beautiful things about Photeo – it lets you get very creative about your visual effects on the cheap.
Step 6: Compile! We used Articulate Presenter for this project, layering in the different photos and animating the sequences for each screen. This sounds easy, but can be incredibly time-consuming as you match each phrase to just the right photo, crop and adjust each photo for consistency, Photoshop where needed to correct or simplify the images, and be sure not to repeat images in the sequence (or at least not too much). We kept the sequences relatively short – about a minute long – so we didn’t overload each screen and make the whole thing hard to load.
Step 7: Add the soundtrack – usually voiceover, perhaps with some sound effects or music as appropriate – and synch the visuals to it, using whatever software you use.
We used WavePad to edit the audio spots from each of the voiceover artists into a single file for each screen. Then, we imported the audio into Articulate Presenter and synched the animations. The result is Example 1.
Example 1. Megan’s Photeo
Things we learned along the way
Models are trained to look beautiful and smile. Or pout. Or whatever their look is. But they typically don’t have as much range and flexibility as the actors who also happen to be on the rolls of your average modeling agency. Next time, I’ll ask for actors only and skip the models. Funny enough: we had an instructional design student who was modeling on the side show up for the shoot. She did a great job.
Lighting takes forever to set up. Where I had first organized the photo shoot by character (get all of Reggie done, then Reggie + Rebecca shots, then do all of Rebecca, etc.), I found that we really needed to organize the shoot by location and make the models be flexible. We were paying them well and feeding them smoothies all day anyway. This saved a bunch of time, but only after I figured it out.
Take way way more photos than you think you’ll need. We took two to four photos of every shot I thought we’d need. I wish we had more. The stroke of brilliance for the day was to get a set of “emotion shots” from each model – deep thinking, self-satisfied smile, looking confused or mulling things over, happy smile – whatever fit the character. These “extra” shots will be useful in filling in the inevitable gaps that occur when you have more script than you have photos. We aimed for moving the screen every three seconds or less – that’s a lot of photos!
Big lesson: Stuff happens. Deal with it.
Then the inevitable happened! We had to change the scripts. We use Agile software development methods, and I’m a firm believer that continued learning throughout a project necessarily brings about a change in design and scope for the better. As the project progressed through the various review cycles, the script and scenarios in the Photeo sequences changed. Had we shot the whole thing in video, we would have had to scrap thousands of dollars of video. With Photeo, we could commandeer many of the old photos, make a few tweaks, and then update the audio voiceover and voila! a whole new sequence out of old assets.
Steve’s Project: Housekeeping…
We’ve all used this slide at one time or another. Housekeeping is almost always the title. Just about every training session I’ve ever done has this slide. It comes right at the beginning of the day (or session). It’s the part where you tell everyone to make sure their phones are off or at least on buzz, where the bathrooms are, etc.
While I was preparing a slide deck for a presentation last year, I thought; “Whoa! Instead of flapping my lips at this, make a simple and fast Photeo!” It was a self-assignment. But one I could use again and again. Since I mostly teach media and video and Photeo, I figured this was a perfect opportunity to make a Photeo.
Stepping through the project
Step 1: I looked at all my previous housekeeping slides and made a list of all the things that I covered during the slide. It was pretty easy to do, since I had a lot of housekeeping slides. (Why I never copied and pasted them is a different story.)
Step 2: I looked at all the items on the list and started to search online for images I could use with fair-use restrictions or where there is no copyright or there is a creative commons license. In this case it’s not as important as I’m only going to use the resulting Photeo as a one-off for myself and it falls under the fair-use provisions of copyright law. But I always go this route to be sure.
Step 3: Once I have located and downloaded all the images, I start to look for sounds. Sometimes I “Foley” the sound effects or SFX (in other words, I make my own), but there are lots of sounds online that you can freely use. Everything goes into a folder on my desktop. And I mean everything. When I start to work on the project, I put all my media files in a project folder. Sometimes, if there’s a lot of video and I know the folder is going to be big, I’ll put it on my second hard drive and put a shortcut on the desktop. The media files go in sub folders; images, sounds, etc. Then there are sub folders for After Effects, Photoshop, Premiere Pro, etc. The reason for separate folders for the programs I use are that they all do autosaves, Premiere Pro in particular, has render files, etc., so it’s best in its own folder as a subfolder in the project. That way everything is together in one place.
Step 4: Once I’ve got all my visuals in one folder, I’m ready to begin. An important lesson, and it’s the same lesson Megan shared in her story, is that even if you think they’re all the right images, get more than you’ll use because you’ll always have another idea while you’re working, and sometimes an image won’t work the way you think it will in the project.
Step 5: This is the thinking part of the Photeo project – any Photeo project. Before you begin, block out your Photeo. You can make a timeline drawing, or make a Word document with boxes detailing how it progresses. Whatever you do is fine as long as you have a clear understanding of what you want to do and where you want to go. And a big part of your vision should be how you want it to look. I know that I like to play around with a vintage look with old pictures. I love old film clips and old pictures, but searching for the right clips would take more time than I had to make this, so I settled for a lean and clean look. But how it looks should be part of your thought process.
Step 6: Start to put your assets on a timeline. In the case of “Housekeeping” I knew I wanted to start with the Good Housekeeping Seal of Approval, so I did a Google image search for just that, added the words “Creative Commons License,” and Voila! there it was! On the timeline, I also knew it needed to be animated in 3-D, so I knew I’d have to use After Effects. I could have used a color image, but chose to keep this part of the piece in black and white. In Part 3, I’m going to walk all the way through this and have job aids to show how it was done. For now, you can see the result in Example 2.
Example 2. The Housekeeping Photeo
The Tools of Photeo
Photeo might be unique in how you can create content with it. There is no one program you can use to create Photeo. If you’re a developer (or designer or DD {designer/developer}) who normally works in Flash or PowerPoint, I’d bet you use other software as well. In Photeo, it’s all about which software you use and why you use it that gives you the look you’re trying to achieve. There are no rules, and you can use lots of pieces and bits of software to make a Photeo. You can use them all or even think of a way to do it with another program.
Generally the software you’ll use falls into several categories, but there are a few programs that just can’t be put into a category, so are a category of their own. This is not a complete list of software, but rather a guide to what to use. Everyone who makes a Photeo is going to have their favorites. This isn’t a software analysis essay, but I’m going to list a whole bunch of tools and categories. First some categories of software you’ll probably have to use, and then a few programs that don’t fit into any single category:
Image Editing Software
If there’s one program that relates to everything you do to create a Photeo sequence (or almost any eLearning sequence for that matter), it is image-editing software. You need it for a myriad of ideas and uses, even if you’ll only use PowerPoint to make slides and Articulate to put in some interactivity. You can easily do Photeo without After Effects (AE) (see below), but you probably can’t make Photeo without image-editing software. Image-editing software is fundamental. Whatever you use, it doesn’t have to be Photoshop, but your life will be easier with it. Nothing relates to the rest of the Adobe programs like Photoshop. You can easily use one of the analogs of Photoshop like Corel PaintShop Pro, or GIMP or any of a number of image-manipulating programs. But only Photoshop dynamically links to Premiere Pro or can import layers into After Effects. Whatever image-editing software you use is good as long as you use it well. And there are a lot of them.
Video Editing Software
You can make Photeo without using any video-editing software, but video-editing software isn’t just for editing video. There are many things you can do with video-editing software including editing the video you include in Photeo … if you’re including video. My two favorites are Premiere Pro and Sony Vegas Video. Both (like AE) use the timeline paradigm, but both work in different ways. If I’m using AE, and I want to dynamically link it to my video-editing timeline, then the only choice is Adobe Premiere Pro. If I’m not using AE for a project, then I like Vegas. There's something I really like about using the Vegas timeline, somehow, more than the Premiere Pro timeline. It’s more visual to me. I can control some things on the Vegas timeline that I can’t do on a Premiere Pro timeline. Does it dynamically link to the other Creative Suite software? No. But sometimes that doesn’t stop me.
Audio Editing Software
Just like good video, Photeo can’t (or shouldn’t) exist without a sound track. Frequently in Photeo, a soundtrack is made up of many different elements. You need a multi-track sound editor and that would probably be Sound Forge or Adobe Audition. Again with the Adobe product, you can dynamically link to Premiere Pro or AE, but I’ve used Sound Forge since version 1 and I guess I know it very well by now. If you’re working on a Premiere Pro timeline, then it really doesn’t matter what you use. So if I’m not working with an audio track that’s linked to a piece of video, like a talking head, I tend to stay with Sound Forge. Some people love Audacity and it surely works well, but you can’t do a lot of things with it like multi-track editing.
Articulate Presenter
Articulate is an eLearning software tool that begins with PowerPoint. It allows you to quickly and easily create engaging courses, presentations, quizzes, and surveys. Several programs convert PowerPoint to eLearning, but Articulate lets everyone involved in organizational eLearning – subject matter experts (SMEs), trainers, and instructional designers – become teaching and training gurus. In one bundled package, Articulate provides everything you need to create outstanding eLearning courses. By creating them in PowerPoint, you can use Articulate as a collaboration tool with your SMEs and clients during the early stages of production. You don’t have to worry about compatibility because Articulate saves your content in the universally accepted Flash format, so it runs on any Web server or LMS (and the Articulate Online service). It also creates SCORM and AICC-compliant content so you can easily track results on your LMS. Articulate is very user-friendly and can provide amazing results! Articulate Storyline is another program about to be released. If you need SCORM, you need Articulate.
Motion Graphics Software
I usually call this video compositing and effects, not motion graphics, which is what it’s called in Wikipedia. More properly, these programs are called “Computer Generated Motion Graphics, but that’s too big a mouthful for me. The software can include animation, now probably handled better by other software, or particle animation. It gets confusing when you consider all the possibilities that this category of software can take in.
We take it for granted now (at least I do!) that our PCs can do this kind of effect/animation building, but they can, which is why this is such a good category. After Effects is possibly the king of video compositing programs right now in terms of affordability and flexibility. There is nothing else quite like AE in the available software for regular Joe users like me. Just like Photoshop, there is a whole ecosystem of Plug-In extensions for AE. Right now, Adobe is tooting its own horn about “Hugo” which used effects created by AE. True there are a lot of very expensive programs that can do as much, but not many … and those cost upwards of $100,000 and require turnkey equipment. And none has the flexibility of AE.
I admit it; I was an art major. I have my degrees in painting (oil) and printmaking. AE is a lot like painting with oils. In oil painting, if there’s anything you can imagine visually, you can make it happen. In the digital world, AE is similar. If you can imagine it, you can make it. AE isn’t an editing program although you can surely edit video in AE, but why? In AE you have complete control of every element in a scene in a video. Every little piece you see in a composited image is controllable down to the frame. Letters can move close together and far apart (this technique will be in a tutorial in Part 3), you can stack images. You can blend, and apply effects or filters. You can make a camera move around a 3-D object. You can… There are so many things you can do in AE, to fully explain it would take an entire article … and that’s without demonstrating anything about the program.
Suffice it to say that the way to learn AE software is to use it. Yes, it’s complex, but yes, you can learn it. And no, you don’t have to program like you do in Flash … but you can.
Flash
Flash can be used for some of the things you do in AE. However, if you need interactivity in video or animation or composited clips, you need Flash. And Flash is far from dead, in spite of what some people in our industry believe. To use Flash well, you need to know ActionScript. If you’re not a programmer, there is a program called Edge on the Adobe Labs site. It’s currently a Beta, but it works … and you can do a lot of the animation and interactivity in Edge that you would do in Flash. Flash started out life as a freebie giveaway with Director. Made by Macromedia, Director was also the first Flash Plug-in called (and still called) Shockwave. It’s amazing that Shockwave still exists after all these years, but it does and is part of the Flash player. Flash was created so you could use vector graphics to create animations, which Director couldn’t do at the time (mid-1990s).
PowerPoint
We’re personally not fans of training created in PowerPoint, especially if it’s just “Flashed” into existence for the Web. PowerPoint can tell a story, true, but what we see in the movies or on TV or the Web has so jaded our eyes that PowerPoint slides just don’t have the impact. Unless they are really different slides, that is. But given that PowerPoint has very little in the way of transitioning from one slide to the next, and has limited event-based (mouse click, etc.) audio possibilities, it’s best left for the kind of training where there’s not a story to be told. Compliance training in some industries doesn’t have a story. It has to be taken once or twice a year by everyone and there’s no choice about simply learning the rules. That said, PowerPoint used with a program like Articulate to add interactivity and “dimension” to your story, can work really well to create a Photeo experience for the learner.
Wrapping up this part
This has been a look at the creation and execution processes, and at basic kinds of software along with some specific software bits and pieces. To be sure, there is other software you can use, but all the above is a major part of your Photeo creation toolkit.
There’s a minimum amount of software you need to create Photeo. At the least, you need an image manipulation tool like Photoshop and PowerPoint in combination with something like Articulate – if you have access to other tools, even better. Premiere Pro and After Effects are important development tools along with Flash. If you don’t have the Adobe tools, they’re all available as fully functional downloads that work for 30 days.
In Part 3, we’ll be taking a look at really using these tools. We designed the “Housekeeping” Photeo to be easy enough that anyone can do it, and we’ll have plenty of tutorials to go with it, so you can follow along and create it yourself. You’ll soon be a Photeo expert!