Animated GIF with Perspective Mock-up in Photoshop & After Effects CC 2018 [Tutorial]

[@naslylopez8710]

I don't know English, but the truth is, your tutorial is so good and simple that there is no need to know. You saved me, thank you very much!

[@savetimewithpranav]

well well well ,how are you talking?????

[@esleFox]

OMG. YOU ARE A GENIOUS. I got the same gif error you re talking about and was getting frustrated. Thank you so much. your method saved a bachelor thesis

[@DesignPilot]

😂😂😂

[@Harrylymon]

Huge for my portfolio! Thanks and great job with the exporting workaround. NEVER would have found that

[@katieboyle8320]

Loved this! ♥️ so helpful and very well explained. Look forward to watching more.

[@Romasnv]

Fantastic! I found what I was looking for! Thank you very much! This is really cool!

[@ktiebug]

Oh my goodness, this saved my bum - thank you!

[@HiddenInPlainSightSubliminals]

incredible video and beautiful demo...keep up the fantastic work!!!

[@DesignPilot]

Thanks so much 😁

[@rania-design5660]

Amazing! big thanks. I tried it with my video but it was not working. When I save the Edit mockup window and go to the main one the timeline is empty. So, I could not render the video. any advice, please!

[@majoliveros]

Thank you so much!! Super helpful and easy to understand :)

[@DesignPilot]

My pleasure ❤️

[@KeefInJapan]

Thank you. Using Giphy saved me so much time.

[@DesignPilot]

Glad to hear that

[@sureshbalasubramanian7188]

Super userful, Thanks dude!

[@DesignPilot]

👍

[@joseph-the-seventh]

Nice tutorial! What was the final file size of the GIF? Wondering if it would be small enough to use in a marketing email.

[@DesignPilot]

Not sure. You can definitely compress it with an online compressor

[@rainypriya8719]

I am not getting the option place embedded 🥺 I have tried many ways to import video file in mockup but of no use. Please! Help me out

[@JuanCarlosZambrano242]

Thanks man!!!!

[@anushkajain6917]

In media encoder 2020, I don't have the option of QuickTime preset in h.264 format. What to do?

[@DesignPilot]

H.264 is MP4 preset. You cannot get transparency with MP4 preset.

[@Applewictorie]

Hi! Do I definitely have to use Ae for the animation? I cannot use GIF?

[@DesignPilot]

Hmmm. I'm not sure. It might work

[@MemeImpala]

Thanks a ton, this saved my life :)

[@DesignPilot]

You are welcome

[@n0tgod508]

That was quite usefull ! pliz make another tutorial on mascot animation from a to z !! it will be a lot helpfull keep up the good work

[@DesignPilot]

+KaiDo GAmes I shall try man. But the previous tutorial that I had made was quite detailed in my opinion

[@DarkTwilight1]

What are you using to record prototype in Adobe XD? Win + G? I recently recorder a prototype that way and it was initially bad quality. In the end when I place it on a mockup and render as GIF the quality is disturbingly bad.

[@DesignPilot]

Win + G sucks! I have never recorded a prototype in XD. I usually export it to AE and then render it from there.

[@asifjaved7672]

@@DesignPilot But, just exporting the assets from XD into AE does not bring the motion interaction with it? Do we need to make the entire motion animation again in AE from those exported assets into AE? Do we have the option to also export the prototype animation from XD to AE so that we then only have to render the animation instead of creating the animation again in AE. Please clear it!

[@DesignPilot]

Hey Man. Only the screen elements get exported. Nothing else.

[@asifjaved7672]

@@DesignPilot So, when you export the assets from XD to AE, does it mean you create the protoype animation again in AE from those exported assets and then render the prototype in AE to achieve the best quality? If Yes, is it worth to do all the work again in AE to create the prototype animation to attain best suited quality?

[@DesignPilot]

Yeah. It's better to do in After Effects as you can easily export it and you can do much better stuff in AE

[@yuliamiu9530]

Thank you so much for video!

[@DesignPilot]

Your welcome 🤘🏽

[@ibousrih5519]

Thank you very much for this awesome tutorial

[@DesignPilot]

You are welcome 😊

[@sam.achilles]

God bless man. This was really helpful

[@DesignPilot]

Happy to hear that!

[@Thefinalgrrrl]

Awesome video! Subscribed, thanks a bunch (:

[@DesignPilot]

Thanks so much Lucy. Happy to hear that.

[@AeonicD3]

Is there a way to convert the video into a GIF without the background? I would like to put the mockup like you did at the end of your video without any background element. Just the mockup

[@DesignPilot]

You need to select the Aplha Channel Option.

[@AeonicD3]

How do I find alpha channel option? sorry I am new to photoshop...

[@DesignPilot]

In the export settings. Just Google it. It should be fairly easy.

[@AeonicD3]

will do right now, is it export from photoshop or giphy converter you mean?

[@AeonicD3]

Will the Alpha Channel after selecting save the mp4 without the background?

[@AeonicD3]

I tried the same process but for some reason when I am at the last part of editing, so matching the length of the background and other elements before I render them, when I play the video and wait for it to progress, after 04:00fs the whole mockup disappears and the video when its rendered it does the same thing...

[@DesignPilot]

I'm so sorry man. I honestly did not understand what you said. Can you repeat again?

[@AeonicD3]

no problem I fixed that issue :)

[@syedusman512]

@@AeonicD3 How did you fixed it mate ? i am facing the exact same issue. Please guide me ASAP

[@dhruvilpatel3426]

I have download sketch psd from ramotion but this type of file couldn't open in my laptop i have windows 10 . Is it open directly?In Windows 10? Or need to export in PS to show them?

[@DesignPilot]

I think you need to open the PSD File. It should be correct

[@dhruvilpatel3426]

Is it open in Windows?

[@DesignPilot]

Yes.

[@dhruvilpatel3426]

I am open the correct Psd format but isn't open ! Sketchbook "couldn't open this file.either the file format or size is not supported,or you may not have the read permission".i am also download the other psd but it also not open.

[@DesignPilot]

Which software are you using to open?

[@HrLyhne]

How do you achieve a transparent background this way? :)

[@DesignPilot]

You have to turn on the transparency setting in the export settings

[@tastymidget4244]

On output module>format module, I can't choose H.264, it's not there??

[@tastymidget4244]

I solved it by using Adobe media encoder

[@mohammedismail99]

Nice video Brother

[@DesignPilot]

Thanks Man

[@thedjbugsy]

This is cool. Thanks.

[@DesignPilot]

Your Welcome 👍

[@민로롱]

I'm korean student.. very thank you ㅜㅜ

[@ky1e000]

whenever i upload gifs to giphy, it destroys the quality and i don't even get a download option like you had in the video, any idea why?

[@DesignPilot]

Giphy does reduce the quality. Gifs are always with bad quality. The download option must be there somewhere.

[@sakurasweetie15]

I was having the same problem not being able to find the download button on giphy, but I just used gifs.com (sadly there's just a small watermark, but the gifs come out much higher quality)

[@DesignPilot]

On giphy, you need to right click and choose SAVE VIDEO AS. Not sure if I can comment on the quality.

[@Kosmozooo]

Amazing! thank you!

[@DesignPilot]

Thanks Man!

[@Kosmozooo]

I just found your chanel, hope you still making tutorials and will make a long time :)

[@DesignPilot]

Thanks man! Hope you subbed. I upload a tutorial every single week. What do you mean by 'make long time'?

[@Kosmozooo]

I meant that you'll be doing the tutorial for a long time

[@DesignPilot]

Yes. Yes. I have a lot of tutorials on the list. Let me know if you have any specific requests :)

[@SajidShaik]

Amazing tutorial ♥️

[@DesignPilot]

+Sajid Shaik Thanks Bro!

[@thangtastic]

THank you a lot man!!!

[@DesignPilot]

No problem Kim :)

[@ВладБелоусов-о3т]

Finally!!!

[@DesignPilot]

🤘🏽

[@RckDtar]

thanks!

[@DesignPilot]

Your Welcome!

[@runiprams3364]

Amazing

[@DesignPilot]

+Runi Prameswari Thanks :)

[@vansbreak7771]

You're the best

[@DesignPilot]

+Vansbreak ♥

[@Akshat_psd]

Yooo My man!

[@DesignPilot]

+Vriz Designs Heyyy

[@salehjamali6716]

Tell me how to on phone

[@DesignPilot]

You can on phone

[@MarwanAbdElghany]

i love you man..no homo

[@rainypriya8719]

This is fake video