How to Make a AR Filter Business Card with Meta Spark
AR
07/04/2024
In this quite lengthy blog, I'll describe the process and learnings from creating AR business cards.
If you want help in making your own. feel free to book a consultation or send me an email.
In Japan, the act of handing out meishi (business cards) are alive and well. And the reaction I get from whipping out these things is truly priceless.
3 Part-Process
The process is broken down into three parts, but all intertwined.
On the tech side you nee a graphic design program of choice, and AR filter creator of choice. Mine would be Figma and Meta Spark.
Part 1 - Graphic Design
Part 2 - Printing & Material
Part 3 - AR Filter
Part 1: Graphic Design
Step 1: Design with your Components
Using your design program of choice — mine is Figma, Collect all the necessary components of your or your clients business card:
Dynamic QR Code — This is very important, in case your AR filter url changes later, or you want to modify it.
Target tracker — This should be the whole card either the front, or the back, or both. Not a section of the card.
Name and title
Logo or Branded Asset
Contact Information
Email
Website URL
Social Media
Location
Scanova.io and QR Code Monkey and are my choices for dynamic QR codes. QR Code Monkey has some fun and free customizations to the QR.
Note you will have you pay if you're making a lot of these like me, you're going to want to make sure it's covered in your pricing.
Step 2: QR Code Tests and Considerations
I cannot stress enough how important it is to test the damn dynamic QR code. It's fundamental to the business card, and you don't want to mess it up before ordering 500 copies of a unusable QR.
Link the QR. Temporarily link to your website or Linktree (which you can use to link to your filter later).
Stick to High-Contrast Colors. Be weary of gradients. If you're passing AA or AAA contrast on Polypane, you're pretty set.
Test with a Color-Printed Prototype. Just because it works on your screen, doesn't me it'll work when it's printed out to it's actual size.
Step 3: Target Tracking Considerations
I used to think that anything could be a target tracker, but that's far from the truth. Some considerations when designing and testing the prototype of the target tracker your card that aren't so obvious.
Avoid symmetry or too much patterns. Symmetrical designs are neat and tidy, but when it comes to AR trackers, they can be a bit boring. Asymmetry, on the other hand, keeps the AR software on its toes, giving it more unique points to latch onto.
Do keep it complex. A simple pattern might look clean, but in the world of AR, it can be a snooze-fest. Complex designs provide a rich tapestry of details for the AR tracker to cling to, ensuring your AR effects pop up precisely where you want them.
We like it sharp, not soft. Soft, blurred edges can make it tough for the AR tracking to find and stick to your card's design. Sharp, crisp details act like anchors, making the tracking process more accurate and reliable.
Avoiding white space or transparency. White space might be a darling of minimalist design, but for AR trackers, it’s like walking on thin ice—unreliable and tricky. Transparency can cause similar issues, confusing the tracker and messing with your AR effects.
Take a look at this Meta Spark documentation for more information. Take all of these with a grain of salt. As long as your filter works for you that's all that matters. Just know that this might effect your output.
Ahh, the joys of seeing your digital design in real life!
Part 2: Printing & Material Selection
Creating a stunning AR business card isn't just about killer design; it's also about picking the right materials and ensuring high-quality printing. Requesting proofs of your prints. Here’s what you need to know:
Color Accuracy. Make sure the colors in your design translate accurately in print. This is crucial for brand consistency and also affects the AR tracker’s ability to recognize your card. Colors that are too dark or too light can mess with the tracking.
Preferred Finish - Matte: Avoid glossy finishes as they can create reflections that interfere with the QR code and AR tracking. If you love the glossy look, consider a satin finish as a middle ground—it offers some shine without too much glare.
Rounded corners will see less damage. If you have the option to use rounded corners, I highly recommend them.
Lighting, lighting, lighting: Test your card under different lighting conditions to ensure it remains scannable. Natural light, office light, and even dim lighting should all be part of your test scenarios.
Beware of embossing: Although embossing can elevate the look of your business card. Ensure the printer uses high-quality, smudge-resistant ink. I've used a silver emboss, which looked pretty, but leaked a lot, and effected the effectiveness of the filter.
See if you can request physical proofs to see exactly how the colors look before finalizing your order if possible. Digital previews can be deceiving.
I find that rounded corners are harder to damage and best for keeping your AR effects usable!
Part 3: Creating Your Filter in Meta Spark
So you’ve got your stunning business card ready, and now it’s time to add that wow factor with an AR filter using Meta Spark. Let’s make this part shine, just like you! ;)
Meta Spark (formerly known as Spark AR) is a robust, user-friendly platform that lets you create interactive AR experiences. It’s widely used, has a supportive community, and offers plenty of resources to help you get started.
Step 1: Download Meta Spark (Previously Spark AR)
Download Meta Spark Studio from the official website. It’s free and available for both Windows and Mac. Once installed, familiarize yourself with the interface. I recommend going through the Meta Spark documentation.
There are plenty of tutorials available on the Meta Spark website to help you get started. I've made a few tutorials myself, which you can check out on my Youtube channel @cybersteffie.
Step 2: Start with the Target Tracker Templates
Soon to be updated with a Youtube tutorial! Sit tight and subscribe!
Read the documentation. Have a read thought the AR target tracker official documentation. I know, I know—reading the documentation sounds about as fun as watching paint dry. But trust me, the AR target tracker official documentation is your new best friend. Give it a read if you're new to this whole AR thing.
Quick start with the target tracker template. Alternatively you can start from scratch and click + at the bottom of the Scene panel. Select Target Tracker from the menu.
Add your target tracker image. Replace the 'replaceMe' asset with your business card target tracker. If you've started from scratch, in the Scene panel, go to inspector, next to texture, click Choose file… and select the texture file you want to trigger the effect.
Add your effect to be triggered to the target tracker. This is where you can go wild. You can add 2D or 3D assets, even a digital version of the card. Animate part of the card. Animate them in or out. Do looping animations.
Update to moving targets. To choose one of these options, select the target tracker in the Scene panel and edit the Target Type setting in the Inspector. There are 2 options to choose from - Fixed or Moving. Your business card isn’t just going to sit still, right? Update the target tracker to handle moving targets. In the Scene panel, select the target tracker, and in the Inspector, change the Target Type to 'Moving'. This way, your AR effects stay fabulous no matter how your card is held.
Step 3: Testing & Troubleshooting
Testing the effects made in Step 1-3 and refining and perfecting is truly what takes the longest time for me as a filter creator. This process will vary based on what effects you are creating, but it's essential to make sure you do the following:
Light, light, LIGHT! Test the target tracker in various lights so you're aware what's working and not working. When in doubt, use flash.
Keep effects under 15 seconds looping. When you meet someone and exchange business cards, sometimes it's a quick encounter. Think of it like a reel, you want to wow them from the beginning. In the span of one short Instagram reel, your effect should already captured the viewer!
Test on Android and iPhone. If you have access to an Android phone and iPhone, use it and compare the consistency of the effects.
If you notice any tracking issues, go back to Meta spark and make adjustments. It could be the contrast of your target image, the complexity of your AR effects. Feel free to reach out to me if you need some assistance.
Step 4: Publishing to Instagram
Facebook Account: First things first, make sure you have a Facebook account. You’ll need it to access Meta Spark Hub. If you’re already on Instagram, linking your account to Facebook is a breeze.
Effect Submission Guidelines: Ensure your AR effect adheres to Meta Spark’s Community Standards and Spark AR Policies. No nudity, violence, or other inappropriate content. Keep it classy, babe!
File Size: The total file size of your AR effect must be under 4MB. Keep it light and snappy to ensure quick loading times.
Naming: Give your effect a catchy, descriptive name. Make sure it’s unique and reflects what your AR effect does.
Effect Review and Submission: Submit your effect for review through the Meta Spark Hub. The review process can take a few days, so be patient. Once approved, your effect will be live and ready for everyone to use on Instagram!
In Conclusion
Creating an AR business card is an exciting way to showcase your creativity and make a memorable impression. From designing a stunning card to integrating jaw-dropping AR effects, you now have all the steps to make your business card a standout piece.
Remember, the key to a successful AR experience is thorough testing and following the publishing guidelines to ensure everything runs smoothly.
If you need any help with designing your AR business card or navigating the Meta Spark platform, don’t hesitate to reach out!
I’m here to assist you and make sure your AR business card is as fabulous as you are. Feel free to drop me a message—I’d love to help you bring your vision to life!
about
author
Steffie Harner
Creative Technologist | Freelancing in Japan Since 2016
I help brands use innovative technololgies to uplift their identity. Think interactive websites, AR filters, and AI-powered creative content.
In my free time, I enjoy live streaming, cafe hopping and discovering different spas & onsen. Not at the same time.
