This is a series of posts about the making of my marketing video for Fin. You can see the other parts of the series by following the links below:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is part nine in a series detailing the process of making a product marketing video for my app, Fin. I want to inspire others to try and make these kinds of videos for their own products, as I think they are pretty essential for selling apps to customers.

Music

I’ve been a musician longer than I’ve been a designer, so I like to create my own music for product videos. The biggest advantage here, other than the fact that it’s a fun excuse to spend a few hours in Logic, is that I don’t have to worry about licensing fees for the music I make myself.

Assuming you’re not a musician, or you don’t like to compose your own music, you’ll want to look into some alternatives for your video. There are lots of license-free music clips you can use floating around, although you’ll want to be careful not to pick something that’s already been used too much. As I mentioned earlier in this series, Garageband and Logic both come with a number of musical jingles that can be used, or you can mix up something with the free provided loops in those packages. Or perhaps you know a friend in a band who wouldn’t mind letting you use some of his or her music in exchange for a credit.

If there are no free alternatives at your disposal, there are songs that can be licensed for a reasonable fee as well. Search around the Internet and you’ll find them. This is a cost you’ll have to pay regardless of whether you hire a pro crew to do your video or not.

The goal with your music, as with so much of the video process, is to be appropriate and not too distracting. Try and find something that matches your product and that isn’t too far into one genre that it might turn off a portion of your audience.[1]

You can’t make everyone happy with your musical choice, but at the same time, you shouldn’t go out of your way to alienate a large portion of your audience, either. It’s a tough decision.

Once you’ve chosen your track, you need to pop it into your video timeline and see how it runs with the visuals. You’ll be surprised at how much extra tweaking you’ll want to do to your edits to make sure they flow with the beat. Have those cuts from one shot to the next happen on downbeats whenever possible.

For Fin, I had an additional consideration. Fin is a timer app, and as such, whenever the app is shown, it’s counting down (or up) in seconds. So I needed my musical beat to match this clock ticking. Fortunately, I was writing my own music, so all I needed to do was use a tempo that matched actual seconds. 60 bpm (beats per minute) provided the perfect rhythm[2]. I still had to make sure each shot started on the downbeat with my second counting, of course. But it really helped tie my video in with the music nicely to have that pulse as a guide.

In the final part of this series, we’ll wrap things up with some animations for our logo at the beginning of the video, and talk about options for hosting your video.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

1. I love Rush and Yes way more than the average person, but I’m not going to use prog rock in my marketing materials, unless there’s a good reason for it. At the same time, though, I’d avoid the trendy hipster banjo-type music that’s been getting way overused lately. (That stuff makes me glad I usually watch product videos on mute.)  ↩
2. It would have been stupid to set my tempo to an odd tempo that knocked my seconds out of sync with my drum loop, like say 63 bpm, or 75bpm.  ↩

This is a series of posts about the making of my marketing video for Fin. You can see the other parts of the series by following the links below:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is part eight of a series detailing the process I used to make a product marketing video for my app, Fin. I hope I can inspire others to try and make these kinds of videos for their own products, as I think they are pretty essential for selling apps to customers. We may not all have the budget to hire a pro team to make super-awesome videos for us, but we can make something worthwhile if we put in some time and effort.

Slight of Hand

As I mentioned earlier, there was one extra challenge with this Fin video, where I wanted to be sure UI gestures (swipes and pans) were demonstrated in the video. This was tricky, as I wanted to avoid breaking the illusion that the video clips were shots taken with live devices. In those kinds of shots, you’d be able to see a hand in the shot making the individual gestures on the screen. So I had to come up with a way to make this happen without it looking completely fake.

I started with an image of a hand that was cut out of its background perfectly. That took some care with Photoshop. If you’re fortunate, you’ll find something similar and ready-made on a site like iStock. Luckily, I only needed to show single-finger swipes, so the same image sufficed for all of my shots. (I flipped it once horizontally to show a left hand as opposed to a right one.)

The trick was timing the animation of the finger so that it looked like it was actually manipulating the screen. It doesn’t have to be perfect, but it does need to be close. With a careful amount of panning, scaling slightly to create the illusion of pushing down on the screen at the right moment, and a good speed on the panning and rotating of the entire compound clip, the illusion works well enough to not jump out at you on the first viewing, at least.

The important thing to keep in mind is that you want the hand to be part of the compound clip, and you want the animations of the hand itself to take place within the compound clip, while the compound clip is itself being animated independently. The best way to do this is keep all three layers (the device, the screen grab, and the hand) separate while animating the hand. Then select all of them and group them into your compound clip for further animation of the entire clip. This way, your hand will move appropriately with the device and screen while it follows its own timeline and keyframes.

This technique ended up working for the Fin video because I only needed it for a few short shots, and the gestures were simple and out towards the edges of the screen, for the most part. If the gestures are more complex for your app, you may need to come up with a better solution. Taking video of your hand performing the appropriate gestures in front of a solid color background that you can later key out might work, if you can get a decent background cloth that’s contrasting enough in color to your skin tone.

Once you know what to look for, the shots look pretty fake compared to a real hand touching a real screen. But 99% of your viewers won’t notice it at all the first time around. They’ll be paying attention to the screen.

And how many of them are going to watch more than once, realistically?

Making adjustments for timing

Once you’ve had fun with the camera movements for each shot, and you’ve put them all into your timeline, it’s time to tidy up the timing a bit. Some clips may be too long while others too short. Use your best judgement. Watch the video from start to finish several times to get a feel for the balance. Don’t take too much time on this yet, however, as you really won’t nail down the final timings until you have your music in place. Music will help guide you on when to make transitions between shots more than you might think.

Speaking of music, that will be the subject for our next part in this series.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is a series of posts about the making of my marketing video for Fin. You can see the other parts of the series by following the links below:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is part seven in a series about the making of a product marketing video for my app, Fin. The hope is that I can inspire others to try and make these kinds of videos for their own products, as I think they are pretty essential for selling apps to customers.

Putting together Each Shot

Now you have all your footage, you have your device images, and you have your text shots in place. The next step is compositing your device shots in Final Cut Pro X to fill in the holes.

Start by placing the device you want into the timeline. Resize the image it so it takes over most of the screen. Next, on a layer above, place in your screen grab clip. If you cropped it correctly, it should be in the proper aspect ratio to cover the screen on your device perfectly. Resize the screen grab clip until it fits into the screen area, remembering to leave a bit of black “space” around the edge of the screen. Use your own iPhone or iPad as a reference for how the screen should be placed. If you’re very careful, the screen grab clip will look like it belongs with the device. Especially as we get to the next step, which is animating the camera.

Final Cut Pro X has this nifty feature called Compound Clips, which allows you to take two layers of your video and combine them, so that you only need to manipulate the grouped object, rather than its parts individually. Since we’re going to be performing some acrobatics with our iPhones and their screens, it’s important that we create compound clips of the device with the screen footage, so that we don’t have to try and animate each piece of the shot individually in perfect sync. The last thing you want is for your screen to look like it’s not attached to the device as they both move.

Select the two layers (screen grab and device image) and right click to create a compound clip. Once that’s done, your two layers are now linked together perfectly, so any animations can be performed on the compound clip instead of the individual elements. You’ll repeat this for each shot, making a new compound clip for each.

Now comes the fun part: Animating the shots. You could just leave your devices sitting there perfectly still as the screen animates your app to life, but one of the ways to make the entire video have just a little bit more polish is to have the camera move in various ways during the individual clips. The movement of the camera should be slow and not too extreme, of course. We don’t want to distract from what’s happening on screen. But with the right amounts of pan and/or rotation, your video can really come to life with little effort on your part.

To animate each clip, we’re going to be using the transform controls, which are available on the bottom left of the preview window of the Final Cut Pro X interface.

Move your playhead to the first frame of your compound clip and create a keyframe by clicking on the red diamond icon on the top left of the preview window.

That establishes where the animation will start. (If you want the device to start somewhere slightly off screen, as if zoomed in, move it and zoom it into the place you want as a starting point.) Next, move the playhead to the last frame in the compound clip, and create another keyframe. Then scale, pan, and/or rotate to the final position you want.

Basically, you’re telling Final Cut where you want the positioning, scale, and rotation of the video to start, and then where you want it to end. Final Cut will figure out how to go from one to the other.

I recommend doing only one camera move per clip, and to not make the transformations too extreme. If the device is flying through the air too fast or rotating to a large degree, you’ll end up distracting from what’s happening on the screen. The key here is subtle movement, and to vary the movements from clip to clip. Zoom in sometimes, zoom out others. Rotate slightly left, then right. And so on. Also, don’t zoom too far in either direction, as making the shot too large will cause scaling issues (your original footage has only so much resolution to work with, after all) and zooming out too far will make the screen hard to read. If possible, use zooming and panning to highlight the portion of the screen where the most important action is taking place.

After animating each clip, you can put in some nice cross dissolve transitions if you like, or leave each clip as a hard cut. It’s a stylistic choice. I’d avoid using the more fancy transitions, as those are more appropriate for birthday party footage of the kids. Most pro videos, if you watch closely, use dissolves, or nothing at all.

In the next part of the series, we’ll take a look at animating the hand gestures, and adjusting your clips for better timing.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is a series of posts about the making of my marketing video for Fin. You can see the other parts of the series by following the links below:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is part six in a series about the making of a product marketing video for my app, Fin. The hope is that I can inspire others to try and make these kinds of videos for their own products, as I think they are pretty essential for selling apps to customers.

The Device Frame Image

In order to complete the illusion that our app is running on a device rather than in the Simulator, we need a framing image of the devices we want to feature, shot from the exact front-facing angle to match our screen grab footage. There are various places to get such images, including Apple’s own marketing resources page, but be careful to read carefully the usage guidelines for any images you choose. Apple in particular, has pretty clear guidelines on how to use the images it provides, and while many product demos skirt these exact guidelines, you don’t want to draw negative attention from Apple.

You can also take your own photos of your own devices, but this will require quite a bit of expertise. The angle has to be perfectly flat to the camera, you need the lighting to not show any reflections in the frame, and you have to chop it out of its background later in Photoshop. In the end, this is probably something better left to a professional photographer. And that’ll cost serious money. So using one of the many available free shots that already exist is probably your best bet.

In general, it’s best to feature Apple’s latest and greatest versions of the devices wherever possible. For the Fin video, I managed to find images of all the different devices that I thought matched best with the different theme colors of my app in different contexts.

For the background on this video, I’m using a simple, almost white, solid color that matches my web site behind the devices. For other videos, such as the one I made for x2y, I used a wood texture to make it look like a desktop. You can decide which looks best for your particular app. Just be sure to use something that is perfectly flat to the camera’s point of view, so you don’t get issues with perspectives not matching. You can find lots of free background textures all over the web. Just be sure to get one that’s high-enough resolution, and make sure you have the rights to use it in your video.

How to Show Interactivity

One of the issues I came across when making the Fin video was how to show the interactions that would produce the animations on screen. For some apps, it’s no big deal to show movement without showing how that movement is triggered, but for an interface like Fin’s that features so much swiping and panning, I really wanted it to be clear how to make those events occur. What I ended up doing was superimposing a photo of a hand, which I then animated to match the screen action. More on how I did this later and why I felt it looked “good enough” to get the job done. But keep in mind if you want to show something similar for your app, this is an additional image (or images) you’ll need. And it’ll add to the complexity of your video.

In the next part of the series, we’ll look at assembling the different screen grab pieces with their device frames and animating them for effect.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is a series of posts about the making of my marketing video for Fin. You can see the other parts of the series by following the links below:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

This is part five of a series about the making of a product marketing video for my app, Fin. The hope is that I can inspire others to try and make these kinds of videos for their own products, as I think they are pretty essential for selling apps to customers. We may not all have the budget to hire a pro team to make super-awesome videos for us, but we can make something worthwhile if we put in some time and effort, and a little bit of cash.

Grabbing the Footage from the Simulator

Now that I had the text in place, and I knew which shots I wanted to back up what I was saying with the text, the next task was actually capturing the footage of my app in motion. As I mentioned before, doing this with a video camera “over the shoulder” with a real iPad or iPhone was not going to work on such a small budget. The end result always looks too amateurish for my taste. So I needed to get all my screen footage from that great app we all get bundled with our paid developer accounts from Apple: the iPhone Simulator.

The reason I go with the Simulator, rather than a broadcasting app like Reflector or something similar is that the Simulator is faster and smoother. The whole point of this video is to show your app in motion, and that motion needs to be as smooth as possible. If your app has a lot of views sliding around, they can often drop frames in an app like Reflector. Don’t get me wrong; I love Reflector for giving live demos, but in this case, I just don’t think it’s the right tool for the job.

Of course, the issue with the Simulator is that it doesn’t look like the actual device. Not to worry; we’re going to fix that with a little video layering later. For now, we’re just going to get the screen action we need, and worry about the surrounding environment after.

This is one part of the process where having a big screened Mac, such as the 27-inch iMac, comes in handy. On an 11-inch Air, for instance, it’s hard to get a screen frame with enough pixels for our HD final video.

Of course, if you’re capturing Retina iPad motion, even a 27-inch iMac can’t show the entire screen at once. That’s where the Simulator’s zoom feature works well. I set that to 75% with the iPad Retina mode. It’s larger than the non-Retina mode, while still fitting on screen. That way, I get the biggest frame possible for my screen, so I can do more with camera pans and zooms in Final Cut Pro later.

Fire up a screen grab app, such as ScreenFlow, and start capturing what you need. I recommend doing short takes. One three-or-four-second shot at a time, carefully setting up the iPad Simulator in between each take to get the screen to show exactly what you want. Don’t be lazy. Set up your screen to show off your app in the best possible light. The more time you take to carefully plan out your shots, the less time you’ll spend fiddling with your footage later.

Since Fin is a universal app, I did all my shots with the Simulator in iPad mode, then again in iPhone mode. That way, I could pick and choose which device to use on any particular shot later. One by one, with each line of text in my script, I took the corresponding screen grab, until the whole list was complete. You can always come back later for “pick-ups,” but I find that doing a shot, then bringing it into Final Cut, then doing the next shot, etc. is more taxing on the brain. Try and stick to one major step of the process at a time, if possible.

Getting Your Screen Grabs Into Final Cut Pro X

Now that you have all your footage saved in an app like ScreenFlow, you need to export all of it for use in Final Cut Pro X. Just as I like to do all my shots one at a time when grabbing, I like to export them all as separate files, too. Makes it easier for me to name each clip appropriately and sort them all out later. How you choose to do this is up to you. Feel free to export in larger chunks of multiple clips, if you find that more effective.

More importantly, what we need to export is just our screen from the iPhone Simulator. The rest of the desktop area we want to throw away. We also want to turn off any feature of the screen grab app that shows cursor movements.[1]

In ScreenFlow, you can crop your output to any size you like, which is very convenient. Just be sure you grab the screen exactly, with no extra frame around it. It needs to be superimposed onto an iPad or iPhone image later, after all, so getting the crop correctly is important. Check the aspect ratio of your crop to be sure it’s appropriate for your device type. You can re-crop again in Final Cut later, of course, but it’ll make your whole life easier if you get it right the first time.

Hopefully, your screen grab app of choice supports exporting at the best possible quality. We want our compression to happen at the end of the process if at all possible, not before it even gets to the cutting room. So I always choose Lossless Apple ProRes as my output from ScreenFlow at 100%. That way, I end up with shots that are all plenty large for at least 720p HD video with the device frame around it. Always better to have more pixels than we need.

Once you have all your clips, import them into Final Cut Pro X, and you’re almost ready to assemble. We’ll cover that in the next part of the series.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10