AR for Artists: Create Your Own Face Filters | Sarah Tan | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

AR for Artists: Create Your Own Face Filters

teacher avatar Sarah Tan, Designer / AR Specialist

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:23

    • 2.

      Class + Project Overview

      2:19

    • 3.

      Tools You’ll Need & Installation

      0:58

    • 4.

      What is Augmented Reality (AR)?

      3:47

    • 5.

      Finding Inspiration

      2:49

    • 6.

      Work With Me: Ideating & Sketches

      4:26

    • 7.

      Designing the Graphics on the Filter

      4:19

    • 8.

      SparkAR: Intro and Getting Started

      2:03

    • 9.

      SparkAR: Adding Artworks & Face Retouching

      8:12

    • 10.

      SparkAR: Adding Interactivity & Testing

      12:07

    • 11.

      SparkAR: Adding A Particle Effect

      3:42

    • 12.

      SparkAR: Adding Animated Lights

      11:36

    • 13.

      Work With Me: Publishing Your Filter

      5:09

    • 14.

      Final Thoughts: More Tips!

      3:29

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

489

Students

3

Projects

About This Class

Augmented Reality (AR) technology can be intimidating! Are you a designer who has never coded before? Or a small business owner who wants to increase engagement on social media through filters? Maybe you just want to create a face filter for fun! 

Join designer & AR specialist, Sarah Tan, as she demystifies the process of creating an AR face filter using SparkAR, making it easy for everyone to design their own.  

You will be receiving step-by-step guidance on making "Coffee ⚡" face filter for coffee lovers out there, try it out on Instagram here!

Zero coding skills or technical skills needed!

AR experiences such as Instagram and Snapchat face filters have grown in popularity among social media users. AR is enjoying meteoric growth globally as well. Adapt to this fast-changing world by bringing your ideas into this futuristic medium!

This comprehensive class will give you a basic understanding of:

  • How AR works
  • Templates to help you ideate on the design of your filter
  • Simple ways to create your own artwork
  • Placing your artwork into the filter
  • Step-by-step tutorial in SparkAR 
  • Ways to enhance your filter with features such as animation, lights, and interactivity

This class is appropriate for beginners as well as experienced creatives. Even if you don’t have any design experience, downloadable creative assets are provided and other easy methods will be suggested so you can follow along. The skills learned in this class will provide you with the basics to create other AR experiences with SparkAR.

Bring your designs to life and express yourself with Augmented Reality!

Meet Your Teacher

Teacher Profile Image

Sarah Tan

Designer / AR Specialist

Teacher

Hi, nice to meet you! I'm Sarah Tan, a Malaysian Product Designer and AR Specialist based in Australia. Previously, I designed digital experiences for Google, NASA, Facebook, Adobe, and more. I am passionate about creating meaningful and delightful user experiences as I believe that design is a powerful tool of influence.

On the side, I am passionate about pushing innovation in the immersive industry, particularly Augmented Reality (AR). I love experimenting, pushing the boundaries of AR/VR, and seeing how we can combine design with AR to achieve exciting outcomes.

I am also passionate in sharing my knowledge and experiences. If you're interested to create your own AR face filter, check out my new Skillshare class "AR for A... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: If you want to create a face filter like this, this is the class for you. Being a visual designer myself. I really enjoy bringing my craft into augmented reality, but I'm always intimidated by the technology barrier. Despite being intimidated by the technology, it still didn't stop me from achieving my dreams of becoming a pioneer and educating others along the way. Hi, everyone. My name is Sarah, and I am a product designer based in Australia. Previously, I have designed digital experiences for clients such as Google, Facebook, Adobe, Mastercard, and more. I have a huge passion for developing augmented reality experiences as I feel like it brings so much debt to visual art. I believe that AR has such a huge potential for the future as it has so many applications ranging from entertainment and gaming to education to helping practitioners in the healthcare industry. According to Digit Capital, 3.5 billion people will be using augmented reality in their mobile phones by 2022. Not only that forecast said that the AR industry will reach 198 billion by 2025. Some of my notable achievements in AR includes having my AR project featured on the news twice in Australia, having my own solo AR art exhibition that explores the intersection between design and technology and encouraging others to build resilience with Tre D and AR with Adobe. On top of that, I also like to make face filters on Instagram for others to express themselves and share with friends. Being a woman of color, I'm really passionate in encouraging other women to go into the AR or tech industry without feeling intimidated by it. And I like to do that by sharing my experiences and knowledge through having talks and workshop internationally. Although I come from a graphic design background, I managed to learn about AR, create AR experiences, and also graph the technology behind it. If I can do it, you can do it too. 2. Class + Project Overview: This is a comprehensive class where I will start off by giving a brief introduction about augmented reality, followed by an interactive session where you can create your artworks for your filter, and also how you can create your own filter using a program called Spark AR. Lastly, I will finish this class off by showing you how you can publish your filter online for the rest of the world to see. I'll be showing you how I make this filter for coffee lovers out there. The filter features the hand drawn coffee cups, along with animated lightning bolts coming out from the forehead, a little face retouching, playful lights, and when the user blinks, the coffee cup design changes. I believe that this will be a good place to start as it touches on placing your artwork onto the filter, adding interactivity such as blinking to change the designs, particle effects, s, and animation. I will show you step by step on how you can create all this using a program called Spark AR, which is developed by Facebook and its Facebook very owns AR development program. For the class project, you can follow me to make this coffee filter or you can base it off with any of your favorite drinks. The techniques learned in this class will allow you to make any filter that you want and offer you infinite possibilities with full creative control. Remember, there's zero coding skills or technical skills needed to complete this class. This step by step class is perfect for beginners who wants to start off making their own AR filter. Small business owners who would like to create a face filter to increase their engagement on social media. Thirdly, just anyone who wants to create a face filter for fun. By the end of this class, you create a face filter that is published either on Facebook or Instagram ready for the world to enjoy. In the next class, I'll be showing you what materials that you need to complete this. 3. Tools You’ll Need & Installation: This lesson will cover what you need to prepare beforehand to create your own AR filter. This are what you need. You need a laptop or computer. It could be either Windows or Mac. Spark AR downloaded from the official website, a Facebook account, and if you would like to create the Instagram filter, make sure to have your Instagram account linked to it. To test your filter as you go, NID mobile smartphone with Spark AR player downloaded from Google's or Apple's App store, along with a cable to connect your mobile phone to your computer. Or you can do it via the Instagram app on your phone. In the next class, I'll be giving a brief introduction about augmented reality. 4. What is Augmented Reality (AR)?: To start off, I'll give you a brief introduction about augmented reality, which is commonly shot from as AR. Augmented reality is a super imposed of digital information such as images, text, or even treaty objects that is overlaid on a user's perception towards the physical environment. For example, if I were to my camera and the AR technology is able to detect a flat surface in front of me, for example, a road or a table. And I can make a pico appear in front of me on top of the flat surface. All in all, AR technology relies on a camera feed to impose a layer of image or graphics on top of your real world. To give you an example, imagine having photoshop layers and the bottom of the layers is the camera feed. With AR, you can create layers of images to put on your camera feet, such as making a new layer every time on photoshop. Since virtual reality or commonly short form as VR is around much longer, people tend to associate them to be the same. However, it is not the case and both technologies are vastly different. One of the main difference is that V R is 100% immersive with a completely constructed digital environment while AR is only 50% immersive, where it still includes element of the physical world. That is why V R is often experienced with a VR headset which covers your eyes while you can experience AR through your phone or with AR glasses. So how does it relate to face filters that you see online? All the face filters that you've been playing online on Snapchat, Instagram, Facebook, TikTok, or even other places are using AR technology to place graphics, images, or even animations onto your face? How does AR technology does that? Basically, the technology is able to detect points of your face. For example, it can tell where your eyes are, where your mouth is or where your nose is. Basically, from there, it places images onto your face and you can see it in real time. This why it is very engaging and fun to play it because it is altering your environment and your face. This is the definition of AR in a nutshell, and there's definitely more to explore around this topic. But just remember AR as a digital layer in front of your physical environment. In this case, your face. As a designer myself, how did I take an interest into AR and why am I pursuing it? I love designing and the arts all my life. When I was young, I remember drawing was my ultimate favorite hobby and I started graphic designing since I was 13 years old. Personally, I think that design is such a powerful tool to influence emotions and I want it to be more than static and visual and something that people can see. That's where AR comes in. I feel like the technology has allowed art to be at the next level and add so much depth into it. And the reason why is because it allows people to be immersed into a physical and also digital environment. In the next video, I'll be showing you how you can find some inspirations for your face filter or even try firsthand and playing with some of them on your own. 5. Finding Inspiration: Feeling stuck on what filter you should create. Don't worry, we've all been there. Here are a few platforms that I'd like to suggest where you can find different inspirations made by different creators on the Internet. Firstly, it is Instagram's very own effects gallery. If you have an Instagram account and we'd like to try out some filters firsthand, there's a way where you can search for Instagram filters on the app itself. Simply click into a random filter and you can do that by creating a story on your profile. Click on more information on the filter and select browse more effects. You can see and try out what other creators have done. The second platform is called LansLs. LansLs is a website where you can look for Instagram, Facebook, and Snapchat filters. The feature branded or popular filters for your inspiration. On top of that, they have a block which features AR creators to where you can read other creators journey. Now third and lastly, it is Facebook's very own Spark AR community. Spark AR community on Facebook is a Facebook group run by the Spark AR team themselves. Here you can find other creators sharing their work, ask questions and help each other out. One very important thing to remember is to use this as inspirations as this are created by artists and designers out there. It'll be great not to copy the ideas but use it as inspiration as they work very hard on this. Now, before we move on, it is very important to note that all filters will go through a review process by Facebook before it is published online. To avoid the risk of getting your filter rejected, it'll be great to check your filter against Spark AL's very own policies where you can find in the official website itself. So it is very good practice to familiarize with their own policies to see what is feasible and what is possible to put into your filter. And don't worry about having your filter rejected. You can always resubmit again until they approve it. I'll be touching more on Spark AR policy further down the class, but it'll be great to have a read at the website. Now, before you move on to the next class, it'll be great for you to jot down on piece of paper or whatever you're comfortable with. Some ideas that you'd like to incorporate into your filter. It could be either themes, art style, or some ideas on interactivity that you'd like to add. 6. Work With Me: Ideating & Sketches: Now that you've looked at some inspirations and have some ideas jot down for your filter. Next is to really plan it out so that you have a clearer path on what you want to achieve and it streamline the creation process. Planning your filter or any other AR experiences can be very useful to do before executing them. And this process save time and yet break down everything that you need to do in smaller chunks. This way, you don't get overwhelmed and you get to achieve what you set up to do. To start, you will have to download the template attached, however you're comfortable with, you can either print it out on paper and sketch it out with a pencil or pen, or you can do it digitally like what I'll be doing on an iPad. I created and designed this template for you to plan out your face filters and all these are in line with Spark ARs current face tracking features. As a first step, you can put your project name or project goals if you have one at the top. Next, take a look at the template as a whole, and you can see two sections, one on the left and one on the right. Usually with AR, there's a trigger and a reaction to it. Basically, it means that if something happens, something else would happen. Therefore, with this template, you can start filling from the left to the right. It shows an area which says when this happens. This is for you to note or illustrate how it looks like when the user first launched the AR experience. For my AR filter, I want to make one for coffee lovers out there. As the filter launches, I want to have coffee cups on my cheeks, so I have it by default. In this case, I will draw two coffee cups on my cheeks. So in the middle part where it says interactivity. These are the choices available for Spark ARs face tracking capabilities. With face tracking, it tracks the user's face whenever they're making an action. For example, if someone with to smile, raise their eyebrow or blink, the AR technology can detect it. In this case, I want the coffee cup designs to change whenever I blink, and I'd like to have three different designs. On top of that, I'd like to add little lightning bolts to appear on top of my forehead. Now, on the left side where it says this will happen. You get to draw what will happen after the trigger you've selected. In this case, I want my coffee cup designs to change after I blink. Feel free to really own this template and make notes wherever you want to and this will help you in your creation process. At the last bit at the site, this are some problems where you can plan your filter out accordingly and see what resources you need before starting it. For example, if I want to have sound in my filter, I'll make sure to prepare audio beforehand. If I want my assets to be three D or two D, I can plan accordingly for that too. For my filter, I want to have it two D animated for the lightning bolt and no sounds. Lastly, I want to add a little extra fun in it. I want to add face retouching and moving reflections on my face. Add that into the note section below. After you've planned what you want to achieve, you can take a look at this template and see what you can do now before jumping into Spark AL program. Looking at what I've planned so far, it might look a bit overwhelming. But as you can see clearly in my template that I will need to first design my three coffee cups design and one lightning boat design. As a solid next step for me, I'll be illustrating my three coffee cups and also one lightning boat. Now that I've planned out my filter and I have identified things that I would like to design. In the next class, I'll be showing you how to create said artworks to be going into your filter. 7. Designing the Graphics on the Filter: So in the periods class we have planned out offered that we have identify what we want to design. And now is the time where we design the graphics too, we put inside our filter. So if you have experience in designing, that's great. But don't worry if you don't as Elvis suggesting a few easy ways and tools for you to use. Fast studying on your design. Spot. Ar has a fixed assets package where you can download farm their website itself to download it, hit to us the link. Click Download. And you have in a folder, open up the folder and in it you will see a folder called texture. And you'll find the file called Facemash dot PNG. Alternatively, I've also attached a file below. This is a face reference. If you want to place specific advice on specific area in your face. Here you can see areas like your cheeks, your forehead, your nose. And imagine this like a faith paint. Whichever design that you place on it will be accurately rat on your face. This will ultimately act as a reference to place our designs. In my previous class, I've decided to make 2D illustrations of three different coffee cup designs, along with a lightning bolt designed to go on my forehead. To create my illustrations, I use procreate on an iPad to draw them out. In the app Procreate, or you can use any other illustration tools that you're familiar with. In this case, I like to keep my designs in the square. And we have a dimension of at least 1000 pixels in width and a dozen pixels. And hey, once you're done illustrating your graphics, and this case I have my two coffee cups right here. You can export them into a PNG files with transparent backgrounds. Now that you've exported your illustrations, now is to use the face guy. Firstly, to use the face guy import into Photoshop or any other program that you are comfortable with. Next, in a separate layer, He's the graphics you have me on the gate and arrange down to how you like them to be placed on your face. Next, height of phase gate layer and any background layer to only show the designer of this place. Lastly, exploited in P&G, as a final piece, you have your designs place on transparent backgrounds without the face guy. And it is good practice to name your files as you go. In my case, I am naming my tea coffee cup designs with different file and naming them as 12 entry. So this method is great if you're like a designed his feet directly on your face. But if you'd like to have your design placed outside of your face instead, says prepare your design in the transparent background. There's no need for face guide to help you accurately positioned as he can do that in the sparkling or per gram. You can use some free tools online depending on what you're comfortable with. Added a Photoshop, you can try Figma or Canvas. For this class, I have prepared a Figma file where you can drag and drop your graphics onto it. Simply click the icon for the face guide to hide it, disable the fill, and export it into a PNG file. For the second method, if you're not comfortable in designing, you can just use emojis for now, simply download the PNG version of them online and it will look great in their field or alternatively, source royalty-free images online to be used as your graphics. Before you move on to the next lesson, make sure you have at least one image where you can use. It could be your final graphic Daniel created, or you can simply download while I've provided. So you can follow along the class and get familiarized at a program. In the next video, we can find a jam into Spark AIR. 8. SparkAR: Intro and Getting Started: So now you have your design ready. Now it's time to meet your filter and spout AR. So firstly, what is spelled AR? So spelled AR is AAR development program does developed by Facebook to allow create the UNI, to create Phase Filters exclusively on the Facebook and Instagram platform. So if you haven't done it, simply download the spot AR per gram from the official website onto your laptop or computer. It is important to note that this program is 100 percent free and you need a Facebook account or login do it. So when it is downloaded, you can see that you can choose different kinds of projects. Start with. However, I recommend being familiar with the program before jumping into these. Once you've done it, welcome to your first project. As the first step, I like to point out four main areas that we will use in this class to get you familiar with the program. Firstly, you can see the main project space in the middle where your graphics will be placed. Secondly, you can set the video to your webcam to give you a more accurate and control view. Currently, the testing panel at the bottom left corner to let you test as you go. And fourthly, the main columns on the left and right. Left being the layers and right being the inspector. The inspector is the place to control what you have selected on the left. So now that you have seen how Spark AIR looks like, don't worry if it gets too confusing for now, we'll go through it step-by-step in the next class. 9. SparkAR: Adding Artworks & Face Retouching: In this lesson, I'll show you how you can add your graphics that you've made in the previous video into Spot AR with two different methods. So now that you have your Phase Tracker file ready, and you can check that by seeing if you have a phase tracker zero in your seams panel. Now, first thing I'd like to do is to change the viewport of this where Spark AR has started default. One thing that I'd like to do is heading over to this panel right here and clicking onto video and clicking Pace time HDmera What this does is that it will activate my webcam and I get to see how I can build my AR design and my AR filter life on my face. And the first method to add in your artwork in your filter is via the facemash method. To start off, I can click on my face tracker zero. I right click it and hold over to add and I will see the face mesh layer here. I'll click it to add, and it's very important to make sure that the face mesh is under the face tracker. So you can see that I have a little checkered design here, and I would like to add a material to it. I'll go over to materials where I will see a plus button at the side. So once I click a pass button, you can see that it's assigned to a material zero. And if you notice at this corner right here, it has the material zero under the materials folder. So I can click a material zero, and I can basically set anything I want in this panel right here. And therefore, under texture, I will set it to mirror what I've done previously, which is to show a coffee cup on my face. So as you can see here, the design is on my cheeks and it's looking great. But you also can change it up a little bit in terms of the shaded type to make it as natural as you like. So in my experience of making filters, I do prefer the face paint feature because I feel like it looks the most natural on my face. And then you have it. This is the first method of putting works on your face and you can see that it's sticking to your face The second method of placing an artwork onto your face is the phase plane method. And what I can do here is to go under the phase tracker zero, like what we did before, right click over to add and choose a plane. Click on the plane. And again, make sure that the layer is below the phase tracker layer. As you can see, there's a checkered square in front of my face right now, and that is where the design can sit on. Once you select plane zero, same like before, you can go under materials and click plus. And the material zero will be form. If you click here under material zero, it can also change the properties before and the same thing, you can go under texture, choose your file, and we can select the file that we used before. So now that's loaded, as you can see, it's a little bit small on my face. So how we can do this is that we go to plane zero again and under scale, we can have the ability to change the size of it. So judging by the size I'll probably go up double. Y and X is the height and the width of it, whereas is the distance between your face, and judging by it, probably I would go down a few decimals. You can select this and go it closer to your face. I can make it higher if you want to. Just make sure before that this is selected. So now I'm quite happy with it, before I will change the material on how it looks like. So I'll click back material zero again and you can see that the shaded type is standard. So what I can do is experiment and see what works best for me. So what I like most in terms of the color and the clarity is face pin, so I'll select that. And in terms of having advanced render options, we can click that and make sure that both of these are unchecked. This is the second method, as you can see difference between the first method that we went through is that my artwork is situated on my face rather than a part of my face. You can see floating right outside your face right here and depends on what you'd like to do, I think I will just go ahead with this method. So now that I've decided to place my artwork on my face, using the face plane method. Next, I will show you how to retouch your face in an easy way. Firstly, as you can see the face tracker here, like we pressed before. We want to right click it again, go under add and click Face Mash. So before, the method one that I've showed you, this is the same thing that happened before. It's good practice to rename your files as you go. One thing that I'll do is to double click the Face Mash zero file. Now that I can edit the text, I would label this as retouch, and I will name my previous files the way it is. I'll name it coffee one out of three coffee designs that I make, so it's good to keep it organized. Back to the retouching, I would click my retouch face mesh and you can see the little settings at the side again. Under materials, I would click the plus sign and create a new material. You can see I have a material zero here and it's reflected below. So I'll rename it to retouch, just to match it up. Okay. After clicking the retouch material, I can go under the shaded type at the top and I'll go to the very last option called retouching. So you can see it works a little bit, and what we can do here is trying to see which percentages suit for you. We can go 100%, which you can see is the most retouching that is doing right now. And if I go lower, you can see that it's quite similar to what I have in the webcam. So what I can do is I'll probably go around 50%. So that doesn't look too fake and it looks pretty natural as well. Yeah, that's how you retouch your face. Now that you have your graphics imported into stock AR, now I can show you how to add little interactivities to make your filter much more exciting and fun to use. 10. SparkAR: Adding Interactivity & Testing: Okay, now that I've added my artwork onto my face and we added some skin retouching as well. Next, I'd like to add some interactivity into my filter. So as you can see right now, Spot AR is actually tracking the movements of eye face. And one of the capabilities of this product is that it actually detects what you are doing on your face. So for example, blinking, smiling, even raising your eyebrows, or opening your mouth. All of that could be detected and things could happen because of it. So for example, right now, I'd like to kind of, like, blink and probably make the coffee cups disappear when I blink and when I blink again, then it will reappear. So how I do that is I'll go back to my face tracker zero, and under interactions, you can see that there's a patch button here and click Create. So like I said before, I want to use a blink option so press it. So as you can see at the bottom, a patch editor has appeared, and this patch editor allows you to really plan out more complex filters and add a bunch of interactivity into it, such as counting down the seconds or screen tapping or even video recording, what you want to do as a result of that, and that is what the patch editor does. But don't worry about it. We will go through more about it later. And like I said before, I want the coffee cups to appear and disappear when I blank. So what I can do is to go back to my coffee one, again, this plane that I've made. So this is where the design sits right now and to change the visibility of it to disappear and reappear again. That's the matter of the visibility right here. And to add that into the patch editor, I will click this yellow button and this tiny arrow right here. So as you can see, once I click it, it went into the patch editor immediately. What I can do is to connect the blink and the coffee one together. That coffee one is my artwork on my face. What I can do is going to this little arrow right here, dragging it out until it reaches the coffee one module. Sometimes spark R does suggest little modules for you. If you forget to add them, so that's really convenient as well. As you can see, I have my coffee one here, I have a switch, and to test it out, we can start blinking and see. So as you can see the coffee cups disappearing and reappearing on cycling. So that's the fine capabilities of spot AR where you can come up with a little fun interactions like this. In the next one, I will show you how to add more artworks and more complicated interactivity. So now that I've done a little interactivity where when I blink the coffee cup appears and reappears. So right now, I would like to add more artworks into it, like my previous videos. I did three coffee cup designs in total. So I want to add two more into Spark AR. And later on, I would like to have it changed designs whenever I blink. So it just kind of rotates and change designs of different coffee cups that I've made. So firstly, I want to import all my artworks that I've done into stock AR. And one really easy way to do that is to copy and paste the coffee layer. So before I do that, I would like to delete what I've done here. I will delete the coffee and the switch module in the patch editor, so that doesn't complicate things. And now that I have my coffee one, I will go select it and write plate duplicate. So now, as you can see, I have coffee two here. Right now, as you can see, this is linked back to coffee one, and I can create a new material and name it coffee two. So like before, now that I have my little square, I can select coffee two as a material. Choose my file and select the second design that I've made. So I change it to face pine in terms of the shaded type. As you can see, I have my second design stack on top of my first, and I want to add my third design in. So I choose coffee to right here. I right click and duplicate again, and I have my coffee tree right here. Selecting coffee tree, we would like to repeat the steps under materials, I'll choose this and create a new material. So this is the gray square again, and as you can see, the material zero is reflected at the bottom here. So I'll just rename it to coffee tree. So after naming it to coffee tree, I'll select it and under texture, I'll import my third design of coffee cup. Now since I have my shaded type to standard, I will choose face pane to keep it consistent with everything else. So if you can see, I have this three coffee cup designs stacked on top of each other, and this is just a good way to work with now that we have it all imported and we can just focus on the interactivity now in the patch editor. So as you can see, now, since I want to rotate my coffee cup designs through and through whenever I blink. We would have to use a different patch editor this time, to use a different one, we'll just choose the little arrow at the back here, and we'll just drag it out and release. So here we have a little selection of modules that we can use following up and also planning our interaction from here. So I'll use a module called counter. I'll select it and I'll select patch. So now that I'm my counter ready here, I will go into it and you can just pinch out to zoom in to the patch editor. So as you can see maximum count here, and knowing they have three designs, I'll change it five to three. And for the counts, I would need three more modules and three of them will be called C exactly. Okay. So equals exactly and I'll add my patch. So to switch across three designs, I will need three of these patches. So I'll add that in. Okay. Now that I have three patches of equals exactly with my three coffee cup design, it's really important to keep note about the numbers as well. Before I change the maximum count to three, and in terms of equals exactly it counts from zero. Knowing they have three designs of style the first one is zero. The second one as one and the third one is two. Right now, I have a counter with three equals exactly. Same like before, I can set all three designs to go visible when it links. So I'll start with coffee one and I'll select coffee one on top here. I'll click this yellow button again. I'll select coffee two, and I'll press this little arrow here. I'll just arrange it accordingly as well. It's always good practice to make it as organized as possible so you can see what's going on. And I'll select coffee tree and I'll do the same thing of clicking this button right here. So as you can see, I've planned out each one accordingly for each of my designs that I've done, and next, I'll just combine them all. So again, drag and release, drag and release, drag and release. Now I can just test it out in my viewport here where when I b It changes to the different coffee cup designs. This is coffee one. This is coffee two, and this is coffee tree. It's good to know that it works right now and here I have a really dynamic and interactive little designs to work with and whenever the person blis the design will change. So now that we've done a big part of interactivity where when we blink different coffee cups design switch after the other. Right now, it's really good practice to constantly test out your filters on the Instagram or Facebook app or the Spark AR player, either way works. Let me show you how to test your filter out on the phone because I think that will be quite accurate compared to the web view that we have right now. You can go to your bottom left corner and you can see a little test on device button right here. And once you click it, do you have an option to preview on Spark AL player or you have the option to send to app. This is a convenient way where you can send to your Instagram camera or your Facebook camera to test, or if you conveniently have a cable next to you and you prefer testing it on an app. Right now, I want to send to app on my Instagram camera. After I click SN, there's a little process where it's uploading to Spark ARHp after a while, it is done uploading. So here you can see a little test link right here. So you can copy it and access it via a mobile phone or alternatively, a notification will pop up on your phone, saying that there's an effect on your Instagram right now for you to test. And you can basically see what you want to edit from here and if you're happy with it, you can just move on to the next video. So now you're ready to take your filter to the next level by adding motion to it. In the next lesson, I'll show you how you can insert a particle system that gives out particle effects. 11. SparkAR: Adding A Particle Effect: Now, I'll show you how to make a particle system. What is a particle system. Basically, it is a capability in Spark AR where it adds motion to your filter. Let's say confetti, those are particle system, lights floating around. Those are particle systems as well. It's a good way to have a little bit of motion to your filter in a very small space. To add that, firstly, you'll have to go to your phase tracker again. Click on Phase tracker zero. Right click it and under choose particle system right at the bottom. So once you add your particle system, you can see that there's something moving in the middle of my face and there's little squares on it. This is basically the motion that I'm talking about in your filter where you can add little fun animations to it. So what I'll do is that I want little lightning bolts to appear on my forehead and floating upwards. And right now it is in the middle of my nose. So what I'll do is looking at this view port right here and holding onto this green arrow. I would click and drag it upwards to the point where I'm happy with the position, which is on top of my forehead. And I'll just readjust until I'm happy with it. So I'm pretty happy with the movement of it right now and I'll show you how to add the lightning boat design that I made previously onto this particle system. Like before, you have to make sure that Emitter zero is selected right below here in the inspector panel, you can see that there's a material section here. Click on the plus sign to add the material. Right now we have to create a new material for this emitter. As you can see, there's a material zero here, and all we have to do is change the shaded type to face pin to match what we have previously. In terms of texture, we will choose our lightning boat file. I have a lightning boat file here. As you can see, the squares turn into little lightning bolts that are designed and created, so that's amazing. Right now we can just adjust the movement of the particle system. To do that, we will have to click into Emitter zero again. Right now, I'll rename it as lightning bolts, and I'll rename the material as well. So now I have it selected right here. I get to choose little settings like birth rate, spray angle and speed. To start off with, I would probably choose one by one. Basically, how I do this is that I'll just experiment to see what I like. Now that you've added a little bit of particle effects that give your filter some motion. So this is another method that I'd like to use where you can add more motion into your filter. And this time it is with colored lights and also applying animation to it. 12. SparkAR: Adding Animated Lights: So now, I'm going to show you how to add lights to your face, and that would add more motion and making the filter way more dynamic as well. So to do that, firstly, we will have a base on our face that makes the surface of your face reflective enough to reflect the lights. So I should start off by going under face tracker zero. Right click. Under a well to select a face mesh again. After selecting the face mesh, you can see that it's right at the bottom in the layer here. We were to place it all the way up above coffee one, so you can see the designs of the coffee cups that we've made. Under this face mesh, I will name it lights. And like before, I would select on it. I will go under materials click a pause button and create a new material. As you can see, material zero is formed, and I can go under this and rename it as lights, so that's easy for us to edit it as we go. Selecting lights right now, seeing that edges are a bit rough at the end, is really sharp. We can leverage on spark AR space assets again. Under the phase assets, I'll go into textures and right now, instead of the face mesh design that we selected earlier, we will select the face mesh mask, which is this circle with a blurry edges right here. I'll click open. And as you can see the edges blo down a little bit more, so that's easier for us to work with. Right now, what I'll do is to select the shaded type to be physically based. Under random options right here with the bland mode under Alpha, we we to change it to add. Now that you can see is really bright at the moment. Under service parameters, we will change the metallic to 100%. We will change the roughness to around 25%. And as you can see right now it is just really shiny on my face, and that gives us a very good base for the lights to reflect form. After this, I were to go to render options and under opacity, I'll adjust how shiny I want my face to look. So I can see in 100% is really shiny, but a 0% is back to normal. So to do a little reflective base, I'll probably do it around 25% so that my face doesn't look too shiny. Okay. So now that I have a reflective base where the light can reflect on, right now, we can settle on making the lights itself. Okay. So now that we have our reflective mesh right here. Now we can add the lights onto our filter so that it can reflect off our face. So if you can see right here in the focal distance, you'll see a directional light zero. So I want to have two lights, one on my left and my right side and both different colors. So I'll make two lights for now and I'll name it my left light. As for my right light, I will click it and duplicate it. So once I've duplicated it, I would name it right light. So now, as you can see, my left light is on my left, but I want to put my right light on my right. So I'll select right light. In this view right here, I would press the red arrow and drag it to my right. So now you can't really see anything, so we were to add color to see if it works. In my left light, I would click on it, and in my inspector panel, I'll see the choice color here. I'll click on it, and I'll choose a blue color. And on my right side, I want a yellow color, so I'll do the same thing as what I did for the left light. So as you can see the light is not very obvious right now, and what I like to do is to increase the intensity to 100 and you can see a little yellow light right here on my right side, and I'll do the same for my left side. And I want to bring the blue out a little bit more, so I'll readjust the position of my left light until I get to see a blue tinge on my face. So now that I'm pretty happy in my ls, I'm pretty happy with the positioning and the color of it. Next, I'll show you a way to really bring out the lights and don't worry if the blue looks a little bit softer right now, I'll be teaching a method on how to animate your lights to make it more engaging and fun. Right now, to animate your lights, as you can see, we have our left and right light here. In terms of animating, we have to bring out the patch editor again if you have closed. To bring out the patch editor again, all you have to do is to go up to view. And click shot or Patch editor. That way, this little window come out at the bottom and you can set animations to your lights. Firstly, what I want to do is to double click anywhere in the patch editor, and you can see this module come out again. What I want to do is a little loop animation for the lights so that it goes around your face. So I would search loop animation. And what is selected, I'll click Add patch. And now that we have it here, on the top one, we can drag it out and another module will come out and we'll choose the transition module. Both of these modules working together, they will come up with a animation that keeps on playing and playing while the filter launches and until the filter ends. Like I mentioned before, since I have a left light and the right light, I would like to duplicate what I've done here. For the loop animation and transition, just copy and paste it and you have another one. What I typically like to do arrange it so that it looks neat. We have a little patch right here and now we have to import the property of the lights into the patch editor. So how we do that is same for the interactivity video that we've passed through. You have to click the left light and click three D rotation. Transformation there's a rotation here, can click it. As you can see, it goes below right here to really see something happening, we can connect this two together. As you can see, this goes up and down a little bit is because these are set to one degrees. To really make this engaging, we'll want the light to spin three 60 and in different directions as well, and this comes with a lot of trial and error to get the right angle and get the right rotation. What I'd like to do is I'll focus on two sides. Now I'll be focusing on the y and the side and I want my Y side to spin 180 degrees. While my exact side to spin a whole full circle, three 60. As you can see right here and on my face right now, you can see that the lights is traveling through my face and it's just looping all the way through, which is really good. But I'd like to have it a little bit slower. So you can set that by going down to the loop animation, and if you see this duration bit here and it's on one, it means that it is completing this movement within 1 second. Whereas to make it slower, I'll make it 2 seconds. So it means that this is creating the movement within 2 seconds and I like this movement way better. Right now, as you can see my left light, there is a very cool effect going on right here and I'd like to do the same for my right light. So I'll select my right light and under rotation again, I'll click it and you can see it appearing in your patch editor. Remember the module that we copied earlier. We can link this up with the right light. And now that's linked out. Again, this is quite a trial and error to go through, so it can set whatever rotations that you like that you think gives the most amazing effect for your filter. So right here for the right, I'm setting a 90 degrees for the x axis. I'm setting a whole full circle, three 60 degrees for the y xis. And for the z axis, I'll just put it as a zero. Paying attention to the two xs for now and it can do however combinations or however degrees or rotations that you like. But I find that this is the one that I'm most happy with, and this is also part of experimenting as you go. Again, I'll place it with two durations, so it goes a bit slower. And right now you can see my yellow is really dominating the blue light that I have right now. So what I can do is just go back to the right light, have it selected, and underclor tone down. So now I really like the rotation and the light and also the intensity on my face. And as you can see now, it just keeps looping around, giving this really engaging look to it, almost like a sci fi effect. And yeah, I'm pretty happy with my filter and how it turns out right now. So now that we have added lights and we have learned how to create a loop animation in the patch editor. Now that I'm done with my filter, and I'm pretty content and happy with how it's looking like and how it's going. In the next video, I'll be showing you how can I publish this filter to be live on Instagram, Facebook, on both platforms. 13. Work With Me: Publishing Your Filter: So now we're down to the very last step to meet your filter public for everyone to enjoy. Before we move on, I mentioned previously that offered though we'll have to go through a review process by Facebook. And once it is approved, the filter will go live spot ARs review policy can be seen in this website. But here are three things that I like to point out. Firstly, logo placements. Logos must appear only as natural part of the effect. So this means either movement through the use of face tracking are integrated within a 3D object. So secondly, texts in the field, the tax must be integrated into the scene of the effect, which could be tax responding to movements integrated into a 3D object or a timestamp and totally father graphs. So our effects must not contain for the growth of people, whether it's real or fictional. So like I mentioned before, it is a very good practice to check if your filter of bytes, the rod, our policies and spot a US website judging the filter that we just made, I feel like it past the other spot AR policies. So we can move to the next step. So once you are done and happy with your filter, click on Export. At the bottom left-hand corner. The program will calculate the size of your filter. So remember to always keep it small. Once the calculation is done and everything is green. Click Next and you'll be directed to the Spark AR harp on your browser. Here you can set the details of your Philadelphia. Firstly, choose a name for your filter. You'll be great if they can have an eye-catching name for it. And under 20 characters, what I like to do is to add the character to the name. You can add emojis are copy and paste funds symbols for the name as well. Secondly, choose if you want your filter to be available on Instagram, facebook or both. In this case, our choose Instagram only checked that you'd like to publish under your account. Any other accounts that you might have. Thirdly, you get to select the categories and keywords for your filter to fall under. This will help with the searchability of your food or for mine, I will choose moods as my category and use this as my keywords. Next, we can create an icon for your fluids. To keep it consistent. You can reuse your design and repurpose it as an icon. Remember the kid with a minimum of 200 times 200 pixels. I like to design my in it 100 times a 100 pixels as it will look better and clearer. Next you can choose if you'd like to publish it immediately, once after it is approved or on a certain date where you like the time it with an occasion. For the demo video. It is important to film a video of your filter on Instagram or Facebook ad itself. You can do that by saving the submission. And you'll find a button test on device. Access the link on your mobile film, a simple video showcasing your filter and save it. In my case, I like to pan my head right and left does show the full capability of the filter. It is very important to not add tax. There are any color filter on it. After you film that, click the Download button at the top and upload the video file into the submission. Next you get to choose the video damnatio. From the video itself. You get to see this fallen and a little mock-up of how your food there were looked like to the public. When you're happy with everything, click Submit, and your filter is in review. You'll get a notification on your Facebook account when your filter is approved. This is how it will look like. In terms of the timeframe on getting approval. It could take up to ten days. However, it is dependent on a lot of factors. In my experience, I have had filters getting approved within this hours, but it is good to submit knowing that timeframe just in case. Don't worry if your filters not accept that, they will typically leave a comment on changes to be made. And all you have to do is change it accordingly and uploaded again. Now you're all ready to have your first fueled their life. How exciting is that? In the next lesson, I'll be showing you more tips and tricks on how you can continue your journey and creating while AR filters. 14. Final Thoughts: More Tips!: So congrats, You've made it. So this class we bought you chew what AR is, how your planner, your filter. They create graphics layer filters. And finally how to bring it to spot AIR and publishing it online. So if you have submitted your filter and is under review process right now, well done for uploading it. And I'm proud of you for learning a new skill before this class ends are like to share a few tips and tricks after your filter uploaded and lie. So firstly, how do you see our stats and analytics on how well your field those performing? To track how well your filters performing, you can access our AR heart into your browser using this link and see how many people have used it. So second tip is how do you find your own filter in your profile? And how do you find other creed thus builders? Once your first filter is a proof, your Instagram profile will have an extra tab. When you click on it, you can see our filters. This is public for anyone else to see, so people can easily access and clear it your filters through this tab. Tip number 3 is how do you increase engagement and views to your filters? One efficient way to get people to use your filter is to post it in your stories. When you're using a filter to film a video or take a picture, a link to your filter would be at the top. Or you will have the option to select a swipe out to try the filter. If you follow this class and create a filter up your own, I really love to see it. Feel free to paste a link to your filter below, or even share any work in progress, photos, videos, or even graphics that you have. So this class covers the basics of Spark AR, and that's definitely way more possible. These and Morefield those or even my AR experiences that you can make using Spark AS program. Some of it include having a face filter game design, or you can have an AR activate. Well, you can even place random 3D objects in your world. And lastly, you can even create filters that colorized the world around you. The possible, these are definitely endless. If you either improve your skills are spelled AR and create more complicated AR projects. Spot ARs website has in that resources and tutorials where you can follow. So my biggest tip for getting better at AR is always learning, practicing, and experimenting with filters that you're not really familiar with. And throughout the process you will learn so much more of a spout AR and what is possible with this program, if you like to see more of my classes, feel free to send me a message, I'll drop a suggestion belongs. Once again, my name is Sarah 10, and feel free to follow my AR, content in my social space here. I hope you have enjoyed the class and other vastly AI journey.