02.
The Museum Wall System
With the popularization of virtual museum exhibitions and galleries during the COVID-19 pandemic, I thought it could be interesting to mimic a museum wall for the zoom backgrounds.
01.Static Direction
As the above diagram shows, I selected seven pictures from an exhibition and arranged them to look like a museum wall.
The first essential object you would need to find is a gold frame vector or png; it would not express the museum atmosphere without these frames. Another important aspect of this system is, of course, the museum labels themselves. I followed the traditional way of exhibiting a museum label: a white rectangle with information on them (piece name, creator, and date created).
Feel free to experiment with the format, but it should always be below the object to save space. The Metropolitan Museum of Art directly inspired the wall color but feel free to change it.
For the images, adjust and experiment freely, but I recommend choosing 6-7 images for the text and image's legibility. Also, make sure that the image near the center (user) has a larger gap, so the pictures are still visible.
I would say that this static method worked quite well, but you would need to place yourself a bit lower in the video. The images near the center (user) are not as visible as the others. Below is the result of this method.
Directions
1. Find a gold frame png/vector
2. Create the museum label
3. Collect the images and arrange accordingly
02.Video Direction
For the animated video, I thought it could be fun to mimic the behavior of looking at exhibits in a museum; you would zoom-in into a piece and then zoom-out again to look at the other elements.
With this concept in mind, I converted the Photoshop file into After Effects, used Null Object to achieve the panning/zooming effect that I wanted, and played with the Position effect on the Null Object layer. The results are below.
1. Import static file into After Effects
2. Make sure to create/separate the background image/color
3. Create a new Null Object Layer (Layer ︎︎︎ New ︎︎︎ Null Object)
4. Play with the x,y,z position accordingly
03.AR Direction
For the Snapchat filter, I thought it could be funny to make the user/person the wall and have the object placed on your face. I made the images change on mouth open since you can also change content with a trigger (mouth open, etc.)
The fastest way to create this filter is to choose the Behavior or Face Landmark template. Make sure that the effect is the Head Binding and bring images into the layer. Adjust the image's positioning on the face freely, but I made it so the image will cover the face.
Afterward, in the Objects panel, add a Text Object layer below the Image Object, add the Pin To Mesh component in the Inspector panel (so the text stays with the image), adjust the positioning through the transform component, and then fill the text background to achieve the museum label look.
After doing so for all of the images, the most important thing is to create the Script Scene object in the Objects panel to allow the image to change based on a specific trigger. I recommend looking at this forum and using this code, but essentially you can produce values of each image, and that the Javascript allows you to go through the values activated through a trigger, in my case, when the mouth open. Make sure to add a Script file in the Resources panel with the code in it.
It is reminiscent of those Instagram filters, and this direction allows a clearer view of the object and what it is. Below are the snapshot, result, and snapcode QR or link (for accessing the filter).
1. Start from scratch or use the Behavior or Face Landmark Template
2. Create or select the Head Binding face effect
3. Add the images and arrange accordingly
4. Add the Text Object under the Image Object, and add the Pin To Mesh component in the Inspector panel
5. Add a background color to the text
6. Adjust the position through the transform panel
7. Create a Script Object in the Resources panel and fill it with the code (choose the trigger through the code)
8. Insert it through a Scene Object to the Objects panel
9. Add each image to the Obj,values in the Inspector panel, and make sure to make all the text and image visible