Welcome to Green Screen by Do Ink! This brief tutorial will show you how to make a simple Green Screen project and save a video to your Photo Library.

Step 1: Create a New Project

Let’s start by creating a new project.

Tap for full-screen
  1. Tap the button in the upper right corner of the screen.
  2. Tap Create a New Project.

Your new project is automatically opened in the editor.

Step 2: Add a Photo

At the bottom of the editor is the timeline: three gray stripes stacked one on top of another. Each of the stripes represents a layer. Let’s add a photo to the bottom layer:

Tap for full-screen
  1. Tap the button on the right side of the bottom layer of the timeline to open the chooser.
  2. Tap Tutorial Assets at the top of the chooser.
  3. Tap the picture of the taco at the top.

The photo is displayed in the canvas area above the timeline, and thumbnail images have been placed on the timeline.

On iPhones, the chooser is closed automatically after adding an element to the timeline.

Step 3: Add a Video

Next, let’s add a video to the timeline’s middle layer.

Tap for full-screen

If you’re using an iPhone, tap on the timeline to open the chooser again, then tap Tutorial Assets at the top of the chooser.

  1. Tap the middle layer of the timeline to select it.
  2. Tap the picture of the girl in front of a green background.
  3. Close the chooser panel by tapping the Done button.

Now, the video is displayed in the canvas area, with thumbnail images on the middle layer of the timeline. Notice that the green background in the video is gone! We’ll talk about that a bit more soon.

Step 4: Selecting Elements

Before using most the app’s tools, you’ll need to select an element for the tools to work on. Let’s take a minute to learn how to do that.

You can select an element either by tapping it on the timeline or on the canvas.

Tap for full-screen
  1. Tap the photo element on the timeline’s bottom layer to select it. Notice that the selected element has a yellow border around it on the timeline.
  2. Tap the video element on the canvas to select it. Notice that selecting an element on the canvas also highlights it on the timeline.

If you tap an element on the timeline that’s already selected, a small tool panel will appear under the timeline. You can hide the panel by tapping the same element on the timeline again.

Step 5: The Chroma Tool

The video on the middle layer was shot in front of a green screen. Why isn’t the green background visible on the canvas? It has been hidden by the chroma tool.

The chroma tool makes regions of an image that are a specific color transparent. The tool is enabled with a green color by default for images on the upper and middle layers of the timeline.

The rest of this section will teach you a bit more about using the chroma tool. It’s optional, so feel free to skip ahead to Step 6.

Tap for full-screen

The video should already be selected, with a yellow border around it on the timeline. If necessary, tap the video on the timeline or the canvas to select it.

  1. Tap the button on the toolbar above the timeline to open the chroma tool.

  2. Disable the chroma tool by turning off the “Enabled” switch. Notice that the green background if no longer transparent.

  3. Turn the “Enabled” switch back on. The green background becomes transparent again!

    If desired, use the “Chroma Key” control to select a different color, and use the “Sensitivity” slider to fine-tune the results.

  4. Tap the “Done” button in the upper right corner to return to the editor.

Step 6: Arrange Elements on the Canvas

You can also move and resize elements on the canvas. Let’s see how that works.

Tap for full-screen

The video on the middle layer should still be selected. If not, select it by tapping on the timeline or the canvas.

  1. Touch and drag on the canvas with one finger to move the video element around without changing its size or rotation.
  2. Touch and drag on the canvas with two fingers to move, resize, and rotate the element at the same time, using the standard “pinch” and “rotate” gestures. Using these tools, make the video element smaller and position it on the canvas.

Step 7: Using the Timeline

Notice how the two elements have different lengths on the timeline? Let’s fix that now.

There are two different ways to use the timeline: 1) scroll to a particular point in time by simply dragging left or right, and 2) move or trim an individual element on the timeline by touching and holding down for a moment and then dragging the element to a new position.

Tap for full-screen
  1. Tap the photo on the bottom layer of the timeline to select it.

    Notice that the selected element has a yellow border around it, with a green box at the left end and a red box at the right end.

  2. Touch and hold down for a moment on the red box, then drag to the right, until the photo element ends at the same time as the video above it (the 6-second mark).
  3. Scroll the timeline back to the beginning (0 seconds) by dragging it to the right.

Step 8: Export a Video

You’re all done making your project! Now, let’s export a video to your Photo Library.

If desired, you can preview your project first by tapping the button.

Tap for full-screen
  1. Tap “Export Video” button In the center of upper toolbar.

You’ll see a progress bar at the bottom of the screen while the app converts your project into a video. When the video is ready, the Video Preview view opens automatically.

Step 9: Save to the Photo Library

The Preview Video view lets you view and export your finished video.

Tap for full-screen

If desired, tap the button to preview your video, or scrub through it using the slider control.

  1. Tap the “Save” button to show the standard activity sheet.
  2. Tap “Save Video” on the activity sheet to export the video to your Photo Library.
  3. Dismiss the confirmation alert.
  4. Tap the “Done” button in the lower right corner to head back to the Editor.

Next Steps

Congratulations on finishing your first Green Screen project!

You’ve learned the basics, but there is so much more. For example, the chroma tool isn’t the only way to make portions of an element transparent. You’ll want to learn about the crop and mask tools too. Check out the documentation and the other tutorials by tapping on the button in the Gallery.

And have fun making your own Green Screen videos!