Discover Top Posts Tagged with #nm3228

Popular Recent

NM3228 FP - Mee Pok Queen

http://tinyurl.com/meepokqueen

My roles

Collaborated with the team to research and discuss suitable tropes to use for the critique

Formulated storyline together with Crystal and Hua Bin

Designed, lined and did some colouring for the comic

Coded in some animations

Coded in some interactive links

Arranged some panels in the web page

Installed libraries for interactive elements

Helped team members fix certain code issues

Kept track of tasks

Wrote documentation together with Crystal and Hua Bin

Problems encountered

The storyline was tough to develop as we had to think of three significantly different branches (to emphasize on fate) and different endings as well.

We also had clashing jquery libraries. When one was installed, the other would not work. For example our responsive zooming code clashed with the animation code. Initially we tried to fix it but in the end we had to weigh the trade-offs and choose which library we would include. In the end, we chose animations over the responsive zooming as that could be achieved by manually pressing CTRL + or -.

I felt that the story made too much sense to be ridiculous. Nevertheless, it was fun conjuring up the banter between the characters.

Lessons gained

Know the requirements early.

Start coding earlier as there will always be unexpected bugs.

If there are bug, do not panic. Sometimes there are creative ways to solve them and that is the fun part of coding. (For example, there was a sound playing too early issue. We solved that by putting them in invisible AP divs that were positioned aptly)

Transferable skills

My knowledge of AP divs and jquery libraries increased and will definitely be useful in future web projects.

Storyboarding is a huge part of what I intend to pursue in the future (user experience design). Hence, knowing all about panelling, composition, image-text relationships, time and space will help me communicate my ideas more effectively through storyboards.

Teamwork

I had a tough time deciding if I should code or draw for this project. In the end I decided to do some of each. My team members were eager to learn and even talked to another group about the sound library. I also taught them how to write certain code and picked up coding very fast!

#fp #finalproject #nm3228

NM3228 Class Exercise 4 - Text and Image Relationships

I guess this can be linked to Gestalt's Principle of Closure as well, our minds indeed can accomplish amazing things.

The lengthier comics such as manga volumes makes use of more text, the text image relationship is simple and straightforward. Dialogues will be enclosed in speech bubbles, narration in text boxes, and sound effects with special fonts. This rule is quite universal across sequential art that makes use of text with image to tell stories.

#NM3228 #Class Exercise #NUS

NM3228 Class Exercise 3 - Time and Space Continuum...

This class exercise was done to explore the similarities and differences in showing time and space continuum in motion comics and print comics.

I wasn't able to grasp the html code used in placing images on webcomics at that time, so no sample work :(. But the learnt techniques and codes were later employed in the final project and it was a valuable skill to learn.

Moving on. Webcomics have the added benefits and woes of interactivity to the conventional print comics. Most basic interactivity is to scroll through the page and to view the panels, there after clicking on links to move elsewhere. As our web technology advances, we now have hover interactivity, user feedback loops and much more. These interactive technologies add more dimension to the storytelling and reading experience, it is to engage the reader more and allow participation and immersion into the story.

For webcomic, it is a complicated situation out there. We have infinite canvas, either 2D or 3D or (maybe more..), different browsers, different platforms, different point-&-click devices...all these hardwares and softwares determine and makes a difference in the webcomic reading experience. The most obvious example would be, flash based comics cannot reach iPad users. A 13-in screen and a 15-in screen also affects how the webcomic gets across the wires. It is no longer the artist's job to just create and tell story, if he wants to incorporate interactivity into the whole experience, he has quite a lot of things to deal with alongside such as browser compatibility, mouse or trackpad interactivity...

Once we get pass all that nitty gritties, web comics are awesome.

Crazy comic that inspired our group's final project.

Awesome Infinite Zoom Picture

After completing the final project, I have been exposed the realm of navigation design, or more commonly known UX design. All I can say is that UX design is really a big thing, it is applicable to anything on screen and requires user interaction. Guiding lines and colors, aspect ratio and hierarchy...all contribute to one single experience, and this single experience can really make or break the project. A bad design will likely chase readers away and the project will drown and be buried in the sea of html pages.

#NM3228 #NUS #Class Exercise

NM3228 Class Exercise 1 - Defining Sequential Art

Sequential art, in its most obvious form is definitely comics strips. wikipedia definition is Sequential art refers to the art form of using a train of images deployed in sequence to graphic storytelling or convey information. In sequential art, artists make use of the following techniques to tell stories. Having read manga for most of my conscious life, I have never really noticed the works of these techniques as they are kind of invisible against the art and dialogues, but knowing how they make a whole lot of difference to sequential art story telling makes me appreciate manga more and read into the artists’ intention deeper.

Principle of Closure (Scott McCloud)

Panel / Frame (Will Eisner)

Transitions (Scott McCloud)

Page Layout or mise-en-page

Gestalt Principle - Closure

Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, our brains will fill in the missing information and we perceive “complete” image.

In manga this principle of closure is employed everywhere. Economically it is impossible to draw every image from every angle in order to provide a holistic and wholesome story, and it is not necessary to do so because with the use of panel and frames, gutter and spaces, artist can manipulate time and space information, and reader can understand the transition and be able to piece the story up in their minds.

I think it is unfair to not consider manga/comic as an art form. The use of graphics and style may be simple and direct, as opposed to maybe the Mona Lisa, but the beauty of it is that people who read it can understand it, it goes a whole opposite direction as fine art which makes people think and think and still doubt that they had gotten the idea right. The information manga and comic conveys is vastly larger than paintings, sculptures by volumes, hence apart from being judged as art by the obvious visual beauty standards, the artistic value of manga/comics should be mainly based on how well it communicates its information to its readers.

(via Beelog)

#NM3228 #Class Exercise #NUS

Nm3228 Final Project 2 - Single Frame and Transitions

Created panels for the final prototype storyboard, taking the track of following the Empress's story after the king has been busted in the parade. The story took a twist as the Empress made the whole country turn naturalist, imagine scenes on a topless beach, now bottomless too. The graphics are highly abstracted so its not obscene, but its funny.

Apart from the coming up with the panels of the individual storyline, I experimented with html and javascript to create the intended effects.

Made use of the difference in the CSS position attribute, set the foreground picture to static so it stays at the same position on the browser while the one at the back is a long image so the scrolling works as if the back image is moving to the left, and the front image is moving rightwards relatively.