User Manual - Mainnet
  • 🌻Welcome to Bit.Country!
  • 🚀Getting Started
    • Quick Start Guide
    • FAQ
      • BIT FAQ
      • Estate Staking
      • Staking/Rewards FAQ
      • My Wallet FAQ
      • NFT FAQ
      • Metaverse FAQ
      • Memeverse Competition
  • 💰Connect Wallet
    • Wallets & Login
      • Social Login
      • Polkadot.js Wallet
        • Create a Polkadot.js Wallet
        • Connecting Polkadot.js Wallet to Bit.Country
        • Transfer NEER to another Wallet Address using Polkadot.js.org/apps
        • Transfer BIT via the Polkadot.JS app
      • SubWallet - Polkadot Extension Wallet
        • Create a SubWallet - Polkadot Extension Wallet
        • Connecting SubWallet to Bit.Country
        • How to transfer BIT using SubWallet
        • How to transfer NEER using Subwallet
        • BIT & BIT(Spot)
          • How to transfer BIT into BIT(Spot)
      • Talisman- Ethereum and Polkadot Wallet
        • Create a Talisman - Polkadot Extension
        • Connecting Talisman to Bit.Country
    • Wallet Connection Troubleshooting
    • Change/Disconnect Wallet
    • NEER
      • How to Transfer NEER
    • Unlock Vested Tokens (NEER & NUUM)
  • 🏔️Land Economy
    • Types of Land Ownership
      • Create an Estate
    • Pioneer Map
      • Secure a Spot on the Pioneer Map?
    • Purchase Raw Land Block
    • Sell or Transfer a Raw Land Block
    • Sell or Transfer an Estate
    • Allowing Others to Build on your Land
  • 🏡Staking
    • Material Campaign
    • Stake NEER
      • Unstake NEER
    • Estate Staking
      • Estate Unstaking
    • Claim BIT Staking Rewards
  • 🌏Metaverse Owner
    • Creating a Metaverse
      • Naming Your Metaverse
      • Enable Activation Passes
      • Add a Social Link to a Metaverse
      • Set a Metaverse Listing Fee
      • Deploy a Raw Land Block into the Metaverse
  • 🎁Immersive Quest System
    • Getting Started
    • How to Create a Quest
    • Types of Tasks on BitCountry Quest System
      • Action Tasks Setup
      • Social Tasks Setup
      • Learning Tasks Setup
      • Virtual World Tasks Setup
      • On Chain Tasks Setup
      • Real-World Tasks Setup
    • Task Conditioning
    • Creation and Customization of a 2D Metaverse
    • Creation of immersive world with layered depth.
    • Creation of immersive world with collider.
  • 👨Human Score
    • BitCountry Humanity Score
  • 🤣Meme Maker
    • Creating Memes with the Meme Maker
  • 🎭NFTs
    • What is an NFT?
      • Craft an Activation Pass?
      • Craft a Wearable
      • Mint an NFT Collection
    • NFT Marketplace
      • Authorize a Collection for Sale on Your Own Metaverse Marketplace
      • Authorize Other Users' NFT Collections on Your Metaverse Marketplace
      • Request Permission to List a Collection for Sale on Another Metaverse Marketplace
      • List an NFT for Sale on a Marketplace
      • Transfer an NFT to Another Wallet
      • Selling an NFT Bundle
      • Create an NFT bundle
      • Anti-snipe Auction Feature
  • 🛠️Building
    • Building in the Metaverse
      • How to Create a New Voxel Texture
      • How to Place and Remove Props in a Metaverse
      • How to Place and Remove NFTs in a Metaverse
      • How to Activate Multiplayer in a Metaverse
    • Asset Creation
      • 3D Models - Props & NFTs
      • 3D Models - Colliders
      • 3D Models - Analyzer
      • Optimizing 3D Model Geometry
      • Graphics Settings
      • How to create a mesh that appears to be multiple separate parts & skeletal animation.
    • The Bunker
      • Access to the Bunker
      • Activate Multiplayer in the Bunker
    • The Sandpit
  • 🌆Kaosland Guide
    • Welcome to Kaosland
    • Creating an Estate and Uploading Thumbnail
    • Building on Your Land in Kaosland
    • Odyssey Exclusive NFT Key Troubleshoot
    • What will Kaosland look like?
    • Kaosland FAQ
    • Land Claiming
  • ⚖️Governance
    • Creating a Proposal
    • Voting in a Proposal
    • Voting on a Referendum
  • 👑Additional Features
  • 🖥️Developers
    • Pioneer Network Fee Setup
    • Experience Framework API
  • 🤩Bit.Country Space
    • What is a Space
    • Quick Start Guide
    • How to Host a Livestream
    • How to Access the BC Space
    • How to Join a Meeting
    • How to Lock/Unlock a Meeting
    • How to Allow others to Speak during Livestream
    • How to activate Video Mode Only
    • How to Edit your Space
    • Animating an AI-Generated Image for your 2.5D BC Space
    • How to use Survey Questions in Space
    • How to End Meeting for Everyone
    • Exploring the features of your Bit.Country Space
    • New Reward System for Space Engagement
    • Picture-in-Picture Support for Screen Sharing
    • Space Settings
    • NFT Gate your BC Space
    • Questionnaires & Surveys
    • NPC Greetings
    • Integrating BC Spaces with Calendly
    • Troubleshooting
  • 🚀Continuum TGE FAQs
    • Airdrop FAQ
    • Odyssey Participants Rewards
    • How to see my NUUM Balance
Powered by GitBook
On this page
  • Generating and Preparing the Image
  • Animating in Premiere Pro
  • Exporting and Finalizing
  • Uploading to BC Space
  1. Bit.Country Space

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).

PreviousHow to Edit your SpaceNextHow to use Survey Questions in Space

Last updated 1 year ago

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!

🤩