I have been working on getting art and animations ready for the new WOO Jobbers packs and I thought it was a pretty interesting workflow and I wanted to walk through it with you. I discovered a lot of new stuff while going through this and I figured it was about time to write it down, so here we go!
Ok, so I wanted to get us closer to Beta sale but I wanted something that could give players without a lot of money a way to enter just by spending their time playing the game. I always wanted to introduce "Freelance Wrestlers" in the game and I finally decided to pull the trigger on WOOJOBBER as the pack token. I already had some ideas for characters which we already had the artwork done.
Just be warned. I am going to heavily use AI in this workflow and I'll explain why.
I have a subscription for ChatGPT so I started feeding it character descriptions I already made up for previous characters. I then had it give me a list of characters and descriptions for the art team. While I waited for the art team I figured I would have the AI make placeholder art to speed up testing with the devs.
ChatGPT did a great job punching those out and remembered the character design so I could get front and side view very quickly. We used these images to quickly create the NFT cards and get the pack registered through the PackManager contract. So, from the token side we now have everything done and it can mint NFTs. I also used AI to copy the style of our old pack tokens and create the new image.
And I won't go deep into token creation and all that, but now that the token is complete I'm good to start testing with the Devs. We got them opening quickly on the site and now we just needed to handle implementing the new artwork and animation. This is where the fun really began. We first started with the AI created art to put it in the selection screen. This worked fine for now, and luckily the art team got us the real art quickly.
After I was provided the finalized I now had to figure out how to animate it. I did some research to figure out what I needed to do with the Adobe tools I had to make it work. From what I say it was going to be difficult to do even basic movements. I ended up doing a YouTube search and came across this AI system called Domo AI https://www.domoai.app/. It was pretty easy to upload an image and describe what I wanted to add some movement.
I figured out quickly that I had to add a green or blue screen to the image or else it would give me a black background, which can be a pain to remove. So, I had to take all the PSD files my artist gave me and add a solid color layer to the image.
Once I have it exported as a PNG I can then upload it to the AI and describe what I want and let it do it's thing. The cost for this AI system was $9.99 cents for 500 credits. It costs 7 credits per animation. Which gives me just over 71 total animations I can make. That is a total cost of 14 cents per animation. This is way less than the $15 per animation I paid previously for Alpha animations.
Well, let's keep moving on cause there is more that I find out during this workflow. Anyway, I was trying to do the animated GIFs from Adobe Premiere Pro 2025 when the AI gave me the video file. It is the editing software I am most familiar with, so I took the image, keyed out the color with the Ultra Key effect. This gave me a transparent background like I wanted, but when I rendered the GIF is ended up being 60+ megs. That just wasn't going to work.
I then tried resizing and compressing but the quality suffered a ton. I tried going back to PNG and resizing it there and that helped a bit, but it wasn't until I figured out the perfect workflow.
Ok, since this is kinda round about in a sense there aren't great tutorials to explain this, so I had to tough this one out myself to get it right. I'll do one of the images now to animation and keep time to show you how it is done.
I start the process by opening Photoshop 2025 and create a new project. I choose the preset I created which has the Image size I want.
Once I have that created I then need to drag in the Photoshop file my art team provided me with.
As you can see I need to do some scaling to get it to fill the most of the frame. I basically want as little empty space as possible.
Once I have it sized correctly I then need to go into the image's Smart Image settings and remove the shadow. I will in the future have my artist have it toggled off to save me this step. I could also ask them to have a solid Blue or Green behind to make it that much faster too, but it's what I have to do right now.
Once I have the background color there and the shadow removed, now I just export the PNG file and maintain good folder management.
Now, I head over to the AI and upload the image. It doesn't take long to upload since the file is small.
I just have to type a prompt (or copy one that worked previously which I did), and choose looping animation and click generate.
This may take a few minutes. To be honest this was probably the longest single thing in terms of the number of minutes I spent on this. But you can get the After Effects composition settings started as you wait.
Head over to After Effects and create a new composition and I'm using 480p as the resolution for this and 12 frames per second. This will reduce frames in the PNG sequence I export, which will reduce file size.
Make sure to preview the video it generated to make sure it's what you want and the image doesn't leave the frame at all. Once it's good then download it. The file size is only a meg or 2 so it's very small already.
Drag the video onto the composition, which is far too big. It uses 720p as the resolution for the video, so you will have to scale down to about 37-38%
You now want to go into your effects and choose Key Light, which is under the keying menu of effects, and click the eyedrop and choose the green you want to remove.
Now, you can move onto the render. What you will want to do is make sure you have PNG sequence as the format, make sure RGB+Alpha is selected cause you need it to be transparent. Render and make sure you have "Create subfolder" checked.
Now, go back to Photoshop and choose the first image of the sequence. Make sure to check the "Image Sequence" box and open. Choose the frame rate.
It should now look something like this. We are in a good spot now. All you have to do is click File and then find Export, and Save for Web or Alt+Shift+Ctrl+S
You can now further reduce file size by changing how many colors, or reducing the dither %, or increasing Lossy. I found it best to just use full color and not changing any of those other settings. But, be aware you need to check and make sure that Matte says none there.
If matte says "White" or "Black" or anything then you will have issues. Make sure it is "None" so then it is truly transparent.
The render is now complete and it's just about 2.5 Megs, which is manageable.
I was able to get this done in about 10 minutes. If we break down the total cost to me for this I would assume I'm doing 71 animations.
| Subscription/Service | Cost | Cost per animation |
|---|---|---|
| ChatGPT | $20 | $0.28 |
| Adobe | $20 | $0.28 |
| Domo AI | $9.99 | $0.14 |
| WOO Art | $5 | $5 |
So for a total cost of $5.70 and 10 minutes of my time per animation. I am saving huge compared to the previous workflow. Previously it cost me $20 per animation. Even if I consider my time worth $250 for a 12 hour day that gives me roughly 35 cents a min with 10 min of work per animation that's still a total cost of $9.20 and I'm still saving versus previous workflow.
Either way I'm 1.5x to 3.5x cheaper than what it was previously. I know this could even be further reduced if I went full AI with even the artwork. At that point I would be paying only 70 cents per animation. The price would actually get further reduced since ChatGPT could give me both front facing and side view poses.
It's not really about reducing all work and cost by using AI, but this is mostly about something I found interesting. It took me a bit to figure out a workflow that gave me the GIF files I needed with the correct size I needed. This post is mostly about problem solving and using tools at your disposal to get things done. I mean, you could literally get something up and running on Hive with very little cost. I mean, after taking into account the cost for the PackManager contract which is like 1200 BEE (Under $67 USD) or so. You could pay for that and the AI subscriptions for under $125 and to be honest you could be up and running with just you and that.
So, get out there and make something. I don't care what it is, but we need more things on Hive. No matter what it is. You don't need insane funding to get something going. Heck, most of you could get this going with just curation rewards. Anyway, I'm done rambling. I have work to finish!
