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.
