Draw attention with Visual Hierarchy
Do you remember the glorious days when 3D took over the design trend? 3D was elaborately used in illustrations, videos, websites etc thanks to the interesting aesthetics it brought to the viewers eyes.
Inspite of its aesthetics, reusability and animating capabilities, usage of 3D has slowed down due to the tedious workflows it demanded. 3D designs required additional time and in many cases it delayed project deliveries.
So is there an approach to build 3D like objects, minus the hassle?
Is it possible to create 3D like images without putting in time and effort for making actual 3D?
Yes, it is possible. And it can cut down TAT by up to 75%
2.5D - Scaling to the demand of 3D
2.5D (two-and-a-half dimensional), alternatively known as “pseudo-3D” is a technique of using 2D graphical projections and similar techniques to cause images or scenes to simulate the appearance of being three-dimensional (3D) when in fact they are not.
2.5D illustrations are known for their unique and artistic appearance, which is achieved by combining flat 2D elements with 3D depth and perspective.
2.5D has these following advantages over 3D
-
This can create a more visually striking and interesting design compared to standard 3D illustrations which can be technically challenging.
-
Such illustrations are generally easier to create and more versatile than 3D illustrations. They can be created using 2D drawing software, making them more accessible to designers with less experience in 3D modeling.
-
They tend to have smaller file sizes and render faster than 3D illustrations. This can be advantageous in situations where large-scale, complex 3D illustrations are not necessary, or when the project requires quick turnaround times.
-
2.5D designs are generally more compatible with a wider range of platforms and devices, making them easier to distribute and share. This is because 2.5D illustrations can be exported as 2D images, which can be viewed on a variety of devices without requiring specialised software or hardware.
Here’s a demo on how to achieve this.
Imagine a flat polygon for an example here.
Now lets imagine a light source adjacent to our object. In this case let’s consider the light source to be on the upper left corner of the polygon.
We use this as a benchmark to create all the illusions that make our flat object look three dimensional.
Now that we have imagined a light source, lets start off with adding shades of our colour to different sides of the object. As we all know the sides closer to the light source will have more brighter tones than the sides that eclipse the light source. Keeping that in mind we can colour the opposite sides dark.
To make it even more interesting we can add gradients to the sides.This gives the surface a texture and gives an impression of light bouncing off the surface. You can also add blurs to smoothen out the gradient.
Now we can add the finishing touch by giving it a shadow which gives the impression of perspective and depth to it. The shadow obviously has to be falling away from the light source because yeah physics!
This is how you make a 2.5D object.
Applying these few basic principles you can transform all your works by giving it more character, be it a button, icon or even a whole scene in an artwork. This can be done using Adobe illustrator, Adobe Photoshop or even figma for that matter.
Here is a set of illustrations made using the same technique.
There are designs. And there is AntStack Design. At Antstack Design we constantly innovate to create designs that power Serverless Application Development.
As proud leaders of the serverless revolution, we collaborate with visionary engineers, research, and marketing teams to design your system, helping you meet current needs while scaling with growth ambitions.Check out the se
Your journey deserves a great story. Design one with us. https://www.antstack.design
