How to Mockup UI Animations in After Effects

Подписаться 921 тыс.

Просмотров 489 тыс.

50% 1

This Adobe After Effects tutorial will demonstrate how to animate and mockup a user interface design on a device. This video is sponsored by MSI.
Project Files www.dropbox.com/s/9yohsre6zqu...
MSI P65 Creator Laptop
www.bhphotovideo.com/c/produc...
www.amazon.com/MSI-P65-Creato...
#MSI #CreatorPC #Tutorial
⭐️ Master Adobe Illustrator and unleash your creativity!
View course: www.dansky.com/courses/the-ad...
Get 15% off: academy.dansky.com/opt-in
🤝 Get professional guidance with a 1-2-1 coaching session!
Book here: www.dansky.com/coaching
✅ Download unlimited photos, videos, fonts, brushes, music, mockups, icons, templates, UI kits, and much more!
1.envato.market/q5nq
💻 My design tools and studio setup
Apple MacBook Pro laptop: amzn.to/45jnzIK
BenQ PD3225U monitor: amzn.to/4cnyjdh
Logitech MX Master 2S mouse: amzn.to/45eCjIP
Wacom Intuos Pro tablet: amzn.to/45gXWIq
Sony A6400 camera: amzn.to/3ZCnjTQ
KRK 6400 headphones: amzn.to/3LJ7KEe
Shure SM7B microphone: amzn.to/3rIUclg
Elgato Wave microphone arm: amzn.to/3RHvrAM
Godox studio light: amzn.to/3RIhoL3
IVISII G2 RGB light: amzn.to/468h1xQ
Some links may be affiliate links for products and platforms that power by business. I make money with these which helps support the channel, so if you do use them, thank you for being awesome!

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@issubrata 4 года назад

The best of tutorial, thank you so much bro. You're great!

@ArjunCool Год назад

Thank you for your complete and comprehensive training. Very good!

@ubaidnafees7149 4 года назад

Damn.. thats a sick machine with overkill specs XD... Awesome informative video right there Dan.. would love to try that out

@MiccoliOfficial 4 года назад

Wonderful video. Thank you for sharing, Dansky. Much Love Miccoli

@alyslim5234 2 года назад

i love how succinct and happy you sound when teaching us the tutorial 😆thank you for this!

@ForeverDansky 2 года назад

You're so welcome Alys! Thank you :)

@Always_help_when_you_can 4 года назад

Thanks Dansky for a great video !!!

@TECHHOUSEBD 3 года назад

*Awesome UI Animations*

@sojeongsim1562 3 года назад

Clear explanation! Thank you!

@LovechandShrestha 4 года назад

Explained very nicely! Thanks bro!

@abbyadamski4915 4 года назад

I have loved my MSI but it truly is HUGE

@milasegal5596 3 года назад

Thank you for the good tutorial and opened project files👍👍👍

@gilangsegarabening4177 4 года назад

WOW! Thanks, you're best

@SpaD389 4 года назад

I love this video. I look forward to more content!

@AniasSPOT 3 года назад

Nice tutorial! Many thanks

@ArtScouts 4 года назад

great and simple tutorial

@VectWorld Год назад

your teaching process is so clean

@ForeverDansky Год назад

Thank you 😀

@ethicalgod7689 2 года назад

after i finish my project, i am going to make my app great! Thanks for the info! subbed....

@rafsunjany5048 4 года назад

Bro i love you. You are the inspiration of mine.

@ForeverDansky 4 года назад

Thanks Rafsun! Try my best to be as helpful as possible 🙂

@rafsunjany5048 4 года назад

Thanks. You are the Best 🎖🎖🎖

@tamarushka 4 года назад

Very good, thank you

@AnatolyKhalizev 4 года назад

Very useful!

@yogeshmech4950 2 года назад

Nice work 👍

@RakibHasan-op7jd 3 года назад

owaWW new set. totally surprised

@cristinagran5398 2 года назад

You just keep saving my work life :)) genius

@ForeverDansky 2 года назад

Happy to help Cristina!

@VectWorld Год назад

Best teacher ever🥰

@KonstantinF90 4 года назад

Hey Dansky, great Video! Is it possible to bring animations made in AE back to XD?

@konradosmolski9300 4 года назад

Hi Dansky, love your videos, you helped me a lot! I just would like to know what kind of software you use to record your tuts ;) Cheers!

@Somalivocal Год назад

great for beginners , thank you so much

@ForeverDansky Год назад

Glad it was helpful!

@srinivasnahak3473 Год назад

You're the best!!

@siddharthpandey8516 4 года назад

Great video...the mockup is amazing!! Is there a tutorial on how to create this? and more tutorials on mockups?

@zakariaabdi8571 4 года назад

Thank you So much

@funnyedon9276 4 года назад

Wow, create more videos about AE, please! Thx

@ForeverDansky 4 года назад

Glad you liked it thanks!

@mahinchowdhury9007 3 года назад

very helpful video

@yap7265 2 года назад

Very helpfull!

@elvandogan230 Год назад

Please more after effects tutorials 🙏🙏🙏❤️

@zbellagio 4 года назад

hi dansky, thanks for this tutorial! i have a question: in wich format you export your xd file to put into after effect? i'm trying to make a mockup for one of my works. regards from argentina :)

@gabrielleseok9445 3 года назад

I have the same question! I see that my exports seem to be flat PNGs.

@jordandesigns5797 4 года назад

Hey! I would love to see a tutorial with Figma’s new amazing auto animate!!! I love your videos I’m trying to upgrade my current design job and have been using your videos to invest in myself!

@DennisLam 4 года назад

Thanks Dansky for this excellent video. I would love to see more of the AE tutorial vids like this. By the way, what is the brand name of the big black microphone you are using in this video? It looks so nice, must be a good one.

@MrSpud 4 года назад

Shure SM7B

@akshanshdeva1989 3 года назад

Thank for this great tutorial !! Can you also tell us about how to create these devices from images with transparency? I'm struggling with devices with rounded mockups.

@coobamedia2757 2 года назад

nice video buddy..

@mohammadmirzae7782 3 года назад

you are the best thank u !

@ForeverDansky 3 года назад

🙏😊

@MWADSK 2 года назад

Ayo Dansky, can you tell me how you animate titles with the parameters of your computer? This looks sick!

@enriqueruiz320 2 года назад

Justo lo que estaba buscando XD

@hackzbhavin 4 года назад

Very good an informative please bring a more information like please explain how to create assets and all and using thanks

@paulooliveira2242 Год назад

Thanks!

@ForeverDansky Год назад

No problem Paulo!

@stu_dio 4 года назад

Great vid! Thanks Danksy. Would love to know how to create the mock-up ready so it masks the artwork when brought into the device.

@TRIPTOUR 3 года назад

dansky rules !

@ForeverDansky 3 года назад

Thanks Laurita!

@haziqazman8381 4 года назад

I love this. Thank you

@ForeverDansky 4 года назад

You're welcome Haziq - glad it was helpful 😊

@VectWorld Год назад

Best video

@1deplatt 4 года назад

I think having the screens in a device is a little old-school these days, probably because the devices are evolving so fast. I’m see a lot of rounded rectangles with a drop shadow instead.

@tashiramusic 3 года назад

🔥🔥🔥

@namanbisht975 3 года назад

Please show the output in starting so we can see it

@constantinosschinas4503 2 года назад

7:10 you could use/show the right click > time reverse keyframes ;)

@timothy790110 3 года назад

god damn it, so should i use after effects or adobe xd to do a mockup? orandroid studio? or figma? there are so many options, im going nuts! I have experience with PS and illustrator.

@ameraibrahim9535 4 года назад

Hi Dansky! I would like to tell you that the download file does not match the tutorial like the assets are all in composition type. Please do re upload the download file. Thank you. :D

@AlexJenkins 4 года назад

A graphic/animator not using Apple? Subscribed!

@yasin_uyghur 4 года назад

Thank you .👏🏻👏🏻👏🏻 What is your microphone model ?

@MakerJake101 3 года назад

Super duper late but it’s a Shure SM7B

@shikharkumarr 4 года назад

Loved this tutorial, but can anyone help me on how do I make such animations in Android Studio

@emiliolopez9304 2 года назад

What format do you have to export in to implement the animation into the app

@raba650 4 года назад

I’m not doing web design but web development but I still have to deal with design either way.Does the 3D mobile phone you use have a name? What name should I use to search for it? I’m talking about the 3D phone that’s holding the 2D UI design. And lastly, which apps would have a 3D mobile phone? I’m gonna try to use one called justinmind but we’ll see if it has a 3D phone layout. Thanks.

@CGRcreativity 4 года назад

I have a problem in after effects, Adding a video of 3 minutes i can work only on 45s and after it is looping , can you help me to use all the time of my video thanks in advance CGR

@adyanknx 3 года назад

Use a lower resolution(preview resolution) or get more ram, you can also scale the comp down and scale it up later

@avalionbeats62 4 года назад

Lionel Messi making motion graphics tutorials :)

@ForeverDansky 3 года назад

Haha 😂👏

@talktomekhuluma129 3 года назад

loooooool

@idontneedname179 3 года назад

Ed sheeran knows GFX too 😂😂

@muhammadnawaz727 2 года назад

how to make domo video for my web or mobile app in after effect?

@swearsinspanish1092 4 года назад

How to export your art board into ae tho?

@user-pg3yg7id1z 3 года назад

can i use file from photoshop into ae?

@waltermirkss35 3 года назад

Yeah but how do you remove the gray background from the mockup though? To replace it with a color of your choice.

@patmalloleiva3344 2 года назад

Mask it out

@NIGHTLUV27 4 года назад

My God, I recognize that noisy devil Msi fan, its so annoiyng... Thank you for the tut.

@ForeverDansky 4 года назад

It's likely the fan from my dome-shaped studio light you can hear 😉

@PWNY 4 года назад

Which Cam ist that?

@denizcanylmaz3747 3 года назад

Isn't this guy looks like Corey Taylor ?

@ForeverDansky 3 года назад

Aha, I'll take that! 😋

@mariaramy2587 3 года назад

cant you just do the animation in xd and mock the whole video into the phone ?

@rakibmazumder8867 3 года назад

How can i make intro like dansky intro

@djchalitas4305 3 года назад

llegue por NUVA gracias

@Baba-so6fh 4 года назад

How does it go from this animation into an actual mobile phone app?

@dontshareplease 4 года назад

with development

@Baba-so6fh 4 года назад

@@dontshareplease CSS?

@dontshareplease 4 года назад

@@Baba-so6fh no, css is only styling of html elements, you need to go for something else, i like ionic, framework which works with html css and javascript and with cordova you can build it to native app

@iamnoob3850 4 года назад

how to be more creative ????

@masadamsahid 4 года назад

buy p65!

@yatharthachaudhary2734 4 года назад

I cannot open it in windows

@user-xi7nx9nz8h 4 года назад

I want to study, but I can't because of the language barrier. Sadly ...

@Doritoboy200live 4 года назад

What phone is it

@ForeverDansky 4 года назад

Matthew Holder It’s an iPhone, possibly the 11 off the top of my head 👊

@Doritoboy200live 4 года назад

@@ForeverDansky Thank you

@ishaan9597 4 месяца назад

me watching this on msi pulse rtx 4070

@dunno1114 3 года назад

Can you help me?

@ommore1612 3 года назад

Wallpaper please

@sabeelshaikh3759 4 года назад

can anybody hear the fan?

@screamingpixels9163 3 года назад

Instead of an advertising it will be BETTER if you show a final result what we going to learn at the beginning of the video. Why I should watch the full video without understanding what we going to learn?

@kimonmarsellos2347 4 года назад

yeet 1st

@vyacheslavazarenko2535 4 года назад

It really looks like Russian flag.

@maxwax10 4 года назад

Just a laptop promotion nothing else . 1. Ddn show how to import file in AE 2. Very simple animation any one could save his/her time and would do a prototyping in XD.

@jordandesigns5797 4 года назад

DEEPANSHU BHASKER In xD go to file>import>after effects.

@ForeverDansky 4 года назад

There's many different ways to import into After Effects. From XD it's as simple as the steps Kramez has outlined. Adobe XD is great for auto-animation, and this tutorial is is for anyone looking to gain more control over how their animation looks, with it also being mocked up on a device 😉

@maxwax10 4 года назад

@@ForeverDansky I have learnt many many things dansky , I hope you will keep continuing making in-dept tutorials

@korujaa 3 года назад

Wrong way to do, you dont have ANY freedom to move mobile, do you need to animate screen in AE then render a seq after that you do a complete animation in 3D software.