IVN Final Project: Animated 1 Page Visual Novel

 Technical Recap

Continuing from Project 3, based on the selected story, create a ONE PAGE introduction of your visual novel or comic to your readers… with at least ONE animated panel.

Arrange your story in visual sequences that make sense and easily understood. Consider the choice of panel arrangements and transitions. Determine as well which panel(s) will be best visualized as animation. 

Choose the one that has the best timing in the story flow and transitions of the visuals that strongly reflect the narrative through characters, panels, particle effects, texts etc.

Timing is important! Too slow, your animation will be draggy and boring. Too quick, your animation won’t make sense. So timed the flow appropriately!

The challenges are:

Continue with the same story and design aesthetics from Project 2
Work only from one paragraph of the story for the 1st page.


Progress

Firstly, I decided a three panel comic in AI, using the shape tool with different layers of red.


Then I added another few shapes in the 1st panel to represent a window.

I added my characters that I traced in the 1st panel. I also added a few lines on the window to represent rain drops.



After that, I added the character into the 2nd panel with triangles in the background.

For the 3rd panel, I added eyes.

I decided to add skulls into the eyes, in order to animate it more easily.

Final Static Comic Panel Design:

GIF Animation Process

I decided to use Adobe Photoshop for my Animation.
I created a total of 8 artboards in AI in order to use for my animation. Each artboard has variations on each panel, ie raindrops, lighting, triangles, and skulls.


I exported my artboards and imported it to Photoshop to use as my frames.


In total, I used 8 frames and no delay for each frame for my GIF animation.

Final Animated Comic Panel

Reflection

This project was interesting as I have never made a comic before. I have also learned that making frame animation is tedious, but it is kind of satisfying seeing my animation come alive.

Comments

Post a Comment

Popular posts from this blog

Intercultural Design

Image
Week 1 - 7 Ng Zheng Kai 0359424 Intercultural Design / Bachelor of Design in Creative Media (hons)`  Project 1, 2 & 3: Hanhaba Obi  INSTRUCTIONS A proposal to concretise ideas, supported by research, for a final design revolving a given theme that reflects students’ understanding and interpretation of global issues and design aesthetics. The general theme is “Cultural Sensitivity in Design” You are to study a cultural phenomenon, or a particular subculture that is perceived as ‘sensitive’, and “frame” your study within the chosen theme. You are to convey this cultural aspect without altering the actual facts but within a presentable interpretation and adaptation that raises awareness from the viewers. Produce some preliminary ideas on how to visually express you interpretation using design language. Each idea is to be supported by a short ratio
Read more

Advanced Typography- Task 2: Key Artwork & Collaterals

Image
21/9/2023 - 7/11/2023, Week 5 - Week 11 Ng Zheng Kai / 0359424 Advanced Typography / Bachelor of Design in Creative Media (Hons) Task 2: Key Artwork and Collateral LECTURES All lectures are completed in  Task 1 INSTRUCTIONS Task 2A: Key Artwork Sketch For my key artwork, I am going for a graffiti bubble style font. Because I want to give off a sense of a chill and friendly vibe for my key artwork. Fig 1.1 Sketch Digitalize Fig 1.2 Image Trace Fig 1.3 Word Digitalization Color Palette Fig 1.4 Color Palette For my color, I decided to choose a bright and vibrant color palette. Final Design Fig 1.5 Final Design (JPG) (B&W)
Read more

Interactive Design: Project 2 - Working Web Page

Image
Ng Zheng Kai Interactive Design / Bachelor of Design in Creative Media (Hons) Project 2 - Working Web Page INSTRUCTIONS Project 2 - Working Web Page The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes. Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes do
Read more