Sunday 16 February 2020

NEST: Face Filter

Initial designs:
When discussing with the NEST editorial team, Ben and Louis, we came up with ideas for what it should look like - 

In order for the filter to successfully communicate the magazine and launch and work seemingly well as a whole, Ben and Louis sent a the collage used for the magazine and the logo.

The initial ideas for the face filter are based on what they asked for during the conversation. The first design has the nest logo above the head with a collage background. 'The Class Issue' hovers around the head like a halo.
The second design has the collage in the background with the NEST logo hovering over the face. 'The Class Issue' could also be on the background.
These designs both have the floating logo as well as a collage background, responding to the discussion with the NEST team.
One issue with the discussion is that they were asking for interactive elements, which is a skill I haven't yet learnt. However, I hope to develop my skills and create a filter that is successful.


Using what I have already learnt from making face filters, I started by putting the NEST logo onto the face using a face tracker and face mesh. This creates a mask that sticks to the face of those in the camera.
This effect wasn't what the NEST team had asked for and how I want it to look, so I learnt new skills in order to create what we wanted.


Creating the filter:
As the second initial design was more simplistic, I decided to try to create that one as it would be the easiest to learn.
The first element that I put into the filter was the hovering logo. Ben and Louis liked the glowing white logo that I used for the VR and wanted it for the face filter too. This also would make the logo easier to see in front of the background and camera, rather than a black logo that could blend into the camera and background.
The logo was to follow the face so that wherever the face moved, the logo would stay attached to their face.
To do this I made each letter in the logo fit around the face so that it wouldn't cover to much of the face up. First time doing this wasn't perfect so it took a few attempts. Once I had got the file correct to be used, I created a face tracker and added a plane. This creates a flat object hat is attached to the face. This object was made large enough to cover the face. I then created a material with the logo texture and added this material to the plane. This worked well in following the face however I had to move it forwards on the Z axis so that it would hover more in front of the face.

To create the background I had to create a canvas and two rectangle. The canvas enables you to fit any children to it to the screen size. The rectangles were both fitted to the screen size and then named 'background' and 'person'. Materials were made for both of these so that I could add the textures of the camera and background.
I added the texture to the background material of the collage, however this covered the whole camera due to not having completed the person yet.
For the person rectangle, a segmentation mask texture was made by going to the camera and adding a segmentation. A camera texture was created by adding a texture extraction, which was then added to the material created for the person meaning that the person can be seen but the background cannot. The segmentation mask texture was applied under aphla which meant that the background can be seen.
This resulted in a background for the user. This worked very successfully, however there was a large space above the user that I thought could have 'The Class Issue' attached to the background so that it gives context on the design of the background and what the filter is for. To do this I just change the design of the background and then added this to the material.
I also thought that the NEST logo was a little to bright, so I decreased the opacity a bit to make it less bright and also allow the users face to be seen more.


 

Screenshot of the filter being made on Spark AR.


Final outcome:
After speaking to the NEST team and showing what I had made so far, they asked not to develop it anymore as they liked the filter how it was and didn't want anything to be aded or adjusted. I agree with this because although we discuss having things change when the user touches the screen or blinks, this could be over complicating its use as it is just for the launch where people can promote and document the time they had there. However, the changing of collage backgrounds could have been a good addition as it would reflect the magazine design in that there are different collages for each submitted work.




Although the filer was a successful design and worked well, we didn't leave enough time before the event for it to be approved. Because if this we had to use the link to the test filter, which is usually only used for the creators to check that it works well. This meant that the people who used the filter couldn't post it anywhere as Instagram doesn't allow this. This is a major flaw that was down to bad organisation.
Due to the last minute choice of using the preview link, I created a very simple, quick poster so that people could scan the code in the event. The design was a black background with the code and Helvetica Bold type saying 'scan for filter'. I designed it with a similar look to the tablecloth so that everything would work well together, however this may have ben a downfall as people were mistaking this QR code as the one that takes people to the VR; it was overlooked as the same code. To improve this the poster design could have been more descriptive and communicate clearer what the QR code would take you to. 



No comments:

Post a Comment