Keyframe
Open studio

Animate an AI illustration, step by step

Take one picture from an image generator, cut the character out of its background for free, give it a little hop with keyframes and export a GIF or a video. Everything happens in your browser; nothing here needs an account.

Open the editorRead the manualFree in your browser. No account needed.

What you need

  • A picture with a clear character in front of a background: PNG, JPEG or WebP. This guide uses an anime-style picture from an image generator.
  • A browser with WebGPU⁠ (external website, opens in a new tab), such as a current Chrome, Edge or Safari.

1. Bring the picture in

  1. Open the editor. A new project starts with an empty composition.

  2. Drop the picture on its start card, or choose New composition from asset. The composition takes the picture’s size.

The editor with the illustration as a new composition
  1. The picture in the Viewer.
  2. Its layer in the Timeline.
  3. Properties of the selected layer.

2. Cut out the character

  1. With the layer selected, open Layer Settings in Properties and choose Separate layer.

  2. Click the character on the picture. One point is usually enough; add up to four if a part is missed.

  3. Choose Cut out subject. It runs on your device and is free.

The Separate selected layer dialog with one point on the girl and Cut out subject ready
  1. The point you clicked on the character.
  2. Cut out subject: free, on this device.
  3. The AI separation, for more layers; not needed here.

3. Review the three layers

  1. The review lists the subject, its shadow and the background, each with an automatic check.

  2. Choose Import 3. The layers replace the picture inside its own composition, and the original stays recoverable.

Review 3 assets: Subject, Shadow and Background, each checked, with Import 3
  1. The character, cut from the picture’s own pixels.
  2. Her shadow, as its own layer.
  3. The background, filled in where she stood.
  4. Separate with AI, if you want more layers.
  5. Import the three layers.

4. Give her a hop

  1. Open the picture’s composition from the Project panel and select the Subject layer.

  2. At frame 0, turn on the stopwatches of Position and Rotation.

  3. Every 12 frames, alternate: lift her (Position Y 400) and tilt her a few degrees, then set her back down (Y 512, rotation 0). Each change sets a keyframe.

  4. Select the keyframes and press F9 for Easy Ease, so she slows at the top of each hop.

The Timeline with Position and Rotation keyframes on the Subject layer, and the girl lifted off the ground in the Viewer
  1. The Subject layer.
  2. The stopwatch that turns on keyframes.
  3. A keyframe: she is at the top of a hop.
  4. The frame at the playhead.

The shadow is a separate layer, so it stays on the paving while she jumps. For arms and legs that move, give her bones and IK⁠ (opens in a new tab) instead.

5. Play it back

  1. Press Space to play. Frames are rendered once and kept, so the second loop plays in real time.

  2. Adjust a keyframe and play again until the timing feels right.

6. Export a GIF or a video

  1. Choose Export video or images at the top right.

  2. Set Format to Animated GIF for a loop to share, or WebM or MP4 for a video.

  3. Choose Export now. The file is rendered in your browser and downloaded.

The Export dialog with Animated GIF chosen as the format
  1. The format: Animated GIF here.
  2. The frames to export.
  3. Export now renders and downloads the file.

Where to go from here

  • More layers. Separate the picture into 2–6 layers with AI, so the arms, hair or background move on their own. Layer separation
  • A rig. Bones, IK and meshes make limbs bend instead of the whole body tilting. Character rigging
  • Ask the Agent. Describe the motion in a sentence and review the draft it builds. AI Agent

Keep going