top of page

[How-To] Make your Frames look 3D without using 3D Objects

 

INTRODUCTION ^


Since the raise of Silicon Graphics Inc during the 1980s, 3D had been viewed as something of a more prestige technique of turning any objects 3-Dimenionally. Anything you can think of, 3D Modeling; Objects; etc. Back in those days, creating 3D seems like only high performance computer can achieve and was definitely out of reach for people who can't afford those expensive computers like an SGI Terminal.


However, times has changed. Anyone nowadays can easily just install a 3D modelling program or any programs that allows you to convert any object 3D. Performance still is a big thing since such techniques still requires a good graphics card and a CPU. The higher the complexity, the more computational power it requires. After-all, not everyone has access to a good computer that can handle 3D objects with high complexity.


That is what today's post is for. You will still require a computer with decent specs to follow what I am going to show you. I will be using Adobe After Effects to demonstrate how to create 3D without touching any of the 3D Conversion or 3D Elements built into the program nor will you require any 3D Plugin.


Note that this is just to provide you with the basic knowledge on how to fake a 3D effects with using a 3D object and you are free to this knowledge and branch out to anything more complex.




 

REAL 3D VS FAKE 3D ^


There are lots of top notch 3D Modelling programs out there that enables you to create 3D, actual 3D. Autodesk Maya / Cinema 4D / 3D Max / etc. Each and every one of those programs allow you to view object 3-Dimentionally, real 3D. Even "Hybrid" programs like Adobe After Effects has 3D built-in that allows you convert a 3D object among the 2D layers.


Once again, the higher the complexity, the higher the performance requirements. If 3D modelling is the key here, then there is nothing short of simply just having a good computer. If you just need to create a frame or button and make them look good, there is a way to make them look 3D with some good depth without actually converting the objects into 3D.


To put it in layman's term, 3D uses 3 different dimensions of measurement with X Y and Z whereas a "Fake" 3D aka still a 2D that uses only X and Y. Despite having only 2 dimensions of measurement, there is still a way to trick the eyes viewing the object as 3D and that is what today's post is for.



 

EDITING IT ^


Today's demonstration will be illustrated with Adobe After Effects on 2D layers and no 3rd party plugins were used. The following steps will show you how to create depth to a frame to give it an illusion that it is 3D.


1. Create a new "Shape Layer" and use this as a base layer. This layer will also form the frame or border. Proceed to draw a frame with it. 2. Set the Fill as "Transparent" and Stroke to a thickness of your choosing and a color of your choosing.
3. Duplicate the layer from (1) and set this below the base layer created from (1). 4. Set the Fill to a color of your choosing and Stroke to "Transparent"
5. Duplicate the layer created from (1) and set this new layer below (1) and above (3). 6. Add the effect "Gaussian Blur" from Effects Preset and set the amount to double of the stroke value from (2).
7. Select the layer created in (5). Now you got to reduce the size of this frame to such a way that the blurry outer edges get covered under layer (1). 8. You got to use your own judgement to determine the right amount for the Gaussian Blur and the stroke amount for (5).
9. The rule of thumb here to create a frame with cave-in effect is to set (5) darker than (1) and to create a pop-up effect. set (1) brighter than (5)



 

CONCLUSION ^


The steps above demonstrate the most basic way of creating a fake 3D effect to your frame or button or even anything you needed to add some depth to it. Just to recap the basic 3 items you will need for that;


1. The Base Frame or Border 2. Background for the Base Frame 3. A Duplicate layer of the Base Frame with the Gaussian Blur effects

The 3D Cave-in or Pop-up effect will depends on your color schemes with the Base Frame brighter than the Blur Frame to create the cave-in effect and the Base Frame darker than the Blur Frame to create the pop-up effect.











8 views0 comments

Comments


bottom of page