How to Create and Add 3D Images On Facebook – Video Tutorial

3D images on Facebook show special motion effects as you scroll over them or move your phone. We’ll learn, step by step, how to post 3D images in minutes!
Share on facebook
Share on twitter
Share on pinterest
Share on whatsapp
Share on telegram

You cannot bore people into buying your product; You can only interest them in buying it.

- David Ogilvy

What is a 3D Image?

It’s not something that looks like it was created by Pixar. No. What we mean here is an image designed for multiple layers of depth perception. This makes the difference in depths between your foreground and background very visible, and that causes your subjects to look like they’re moving independently in this 3D world you’ve made.

 

If you’ve ever seen one of those fancy 360 degree images on mobile, this is going to give your users a similar experience as they move their phones around interacting with your post!

 

To give a brief summary, what I’ll be doing here is essentially creating one design of 2 different formats – an original design and a depth map of this design. When you upload these two formats at once, Facebook will render this as a 3D image. This will allow you to post 3D images on Facebook.

What you need On Hand:

  • Glorify App or Photoshop
  • Working Facebook Account

Let's get Started!

Step 1: Create A Canvas

Set your canvas size on “Select a custom size for your design” and set it to 2160 (w) x 2700 (h). We’ve found that this is a great size to post 3D images on Facebook, on both desktop and mobile.

Step 2: Choose A Background

Now you can start selecting your background image. You can choose whatever background image you prefer or simply select the same background we’re using. We found this background by searching “hacker”, because that’s our theme for this 3D image. We recommend a background that’s not too complicated or ‘busy’ with too many elements.

Step 3: Lay Out Your Elements And Crop them

Select and lay out the elements/objects in your design. If you’re using an image, make sure to remove the background of any images you’re using with the Background Remover tool. Using the Keep Tool (green plus), select the areas that you want to keep. With the Remove Tool (red minus), select the areas you want to remove.

Step 4: Resize Your Image

After removing the background of your image, resize the image so you’ll have an easier time scaling it and moving it around the design. Resize images by double clicking on the image.

Step 5: Make Your Design Pop With Borders

We’ve found borders tend to make our design pop more. To create a border on Glorify, first select the Elements button at the left sidebar. Then select Shape and select the square. Stretch the shape to your desired size for the border. Here’s the important bit. Set the shape transparency to 0.01, select your border colour (we went with white), then input your border thickness and corner radius. You now have a border.

Step 6: Layer Your Elements/Objects

Here’s another important tool. I’m gonna call it the Layering Tool. Select an image you want to move to the front or the back of the design. Click on the arrow indicated below. In a Glorify design, there are multiple layers that decide what images are overlaid above others. For example, I want my hacker guy to overlay my border so I’ll click on him and click the up arrow until that happens.

 

The middle arrows either bring an element all the way above or all the way underneath other elements. So it’s useful when you have multiple overlapping objects. Continue building the layers until you have your final design.

Step 7: Save and Download Your Design

Save your design, and download it as “Web Optimised JPG”.

 

Important to note:  Posting 3D images on Facebook only works with jpg/jpeg files, so be sure to save all your files as .jpg or .jpeg formats. Downloading them as png or pdf will not work for 3D images on Facebook. Feel free to name your image anything you want. It works with any name. We named ours facebook.jpg.

Step 8: Duplicate The Page

Duplicate your design by clicking on Pages then on the Duplicate icon below. Select the 2nd page. We’re now going to create a depth map.

Step 9: Create the Depth Map

A depth map is basically a black and white image. To start creating your depth map, there are 2 main rules to remember:

 

1) It’s important to note that everything about the layout, positions and shapes of the elements in the design should not be changed. Otherwise you’d have to duplicate the original image again and redo everything.

 

2) When you post 3D images on Facebook, your elements are perceived as shades of black and white: Blacker images are perceived to be further in the back, while whiter images are perceived to be nearer to the front of the design.

 

If you have a hard time remembering that, just do it like some of us do. Black sounds like back, so the blacker the colour, the further back our elements are. The whiter the colour, the further to the front the element is. 

Step 10: Fill Up Your Objects

A little tip here. By right, my background should be pure black, or #000000. What we found out is, if you halve the black shade of your background, your 3D image tends to be less buggy.

 

Since our background is obviously going to be the furthest to the back, it’s going to have the darkest shade of black. So I’ll just select a shade between black and white. Keep in mind that all your other elements will be lighter than this colour. Make sure that you raise the Fill Colour gauge all the way to 100%. Fill up every object in your design, with varying shades of black. The nearest object in your design should be pure white or #ffffff.

Step 11: Save and Download Your Depth Map

After you’re done, save the depth map. Download the design as a “Web Optimised JPG”. It’s crucial to give it the same name as your original design and add a “_depth” to it. For example, if you named your original design (the first design that’s not black and white), my3dimage.jpg, your depth image should be named my3dimage_depth.jpg.

 

Now we’re ready to post 3D images on Facebook!

Step 12: Upload Your 3D Images To Facebook

Now, log into Facebook, and remember, this only works for Facebook. At this point, you can only hope and pray that it works. A lot of things can go wonky with posting 3D images on Facebook if you’re experimenting with different shades and overlays and effects. The best way to test your lovely creations is to upload them and Facebook will generate a preview. We recommend posting them on a test page to compare your designs.

 

Now, if you’re ready, click on Upload Photos/Video. Choose BOTH your original and depth map designs. Yes, Facebook automatically reads them as ONE 3D image and puts them together to generate what you’ll see before your eyes in a few seconds. This is what you’ll see if you’re successful. If not, check the names of your images. Did you name them right? Or did you adjust something in your original design without duplicating it again?

Step 13: You've Posted A 3D Image!

Voila! Your 3D image is complete! Well done. If you view it on desktop, you just have to move your cursor around the image or scroll through it to see the effects. Its true glory comes when you view it on mobile, which is what most social media users, aka your online traffic, do. Move your phone around and watch your designs putting on a show!

 

Well, there you go. Feel free to ask us any questions or contact us if you run into any trouble. Shoutout to Omar and his team for creating such an amazing design tool. Last but not least, if you’d like to share what you’ve created, do post it and share a link with us! We’d love to exchange creative pointers with everyone. We hope this has helped you in your businesses and engagements! Here’s the 3D Image in action!

Here's The Video Tutorial

12 - Dream Fox Design

Thinking of Purchasing Glorify?

You’re in luck! Glorify is having an exclusive discount, at up to 60% off it’s original price. Now that’s one heck of a deal! As a design agency, we deal with hundreds of images a month, and Glorify has made it so much easier and faster for us to create designs.

What we love about glorify: How simple it is to use and it’s background removal tool. If you don’t already know insane the background removal tool is, check out the video tutorial above where we used it live.

5e660dccde5ea 13 - Dream Fox Design

Table of Contents

Share Article
Share on facebook
Share on twitter
Share on pinterest
Share on whatsapp
Share on telegram
RELATED ARTICLES
Like This Article?

Subscribe to our newsletter to get the latest insider updates, news and insights from the digital industry. No spams. We promise.

YOU MIGHT ALSO LIKE

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top