Animating an AI-Generated Image for your 2.5D BC Space

This guide walks you through the process of animating an AI-generated image using MidJourney, Photoshop, Premiere Pro, and BC Space with unlocked customization (premium package feature).

Prerequisites

MidJourney for image generation Adobe Photoshop for image editing Adobe Premiere Pro for animating A BC Space with the Customization feature enabled (Premium packages)

Generating and Preparing the Image

Step 1: Generate the Image

Let’s start with the image we want to animate. In this tutorial I will use MidJourney for the image generation. MidJourney is a Text2timage AI generator. The prompt I used was the following:

/imagine a zombie with raised hands looking at the right, in an isometric view, plain blue background.

The reason I use a “plain blue background” is that plain colors will make it easier for me to remove the background in photoshop.

Here is the AI generated image I liked the most and I will work with:

Step 2: Download and Open in Photoshop

Download the chosen AI-generated image and open it in Photoshop.

Step 3: Remove the Background

Use the Selection Tools or the Background Removal tool in Photoshop to delete the plain blue background.

Step 4: Separate Parts for Animation

Select the parts of the image you want to animate (for this video I will animate the head, hands and one leg), copy them onto new layers, and delete them from the main image.

Step 5: Confirm Layer Visibility

Hide and then re-enable the new layers to confirm everything looks correct with the main image now missing the selected parts.

I will enable the visibility once again to make sure everything is all right, before I move forward to the next step:

Step 6: Save as PSD File

Time to save our file as a PSD file and begin the animation process.

Animating in Premiere Pro

Step 7: Create a New Project in Premiere Pro

Open Premiere Pro and start a new project.

Step 8: Set Up Your Sequence

Create a sequence with the dimensions of 500 x 500 pixels.

Step 9: Import Photoshop File

Once the sequence is created for your project, it’s time to import our photoshop file. When importing the file, make sure you have selected the Individual Layers setting in the “Import As” section. Any merged setting won’t allow us to animate the individual sections we want to animate.

Step 10: Adjust Layer Duration

Trim each layer in the sequence to be 6 frames long for a 12-frame animation (you can increase the total frame count depending on your needs)

Step 11: Add Green Screen Background

Create now a green screen as a background for our image, so the background is easier to remove at the final stages.

Step 12: Animate Layers

Go to the very first frame of your sequence (at 00:00:00:00) and enable the position and rotation timers on all our layers in the effects tab.

Go to the 5th Frame and start placing each of the parts you want to move on the desired new position. After you place the parts you want to animate in the new location, go back frame by frame just to make sure that the movement is smooth.

Step 13: Nest the current layers into a sequence.

If you are happy with the final results, select all the layers, right click on any of them and click on “Nest”

Step 14: Loop the Animation

It’s time to loop our animation, so there are no “jumps” and the animation feels like if it was an Instagram boomerang effect endlessly and smoothly looping.

Duplicate the nested sequence.

Right-click on the copy and click on the Spee/Duration tab

Enable Reverse Speed and click “OK”

Exporting and Finalizing

Step 15: Export Frames

It’s time now to start exporting frame by frame to get to the final phase of our animation.

Go to the beginning of your sequence, and click on the Camera Icon to Export the current frame. Give it a name easier to remember and easy to differentiate so you know it’s the first frame of our animation. In my case I will be using Zombie-1.

Click "OK" to save the current frame.

Move forward to the next frame and repeat the same process until you get to the last frame. In my case, I ended up with 12 images, meaning 12 frames.

Time to get back to Photoshop.

Step 16: Create New Document in Photoshop

Create a new document with a canvas size based on the total frames multiplied by the width of one frame. The size of the canvas should be X * Y pixels

Whereas

Y = the height of my main image

X = total frames * width of the image.

In my case it would be (500 * 12 frames ) x 500 = 6000 x 500 pixels looking as the image bellow:

Step 17: Enable Grid for Alignment

I recommend you to enable a grid as a reference, so your images are always centered and it’s easier for you to import and manipulate them.

To enable the grid go to Settings -> Guides, Grid & Slices.

Configure your Gridline every 500 pixels

And enable the grid visibility

Step 18: Import and Align Frames

It's time to start importing our exported frames into photoshop in the same order they were previously exported.

After you’ve imported all your frames next to each other, you will have something like the image bellow:

Step 19: Merge Layers and Remove Background

Merge all the layers into a single layer, so we can move forward with the removal of the background.

If you are using the latest version of photoshop, you have the tool available as soon as you select the image in the layer. If you are using an older version, you can use the magic wand or quick selection tool to proceed with the removal.

You will end up with something like the image bellow.

Step 20: Export Final Image

Go to File -> Export -> Export As..

Select PNG in the format section, and apply a scale of 33%

The final result is the following image:

Uploading to BC Space

Step 21: Enter BC Space Customizer

Login to your BC Space as an Admin and go to the Customizer

Step 22: Add Media and Create Object

Click on 'Add Media

Click now on Add Object

Click on Create a New Object

Step 23: Upload and Place Animation

Select the Animation option, upload the final png file previously exprorted from photoshop name your object, type the quantity of frames (in my case it was 12 frames) and select the depth you want it to be placed in your 2.5D world.

Click on upload and wait for it to be uploaded and processed.

Start placing your animation in the desired spaces.

Congratulations on completing this tutorial and bringing some life to your BC Space.

Don’t forget to share your results on Twitter and Tag @bitdotcountry and use the #BCSpace hashtag. We want to see your creations!