Creating animated 2d character GIFs with arty

I just integrated a neat new Pixel art sprite sheet generator into the stable-diffusion-discord-bot I call Arty .

<p dir="auto">For more info see <a href="https://peakd.com/@ausbitbank/our-new-stable-diffusion-discord-bot" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Artys introduction post <p dir="auto">Here's a quick tutorial on how to use it to make your own 2d animated characters. <h3>First, Generate the sprite sheet <p dir="auto">Join <a href="https://discord.gg/DSdK9KRJxq" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">my discord server, and come to the artspam channel if you haven't yet. <p dir="auto">The first step will probably take the longest, depending on how specific your desired subject is it can take some prompt tweaking and generating a few variations to get something you're happy with. <p dir="auto">The bot command to use the spritesheet generator is<br /> <code>!dream SUBJECTHERE PixelartRSS --model pixel-sprites <p dir="auto">Swap out <code>SUBJECTHERE for your specific idea, eg <code>anonymous guy fawkes hoodie <p dir="auto">The <code>PixelartRSS is a special keyword that generates sprites walking to the right, you can also swap RSS for LSS/FSS/BSS for left/front/back side sprites. <p dir="auto"><br /> <code>!dream anonymous guy fawkes hoodie PixelartRSS --model pixel-sprites<span>So for my example I typed this into the <a href="/trending/artspam"> #artspam chat room: <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vsBdSAkhGvnHvTYxEj9YeoPAsC2z9zDJpoXQwUVm56A8W7Aa3RyUnN4wiv7PDab15ki.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vsBdSAkhGvnHvTYxEj9YeoPAsC2z9zDJpoXQwUVm56A8W7Aa3RyUnN4wiv7PDab15ki.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vsBdSAkhGvnHvTYxEj9YeoPAsC2z9zDJpoXQwUVm56A8W7Aa3RyUnN4wiv7PDab15ki.png 2x" /> <h3>Second, remove the background <p dir="auto">For this, we can use the bot again. Simply <strong>reply to the render result you want with <code>background and it will <a href="https://github.com/danielgatis/rembg/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">automagically detect the background and reply with a transparent .png image. <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRzSzmPP9g857NMrxoVjcvTHiYwTb3xnGCW6K8QFFrijLr3EQcqnPw5fG5RZGyNVGkT.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRzSzmPP9g857NMrxoVjcvTHiYwTb3xnGCW6K8QFFrijLr3EQcqnPw5fG5RZGyNVGkT.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRzSzmPP9g857NMrxoVjcvTHiYwTb3xnGCW6K8QFFrijLr3EQcqnPw5fG5RZGyNVGkT.png 2x" /> <p dir="auto">This background-removal tool works with almost any image, and can also be triggered by sending a non-reply message in the channel with just <code>!background and attaching the image to the message <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vhoR3GmNGM7svaXfhQ7BxMnGzo8L7wuxnUQorv73vHZpBent9LT8afoZgEE8XSngrgc.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vhoR3GmNGM7svaXfhQ7BxMnGzo8L7wuxnUQorv73vHZpBent9LT8afoZgEE8XSngrgc.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23vhoR3GmNGM7svaXfhQ7BxMnGzo8L7wuxnUQorv73vHZpBent9LT8afoZgEE8XSngrgc.png 2x" /> <h3>Third, slice up the sprite sheet into individual frames <p dir="auto">The easiest tool I've found for this so far is at <a href="https://ezgif.com/sprite-cutter" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">ezgif.com/sprite-cutter<br /> Click your new image with the freshly removed background, then click "open original" to get the full address of the image. Copy it to clipboard <p dir="auto">Go to <a href="https://ezgif.com/sprite-cutter" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">ezgif.com/sprite-cutter and paste your image address into the image URL box and click Upload <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKEGuW1pCzxVJjBFrWjoVHhqYukHk1cMZgivahN5yJTqp9tnAqHXRj1MQSRwXXPVJA.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKEGuW1pCzxVJjBFrWjoVHhqYukHk1cMZgivahN5yJTqp9tnAqHXRj1MQSRwXXPVJA.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKEGuW1pCzxVJjBFrWjoVHhqYukHk1cMZgivahN5yJTqp9tnAqHXRj1MQSRwXXPVJA.png 2x" /> <p dir="auto">On the next screen,tick the box under <strong>"cutting method" marked <strong>"by number of columns/rows ", set it to <strong>4 columns, <strong>1 row with an <strong>output format of GIF , then hit the CUT button <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/EoAYMb3ypQ6jJvNgrXCPbUrxk1d4kjPewAk9o8X8twnVk4pD6T8DQhHSgeUQ7CjPriQ.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/EoAYMb3ypQ6jJvNgrXCPbUrxk1d4kjPewAk9o8X8twnVk4pD6T8DQhHSgeUQ7CjPriQ.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/EoAYMb3ypQ6jJvNgrXCPbUrxk1d4kjPewAk9o8X8twnVk4pD6T8DQhHSgeUQ7CjPriQ.png 2x" /> <h3>Fourth, create the gif <p dir="auto">The previous step will spit out the 4 individual images, at this stage you could download the frames as ZIP for later use in other tools. <p dir="auto">For the tutorial we want to click <strong>"Create GIF animation" <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRxWjJwRYoqdBd93XDcyARGQ1wiZ2x8mwkroYnSXf16psEp7UQKyizwHNUuNosiT3v8.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRxWjJwRYoqdBd93XDcyARGQ1wiZ2x8mwkroYnSXf16psEp7UQKyizwHNUuNosiT3v8.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tRxWjJwRYoqdBd93XDcyARGQ1wiZ2x8mwkroYnSXf16psEp7UQKyizwHNUuNosiT3v8.png 2x" /> <p dir="auto">..bringing you to this screen where I edit the <strong>"delay time" to 10 , and tick the <strong>"don't stack frames" box before clicking <strong>"Make a GIF" <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGaDSoPQDN5tHApZZQWNtzWkufqNc5jEzarbhEwGgUGK17kL82DQfqxWPn2uQwQi2XV.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGaDSoPQDN5tHApZZQWNtzWkufqNc5jEzarbhEwGgUGK17kL82DQfqxWPn2uQwQi2XV.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGaDSoPQDN5tHApZZQWNtzWkufqNc5jEzarbhEwGgUGK17kL82DQfqxWPn2uQwQi2XV.png 2x" /> <p dir="auto">The next screen looks like this, at this point I click the left <strong>"crop" button <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGZbsgJ4M9kJf33ULzmMPih9V2avvsVEUW9a4J4kbZXkzmVSsbxfYHJZpjFiKvK14Wh.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGZbsgJ4M9kJf33ULzmMPih9V2avvsVEUW9a4J4kbZXkzmVSsbxfYHJZpjFiKvK14Wh.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGZbsgJ4M9kJf33ULzmMPih9V2avvsVEUW9a4J4kbZXkzmVSsbxfYHJZpjFiKvK14Wh.png 2x" /> <p dir="auto">Bringing you to this screen where I just drag a box around the character to get rid of that excess height, then click <strong>"Crop image!" <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKBJh8ur6tRwY4cLBXBt7fMTT3cdjogvQP21JHZReYAervjWkfxjNDv28RJkHX3xET.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKBJh8ur6tRwY4cLBXBt7fMTT3cdjogvQP21JHZReYAervjWkfxjNDv28RJkHX3xET.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tbKBJh8ur6tRwY4cLBXBt7fMTT3cdjogvQP21JHZReYAervjWkfxjNDv28RJkHX3xET.png 2x" /> <p dir="auto">Once cropped we see this screen, and you just click the 💾 <strong>"save" button on the far right to download your final result <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGbnfEfuM1oDaujmEZYhNbjvWNYVBcWdSLMJv7ZQTAfSB8jVryrmihNSWyHQqTjCr22.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGbnfEfuM1oDaujmEZYhNbjvWNYVBcWdSLMJv7ZQTAfSB8jVryrmihNSWyHQqTjCr22.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/ausbitbank/23tGbnfEfuM1oDaujmEZYhNbjvWNYVBcWdSLMJv7ZQTAfSB8jVryrmihNSWyHQqTjCr22.png 2x" /> <p dir="auto">That's it! Here's the animated gif I ended up with after this process. It takes <strong>less then a minute after some practice <p dir="auto"><img src="https://images.hive.blog/0x0/https://files.peakd.com/file/peakd-hive/ausbitbank/AJebMy4BvzrRHxMU183HpmGGychkpvJh2MuL6A3TvRSDjH2okw3g3TCkomznDwq.gif" alt="ezgif.com-gif-maker(6).gif" /> <h3>Conclusion <p dir="auto">This sprite sheet model is a lot harder to customise then the other models installed in arty so far. If you want a very specific result it's going to take some tweaking. <p dir="auto">For advanced users chasing extremely specific niche subjects I think you would get the best results by merging <a href="https://huggingface.co/Onodofthenorth/SD_PixelArt_SpriteSheet_Generator" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this model with your own custom model trained on photos of your subject. <p dir="auto">It's still far from perfect, but I thought this was too cool not to share! <p dir="auto">I'll keep playing around with this and hopefully one day arty will be able to do all of the above in a single command :) <p dir="auto">I hope someone finds this useful, I'll try to find time to write some more tutorial posts about all of the other cool features I've added recently <hr /><span> This post sends 10% rewards to <a href="/@hive.fund">@hive.fund , 90% to the <a href="/@ausbit.dev">@ausbit.dev arty GPU upgrade fund