Тёмный

Simple 3D Phone Animation In After Effects | No plugins | Tutorial 

GrafixM
Подписаться 3,3 тыс.
Просмотров 157 тыс.
50% 1

Hi, in this tutorial you will learn how to easily create simple 3D animated explainer videos. Animated Explainer Videos are very trendy these days. And I thought you might be interested in something like this. So, watch till the end.
Credit:
--------------------------------------------------------
Graphics: Designed By freepik.com
Music: Almost Vanished - Journey
Music: AK - Standing Together
--------------------------------------------------------

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

 

17 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 100   
@OfficialGrafixM
@OfficialGrafixM Год назад
Here is the PSD File >> drive.google.com/file/d/1a9nBpdhP2nerVmvukooiNjQwtIq1fn8N/view?usp=sharing The original Design belongs to "Storyset" at "Freepik".
@koishisen
@koishisen Год назад
instead of that 3d illusion, i recommend using the geometry options of shape layers that allow using depth in figures when cinema 4d option is on, this way is less laggier, and easier imo
@mycall_eyeYouTube
@mycall_eyeYouTube 6 месяцев назад
I’m going to use this video. Thanks for posting!
@trantovideo
@trantovideo 2 месяца назад
One of the great after effect tutorials
@bigbtechproductions
@bigbtechproductions 2 года назад
WOW. I didn't even know that this was possible. Thank you for this
@OfficialGrafixM
@OfficialGrafixM 2 года назад
Yes. Similar video with laptop will also be uploaded soon. Check out a preview I just uploaded.
@marveloussamuel7984
@marveloussamuel7984 2 года назад
Wow this is the tutorial I've been looking for!
@manueldelvalle3390
@manueldelvalle3390 Год назад
That's awesome my dude THANK YOU! Can't wait to try this!
@H53.
@H53. Год назад
It really helped. It simplified this effect to me.
@diegobarrios1090
@diegobarrios1090 Год назад
Doing that will not reduce the project performance or could it leave the project heavier?
@OfficialGrafixM
@OfficialGrafixM Год назад
What do you mea?
@praveen-ut4vz
@praveen-ut4vz Год назад
Amazing 😮😮 I had a doubt with this now that was cleared
@amvyskills5523
@amvyskills5523 Год назад
it was a good easy way to do it thanks
@wajeeharehman4268
@wajeeharehman4268 Год назад
can we make elements coming out of the screen in a 3D manner also in after After Effects ?
@OfficialGrafixM
@OfficialGrafixM Год назад
Yes that's also easily doable in after effects.
@wajeeharehman4268
@wajeeharehman4268 Год назад
Thankyou@@OfficialGrafixM
@reshadakhmed
@reshadakhmed 9 месяцев назад
wow! you amazing! ❤‍🔥
@minisota228
@minisota228 Год назад
ЧЕЛЛ ТЫ ЛУЧШИЙ СПАСИБО!!!!!!!!!!
@athinasdesigns
@athinasdesigns Год назад
Hi! very useful tutorial. I have some questions though. I used this to make a video for my company showcasing a mobile app. The application user interface was in an illustrator file alongside my mobile mockups. The thing is the mobile isnt full hd its a bit blurry. Is there any way to fix it? Originally my files were inside ai . I tried now and remade the entire thing. I put my mockups as smart objects from ai inside photoshop and then redid the animation in after effects from the photoshop files but I feel like the front of the mobile still doesnt showcase full hd. Because its a fake 3d effect I cant click the star icon it messes up the 3d layers(also the case with using illustrator files). I also had to remake the animation in 4 different dimensions which adds up to the problem. Cus every time there is an error all of them have to be redone. Is there any difference between using ai and photoshop files concerning the quality? For simple trim paths and lines ai is fine but for complex stuff I am not so sure. Please give me some feedback i would highly appreciate it.
@OfficialGrafixM
@OfficialGrafixM Год назад
OK, this is what I understand from this; You are trying to change the content of the phone screen by making changes to the photoshop file and then redoing the whole process. If that's so, you don't need to redo it. Just make changes to the screen layer in After Effects. Check out the last 2 minutes of this video. If that's not so, please put it in a different way so I can understand better.
@athinasdesigns
@athinasdesigns Год назад
​@@OfficialGrafixMmy issue is that the front of the phone looks blurry. Idk if it happens cus of the fake 3d effect. Because we use precomps. I had my assets on ai. And i put them in photoshop 1920 x 1080 to see if it will make a difference. Photoshop is raster graphics and after effects as well Ai is vector. There is a lot of elements in the app ui. I wasn't sure if the problem was because after effects needs to rasterise. Clicking the star icon from layers panel isn't applicable cus my layers won't be 3d anymore.
@OfficialGrafixM
@OfficialGrafixM Год назад
@@athinasdesigns yes thats because of precomposing. When you zoom in, it causes blurriness bcoz the precomposed layer limits the image size. The solution is that, make your composition and Photoshop design in a resolution higher enough that even when you zoom in, it doesn't effect the screen quality.
@athinasdesigns
@athinasdesigns Год назад
Ty so much I will check it again tmrw
@OfficialGrafixM
@OfficialGrafixM Год назад
:)
@_p30i
@_p30i 11 месяцев назад
awesome 😄👍👍
@aminulcreator
@aminulcreator 4 месяца назад
This tutoiral it's very helpfull.
@emelio6928
@emelio6928 Год назад
It's a nice method to make a 3d phone rotation, but there's a slight problem while rotation a phone. When it's at 90 degrees, you can see that edges of the shapes are a bit distorted, kinda blurred. Surely when it's rotation it won't be that much visible, but it's still there. Don't know if there's a way to fix it using this method
@OfficialGrafixM
@OfficialGrafixM Год назад
Yes the blurriness is because of the gap and empty space between each layer. In the video we create 1 pixel gap. Smaller gap = Less blurriness. This is a fake 3D. We are basically creating an illusion of 3D phone. If your scene includes a lot of the 90degree side views, then you can simply create a rectangle shape and place it perpendicular to the thickness layers and place it to the side. The will make the sides completely sharp. For better understanding, check out my 3D house animation tutorial. Thanks!
@poface4827
@poface4827 Год назад
Great tutorial man. Well done.
@hirenprabtani8796
@hirenprabtani8796 Год назад
Nice
@perlea.8223
@perlea.8223 Год назад
Can you please give us the link of the pre-designed file you downloaded from freepik? Thank you for the tutorial btw!
@OfficialGrafixM
@OfficialGrafixM Год назад
OK I'll share it ASAP
@fayd4n
@fayd4n Год назад
@@OfficialGrafixM 7 months later...
@OfficialGrafixM
@OfficialGrafixM Год назад
@@fayd4n Oops!!!
@OfficialGrafixM
@OfficialGrafixM Год назад
@@fayd4n I just placed a link in a pinned comment.
@sweember
@sweember Год назад
Thank you so much! It's really helpful 😊
@АлексадраПопова-щ1у
My camera distorts the perspective very much when it is rotated. What kind of setup could this be due to? When I rotate the camera, the card is greatly enlarged. But the proportions are preserved in this the video
@OfficialGrafixM
@OfficialGrafixM 2 года назад
Make sure to select only the camera layer while you are rotating the camera by dragging.
@roshanjejurkar1563
@roshanjejurkar1563 Год назад
Really Nice 😊
@IdhamHariztChaniago
@IdhamHariztChaniago 11 месяцев назад
niceeee tutorrrr
@mervat.
@mervat. Год назад
Thank you sooo much 🌻 Very helpful 😍🔥
@officialaqeel7000
@officialaqeel7000 2 года назад
nijat bru; you making awesome.
@ArunSharma-pe7cx
@ArunSharma-pe7cx Год назад
what about side button? pls tell us...
@OfficialGrafixM
@OfficialGrafixM Год назад
That can be made using the same technique we used to create the main body of the phone. But this technique is best suited for minimal design. This animation will mostly be used for mobile app explainer videos. For that purpose, this minimal design is going to be enough. For a realistic 3D phone design we will upload Element3D and Blender3D tutorials soon.
@hassanahmed_1997
@hassanahmed_1997 Год назад
Thank you so much! you make it easy
@tashditdiganta7877
@tashditdiganta7877 2 года назад
how to make a complete explanation video, based on audio. I mean how do combine video and audio to explain video?
@OfficialGrafixM
@OfficialGrafixM 2 года назад
Hello! I'll make a detailed video about it soon :)
@tashditdiganta7877
@tashditdiganta7877 2 года назад
@@OfficialGrafixM Advanced Thank you
@Klausjp.ontheroadagain
@Klausjp.ontheroadagain Год назад
ok, when did you edit the two circles for the Camera on the back layer
@OfficialGrafixM
@OfficialGrafixM Год назад
Actually, the circles were already created in the photoshop layer. The back layer in the PSD file already has circles on it. So in After Effects, it's just a predesigned layer being used as a single layer.
@Klausjp.ontheroadagain
@Klausjp.ontheroadagain Год назад
@@OfficialGrafixM the I downloaded do have this
@OfficialGrafixM
@OfficialGrafixM Год назад
@@Klausjp.ontheroadagain Did you download from the google drive link I shared?
@manthanyagnik20
@manthanyagnik20 Год назад
When i dublicate the thickness layer at a certain level, a black solid is visible how to solve tht?
@OfficialGrafixM
@OfficialGrafixM Год назад
You need to adjust the position of front and back layer. Try doing that.
@RezaRizkiyanto-dp3om
@RezaRizkiyanto-dp3om Год назад
dude i still have the black solid problem do not know what to do@@OfficialGrafixM
@yharaguerra783
@yharaguerra783 11 месяцев назад
graciassss!!! ☀
@danialfitri5150
@danialfitri5150 Год назад
Can you do this with AI instead of photoshop
@OfficialGrafixM
@OfficialGrafixM Год назад
Yes. Just make sure that you have the same layers in your AI file.
@sajiiidali
@sajiiidali 2 года назад
excellent
@stepheninalegwu2376
@stepheninalegwu2376 9 месяцев назад
What is the name of this app?
@OfficialGrafixM
@OfficialGrafixM 9 месяцев назад
What app?
@Maka_oman
@Maka_oman Год назад
Soooooo useful thank you
@mehdibudd6946
@mehdibudd6946 Год назад
thx bro very helpfull
@kb3146
@kb3146 Год назад
Thank you so much! :D
@dansan4842
@dansan4842 Год назад
thz skills
@TQ-DES
@TQ-DES 10 месяцев назад
ممكن رابط الملحقات عشان نطبق الدرس
@OfficialGrafixM
@OfficialGrafixM 10 месяцев назад
It's in the pinned comment under the video.
@marveloussamuel7984
@marveloussamuel7984 2 года назад
can you please place a link to your project files?
@OfficialGrafixM
@OfficialGrafixM 2 года назад
I think I lost the project file. I'll try to find it.
@marveloussamuel7984
@marveloussamuel7984 2 года назад
@@OfficialGrafixM Thanks a lot, please kindly send link to the project files if you find it. If you don't can you please just explain how you designed the side view of the phone. I think that's the only daunting thing there I cant design myself.
@OfficialGrafixM
@OfficialGrafixM 2 года назад
Side view? I think the side view is created inside after effects.
@marveloussamuel7984
@marveloussamuel7984 2 года назад
@@OfficialGrafixM Thanks so much I was able to replicate finally with an iphone mockup....
@marveloussamuel7984
@marveloussamuel7984 2 года назад
Just one thing if you can help.... Can this tutorial work for phones that have sides buttons....Like for instance an iPhone side button will be distorted if you use the index script as in the tutorial
@thuan8673
@thuan8673 Год назад
can you share the graphiic design link form freepik
@OfficialGrafixM
@OfficialGrafixM Год назад
Please go to freepik.com and search for "home screen concept illustration by storyset". If you want the modified design file that I used in the video, See the first comment under the video.
@thuan8673
@thuan8673 Год назад
@@OfficialGrafixM yoo found it thank you
@itzhxcr7771
@itzhxcr7771 Год назад
where can i find the file for phone ?
@meherimasfoodvlogs4308
@meherimasfoodvlogs4308 11 месяцев назад
Free pik
@thongnguyenvan6085
@thongnguyenvan6085 Год назад
How to export json sir
@OfficialGrafixM
@OfficialGrafixM Год назад
You need extensions like "BODYMOVIN" to export JSON from after effects. There is no built-in feature for that.
@everythingishere2130
@everythingishere2130 Год назад
Sir can you give me project link
@selcukbahceci6642
@selcukbahceci6642 4 месяца назад
project file ?
@OfficialGrafixM
@OfficialGrafixM 4 месяца назад
Check the pinned comment.
@muhamadismailkarim5631
@muhamadismailkarim5631 6 месяцев назад
Best video🩵
@usuariodeyoutubexd430
@usuariodeyoutubexd430 2 года назад
please upload ai file
@wabs_._
@wabs_._ Год назад
Please can i get the psd file
@OfficialGrafixM
@OfficialGrafixM Год назад
It's available in the first comment.
@onyemaifeanyi
@onyemaifeanyi 4 месяца назад
No longer available
@onyemaifeanyi
@onyemaifeanyi 4 месяца назад
​@@OfficialGrafixMno longer available
@OfficialGrafixM
@OfficialGrafixM 4 месяца назад
Please check one of the pinned comments.
@aulkripto
@aulkripto 2 месяца назад
bg bagi template aja, ribet ajg
@ducash7930
@ducash7930 Год назад
No your too fast
@OfficialGrafixM
@OfficialGrafixM Год назад
What do you mean?
@ducash7930
@ducash7930 Год назад
@@OfficialGrafixM next time you make videos do it slowly
@OfficialGrafixM
@OfficialGrafixM Год назад
@@ducash7930 Noted!!!
@koishisen
@koishisen Год назад
@@OfficialGrafixM this is the reason why you should put (not for beginners) in the title lol
@n_aislamicstudio
@n_aislamicstudio 2 года назад
Thanks For this Share Skiles
Далее
Character Animation In After Effects  | Complete Process
31:47
怎么能插队呢!#火影忍者 #佐助 #家庭
00:12
5 Tips I Wish I Knew Before I Started Motion Design
4:18
Fake-3D Rotation Rig in After Effects | Tutorial
9:52