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).
Last updated
MidJourney for image generation
Adobe Photoshop for image editing
Adobe Premiere Pro for animating
A BC Space with the Customization feature enabled (Premium packages)
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:
Download the chosen AI-generated image and open it in Photoshop.
Use the Selection Tools or the Background Removal tool in Photoshop to delete the plain blue background.
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.
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:
Time to save our file as a PSD file and begin the animation process.
Open Premiere Pro and start a new project.
Create a sequence with the dimensions of 500 x 500 pixels.
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.
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)
Create now a green screen as a background for our image, so the background is easier to remove at the final stages.
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.
If you are happy with the final results, select all the layers, right click on any of them and click on “Nest”
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”
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.
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:
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
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:
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:
Login to your BC Space as an Admin and go to the Customizer
Click on 'Add Media
Click now on Add Object
Click on Create a New Object
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!
