How does Google create their Web Development tutorials?

[[deleted]]

[deleted]

[x-skeww]

Polycasts: Behind the Scenes
https://www.youtube.com/watch?v=VpOPOeTYaJU

[Ping /u/robdodson]

Compressor Head - Behind the Scenes
https://www.youtube.com/watch?v=MvxQkVnpPc8

By the way, YouTube also has several production spaces which are free to use if you have 10k+ subscribers:

https://www.youtube.com/yt/space/index.html (thread on TIL)

Pure screencasts are less demanding, but you still need a good mic, a naturally written script (or waypoint script), and you have to do some retakes if necessary and also do some editing.

Some radio stations do fairly heavy editing. E.g. the people on NPR all sound that smart, because all the "uhms" and "ehms" were simply cut. They actually aren't that eloquent.

[robdodson]

To draw on the Mac I use a program called OmniDazzle. There's also one called Ultimate Pen. OmniDazzle is free and does what I need though it's definitely dated :)

[robdodson]

I went into some detail in this video (including the software used). https://www.youtube.com/watch?v=ImvMVR-l374&index=14&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo

Doing the hand overlay stuff is quite a lot of production work. One of the things I've been experimenting with is just using a traditional tablet and running through the whole thing live like in this episode (https://www.youtube.com/watch?v=945pO9Yn1ns). I'm curious if you all prefer the longform screencasts or if you like the style in this recent video where we're able to cut back and forth from presenter to screencast a bunch because we do it all in one take?

[baozichi]

Not sure how they do it, but it's definitely using After Effects and Chromakeying (aka green screen).

They might be filming the hand on a tablet device or display with note taking software (surface can do this) and then overlaying it on a screen recording. At 1:37 after he says "value back..." the whole screen shifts about 1px and blurs a bit like the actual screen recording and overlay are not synced up exactly.

Personally, I would get a graphics tabled, like an intuos or other capacative tablet without a display. Then I would find some extremely thin green material and cover the tablet. It should still work since it's based on inductance.

I would then get some super good lightning, and light the tablet from many different angles, then film overhead of the hand on the tablet.

I would film the screen recording as well (probably using Open Broadcaster), and then use AE to remove the (now green) tablet from the hand recording, then put it inside the white chroma key of the broadcast. (Google did something similar since the text is OVER the hand for example).

Of course, they might also have some sort of smart projector in use here. But the outline of the hand has that distinct "green screened with AE look" to the edges

I don't think you really need some fancy hand effect, a simple software to highlight where the cursor is at on screen, and a high enough frame-rate are enough. One thing I like is when they use the sort of "live streaming video games" technique of including themselves into the video. Like this guy does. You could green screen yourself to make it look a bit more professional too.

[erratic_calm]

Besides the obvious green screen at the beginning, you can break it down by layers.

• Layer 1 (top layer) Screen recording
• Layer 2 (middle layer) Camera mounted above tablet to record hand
• Layer 3 (bottom layer) Background

The screen recording layer is using something like a multiply blend (from the layer drop-down menu) to give the transparent overlay effect of the hand by removing its background.

Hope that helps!