I spent 7 hours trying to compress a gif to make it work on behance and I don't understand why this knowledge isn't a part of an adobe / vimeo collab tutorial for many digital artists and designers like myself. Thank you so much for this!
Don't know if you found out already, but you can add the parameter muted=1 (eg "autoplay=1&muted=1&loop=1") to your embed code and it 'll autoplay in every browser. For some browsers it's necessary your video is muted to autoplay.
I can't even begin to describe how grateful I am for this video! I'm still in a UI/UX bootcamp and am starting my behance portfolio this month. A few of my case studies have animations that I want to include, but I just felt so lost on how to do it. Thank you so much! Love your channel.
Thank you so much for this amazing tutorial. I was having a hard time trying to figure out how to show an entire flow of 20+ screens in a single frame. This video is a lifesaver.
Hey Maddy, thanks a ton, this is really helpful for me. I've been kinda apprehensive about how to do this right. Gonna try your method and hopefully achieve something as smooth and nice as I see here. Thanks again you're a sweetheart for sharing this :)
Great Video, special thanks for the resize the embedded video information (7:12). My thumbnail size video on Behance was very frustrating, to say the least, I could not find how to correct the video size anywhere
Is it still possible to edit the embed settings @5:43? I just made a Vimeo account today (July 2021) and it seems like it's not possible to change those options unless you pay for a plan.
Now Vimeo requires a subscription to remove the playbar and other things from the video. Is there a way to animate this the same way without paying 140 dollars for a year of Vimeo Plus?
I'm confused, does this cost money? I mean the function on vimeo to change the embed settings? It tells me I have to upgrade to save the stuff I changed :(
Great video! Hard to believe but nobody really covers this subject as specific as you do here. Thank you! One other question... how long does it generally take you to complete a case study?
Thank you! And great question -- usually, after I've finished the project itself, it takes me 2-3 days to put together a detailed case study. Between writing the copy in a way that is easy to understand, laying out all of the info & visuals, and exporting some assets as GIFs or MP4s, there tends to be some troubleshooting too :)
Maddy, thank you so much for your content. 😃 Just to updated this video (March 2024): you need to be Premium on Vimeo to access some settings like loop's option, controls, video details, etc.
I tried this today and it says to save the customizations you must upgrade to plus? Is that the case for you ?did they change their settings and functions available on free mode?
I was using the free one but I think they changed it :/ Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! ruclips.net/video/8P6pgxa1KJE/видео.html
Although I noticed that if I want to embed more than 1 video inside the same project, only one of them is playing at a time. I used your trick to add autoplay on 4 videos inside one project and only 1 autoplays. If I click play on some other video, the autoplaying video stops. Do you know anything that can help me with that?
Good question! I like shorter GIFs, but I that's totally a personal preference -- I think the reason I feel that way is because they're super digestible, so instead of showing a long flow you're focusing on one interaction per GIF. This way you can be really intentional about what you're showing in each part of the case study and kind of tell it like a "story" :)
Hi Maddy, great demo. Quick question: Are you using the vimeo plus package for the layout customization? Or does vimeo just let you do this? Thanks again, keep creating!
Thanks! I actually have an update tutorial on this that doesn’t rely on Vimeo! Try this out instead: Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! ruclips.net/video/8P6pgxa1KJE/видео.html
Hello do you know how can I make 2 videos play in the same time become it allows only one to play automatically in bedance and the other one pause and you should press it to play :"
Hey Maddy, Thank you for sharing the tips. It really helped me a lot. But I have a question. Whenever I am trying to put more than one mp4s in my case study I have to play all the videos manually. Kindly help me how to overcome this. Thanks,
Then you could embed the Xd prototype right into Behance! :) All you have to do is create a flow, hit share, then once you create a link you'll see a icon next to it which will copy the embed code so you can paste it into your Behance project using an "embed" section
@@maddybeardUX wow sounds interesting...thanks a lot for the quick response i will definitely try this, but can you please also also make a RUclips video about this ? It would be so kind of you...thanks in advance ☺️
Thank you for this!!! Question about creating your case studies: I caught you saying that you stack 1920 boards on top of each other which is clever for export, but I noticed that some of your content overlaps between boards (does that make sense? In your video, go to 0:34. See how those two wireframes overlap onto the board above?). When I try to copy and paste my content onto stacked 1920 boards, some of the elements go hide behind the board. How do you prevent this from happening? I'm not able to bring it forward. Hope you understand what I'm asking lol
Hey, yes! I know exactly what you’re asking haha. What you have to do is duplicate whatever element you want to overlap so there’s a copy on each artboard. And then line them up manually so it looks like a perfect continuation. I actually just published a whole Skillshare class on creating case studies and there’s a lesson dedicated to this exact question :) feel free to check out the class!! skl.sh/3LBrA2l
This is amazing! I work on figma but I just need to simply transfer the frames to XD for quick video like that! As for the autoplay, I found online that browsers block them so you need to add a setting manually to the code that says "&autopause=0" Let me know if it works!
Just filmed a new video with a new process that’s MUCH easier. Spoiler: check out the free app called GifSki on your Mac (or Giftuna for Windows) It lets you turn even longer animations into super high quality gifs!
I have a problem with that. The thing is that If I put two embed videos. One of them just stop and doesn´t run more. IDK why. I want to embed idk three videos in a row, but just one works perfectly. I follow all the steps that you say.
Yeah there are some issues with this method that I’ve run into as well… Try this method instead!! Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop! ruclips.net/video/8P6pgxa1KJE/видео.html
Great 😍😍 thank you so much for the vid ♥️ but if i want to make the play button disappears and make the video starts immediately while scrolling down how can i do it ?
Honestly have not figured out exactly how to do that. Vimeo was giving me troubles, I wonder if you have to have an upgraded Vimeo account to access those controls? If I figure it out, I'll make sure to make an updated video :)
Hey! This is really good video! Helped a lot . But how does one create the mockup where you show our app being used in real world like the one in your project where a person is holding phone and trying to scan a product?
Good question! So I actually pulled up an entirely green image on the phone (a super bright green like a green screen) and then took that photo. Then I went into photoshop, "keyed out" the green, and placed the mockup behind! That way the mockup showed through the screen. I hope that helps! I also have a video coming out tomorrow that shows a similar process but with videos :)
How can I export the file animate, to behance , I'm looking several tutorais , how can I add video animate in my behance , do you know than projects app ux ui and you see , video animations in app , I'd like know how can I do it , I must use photoshop or after effects ? or can I use anima plugin xd.
the video is very helpful, solved a lot of my problems that i was facing, just one minor thing is please try not to speak with a cracking voice, it bugs alot.
Hey Maddy, I’ve found when I’m reviewing the recordings there’s a sight shadow and curved edges showing at the bottom of the videos??? Any ideas on how to remove this without cropping??
Here’s one I created for my Behance subscribers! The downloadable Xd template is attached to that project :) www.behance.net/gallery/125152607/Behance-Project-Template
is it possible to export my prototype as pdf/jpeg/png with it's clickable functions? if you have done it .. how did you do that .. when I save them in png/pdg.. its not clickable and have to go through each screen like a slideshow althugh I wireup the screens ..thanks
I spent 7 hours trying to compress a gif to make it work on behance and I don't understand why this knowledge isn't a part of an adobe / vimeo collab tutorial for many digital artists and designers like myself. Thank you so much for this!
I'm so glad it helped!
i understand your struggle 😫
Don't know if you found out already, but you can add the parameter muted=1 (eg "autoplay=1&muted=1&loop=1") to your embed code and it 'll autoplay in every browser. For some browsers it's necessary your video is muted to autoplay.
OOOH this is so good to know, THANK YOU!!! Didn't even think of that since the video doesn't have audio
Thank you man this is helpful
I can't even begin to describe how grateful I am for this video! I'm still in a UI/UX bootcamp and am starting my behance portfolio this month. A few of my case studies have animations that I want to include, but I just felt so lost on how to do it. Thank you so much! Love your channel.
Yay!! This makes me so happy - I'm really glad it was helpful! :)
Heyy May I know which bootcamp you picked?
@@zuojianing1800 Sure thing! CareerFoundry UI Immersion Program.
bro u completed it ? got any job ?
@@abhiux360 Yep! I got a job pretty much right outta the boot camp.
This will aid so much in building a sick portfolio, thanks Maddy
Thank you so much for this amazing tutorial. I was having a hard time trying to figure out how to show an entire flow of 20+ screens in a single frame. This video is a lifesaver.
Yay I’m so glad!! :)
Ive been searching for this all my life, You're a life saviour, thanks a ton
Thank you so much for this tutorial, i couldn't figure this out for ages
Hey Maddy, thanks a ton, this is really helpful for me. I've been kinda apprehensive about how to do this right. Gonna try your method and hopefully achieve something as smooth and nice as I see here. Thanks again you're a sweetheart for sharing this :)
You're so welcome! Hopefully this helps when you try to create yours :)
Great Video, special thanks for the resize the embedded video information (7:12). My thumbnail size video on Behance was very frustrating, to say the least, I could not find how to correct the video size anywhere
BEST GUIDE.......thanks for this...really appreciated
Is it still possible to edit the embed settings @5:43? I just made a Vimeo account today (July 2021) and it seems like it's not possible to change those options unless you pay for a plan.
Unfortunately I found out that's a paid feature :/
Love your videos Maddy😍🥂
Hey Maddy, do I need a paid plan on Vimeo to do what you did in the video or is the free plan enough?
I have the same question here and I think you only can save all the embed settings with the basic Vimeo paid plan :/
Thank you so much this is so helpful! I just published my first Behance case study and included a video by following this method thanks for sharing
Now Vimeo requires a subscription to remove the playbar and other things from the video. Is there a way to animate this the same way without paying 140 dollars for a year of Vimeo Plus?
ask chat gpt to add those things into the embed code its the same and free
Thank you, it is a very useful video. Btw, how can I add pictures with no white gap in between on Behance? Please sb help me.
Yes! Go into “styles” on the right under “edit project” and you’ll see an option for “content spacing” Just set that all the way to 0! :)
I'm confused, does this cost money? I mean the function on vimeo to change the embed settings?
It tells me I have to upgrade to save the stuff I changed :(
Thank you so much! It's still helpful in 2023
A wonderful piece of information for designers.
Really awesome Maddy! You are doing a great job for UIUX Beginners! Keep it Up!👍👍👍️ 💖
Great video! Hard to believe but nobody really covers this subject as specific as you do here. Thank you! One other question... how long does it generally take you to complete a case study?
Thank you! And great question -- usually, after I've finished the project itself, it takes me 2-3 days to put together a detailed case study. Between writing the copy in a way that is easy to understand, laying out all of the info & visuals, and exporting some assets as GIFs or MP4s, there tends to be some troubleshooting too :)
@@maddybeardUX Thank you for the info. Much appreciated!
People binge watch Netflix Series,
I am bing watching Maddie Beard, never been so impressed/touched since Jina Bolton
Ty ! I was using after effect for this, but this method is very easy 😉
Same here!! Thanks so much!! Working on my first ever case study and this is such huge help!! Also love your channel!!
Aw yay! Thank you so much 🥰
Maddy, thank you so much for your content. 😃
Just to updated this video (March 2024): you need to be Premium on Vimeo to access some settings like loop's option, controls, video details, etc.
You can ask chat gpt to write the embed code and add those things, its just text you don't actually need premium!
a life saver thank you very very very much
You've just made my day. So very helpful. Thank you so much!
You are so welcome!
Thank you so much the problem I had windows but finally I can hide the mouse Icon so now I'll be doing something really sick for my next project
Awesome!!
I'm glad I found your channel! Thanks for this informative tutorial.
Yay! I'm glad you're here :)
I don’t know how did I miss this gem earlier! Thanks again 😊
Glad it's helpful!!
This helped me so much! Thank you so much❤❤
this was really helpful for me as I wasn't able to upload my rendered video of adobe after effects on my Behnace profile.
Yay! So glad :)
Thank you! You're awesome
I'm from Vietnam. Thanks, you shared of tips this useful video
Thanks you so much for this. Can't really thank you enough for this.
thankyou So much this helped a lot
if you directly upload mp4 in behance, would it not play in loop?
Thank you so much for this!!!
i tried this but now there is no option to save the video after editing.
it's in paid version🙁
Thanks for this, much appreciated.
U are amazing lady 💕 thanks for sharing your knowledge 💐
thanks Maddy! its really helpful
I see that I can't save the customization video, I should to buy Plus plan?
I tried this today and it says to save the customizations you must upgrade to plus? Is that the case for you ?did they change their settings and functions available on free mode?
Hey! I have an updated video about how to do this!! (Doesn’t require photoshop or Vimeo) Check it out here: ruclips.net/video/8P6pgxa1KJE/видео.html
thanks you, I love you!
Really really helpful and easy to follow
So glad to hear that!
Thank you for this tip Maddy, I won't be struggling with gifs.
omg thaaankkkkyoou!
Muchas gracias! Me ayudará mucho saber esto
Great video, thank you a lot!
Hey its very usefull in my projects thanx, but vimeo needs to be upgrade in order to save the changes, what can i do ?
I know... such a bummer. There's not much you can do to work around that. You may just need to accept that there will be an overlay.
I love this tutorial. But are using the free account or the Plus?
I was using the free one but I think they changed it :/ Try this method instead!!
Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop!
ruclips.net/video/8P6pgxa1KJE/видео.html
Very helpful, thanks!
Although I noticed that if I want to embed more than 1 video inside the same project, only one of them is playing at a time. I used your trick to add autoplay on 4 videos inside one project and only 1 autoplays. If I click play on some other video, the autoplaying video stops.
Do you know anything that can help me with that?
Hi, I had the same problem, what worked for me was adding this: autopause=0.
Awesome, thank you so much! Do you consider longer, Vimeo videos or shorter gifs more elegant in a case study?
Good question! I like shorter GIFs, but I that's totally a personal preference -- I think the reason I feel that way is because they're super digestible, so instead of showing a long flow you're focusing on one interaction per GIF. This way you can be really intentional about what you're showing in each part of the case study and kind of tell it like a "story" :)
@@maddybeardUX I see, it's like "a little goes a long way". Thank you! :)
Totally!
Hi Maddy!! Which builder and theme did u use for your website?
I used Webflow! I didn’t use a theme, I just designed what I wanted in Xd and then built it as close as I could in Webflow :)
Can't save video from XD.
Hi Maddy, great demo. Quick question: Are you using the vimeo plus package for the layout customization? Or does vimeo just let you do this? Thanks again, keep creating!
Thanks! I actually have an update tutorial on this that doesn’t rely on Vimeo! Try this out instead:
Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop!
ruclips.net/video/8P6pgxa1KJE/видео.html
Awesome vid, Maddy. I'm definitely going to incorporate this when I come to build my first UX portfolio. Cheers!
Yay, that's great!! Glad it was helpful :)
Unfortunately only for paid users now. Can't really edit the embed view anymore.
I know :( I made a video of my updated process here!!
ruclips.net/video/8P6pgxa1KJE/видео.html
Hi! loved ur video! I have a question, what app do you use for GIFS? Because mine they don't have a very good quality. Thanks :)
Hey! Did you check out the other video on this? :) I show you the process for creating GIFs in Photoshop! ruclips.net/video/1K7JmjmUQZs/видео.html
@@maddybeardUX Thanks!! I will check it out :)
Hello do you know how can I make 2 videos play in the same time become it allows only one to play automatically in bedance and the other one pause and you should press it to play :"
Hey Maddy,
Thank you for sharing the tips. It really helped me a lot. But I have a question. Whenever I am trying to put more than one mp4s in my case study I have to play all the videos manually. Kindly help me how to overcome this.
Thanks,
Try this method instead!!
Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop!
ruclips.net/video/8P6pgxa1KJE/видео.html
@@maddybeardUX thank you so much. I will try that
Great video! :D
Nice video, what if we want to add fully interactive prototype where user/viewer can interact with the design as live view ?
Then you could embed the Xd prototype right into Behance! :) All you have to do is create a flow, hit share, then once you create a link you'll see a icon next to it which will copy the embed code so you can paste it into your Behance project using an "embed" section
@@maddybeardUX wow sounds interesting...thanks a lot for the quick response i will definitely try this, but can you please also also make a RUclips video about this ? It would be so kind of you...thanks in advance ☺️
this was very helpful thanks
Thank you!
Can you share some tips how to begin a case study concept or what to consider before starting?
My Skillshare class launching in March will address this!! :)
@@maddybeardUX are you going to upload it on udemy as well?
@bilolkhon No, just skillshare. But you can get 2 free weeks of skillshare using my link so look out for that on Monday if you're interested! :)
@@maddybeardUX thank you a lot
Thank you for this!!! Question about creating your case studies: I caught you saying that you stack 1920 boards on top of each other which is clever for export, but I noticed that some of your content overlaps between boards (does that make sense? In your video, go to 0:34. See how those two wireframes overlap onto the board above?). When I try to copy and paste my content onto stacked 1920 boards, some of the elements go hide behind the board. How do you prevent this from happening? I'm not able to bring it forward. Hope you understand what I'm asking lol
Hey, yes! I know exactly what you’re asking haha. What you have to do is duplicate whatever element you want to overlap so there’s a copy on each artboard. And then line them up manually so it looks like a perfect continuation. I actually just published a whole Skillshare class on creating case studies and there’s a lesson dedicated to this exact question :) feel free to check out the class!! skl.sh/3LBrA2l
Awesome. Very helpful.
This is amazing! I work on figma but I just need to simply transfer the frames to XD for quick video like that! As for the autoplay, I found online that browsers block them so you need to add a setting manually to the code that says "&autopause=0" Let me know if it works!
Thanks for the tip!! I found that works sometimes... but certain browsers block those things and override the embed code :/ so annoying!
@@maddybeardUX Yes browser block those things
What did you use to transfer the files from Figma to XD?
@@sindu1508 you can export the figma file in a format compatible for XD
Only issue is Vimeo is not free... i cant save when i make those changes to the embebed code :(
this is incredibly awesome. Sadly i coudn't save the changes on embed settings cause i need vimeo plus :(
Just filmed a new video with a new process that’s MUCH easier. Spoiler: check out the free app called GifSki on your Mac (or Giftuna for Windows) It lets you turn even longer animations into super high quality gifs!
Hey Maddy, How do we do this in figma?
Hi really nice video!! How can we do the same in figma??
I use a tool called loom loom.grsm.io/maddy to record my screen for Figma :)
You need to upgrade your vimeo account to access the player settings to remove the icons. Should've mentioned that.
ask chatgpt to add those things to the embed code its the same you dont need premium
I have a problem with that. The thing is that If I put two embed videos. One of them just stop and doesn´t run more. IDK why. I want to embed idk three videos in a row, but just one works perfectly. I follow all the steps that you say.
Yeah there are some issues with this method that I’ve run into as well… Try this method instead!!
Turn your Adobe Xd Animations into Optimized GIFs for Behance | WITHOUT Photoshop!
ruclips.net/video/8P6pgxa1KJE/видео.html
Great 😍😍 thank you so much for the vid ♥️ but if i want to make the play button disappears and make the video starts immediately while scrolling down how can i do it ?
Honestly have not figured out exactly how to do that. Vimeo was giving me troubles, I wonder if you have to have an upgraded Vimeo account to access those controls? If I figure it out, I'll make sure to make an updated video :)
Thank you so much!!
if I may ask, did you pay for vimeo?
thank you this is very based
Hey! This is really good video! Helped a lot . But how does one create the mockup where you show our app being used in real world like the one in your project where a person is holding phone and trying to scan a product?
Good question! So I actually pulled up an entirely green image on the phone (a super bright green like a green screen) and then took that photo. Then I went into photoshop, "keyed out" the green, and placed the mockup behind! That way the mockup showed through the screen. I hope that helps! I also have a video coming out tomorrow that shows a similar process but with videos :)
How can I export the file animate, to behance , I'm looking several tutorais , how can I add video animate in my behance , do you know than projects app ux ui and you see , video animations in app , I'd like know how can I do it , I must use photoshop or after effects ? or can I use anima plugin xd.
Thanks thats awsome!
Even though i use figma, it was helpful... thank you
Hola! excelente proyecto y explicación
thank you so much
Thank you!!
Hello! Is there a similar way to do this with Figma prototype? There is no record function, I recorded it with QuickTake
Not that I know of :/ I also use QuickTime or Loom!
Awesome tutorial, keep up the good work.
And please make some xd annimation videos
the video is very helpful, solved a lot of my problems that i was facing, just one minor thing is please try not to speak with a cracking voice, it bugs alot.
thank you for this
awesomeee thankss
Hey Maddy, I’ve found when I’m reviewing the recordings there’s a sight shadow and curved edges showing at the bottom of the videos??? Any ideas on how to remove this without cropping??
Yep I’ve noticed that too. Unfortunately I don’t know a way without cropping it!
i added gif on file and saved a pDF file to upload on behance .. but the gif doesnt play on pdf or png ? what am i doing wrong here . thanks
So you have to upload it as a .GIF file for it to work. Here’s an updated video that’s actually the best method I’ve found for this :)
@@maddybeardUX sorry which video
Amazing video
which website do you use to get the illustrations?
I did them myself on my iPad! :)
can you drop some Behance case study template for those who need to streamline
Here’s one I created for my Behance subscribers! The downloadable Xd template is attached to that project :) www.behance.net/gallery/125152607/Behance-Project-Template
Do you know if there's a way to do something similar in Figma? Would appreciate some help :)
Not sure, I don't use Figma!
is it possible to export my prototype as pdf/jpeg/png with it's clickable functions? if you have done it .. how did you do that .. when I save them in png/pdg.. its not clickable and have to go through each screen like a slideshow althugh I wireup the screens ..thanks
You can’t export prototypes, but you can record them like I did in this video!
@@maddybeardUX thats what i thought cheers