We Build Custom Facebook 3D Stereoscopic Images For Exciting Social Media Ads

Below is a brief description of how we create stunning social media ads using Facebook’s proprietary 3D software.

This is an animated GIF showing an approximation of what a Facebook Stereoscopic image looks like when viewed on a smart phone or through Facebook online.

See a live example HERE.

It’s achieved using a system of transposing values of grey tint converting this values to numbers, which inform the software how much of the stereoscopic effect to apply to the image. As you can see here’ the grey values can be as detailed as you like.

This image shows the original graphic before the effect is applied.

Facebook 3D stereoscopic images create a visual illusion by simulating depth perception. This is achieved through a technique that captures two slightly different perspectives of the same scene, mimicking the way our eyes perceive depth. It’s done through a clever use of stretching images based on a physical calculation that the designer communicates to the software by using gradients from black to white. White will appear to float in the foreground and black will recede.

By tilting or moving the phone, the viewer can trigger the 3D effect, bringing the content to life.

This image shows the gradients I applied to the different shapes to create the stretching effect. The logo is solid white, so it has zer0 stretching, but does appear to hover over the other objects and the background.

White will not move the pixels, and black will move them a lot. The darker the grey colour, the further back in the layers an object will appear. The stretching effect happens when a single object contains a gradient from dark to light. The two Transformers at the top have a gradient which causes the software to designate the head and shoulders as “foreground” and the shins and feet as “background”. The background (dark grey) objects move very little, while the foreground (light grey) objects movce a lot. This effect is achieved pixel by pixel, so each pixel line of a gradient will move a different amount.

The isolated objects in this case are the Transformers. Here you can see each element as it would be displayed using this technique. This is what they look like without the stretching effect.

Hasboro wanted several designs made using the stereoscopic effect.any were created to launch a whole ad campaign for the new Transformer Beyond Reality series.

We were provided with the elements and given free licence to arrange them and create the stereoscopic effect. On smart phones the two different layouts (landscape and portrait) produced very different 3D effects, so both layouts were used.

This image merely illustrates the individual objects isolated from the background.

Hire Us To Help You Get Noticed

Creating new and engaging social media content can be a lot of fun. This ad for example is attractive and engaging, and most of all, it’s effective.

See the actual stereoscopic ad here.
Get Noticed Ad