Facebook 360-degree graphic

Posted on Posted in Facebook, Photoshop, Tutorial

This past season, we saw both the Cleveland Cavaliers and the Tampa Bay Buccaneers take things the next level with Facebook’s ability to display 360 images and video. However, Tyler Trout and Joey Caione didn’t simply share a photo or video. Instead, they created info-graphics that fully harnessed this ability.


I am excited to see how this is used by everyone. In addition to infographics, I believe this will be a fun tool to release schedules, announce signings, and display starting line-ups.


Tutorial

The max file size that Facebook can properly handle this feature is at 6000 x 3000 pixels. You can go smaller and it will work just fine with 3000 x 1500. I highly recommend keeping that 2:1 ratio at all times.

To get Facebook to register that this is a 360-degree image, you need to adjust the file information. To do this, download this .xmp file. Once you have this downloaded, go to File > File Info.

Go to the bottom center and click on ‘Template Folder’ so that a drop down menu appears. Click on ‘Import’ and find the .xmp file mentioned above and upload it.

Now all you have to do is go to ‘Save As’, save the file as a .jpg and upload to Facebook. You’ll know it works when a sphere shows up in the preview image as it is uploading.


Designing for 360-Degrees

It’s awesome that we know how to do it now, but there are still quite a few quirks to it for when you design. Luckily both Tyler and Joey were kind enough to share some tricks before I really got a chance to play around with designing.

  • Make sure the ends matchup so it’s seamless when they wrap. Details like that will take it to another level.
  • Test, test and test some more. I think i made 5-6 different versions until I got it how I wanted to look.
  • Follow the guides in photoshop. If you go outside of the guides provided in the template then it will warp/stretch and be very hard to read and navigate.

Now, to help you cut down on having to test and create 5-6 versions, I’ve created a photoshop template to help with the .xmp file already loaded on to it. I recommend using the 3000 x 1500 px template as the smaller file size is easier to manage for the computer as it will take up less RAM when designing.

6000 x 3000 px Photoshop Template

3000 x 1500 px Photoshop Template

These templates are simple and rectangular. As you can see that I’ve made a grid to help you know what is a safe area from being stretched, and what is safe. The light blue area is completely safe. I recommend trying to keep your main images, text, and other  content confined to these areas. The pink areas will get slightly stretched vertically, but is a fine location to place text and patterns. The white areas get stretched quite a bit and become difficult to design. I highly recommend avoiding putting much content in this area.

Here is an example of this grid displayed as a 360-degree graphic on Facebook.

Notice that the center three squares are the preview image before anyone clicks on the image. I recommend using this space to entice them to play with the 360-degree image. Joey used the NBA Championship ring, while Tyler used an awesome image of Mike Evans. In addition, I recommend putting something to indicate that it is a 360-degree graphic and to use the mouse.

To view all the file included in this tutorial, click here.


If you play around with this and have any additional tips or information that we can add to this blog post or questions, please email us at Darnell@SpreadHDCreative.com.

Leave a Reply

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