Creating All-Star Baseball Card Frames in Facebook Frame Studio
Exploring & Exploiting the peculiarities of the Camera Effects Platform
While we were waiting for our AR Studio beta invite, Truth Labs decided to try out the other portion of the Camera Effects Platform: Frame Studio. If you follow our work, you know we are big baseball fans, which inspired the creative direction we went with while experimenting with this platform…
Initial Designs
Through the design process, we learned of the extensive array of submission requirements on this new platform and that most of them are not very well documented. For example, our preliminary designs incorporated some Truth Labs branding, but unfortunately, that’s not allowed, so we had to adjust accordingly:
After the first round of edits and removal of the branding, it was time to test out the effect manager. Our original intent was to simply export the frame image and go for a portrait effect. So, we submitted it… just to see what would happen:
Unfortunately, this frame wasn’t accepted either. When a design is rejected, there isn’t much guidance on why, or how to fix it. Luckily, the feature allows you to easily resubmit frames (with or without modifications, multiple times), and it eventually went through.
Out in the wild
With this frame being newly available to the public, it found its way to users all over the world as a result of the network effect. As described in this video from F8, an effect’s visibility to someone is determined algorithmically. We started to see individuals using the custom frame for their own purposes, via the “gallery” feature, but were not clear on exactly how they found the frame.
A user can apply a frame to their own photos by clicking an existing image with the effect and selecting the “Try It” option. We assume that exposure to the design via newsfeed updates was what generated the majority of the traffic on our frame.
Though we were pleasantly surprised by its widespread use as it stood, the effect was not what we had hoped for. We went through another round of edits and alterations to ensure its responsiveness.
Adapting a design for Frame Studio
With a few modifications and tricks, our original design concepts could easily be adapted to fit all aspect ratio guidelines. Here is what we learned:
Dimensions
Though this is not explicitly stated anywhere, we found through experimentation that the best resolution to upload your assets is 2400 x 2400. After adjusting our designs in Illustrator, this is what the full size comp looks like:
Slicing
In this format, we wanted to maintain the text and width proportions of the border. After spending quite a bit of time trying a 9-grid format, we realized that we really just want the design to Scale Vertically, and Stretch Horizontally.
In order to achieve this, we sliced the image into 3 parts: the left side, right side and the middle portion that repeats horizontally. This section was then scaled to 2400 x 2400.
Positioning
This set of three images can then be dragged and dropped into the positioning tool. They are all initially centered at 100% of the viewport. After sending the middle layer to the back, turn off “Shrink with width” for all three images. Next, dock the left and right image to their sides (0%) to produce a result that is immediately acceptable in portrait and profile view:
You’re not quite done yet, though! As you can see, there are gaps that appear in the landscape view (bottom right). To fix this, move the background layer past the edge of one side (-1%), duplicate it, and move the clone to the other side (-1%). This will close the gaps:
Finally, to add a weathered, dated look to the image, we added one more 2400 x 2400 semi-transparent texture as the top-most layer, turning off both “Shrink” options, so that it scales regardless of the orientation.
Accessing the effects
Anecdotally, in talking to people about these features, we’ve noticed that many people don’t use or even know about the Facebook camera. The fact that it has separate, but similar, functionality to the camera in Facebook messenger (and Instagram) makes it even more confusing.
How do you access these effects? Open the Facebook app on your phone, then swipe from left to right. You then change the effects by swiping up and down. You can take photos or videos, post them to Facebook, or save them to your device to share through other platforms. The feature also allows you to post content through a “My Story” channel, creating an additional method of information sharing to the existing Facebook experience.
The Results
Around the same time that we finished the frames, we also welcomed 6(!) new members to our team. Check out Truth Labs’ 2017 Rookies:
Want to try the frames yourself? Like our Facebook Page, and it might show up in your Facebook camera.
What’s Next?
Truth Labs is one of the first to have access to Facebook’s new AR Studio beta. Our team is actively researching and developing effects for this exciting new platform. Interested in getting a demo of the platform, or in need of a company that can build high quality interactive experiences for your own brand? Let us know.
