Vector-smooth UI in Videos

Question

I'm trying to make tutorial videos for various applications. However, I notice in Camtasia when I choose to zoom in, I'm seeing a zoom on what's basically a raster image. The UI elements of the application's window look all pixely and whatnot.

I'm tyring to get my video to look like the Google Chrome ads (first 15 seconds of this video is a good example... http://youtu.be/pTjHCCU2E4c). Notice how there's such a large zoom on the Chrome window. My question is how do I get my videos to look all vector-smooth like the videos I see for Google?

Answer 1

Camtasia is a screen capture program, so what you get is a raster image. The resolution of the image depends on the resolution of the screen you're using. My guess is that google used vector drawings of the screens for the videos.

But what you can do to improve the quality of the zoom is to enlarge what's on the screen before capturing it by pressing Ctrl +. If you capture the enlarged content, it will give you much better resolution. In other words, zoom in on the screen content before capturing it.

Answer 2

There are ways to export vector graphics out of UIs, but creating animations out of it could be tricky.

• Creating Vector Screenshots

They seem to be using UI mockups that can be created in animation creation softwares.

If it's not an advertisement, maybe you can capture in high resolution desktop with high DPI (big UI elements) and then downsample the video carefully. Another solution is using Javascript or Flash to make animation in the UI.