Here is the PSD File >> drive.google.com/file/d/1a9nBpdhP2nerVmvukooiNjQwtIq1fn8N/view?usp=sharing The original Design belongs to "Storyset" at "Freepik".
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
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.
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.
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.
@@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.
@@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.
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
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!
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
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.
@@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.
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
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.
Here is the PSD File >> drive.google.com/file/d/1a9nBpdhP2nerVmvukooiNjQwtIq1fn8N/view?usp=sharing
The original Design belongs to "Storyset" at "Freepik".
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
I’m going to use this video. Thanks for posting!
WOW. I didn't even know that this was possible. Thank you for this
Yes. Similar video with laptop will also be uploaded soon. Check out a preview I just uploaded.
One of the great after effect tutorials
Wow this is the tutorial I've been looking for!
That's awesome my dude THANK YOU! Can't wait to try this!
It really helped. It simplified this effect to me.
Amazing 😮😮 I had a doubt with this now that was cleared
it was a good easy way to do it thanks
wow! you amazing! ❤🔥
Great tutorial man. Well done.
awesome 😄👍👍
Thank you so much! It's really helpful 😊
This tutoiral it's very helpfull.
Really Nice 😊
nijat bru; you making awesome.
Thank you sooo much 🌻
Very helpful 😍🔥
Thank you so much! you make it easy
Nice
Doing that will not reduce the project performance or could it leave the project heavier?
What do you mea?
ЧЕЛЛ ТЫ ЛУЧШИЙ СПАСИБО!!!!!!!!!!
niceeee tutorrrr
what about side button?
pls tell us...
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.
can we make elements coming out of the screen in a 3D manner also in after After Effects ?
Yes that's also easily doable in after effects.
Thankyou@@OfficialGrafixM
graciassss!!!
☀
Can you please give us the link of the pre-designed file you downloaded from freepik? Thank you for the tutorial btw!
OK I'll share it ASAP
@@OfficialGrafixM 7 months later...
@@fayd4n Oops!!!
@@fayd4n I just placed a link in a pinned comment.
Soooooo useful thank you
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.
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.
@@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.
@@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.
Ty so much I will check it again tmrw
:)
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
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!
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
Make sure to select only the camera layer while you are rotating the camera by dragging.
how to make a complete explanation video, based on audio. I mean how do combine video and audio to explain video?
Hello! I'll make a detailed video about it soon :)
@@OfficialGrafixM Advanced Thank you
excellent
thx bro very helpfull
ok, when did you edit the two circles for the Camera on the back layer
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.
@@OfficialGrafixM the I downloaded do have this
@@Klausjp.ontheroadagain Did you download from the google drive link I shared?
Thank you so much! :D
When i dublicate the thickness layer at a certain level, a black solid is visible how to solve tht?
You need to adjust the position of front and back layer. Try doing that.
dude i still have the black solid problem do not know what to do@@OfficialGrafixM
thz skills
Can you do this with AI instead of photoshop
Yes. Just make sure that you have the same layers in your AI file.
What is the name of this app?
What app?
ممكن رابط الملحقات عشان نطبق الدرس
It's in the pinned comment under the video.
can you please place a link to your project files?
I think I lost the project file. I'll try to find it.
@@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.
Side view? I think the side view is created inside after effects.
@@OfficialGrafixM Thanks so much I was able to replicate finally with an iphone mockup....
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
Sir can you give me project link
can you share the graphiic design link form freepik
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.
@@OfficialGrafixM yoo found it
thank you
How to export json sir
You need extensions like "BODYMOVIN" to export JSON from after effects. There is no built-in feature for that.
where can i find the file for phone ?
Free pik
Best video🩵
project file ?
Check the pinned comment.
please upload ai file
Thanks For this Share Skiles
Please can i get the psd file
It's available in the first comment.
No longer available
@@OfficialGrafixMno longer available
Please check one of the pinned comments.
bg bagi template aja, ribet ajg
No your too fast
What do you mean?
@@OfficialGrafixM next time you make videos do it slowly
@@ducash7930 Noted!!!
@@OfficialGrafixM this is the reason why you should put (not for beginners) in the title lol