Digital Photography ＆ Imaging - Final Project: Cinemagraphs - Self-tilted (still & animation)

25.5.2025- ( week5-week9)

Yang Shuo / 0384037

Digital Photography ＆ Imaging /Bachelor of Design (Hons) Creative Media / Taylor's University

Final Project: Cinemagraphs - Self-tilted (still & animation) 

INSTRUCTIONS

1.Research about your topic

• Study and gather all related information about your topic.
  

MOOD BOARD  

Figure 1.1 Mood board

 

• Write a summary about your topic

 Theme: Renewal of life: Return Contemplate, human beings' relationship with all things.

Category: Magic Lock Screen

Title: Fragrance Under the Moon

Summary of your design concept:

Blossom Between Worlds is a Mucha-inspired illustration that celebrates the quiet beauty of nature and the human soul.

A woman in red stands among blooming flowers, butterflies, and birds.

Her calm expression reflects the peace we find when we connect with the natural world.

The soft colors and flowing lines echo the Art Nouveau style, bringing harmony and life into the design.

 2. Define your concept 

Mucha's painting style is very unique. He is skilled at painting women and flowers, using smooth and gorgeous lines to outline them, with classical and bright colors that do not lose their softness.

I created a total of two drafts; the first version was done using Procreate, and the second version involved directly importing the photo materials into Photoshop for preliminary collage.

• Sketch your mock up poster.

Figure 1.2 SKETCH #1 (Hand Drawing)

• Draft the digital poster based on your sketches. 
• Develop the composition techniques using Digital Photography/ Photo Imaging.
• Apply textures & effects if necessary.
• Finalize your design with color correction (Adjustment Layer)

 I first used the pen tool to draw the background and combined the colors of the main character and the classic color palette of Mucha for my poster.

Figure1.3 Process screenshot #1

At the same time, I adjusted the colors of the characters and added a pearlescent effect, giving the image the texture of an oil painting.

Figure 1.4 Process screenshot #2 

I used the following materials to create my poster, some of which are from content I usually shoot, and some are from public sources.

Figure 1.5  Materials 

Then I started my practice in Photoshop, collaging these materials and the main character onto the background.

Figure 1.6 Process screenshot #3

Figure1.7 Some layer division in the process

In particular, I have applied bold outlines to most of the materials in the poster. I want to reflect the collage texture found in the Mucha's  style.

The following is a poster that I created.

Figure 1.8 Poster design 1

Figure 1.9 Poster design 2

I showed the poster I had made to the professor and asked for advice. The professor suggested that I enlarge the subject so that she occupies a larger proportion of the picture. So I made adjustments to the composition.

This is a 6000pt ×6000pt size version of the folding screen：

Figure 1.10 Poster design （Square）

And 3000pt × 6000pt versions with vertical screens：

Figure 1.11 Poster design （Vertical）

Figure 1.12 Overall vision

Next, I  start to create them into fifteen-second-long animations. The animations will include the motion effects of the posters themselves and simulate the effect of unlocking the lock screen. I will use After Effects for production.

Figure 1.13 Process screenshot #4

My design idea is as follows: the main character holds a bouquet of lilies, gently swaying in the breeze. Nearby, butterflies and two birds are also flying softly.

However, because the proportions of the two posters are different, the layouts are also different, so I want to make a distinction in the animation. In the portrait poster, I added a counterclockwise rotating sunlight halo behind the characters, which is not present in the square poster; in the square poster, there are more flowers on either side of the characters, and I added a gentle swaying effect to them.

Figure 1.13 Process screenshot #5

Figure 1.14 Process screenshot #6

During the production process, I was troubled about how to express the effect of simulated unlocking. Thanks to the professor's demonstration in class, I finally succeeded in completing the animation using masking layers and keyframes.

It is worth mentioning that during my research on how to make flower bouquets sway more naturally and lightly, I discovered a practical plugin: Autosway. By adding puppet pushpins to the object and adjusting the motion parameters, it can sway rhythmically 'in the wind'.

Figure 1.15 Process screenshot #6（Autosway）

The final presentation effect of the animations is as follows:

Square Video

https://youtube.com/shorts/m4RFmIbWMAM?feature=share

Vertical Video

https://youtube.com/shorts/qXiVGDnoZTo?feature=share

Overall Visual

https://youtu.be/1qiLrvZ-Y7U

REFLECTIONS

This project continues the progress of the previous one, focusing on animating the poster I designed in Photoshop. Through this process, I learned how to use Adobe After Effects and also discovered some useful plugins. The most challenging part for me was figuring out how the elements in the poster should move. To make the animation look smooth and cohesive, each part needed to follow a certain rhythm. I tried many different approaches, and sometimes had to completely scrap and redo effects that were already halfway done. At the beginning, I honestly thought this would be a simple task and didn’t have much patience. But as I worked on it, I gradually realized that without a true commitment to quality, I wouldn’t be able to achieve a satisfying result. This was my first attempt at creating a motion poster. Although the final outcome is far from perfect and many details still need improvement, I see it as a valuable starting point. I believe that with more practice and effort, my future projects will become better and more refined.