hi! i enjoy ur graphics a lot and was wondering how you make your animated userbars ? i think theyre so amazingness…
ooh I’ve been waiting to explain this!!!
Stuffs you will need : Procreate/Ibis Paint (I will be using Procreate for this one) : CapCut : Transparent PNG of your character : PNG Text (explained) : Image to use as background : Userbar base included below cut
There will be bits from Ivyvinezz’s tutorial and prumano’s tutorial, so if you felt like I didn’t explain things well (I probably didn’t..,) check theirs out!!!
1st, make your canvas 1138 (W) x 60 (H) pixels in either Procreate or Ibis (it should similar to the image below) The way I do it, you’ll only need this base to make sure the text is right. For characters I usually do voice lines/iconic quotes unless the request specified the text! I use the font Visitor TT1 (BRK) at 26.5 size .
2. Go to CapCut and do “+ New Video” and import the base at the beginning of this tut
3. Scroll to the very back on the thing at the bottom of the CapCut screen until you see something titled “background”
4. Press “image” and then choose to your liking. You can also import images
5. Go to Overlays
6. Choose your transparent PNG & text from step 1 (or use Capcuts built in text, but I’ve heard it’s uncomfortable to use) and follow the steps below!
To make these, ( because tumblr broke everytime I tried to add a video :/ ) press the little diamond W/ the plus on it at specific points. The first and the third should be the same, and I typically do it around the midsection of the overlay. The second should be the headshot. These points will make the png animated!
For the text, I keep it static but if you want to experiment absolutely do it!!
7. I always export it as video because I just don’t trust CapCuts gif setting, and porting it into Ezgif’s Video to Gif looks better! <3
Example:
CapCut gif export
CapCut video export > Ezgif > Video To Gif
And that’s done! If you want to experiment at all with making userbars I highly recommend it, or find a different way to make web graphics, that’s absolutely encouraged!!
