Gif making guide - Revision history

Mya at 11:36, 18 July 2025

2025-07-18T11:36:53Z

← Older revision		Revision as of 07:36, 18 July 2025
Line 235:		Line 235:
	* Match the color palette of your background and effects to your Character's vibe.		* Match the color palette of your background and effects to your Character's vibe.
	* Keep experimenting, you can save different versions to compare later.		* Keep experimenting, you can save different versions to compare later.

			=== Hope this little tutorial helped you with your GIF creation! ♥ ===

Mya at 11:28, 18 July 2025

2025-07-18T11:28:37Z

← Older revision		Revision as of 07:28, 18 July 2025
Line 60:		Line 60:
	'''➛ Animate Your Character / Avatar'''		'''➛ Animate Your Character / Avatar'''

	If your bot is based on an original character design, you can go further and animate the character itself, ~~blinking eyes~~, ~~breathing, expression changes, etc.~~		If your bot is based on an original character design, you can go further and animate the character Avatar itself (changing backgrounds, adding visual effects, and more)

	== '''Animate a Dialogue Line GIF \| Step by Step on Canva''' ==		== '''Animate a Dialogue Line GIF \| Step by Step on Canva''' ==

Mya at 11:25, 18 July 2025

2025-07-18T11:25:26Z

Show changes

Mya at 10:44, 18 July 2025

2025-07-18T10:44:21Z

Mya at 10:34, 18 July 2025

2025-07-18T10:34:14Z

Show changes

Mya at 10:20, 18 July 2025

2025-07-18T10:20:07Z

Mya at 10:18, 18 July 2025

2025-07-18T10:18:34Z

← Older revision		Revision as of 06:18, 18 July 2025
Line 139:		Line 139:

	# '''Duplicate the full image again''' and this time cut out the '''torso'''.		# '''Duplicate the full image again''' and this time cut out the '''torso'''.
	# Do it one last time to isolate the '''legs'''. ''(Example with mine bellow)''~~[[File:Wanna learn how to make a gif (2).png\|left\|frameless\|304x304px]][[File:"Wanna learn how to make a gif".png\|center\|frameless\|266x266px]]~~		# Do it one last time to isolate the '''legs'''. ''(Example with mine bellow)''
	# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers.		# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers.

			''Example with mine :''
			[[File:STEP BY STEP3.png\|center\|frameless\|600x600px]]
	💡 '''Tip:''' You can go even further by isolating hands, hair, accessories, etc. The more separate elements you animate, the more "alive" your pixel art will feel!		💡 '''Tip:''' You can go even further by isolating hands, hair, accessories, etc. The more separate elements you animate, the more "alive" your pixel art will feel!

	=== Step 3 - Animate Your Pixel Character ===		=== Step 3 - Animate Your Pixel Character ===
	Now it's time to bring your character to life:		Now it's time to bring your character to life:

Mya at 10:14, 18 July 2025

2025-07-18T10:14:02Z

← Older revision		Revision as of 06:14, 18 July 2025
Line 102:		Line 102:
	Time to bring it all to life		Time to bring it all to life

	# Keep the phone background completely static, no animation needed there.		# Keep the phone background completely static, no animation needed there
	# Select your grouped message bubble.		# Select your grouped message bubble.
	# Click '''"Animate"''' in the top toolbar.		# Click '''"Animate"''' in the top toolbar.
Line 136:		Line 136:
	To create movement, you'll need to split your character into parts:		To create movement, you'll need to split your character into parts:

	# '''Duplicate your character image''' Click "Background Remover" (or manually erase) and isolate just the '''head'''. 💡 A drawing tablet makes this easier, but it's also doable with a mouse, just takes more patience!		# '''Duplicate your character image''' Click "Background Remover" (or manually erase) and isolate just the '''head'''. (A drawing tablet makes this easier, but it's also doable with a mouse, just takes more patience!)

	# '''Duplicate the full image again''' and this time cut out the '''torso'''.		# '''Duplicate the full image again''' and this time cut out the '''torso'''.
	# Do it one last time to isolate the '''legs'''.		# Do it one last time to isolate the '''legs'''. ''(Example with mine bellow)''[[File:Wanna learn how to make a gif (2).png\|left\|frameless\|304x304px]][[File:"Wanna learn how to make a gif".png\|center\|frameless\|266x266px]]
	# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers.		# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers.

Mya at 10:05, 18 July 2025

2025-07-18T10:05:39Z

← Older revision		Revision as of 06:05, 18 July 2025
Line 95:		Line 95:
	* Page 2: Add the first + second message		* Page 2: Add the first + second message
	* Page 3: Add the first + second + third, and so on		* Page 3: Add the first + second + third, and so on
			''How it should look:''
			[[File:StepbyStepgif.png\|center\|frameless\|396x396px]]
	'''💡''' Adjust the timestamps slightly for each new message, it adds a nice touch of realism.		'''💡''' Adjust the timestamps slightly for each new message, it adds a nice touch of realism.

Line 102:		Line 104:
	# Keep the phone background completely static, no animation needed there.		# Keep the phone background completely static, no animation needed there.
	# Select your grouped message bubble.		# Select your grouped message bubble.
	# Click '''"Animate"''' in the top toolbar. ~~[image]~~		# Click '''"Animate"''' in the top toolbar.
	# Browse the available effects. I used '''"Rise"''' with a medium speed, set to appear ''on entry''		# Browse the available effects. I used '''"Rise"''' with a medium speed, set to appear ''on entry''
	# Pick the animation that fits your vibe.		# Pick the animation that fits your vibe.
Line 112:		Line 114:
	=== Step 5 - Export Your GIF ===		=== Step 5 - Export Your GIF ===

	# Click "Share" in the top right. ~~'''''[image]'''''~~		# Click "Share" in the top right.
	# Select "Download".		# Select "Download".
	# Choose GIF format.		# Choose GIF format.
	# Pick your preferred size		# Pick your preferred size
	# Download your animated phone conv! ~~'''''~~[~~image~~]~~'''''~~		# Download your animated phone conv!
			[[File:Stepbstep.png\|center\|frameless\|439x439px]]
	----And that's it! Export it as a GIF or video, and you've got a unique little scene that gives life to your character.		----And that's it! Export it as a GIF or video, and you've got a unique little scene that gives life to your character.

Mya at 09:51, 18 July 2025

2025-07-18T09:51:53Z

← Older revision		Revision as of 05:51, 18 July 2025
Line 57:		Line 57:
	You can create a moving chibi version of your character (either by drawing it yourself if you're an artist, or by using an image generator like Niji, MidJourney, or any tool that can make this kind of image)		You can create a moving chibi version of your character (either by drawing it yourself if you're an artist, or by using an image generator like Niji, MidJourney, or any tool that can make this kind of image)

	'''On the bot PP:'''		==== '''On the bot PP:''' ====
			'''➛ Animate Your Character / Avatar'''
	~~'''➛ Showcase your OC's Power / Abilities'''~~

	~~Add effects like fire, glitches, sparkles, aura pulses, or magical glows to show off your bot’s vibe, energy, or whatever~~

	'''➛ Animate Your OC / Avatar'~~'' ''(Advanced)~~''

	If your bot is based on an original character design, you can go further and animate the character itself, blinking eyes, breathing, expression changes, etc.		If your bot is based on an original character design, you can go further and animate the character itself, blinking eyes, breathing, expression changes, etc.

	~~'''Note''': This often requires more advanced tools and isn’t doable on Canva.~~

	== '''Animate a Dialogue Line GIF \| Step by Step on Canva''' ==		== '''Animate a Dialogue Line GIF \| Step by Step on Canva''' ==
Line 77:		Line 70:

	=== Step 1 - Choose the Right Template ===		=== Step 1 - Choose the Right Template ===
	On Canva, you'll find tons of templates similar to the one I used in the GIF. Just search for "phone" in the template library and pick one that fits your style.		On Canva, you'll find tons of templates similar to the one I used in the GIF. Just search for "''phone''" in the template library and pick one that fits your style.

	Mine uses a premium (VIP) template, but you can easily recreate the same effect with a free version.		Mine (previous example) uses a premium (VIP) template, but you can easily recreate the same effect with a free version.

	# Pick the phone template you like.		# Pick the phone template you like.
Line 102:		Line 95:
	* Page 2: Add the first + second message		* Page 2: Add the first + second message
	* Page 3: Add the first + second + third, and so on		* Page 3: Add the first + second + third, and so on

	'''💡''' Adjust the timestamps slightly for each new message, it adds a nice touch of realism.		'''💡''' Adjust the timestamps slightly for each new message, it adds a nice touch of realism.

← Older revision		Revision as of 06:44, 18 July 2025
Line 103:		Line 103:

	# Keep the phone background completely static, no animation needed there		# Keep the phone background completely static, no animation needed there
	# Select your grouped message bubble.		# Select your grouped message bubble
	# Click '''"Animate"''' in the top toolbar.		# Click '''"Animate"''' in the top toolbar
	# I used '''"Rise"''' with a medium speed, set to appear ''on entry,'' ~~but donc hesitate to search~~ and ~~choose your own fav.~~		# I used '''"Rise"''' with a medium speed, set to appear ''on entry''
			# For each new page, '''ungroup''' the older messages and '''remove their animations! O'''nly the ''new'' message should move!

	'''💡''' Make sure your SMS elements are grouped so they animate together.		'''💡''' Make sure your SMS moving elements are grouped so they animate together

	~~For each new page, '''ungroup''' the older messages and '''remove their animations,''' only the ''new'' message should move.~~

	=== Step 5 - DL Your GIF ===		=== Step 5 - DL Your GIF ===
Line 122:		Line 121:

	== '''Animate Your Pixel Art Character''' '''''\| Step by Step on Canva''''' ==		== '''Animate Your Pixel Art Character''' '''''\| Step by Step on Canva''''' ==
	'''Here's an example of a simple animated GIF you can create for your ~~character or~~ pixel art using Canva:''' https://files.catbox.moe/wzhio6.gif		'''Here's an example of a simple animated GIF you can create for your pixel art character using Canva:''' https://files.catbox.moe/wzhio6.gif

	''Note'': Canva's animation tools are ~~pretty basic -~~ you can ~~definitely~~ get better results using other platforms or software, but for something quick and simple, it'll works just fine!		''Note'': Canva's animation tools are ''definitely'' not the best, you can get much better results using other platforms or software dedicated to animation, but for something quick and simple it'll works just fine!

	=== Step 1 - Prepare Your Art ===		=== Step 1 - Prepare Your Art ===
	Before starting the animation, you'll need:		Before starting the animation you'll need:

	* Your character's '''pixel art with a transparent background''' (drawn by you, edited in ~~Photoshop,~~ or generated with tools like MidJourney, NijiJourney, etc.)		* Your character's '''pixel art with a transparent background''' (drawn by you, edited in photoshop or generated with tools like MidJourney, NijiJourney, etc.)
	* '''Optional:''' Decorative elements like stars, flames, sparkles, floating symbols, magical effects, etc.		* '''Optional:''' Decorative elements like stars, flames, sparkles, floating symbols, magical effects, etc.

	=== Step 2 - Separate your character's body parts ===		=== Step 2 - Separate your character's body parts ===
	To create movement, you'll need to split your character into parts:		To create movement you'll need to split your character into parts:

	# '''Duplicate your character image''' ~~Click~~ "Background Remover" (or manually erase) and isolate just the '''head'''. (A drawing tablet makes this so much easier, but, oh, well, it's also doable with a mouse, just takes a lot more patience ~~ehe~~)		# '''Duplicate your character image, c'''lick "Background Remover" (or manually erase) and isolate just the '''head'''. (A drawing tablet makes this so much easier, but, oh well, it's also doable with a mouse, just takes a lot more patience lol)

	# '''Duplicate the full image again''' and this time cut out the '''torso'''.		# '''Duplicate the full image again''' and this time cut out the '''torso'''.
	# Do it one last time to isolate the '''legs'''		# Do it one last time to isolate the '''legs'''
	# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers.		# Once all parts are ready, head to a '''new page''' in Canva and reassemble your character using the separated layers

	''Example with mine :''		''Example with mine :''
	[[File:STEP BY STEP3.png\|center\|frameless\|600x600px]]		[[File:STEP BY STEP3.png\|center\|frameless\|600x600px]]
	💡 '''Tip:''' You can go even further by isolating hands, hair, accessories, etc. The more separate elements you animate, the more "alive" your pixel art will feel!		💡 '''Tip:''' You can go even further by isolating hands, hair, accessories etc. The more separate elements you animate, the more "''alive''" your pixel art will feel!
	=== Step 3 - Animate Your Pixel Character ===		=== Step 3 - Animate Your Pixel Character ===
	Now it's time to bring your ~~character~~ to life:		Now it's time to bring your char to life:

	* Click on the '''head''' layer.		* Click on the '''head''' layer
	* Choose '''"Create an Animation"''' instead of using Canva's default effects (they're too clunky for pixel art)		* Choose '''"Create an Animation"''' instead of using Canva's default effects (they're too clunky for pixel art)
	* Create a simple '''"idle" motion''', like a small bounce or float~~. Set~~ the speed to your liking.		* Create a simple '''"idle" motion''', like a small bounce or float and set the speed to your liking

	Repeat the same for the '''torso''' and '''legs''', making sure everything stays aligned and doesn't drift apart when animated.		Repeat the same for the '''torso''' and '''legs''', making sure everything stays aligned and doesn't drift apart when animated.
Line 167:		Line 166:

	* Select your '''page''', and set the duration of the loop (e.g. 2-3 seconds).		* Select your '''page''', and set the duration of the loop (e.g. 2-3 seconds).
	* Use the '''Play''' button to preview how ~~the sequence~~ flows.		* Use the '''Play''' button to preview how it flows

	=== Step 6 - DL Your GIF ===		=== Step 6 - DL Your GIF ===
Line 173:		Line 172:
	* Click '''"Share"''' in the top right corner.		* Click '''"Share"''' in the top right corner.
	* Choose '''"Download"''', then select the '''GIF''' format.		* Choose '''"Download"''', then select the '''GIF''' format.
	* Make sure to check '''"Transparent Background"''' if you want it without a ~~solid~~ backdrop.		* Make sure to check '''"Transparent Background"''' (if you want it without a the backdrop ofc)
	* Download your final animation!		* Download your final animation!

Line 190:		Line 189:
	=== '''Step 2 - Build Your Composition''' ===		=== '''Step 2 - Build Your Composition''' ===
	'''Once you have your images, it's time to let your creativity run wild'''		'''Once you have your images, it's time to let your creativity run wild'''

	~~'''On Canva, you've got access to tons of vectors, icons, illustrations, effects etc'''~~

	# Open Canva and select the format of your background (e.g 1080x1080)		# Open Canva and select the format of your background (e.g 1080x1080)
	# Import your background and center it on your canvas.		# Import your background and center it on your canvas.
	# Add your Character, resize and position them		# Add your Character, resize and position them
	# Optional: ~~Decorate~~ with visual effects, stars, smoke, runes, or anything else that fits your character's personality.		# Optional: '''On Canva, you've got access to tons of vectors, icons, illustrations, effects etc. Don't hesitate to d'''ecorate with visual effects, stars, smoke, runes, or anything else that fits your character's personality

	'''💡 ''Use Canva's layers panel to stay organized if you're using many elements'''''		'''💡 ''Use Canva's layers panel to stay organized if you're using many elements'''''

	=== Step 3 - Animate Your Scene ===		=== Step 3 - Animate Your Scene ===
	~~'''Now comes the fun part: Animation! Canva makes it super intuitive and simple'''~~

	==== Animate the Background ====		==== Animate the Background ====

Line 208:		Line 203:
	# Click "Animate" in the top toolbar		# Click "Animate" in the top toolbar
	# Browse the effects and choose one (e.g: ''Zoom'', ''Pan'', ''Drift'')		# Browse the effects and choose one (e.g: ''Zoom'', ''Pan'', ''Drift'')
	# Try them and pick the one you like best, on mine, I used "Zoom" and lowered the intensity a bit		# Try them and pick the one you like best, on mine (https://files.catbox.moe/jqolei.gif) I used "Zoom" and lowered the intensity a bit

	==== Animate Your Character ====		==== Animate Your Character ====
Line 214:		Line 209:
	# Click on your character.		# Click on your character.
	# Choose an animation. Try using a slightly different one from the background (ex: ''Zoom In'' vs ''Zoom Out'')		# Choose an animation. Try using a slightly different one from the background (ex: ''Zoom In'' vs ''Zoom Out'')
	# Adjust the speed and direction if needed for contrast ~~and~~ balance.		# Adjust the speed and direction if needed for contrast/balance.

	==== Animate Decorative Elements ====		==== Animate Decorative Elements ====

← Older revision		Revision as of 06:20, 18 July 2025
Line 197:		Line 197:
	'''On Canva, you've got access to tons of vectors, icons, illustrations, effects etc'''		'''On Canva, you've got access to tons of vectors, icons, illustrations, effects etc'''

	# Open Canva and select the format of your background (e.g 1080x1080 or whatever) ~~''[image]''~~		# Open Canva and select the format of your background (e.g 1080x1080 or whatever)
	# Import your background and center it on your canvas.		# Import your background and center it on your canvas.
	# Add your Character, resize and position them as needed. ~~''[image]''~~		# Add your Character, resize and position them as needed.
	# Optional: Decorate with visual effects, stars, smoke, runes, or anything else that fits your character's personality.		# Optional: Decorate with visual effects, stars, smoke, runes, or anything else that fits your character's personality.

Line 210:		Line 210:

	# Select your background.		# Select your background.
	# Click "Animate" in the top toolbar ~~'''''[image]'''''~~		# Click "Animate" in the top toolbar
	# Browse the effects and choose one (ex: ''Zoom'', ''Pan'', ''Drift'')		# Browse the effects and choose one (ex: ''Zoom'', ''Pan'', ''Drift'')
	# Try them and pick the one you like best, on mine, I used "Zoom" and lowered the intensity a bit '''''[image]'''''		# Try them and pick the one you like best, on mine, I used "Zoom" and lowered the intensity a bit '''''[image]'''''
Line 223:		Line 223:

	# Add movement to stars, sparkles, floating icons of whatever you’ve had in your compo if you want them to react.		# Add movement to stars, sparkles, floating icons of whatever you’ve had in your compo if you want them to react.
	# Use different effects (ex: ''Pop'', ''Drift'', ''Fade'') to create depth ~~'''''[image]'''''~~		# Use different effects (ex: ''Pop'', ''Drift'', ''Fade'') to create depth
	# Keep it balanced too many effects can clutter the animation		# Keep it balanced too many effects can clutter the animation

Line 235:		Line 235:
	# Swap out elements: change your character's image if you can, with a new pose/expression etc. Change the background color, or add new visual effects.		# Swap out elements: change your character's image if you can, with a new pose/expression etc. Change the background color, or add new visual effects.
	# Animate the new elements just like you did before.		# Animate the new elements just like you did before.
	# Click the "+" button between pages to add a transition (like ''Fade'', ''Slide'', etc.) ~~'''''[image]'''''~~		# Click the "+" button between pages to add a transition (like ''Fade'', ''Slide'', etc.)

	'''💡 ''You can create mood shifts, location changes, or even mini story moments!'''''		'''💡 ''You can create mood shifts, location changes, or even mini story moments!'''''
Line 241:		Line 241:
	=== Step 5 - Adjust Timing ===		=== Step 5 - Adjust Timing ===

	* Select each scene/page and set how long it stays on screen (ex: 2-3 seconds) ~~'''''[image]'''''~~		* Select each scene/page and set how long it stays on screen (ex: 2-3 seconds)
	* Fine-tune animations to be slower or faster for dramatic or subtle effects.		* Fine-tune animations to be slower or faster for dramatic or subtle effects.

Line 259:		Line 259:
	* Match the color palette of your background and effects to your Character's vibe.		* Match the color palette of your background and effects to your Character's vibe.
	* Keep experimenting, you can save different versions to compare later.		* Keep experimenting, you can save different versions to compare later.

	~~== '''Animate Your OC / Avatar''' ''(Advanced)'' ==~~