How Asana Makes Videos ft. Joey Dello Russo (DVG 016)
Making a team-based productivity app interesting in videos isn't easy to do, but Asana has done an amazing job of making high quality and engaging videos not only to market their app, but to teach and inspire people to use it as well.
Once I saw some of their videos I immediately wanted to find out who was behind them. Specifically, I wanted to know how they made the screen recorded sections of their videos look so good.
In today's episode I talk with Joey Dello Russo, an NYU film school grad that formerly worked at Asana and was the major creative force behind Asana's use of video.
In it, he shares a ton of detail about the process for how he made each of the videos, how he got other employees at the company involved in them, and the steps he takes for making screen recordings look amazing.
Subscribe via iTunes, SoundCloud, Stitcher, or RSS. Or you can play it in the player.
Items mentioned in this episode:
And here is Joey's detailed process for how he does the screen recording enhancement.
1. Use Chrome -- gives you the flexibility of zooming in and out of your product [command+ and command-].
2. Screencast using Screenflow -- warning: it's buggy and awful and overpriced with miserable support and by no means an end -- it is simply a means to an end. Depending on the type of info you're trying to convey, screencast each point three times in the wide/medium/closeup. Not always crucial if you know how tight you wanna be on that specific point, but it helps to give me flexibility.
Note: Don't use Quicktime for screencasting -- Apple LOVES to compress the hell out of everything. While I still use QuicktimePro to compress uncompressed files, everything video-related in Apple is lossy.
3. Export from Screenflow without the mouse. There's a box you can uncheck. Use MAXIMUM resolution settings on the export -- whatever maxiumum resolution size your screen has allowed, Animation codec, Millions of Colors+, etc etc. Can give you specific settings if you'd like. Here's a link to the Mac cursors, in vector format: Arrow + All other Mac cursors < copy and paste the path listed on that site into Chrome and you should be able to access the folders easily.
4. This is where it gets tedious. I bring each of these high-res Animation Quicktimes into After Effects. You'll probably notice that when you punch in on Chrome into your product that some of the icons/logos etc lose quality. Still as 2D layers in After Effects, I replace frame by frame, icon by icon, UX state change by UX state change with high-res icons. We haven't vectored everything in our product -- but we do have offline vector icons that I bring into After Effects and parent to the Quicktime. You'll have to work closely with your designers to get vectors of everything in your product.
5. Once each shot has been "vectorized"... then I precomp them, crop them into 1080 sequences, make them 3D layers, animate the moves, add Adjustment Layers [blurs/glows, etc], then reanimate the cursors.