Green Screen by Do Ink

Table of Contents

Introduction

The Gallery

The Green Screen Editor

Adding, Selecting, and Removing Image Sources

Editing Image Sources

Setting up the Chroma Key Filter

Audio Controls, Camera Controls, and Aspect Ratio

Previewing, Recording, and Saving a Video

Capturing Still Images

Exporting and Importing Projects

Getting Good Results

Animation & Drawing by Do Ink

Getting Help & Reporting Bugs

Introduction

You know what a "green screen" effect is, right? It's used in the movies to make it look like the actors have landed on an alien planet, and it's used on TV to make it look like your local news announcer is standing in front of an animated weather map. Green Screen by Do Ink makes it easy to create green screen videos using your iPad. It emphasizes ease-of-use and simplicity while still enabling you to achieve excellent results.

How the Green Screen Effect Works

The green screen effect works by combining images from two sources into a single image. The two source images are stacked in layers, one in front of the other. Normally, you'd only be able to see the image in front, since it would block your view of the background image. The trick is to make portions of the foreground image transparent, allowing the corresponding parts of the background image to show through. The green screen effect does that by looking for a specific color (like green, for example!) in the foreground image and then erasing any portions of the image that contain that color. The process looks like this:

There are two steps in the process of combining the images. First, the foreground image is run through a chroma key filter. This filter looks for portions of the image that contain the chroma key color – green in this example – and makes those areas of the image transparent. The second step combines the two images, letting the background image show through the transparent regions of the filtered foreground image. This is called compositing the images.

Using Green Screen by Do Ink

The basic green screen effect works by combining images from two sources into a single image, using the chroma key filter to create transparent regions in the foreground image and then compositing the result with the background image. Green Screen by Do Ink extends that basic effect in a couple of ways – first, by letting you combine up to three image sources at a time, and second, by letting you create lists of image sources (videos and photos from your camera roll) and then showing them sequentially.

The Gallery

The Gallery is where you’ll find all of your saved projects. You’ll see a thumbnail icon for each project, along with (optional) tags and a title. Tap on a project to open it in the editor. Tap the + button in the upper right corner of the screen to create a new project and open it in the editor, or to import a project from another location.

Tap the button on a project's thumbnail to show a menu that lets you delete, duplicate, or export the project. (You can also show the menu by swiping left on the thumbnail.)

There's more information about exporting and importing projects with Dropbox and Google Drive in the Exporting and Importing Projects section below.

The Sample Project

We’ve created a sample project to help you get started. This project will always be the last project shown in the Gallery. Note that you can edit the sample project to see how the various tools work, but any changes you make to it will not be saved. To create a new project that you can edit and save, tap the + button in the upper right corner of the screen.

The Green Screen Editor

The Green Screen Editor opens when you create a new project or load an existing one. This is where you’ll import videos and images, record videos using the live camera, and export your finished project to the camera roll.

User Interface

There are six primary elements in the editor's main view:

  1. The  Source Selector is where you'll add your image sources – the video camera, or a prerecorded video or photo from your camera roll.
  2. The  Timeline shows how your image sources are arranged. Use it to scroll through your video and select an image source so that you can change its settings.
  3. The  Preview View shows the combined image sources at the current time on the timeline. This is how your image will look in the completed video.
  4. The  Source View shows the image from the source that's selected on the timeline. This lets you see the contribution of any single image source.
  5. The  Settings Panel lets you adjust the chroma key settings and other properties for the currently selected image source.
  6. The  Toolbar is where you'll find the play and record buttons, along with a few other controls and switches.

Adding, Selecting, and Removing Image Sources

The images for your green screen video can come from four types of sources: the live video camera, prerecorded video, photos, and artwork imported from Animation & Drawing by Do Ink. You may add an image source to any of three layers. Sources added to the top layer are shown in front of sources added to the middle layer, and sources added to the bottom later are shown in the background. To add a source, tap the button on the desired layer and select your source: the camera, or a video or image from your camera roll.

Adding Videos and Images

Videos and images from your camera roll are added on the selected layer at the current time on the timeline. You set the current time by scrolling the timeline horizontally. As you do, you'll see the time label on the toolbar change to show the current time. For example, if you want insert a video starting at the 3-second mark, simply scroll the timeline to 3 seconds and add your video there. A video or image stays active on the timeline until another video or image comes along on the same layer. For example, if you add an image at the beginning of the timeline (0 seconds) and another at the 3-second mark, it might look like this:

Note that the app does not make copies of imported videos and images. Rather, each project contains references to videos and images stored in you camera roll or photo stream. If the original videos and images are deleted or removed from your iPad for any reason, the app will lose access to them. You'll be alerted if there are missing videos and images when you open a saved project, but it's important to keep this feature in mind as you manage your video and photo library.

Adding the Camera

You add the camera to the timeline in pretty much the same way as you'd add a video or image, but there are a couple of important differences to be aware of. First, the camera can only be placed on one layer at a time – when you add the camera to a layer, it will be removed from any other layer that has it. Second, the camera is always installed at the start of the timeline (0 seconds), regardless of where the timeline is scrolled to.

Adding Artwork from Animation & Drawing By Do Ink

You can add animations and drawings to your Green Screen project by importing artwork created with our other app, Animation & Drawing by Do Ink. You can create drawings, flipbook-style animations, and sophisticated animations using keyframes and motion paths. It features a full set of easy-to-use, yet powerful vector drawing tools and an extensive collection of reusable art "props". It's simple enough for doodlers, with advanced features for skilled artists and animators.

To import artwork from Animation & Drawing into Green Screen, tap the "Do Ink" button on the source selector. You can import artwork from the Do Ink "shared folder", or from Dropbox or Google Drive. You artwork will be placed on the selected layer at the current time on the timeline.

Transparent areas in the original artwork will also be transparent when the artwork is imported into Green Screen. For that reason, you will generally not need a chroma filter for Do Ink sources. The chroma filter is disabled by default for Do Ink sources, but you can enable it manually if necessary.

Refer to the documentation in Animation & Drawing for more information about how to export artwork. If you have both Do Ink apps installed on your iPad, then the easiest way to import artwork into Green Screen is by saving it as data in the Do Ink shared folder. You can also import artwork from Dropbox or Google Drive, even if you don't have Animation & Drawing installed on your iPad.

Selecting an Image Source

In order to change the settings for an image source (or to remove it), you'll need to select it first by tapping on the source in the timeline. When you tap on an image source to select it, the timeline will automatically scroll so that the selected source is under the red cursor line. You'll see the image for the selected source in the Source View.

Removing or Replacing an Image Source

The button removes the currently selected image source. (If the source selector panel is open, you'll need to toggle it closed to see the delete button.)

You can also clear the entire timeline by tapping the button on the toolbar. This is useful when you've finished a video and are ready to start a new one.

Editing Image Sources

You can edit an image source in three ways:

  • Use the crop tool to adjust the visible region of the image source.
  • Use the transform tool to position, scale, and rotate the image source.
  • Use the timeline tool to set the image source's start time and duration.

Crop Image Sources

The crop tool lets you specify an image source's cropping rectangle. The portion of the image source that lies outside of the cropping rectangle is hidden from view. You can specify a cropping rectangle for any type of image source, including the live camera, videos, photos, and Do Ink artwork.

To use the crop tool, select the desired image source by tapping it on the timeline, then tap the button in the Settings Panel. Drag the corners of the yellow box to adjust the cropping rectangle, or drag anywhere else to move the entire rectangle without changing its size. Use a two-finger pinch gesture to magnify and reposition the source image inside the view, enabling you to adjust the cropping rectangle more precisely.

Enable the "Constrain" switch at the bottom of the crop tool to restrict the cropping rectangle so that it matches the aspect ratio of your project. This makes it easy to select a region of the source image that fits perfectly inside the project view.

Pan, Scale, and Rotate Image Sources

The transform tool lets you adjust an image source's position, size, and orientation. Using the tool couldn't be easier:

  • Select the desired image source by tapping it on the timeline.
  • Position (pan) the image source by dragging it to the desired location in the (large) preview view. You can perform this operation with one finger.
  • Resize (scale) the image source using a two-finger pinch gesture in the preview view.
  • Rotate the image source with a two-finger "rotate" gesture – i.e., place two fingers in the preview view and twist them around each other.
  • Reset the selected image source to its original state by double-tapping anywhere in the preview view.

Using the transform tool with two fingers lets you pan, scale, and rotate the image source all at the same time. Drag to position the image, move your fingers closer together or farther apart to scale, and twist them around each other to rotate.

Move and Trim Image Sources on the Timeline

You can move image sources around on the timeline and trim their start and end times. To move an image source, tap and hold on it in the timeline. After holding for a moment, you'll be able to move the image source around on its timeline layer. Other image sources on the same layer will be moved, trimmed, or deleted to make room for the changes.

You can also trim the start and end of image sources by dragging the square handles at each end of the highlighted source in the timeline. This is particularly useful for trimming off unwanted portions of a video clip.

Setting up the Chroma Key Filter

When you place an image source in front of another one (that is, above it on the timeline), you'll want to create transparent regions in the foreground image to allow the background image show through. You do this by adjusting two settings: the  chroma key, which identifies the color in the foreground image that should be made transparent, and the sensitivity, which specifies how closely the source color needs to match the chroma key.

To adjust the chroma key settings, first select the image source on the timeline by tapping its timeline layer and scrolling it to the red cursor. You'll see the image for the selected source in the Source View and the chroma key controls in the Settings Panel.

Use the color wheel to select the chroma key color: that is, the color you want to be made transparent.

Use the vertical slider to adjust the sensitivity. The lower the sensitivity setting, the closer the source color needs to match the chroma key color in order for it to be made transparent.

You'll want to experiment with both of these settings to get the best results in your video.

The chroma filter is normally enabled for image sources in the top two layers, and disabled for sources in the bottom layer – but you can turn it off or on as you wish.

Using the Color Picker Tool

There's another – really easy – way to set the chroma key color. Touch anywhere in the Source View and drag around in it. You'll notice that the chroma key color in the Settings Panel changes as you move to match the color you're touching. So, for example, if you're setting up the chroma key filter for the camera, simply point it at your green screen and touch the Source View. The correct color will be set automatically.

Audio Controls

When you add a video source to the timeline, you can use the  *Audio Level * slider in the Settings Panel to adjust its volume. Setting the audio level to 100% maximizes the video segment's volume, and setting it to 0 mutes it completely. The audio level slider will not appear for videos that don't contain an audio track, nor will it appear for images sources or for the camera.

When you record a video using the camera, the audio is captured at full volume. You'll have an opportunity to balance the camera audio with the audio tracks from any prerecorded video segments when you preview your finished video.

Camera Controls

You can capture video using either the front or back camera. Select the camera source on the timeline and use the button in the Settings Panel to toggle between the front and back cameras.

When the camera is active, you'll see an  *Exposure Lock * switch on the toolbar. Normally, the camera automatically adjusts its exposure and white balance settings to produce the best possible image. You may find that this automatic adjustment interferes with the quality of the green screen effect. When the camera changes the exposure setting, it may inadvertently degrade the performance of the chroma key filter. To avoid this situation, simply enable the exposure lock before you start recording. (Note that the app disables the exposure lock under certain circumstances, so it's best to set it just before you start recording.)

Video Resolution and Aspect Ratio

You can choose to record your video in either "standard definition" (SD) or "high definition" (HD) format. Standard definition videos use a 4:3 aspect ratio and are exported to your camera roll at a resolution of 640 by 480 pixels. High definition videos use a 16:9 (wide screen) aspect ratio and are recorded at a resolution of 1280 by 720 pixels (720p).

Note that the front-facing cameras on iPad 2 and 3 models do not support 720p video. In this case, the app records the video at a lower resolution and scales it up (meaning that these videos will not be true 720p resolution). The rear-facing cameras on iPad 2 and 3 models do support 720p video, as do both front and rear-facing cameras on more recent iPad models.

To select the aspect ratio for your project, tap the button in the upper toolbar of the editor and select your desired option. By default, the app sets up new projects with a 16:9 aspect ratio. You can change the default setting using the user preferences panel, reached by tapping the button in the Gallery view.

When you export an HD video to the camera roll, you'll have the option to save it at full HD resolution (720p), or at 540p or 320p resolutions. Selecting the lower resolutions results in smaller file sizes for your videos.

Previewing, Recording, and Saving a Video

Tap the button to preview and rehearse your video. If you're using the camera in your project, tap the button to record and save your video. If you aren't using the camera, tap the button to export you video.

When you record a video using the camera, you'll see a 5-second countdown clock before recording starts, so that you can be prepared to start. When you've finished recording, you'll be able to preview the finished video, save it to your camera roll, or discard it.

Stopping Playback and Recording

There are two ways to stop playback and recording operations: manually, by tapping the pause or stop button on the toolbar, and automatically, by specifying the time at which you want to stop.

To set up an automatic stop time, scroll the timeline to the time at which you want to stop playback and recording. Then, tap the button on the toolbar to set the automatic stop time. When a stop time has been set, the portion of the timeline beyond that point will appeared dimmed. Tap the stop time button again to disable the automatic stop.

Capturing Still Images

Tap the button on the toolbar to select image capture. You can capture still images at any point along the timeline, with or without the camera. Simply scroll the timeline to the time at which you want to capture an image. If you're using the camera in your project, tap the button to snap a photo. If you aren't using the camera, tap the button to capture a still image from your project. Captured images are automatically saved to the Camera Roll.

The captured image will be the same as what you see in the preview view, with the same aspect ratio and composition. The resolution of the captured image is determined by the resolutions of the images sources on the timeline. In general, the app scales higher-resolution image sources down to match lower-resolution sources; however, it will create the highest-resolution image possible consistent with that policy.

Title and Tags

To edit a project's title and tags, tap the button on the upper toolbar of the Editor. The project's tags and title are shown in the Gallery, and you can use the search bar to find tagged projects.

Exporting and Importing Projects

You can export your projects to Dropbox and Google Drive, and import projects (your own, or made by someone else) into the app.

Exporting a Project

To export a project:

  1. In the Gallery, locate the project that you want to export.
  2. Tap the action button (or swipe left in the card), then tap the Save button.
  3. Specify where you want to save to: Dropbox or Google Drive.
  4. Look at the file name in the "FILE" section at the top of the export panel. The app creates a default file name based on the clip's title (or "untitled" if you haven't specified a clip title). If you'd like to change the file name, tap on it and edit it as desired. Do not include the "doink-gs" file extension in your file name – the app does that for you automatically.
  5. The app creates a Do Ink folder for you, but you can navigate to any folder you desire by tapping on the navigation button and the blue folder icons in the lower section of the export panel.
  6. Tap the "Save" button at the bottom of the export panel to save the file.

All of the project's assets – images and videos – are bundled together into a single file. The size of the project file will be (approximately) equal to the sum total of the file sizes of the individual assets. Be aware that projects that use a lot of images and videos – especially long videos – can be quite large.

Importing a Project

To import a project file:

  1. Tap the + button in the upper right corner of the Gallery, and select "Import a Project".
  2. In the import panel, select the location of the file: Dropbox, or Google Drive.
  3. Navigate to the desired folder, if necessary, using the navigation button and the blue folder icons.
  4. Tap on the desired project in the file list to import it.

Getting Good Results

You can make a decent green screen video under less than ideal conditions, and you can make a really great video by taking a few extra steps:

  • The quality and color of the backdrop you use makes a difference. Although you can record your video in front of any solid-color backdrop, the quality of the results can be improved if your backdrop is a bright, fully saturated color and if it's made from a matte, non-reflective material. You can find an inexpensive green muslin backdrop online by searching for a "green screen backdrop".
  • Good lighting helps. You don't need special "movie lights", but you'll find that your results improve when your backdrop and subject are well lit. Minimizing shadows on your backdrop can also help considerably.
  • Make sure that objects in your video (including people and clothing) aren't similar in color to your backdrop – otherwise, they'll be transparent!
  • Consider mounting your iPad on a tripod or stand. Holding your camera still while recording in front of a green screen can improve the quality of your video.
  • Experiment with the chroma key color and sensitivity settings. Getting them right makes a big difference.

Got a useful tip for making a great green screen video? Let us know about it at support@doink.com.

Oh, and one more thing...

Recording videos in front of a green screen isn't the only thing you can do with this app. Did you notice the animated background and characters in the tutorial video? They were made with our other iPad app,  Animation & Drawing by Do Ink.

With Animation & Drawing by Do Ink, you can create drawings, flipbook-style animations, and sophisticated animations using keyframes and motion paths. It features a full set of easy-to-use, yet powerful vector drawing tools and an extensive collection of reusable art "props". It's simple enough for doodlers, with advanced features for skilled artists and animators.

What's more, it's great for adding graphics and animation to your green screen videos. Use Animation & Drawing by Do Ink to create your artwork, then import it into Green Screen by Do Ink as described previously. It's a great way to make artistic backgrounds or add animations to your green screen videos.

Check out Animation & Drawing by Do Ink in the App Store! Here's a convenient link to help you find it:

Do Ink Animation & Drawing - DK Pictures, Inc.

Contact Us

Please email your questions, suggestions, comments, constructive criticism, and bug reports to support@doink.com. And let us know what you're using Green Screen by Do Ink to make. We'd love to hear from you!