Turn your Adobe Xd Animations into Optimized GIFs for Behance

[@thanhngocnguyen5272]

It would be great if you can do a full tutorial how to design a UX case study for portfolio

[@maddybeardUX]

I actually do have a video on that topic! (Linked below.) It's definitely a lengthy process so I wasn't able to include everything in the video, so I'd be curious to hear what questions you have after watching this one :) kzbin.info/www/bejne/joKsl5SXbs17etE

[@beehizzle_fs]

@@maddybeardUX can you show us how people add animations to behance? I can not figure it out and I have scoured the internet. I have gif files but when I upload them, they don't play :(

[@mohamedaadhil1458]

U just made a video of what I am actually looking for a year...GREAT CONTENT. THANK U SO MUCH.

[@maddybeardUX]

So glad it was helpful!

[@mohamedaadhil1458]

@@maddybeardUX yeah it is, but is there any limit to the frames? Cause I can't able to export it as gif?

[@nealchester4275]

This is my best youtube recommendation ever. Brilliant video. Now a subscriber

[@maddybeardUX]

Thank you!! Glad to have you here :)

[@mohHammouda]

Hi Maddy! Thank you so much for sharing the knowledge with others here on YT. I hope your channel gets more views and subscribers soon, you absolutely deserve it. Keep it up!

[@maddybeardUX]

Thank you so much!

[@alok-desai]

Thank you so much for this. Was looking for something like this for a very long time. :D

[@enemycombatsports5356]

Super cool workflow, and thank you for being so succinct. I'm working on these things and this is VERY helpful.

[@maddybeardUX]

Thank you! I’m so so glad :)

[@enemycombatsports5356]

@@maddybeardUX I ran into a problem... when I choose VIDEO FRAMES TO LAYERS (PS), it says the file can't be read. Stuck here now. Any ideas?

[@butol884]

You’re my superhero long live queen

[@joaoluizpestanamarcondes6219]

You are killing it!! Just saved me, great production all over the video btw

[@maddybeardUX]

So glad it was helpful :) Thank you!!!

[@mayursawant6784]

Thank you so much mam!!!! The way you are sharing your knowledge regarding portfolios and all, is pretty much simple to understand as i was looking for ways to showcase my prototyping video of app on behance portfolios.. So I landed on your channel which gave me an idea to proceed further.... Once again thanks a lot!!...Support from India.... :D

[@maddybeardUX]

I'm so glad to hear that!!! :)

[@EverythingsByDesign]

Pretty good method. Not sure why Adobe hasn't provided a setting to export a loop? This was an option in PS during the early 2000's.

[@misoa1000]

Thank you so much! I was struggling to make this work for so long. This tutorial was the only one that really helped me understand the whole process.

[@maddybeardUX]

Yay! I'm so glad it helped!

[@augustcoleman5563]

You all probably dont give a damn but does someone know of a way to get back into an instagram account..? I somehow forgot my password. I appreciate any tips you can offer me.

[@amandathomas5930]

Awesome tutorial, thank you! I still can't believe there isn't a faster, easier way to do this yet though. This is exhausting lol

[@maddybeardUX]

HAHA I know… someone needs to make a plug-in or something 😅

[@rudyliong2907]

Wow. thanks for teaching this, Maddy. It is very helpful.

[@maddybeardUX]

I'm so glad!

[@DummyDisembowel]

A clear and useful tutorial.

[@maddybeardUX]

Thanks so much! Glad you liked it :)

[@MarianaFranco-p7c]

it was really helpful! thans maddy

[@MarianaFranco-p7c]

omggg it loaded on my presentation so fast!!! thanks SO MUCHG

[@cactusjack2264]

I would say it’s a lot easier making a Gif with Adobe Animate, this process seems a lot more tedious

[@lazyg7218]

Omg ur Chanel is amazing u deserve a lot.

[@maddybeardUX]

Thank you so much!

[@sofianelallem]

Thanks for the tutorial ! very helpful, but the GIF out of my photoshop have such a low quality

[@maddybeardUX]

Watch this updated tutorial instead! SO much easier :) kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@ramalsrougi]

Thank you 😍 I was looking for this ❤

[@shalomohuegbe1247]

Hi Maddy, please do I also have to export my mobile frame gifs to 1920? Or it's just web gifs

[@pahantharumuthu2734]

OMG you are a hero ❤‍🔥❤‍🔥

[@hollymillar1456]

thanks for the video! I have PS 2021, there is no "import > video to layers" and when I click on timeline, it won't import. Any idea what is happening?

[@helly7318]

Hi Maddy, thank you for this helpfull tutorial. I just have one question : at the end, when you publish your gif on behance, you added text on the left to show what font you used in your project. How did you do that ? With Photoshop ? Because Behance doesn't allow to have text on one side and GIF on the other side. Thanks a lot !

[@maddybeardUX]

Good question! I laid out the whole thing in Adobe Xd. You can see a deeper look at that process in this video: kzbin.info/www/bejne/iqmQnZtqrq6Alc0

[@helly7318]

@@maddybeardUX ok, I think I get the answer in one of the comment 😚 you put your projet on Adobe XD as I do but you export the artboards on PNG, except for the animated one

[@aditisaxena334]

@@helly7318 hey Helly, were you able to fig out how it was possible to keep both gif and the content alongside in Behance? I see so many animated prototypes along with text in case studies on Behance, but I'm not sure how it's done..thanks!

[@helly7318]

@@aditisaxena334 Hey ! No for now i just made it with my own way. I create a New document with Adobe xD or Figma. And in the frames i want to put animated proto, i export the frame in PNG format with a blank on the left for example. Then, i open photoshop and i make the gif animation, which i add on my PNG, where I left the blank part. I export all of this as gif. It's working but i think there is an easier way to do this, probably with After Effect 🤷🏼‍♀️ did you understand the whole process ? It's complicated to explain it 🤣

[@aditisaxena334]

@@helly7318 that sounds like a good work around ! 😀 thanks Helly ! Gotta try this out . Wish Behance would just let us layer gif onto the PNG images !

[@DavidSanchez-by6yw]

thanks for that! don't stop!

[@shareefhalaby7345]

It is good alternative but I prefer Vimeo method, If you have another way to make video to Adobe portfolio or for Behance I will be happy to know.

[@maddybeardUX]

Yes try this method!! >> kzbin.info/www/bejne/boGZoZqulpZ-gKc

[@orangepekoeprincess]

love the video. Im having problems when I record the video though, my mac window has rounded corners and It makes my gif have rounded corners as well, any work around for this?

[@maddybeardUX]

Ah good question. One way around this would be to record your screen with a different tool. I use Loom and absolutely love it: loom.grsm.io/maddy

[@northlopez7718]

Gracias Maddy.

[@manjushanm8765]

Thank you so much; this was incredibly helpful

[@QuantumKayos]

im trying to do this for scrolling down like an app page. Any information or suggestions for that?

[@maddybeardUX]

You could totally do that! Just create the whole page, then play the prototype and scroll while you record your preview window. Then you can turn that into a GIF with this method! Hope that helps :)

[@shashwat_satya]

Was an amazing explainer. Keep up the good work.

[@maddybeardUX]

Glad you liked it!

[@VarunKumar]

Great video. Simple and to the point. Thanks Maddy!

[@maddybeardUX]

Glad you liked it!!

[@lpaints2574]

Hi 😍😍 I cant find the the "time" in prototaype 😭😭😭 why is that? It only shows the "tap"/ "drag"....

[@maddybeardUX]

Ah good question! This is an option only for animating artboard-to-artboard. So if you're trying to do this for a component state, that's why :)

[@lpaints2574]

@@maddybeardUX you are the bestttttt i love youuu 🥰🥰🥰🥰😍😍😍😘😘😘

[@cinthyaangeles3043]

Hi I saved exactly like your steps a GIF ( the preview on website when you save shows me high quality ) but when I try to publish it on bechance the quality shows me low, what do you recommend me ?

[@maddybeardUX]

I have a video coming out soon about a 2nd process for longer prototypes and animations! This one works best for short & simple ones, but stay tuned for something that will help your issue!

[@nanearamyan788]

hi, your video was really helpful, but I just didn't get the last part, how you put that on your design? or Behance did it automatically?

[@maddybeardUX]

You can upload a GIF right to Behance in line with your other images!

[@nanearamyan788]

@@maddybeardUX Thank you ❤

[@alemuk70]

Hi Maddy, Thanks a lot for a sharp crisp video. Great learning! Quick Question, I often work on designing Google Ads and other platform ads in XD which involves small sizes such as 300x50, 320x50, 160x600 and so on. When I export the file in PNG/JPEG in 1x , the export quality is not that great and often looks blurry as compared to Illustrator export. Now I can export to 2x which makes it far better, but platforms like Hubspot, 6sense only accept 1x size and hence the 2x wont work. How do you suggest I export to get a crystal clear sharp export in 1x. Your help is much appreciated.

[@nafun123]

Yes I have the same question. Exporting on XD is trash for some reason, I don't get it

[@rashi9977]

Hii i cannot set the saving quality to 100% in photoshop. Somehow it's not going above 47.13%

[@lygiap]

Hi Maddy. My MOV and MP4 files are having trouble opening in Photoshop 2023. The error is: "Could not complete New Video Layer command from file because the image sequence format is unknown".

[@maddybeardUX]

Hey!! I found a way better way to do this actually. Check out this video instead: kzbin.info/www/bejne/boGZoZqulpZ-gKc :)))

[@vitor_martss]

Hey Maddy, amazing video! Sorry fot the dumb question, but how can i select all the frames on adobe photshop? i'm having a hard time to do that ps: i'm using Windows, not Mac

[@vitor_martss]

never mind, i found it...well, if someone dosen't know how to do that, you just need to press shift in the first layer and then select the last one! here we go

[@maddybeardUX]

Thanks for sharing Vitor!!

[@mohitwahane1847]

I've tried this method and one thing i noticed is vimeo requires plus upgrade to this. Do you know any other way of doing this which is free? i also tried video to gif but they don't meet frame requirements and looks jittery after making gif.

[@srikrishna546]

Can you suggest me how you record the screens s so easily

[@enemycombatsports5356]

I use Webflow. It's not free but it's worth it.

[@maddybeardUX]

Adobe Xd (at least on Mac) lets you record your playback! But if you're talking about recording my whole screen for this video, I use Loom :)

[@srikrishna546]

@@maddybeardUX Actually I use figma more frequently. But now I'm using OBS , But thanks for the reply. Also you are so beautiful

[@DoubleJo1000]

@@srikrishna546 Hi, Krishna! I'm also using OSB, but it has a black bar around the entire gif.... Did you find out how to make that dissapear?? thank you

[@om3japan]

Great tip, but problem. I have created a banner 350 x 250 px, when I record the preview I have a whole blackbox around the banner, so I cannot use it as a gif, any help? Thank you!

[@maddybeardUX]

You should be able to manipulate the size of the playback window -- did you try that?

[@om3japan]

​@@maddybeardUX I don't know how to resize the playback window. It shows a black background that I can move but never disappears, can you tell me how to preview at the size of the banner? Thank you!!!

[@kielwest]

I'm having this same problem, and I'm not finding any real answers. You can't simply manipulate the screen size. It makes me think that only larger artboards work for this, and smaller artboards always show up on the black background for the preview video. It's killing me.

[@sophiaho175]

very awesome!

[@samueliliffe9509]

when i record my animation there are black areas above and below the animation, how do i make the record screen the same dimensions as the artboard?

[@maddybeardUX]

You should be able to just click and drag on the edges of the frame to resize it!

[@wenkitm1565]

@@maddybeardUX I think so it’s only available for mac os

[@yasseridrissikarmaoui2334]

when i import the video it shows as layers in photoshop not frames what should ido ?

[@maddybeardUX]

Go up to Window and make sure Timeline is checked :)

[@songsn8301]

Hi Maddy, im unable to save for web. its completely grey out and says "adobe save for web error" :s is there any other way to export this as gif?

[@maddybeardUX]

Hey! This sometimes happens when the GIF is too large. I figured out an alternative way to do this for larger files that I'm going to be sharing really soon! The method in this video is perfect for short animations, but the next method I'll be sharing is great for longer ones.

[@songsn8301]

@@maddybeardUX great, looking forward to it :D

[@rohitgorai1460]

Awesome !!

[@bujlkhamdashzegve3313]

Thank you sooo much

[@НикитаГетманов-ш3т]

Thank you so much, you very help me!!!

[@maddybeardUX]

Glad to hear that! :)

[@stephanieburns508]

gracias!

[@FaysalKhandhaka]

Wonderful.. I Appreciate it.

[@provatroy8016]

How to make it mp4? by xd or other software??

[@maddybeardUX]

Xd! :) You can record the prototype and export it as an MP4

[@provatroy8016]

@@maddybeardUX thank you!

[@viraj24_]

Is there any way to do this on Windows?

[@maddybeardUX]

Which part are you struggling to do on Windows?

[@viraj24_]

@@maddybeardUX The Prototype recording part, butit seems XD doesn't have a in-built recording for windows yet

[@SawenYassinMarif]

thank you veryyyyyyy much

[@johnmartinpareja2500]

wonderful

[@billwide78]

This is not adobe xd, its Photoshop.

[@maddybeardUX]

I made the animation in Xd

[@barnalidevi2466]

THANK YOU THANK YOU THANK YOU!