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 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 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 Final Project Prototype

Project Storyboard(incomplete)

As shown in the storyboard, there are 3 multipaths to story which branch out at the instance of the original ending where the emperor was confronted with truth that he was parading naked, fully shamed. 

Our project makes use of mostly the mad scientist approach for paneling, only places that we employed single frame was morphed into animations, so basically we do not have single frame in this webcomic. 

The full developmental process was broken down into three parts. Tammy is in charge of creating the sketches based on the storyboard, in order to standardize the style of drawing; Stella is in charge of coloring the graphics; I am in charge of creating the html pages, adding interactivity and animations and putting everything together. 

Feedbacks received for iteration 1:

• Links to be clicked are not obvious and not standardized
• Navigation not obvious and not standardized
• Fonts for narration and dialogues are hard to read
• animations are not obvious enough and generally skipped 

Based on the feedbacks, we improved on the the links and added text to make the navigation more obvious. We had to be careful not to be too obvious as we still uphold subtlety, and also instructions are not exactly part of the story, so we kept that to the minimal.

Technical Difficulties

I am more familiar with the technical part of the assignment, my evaluation of the work process is more focussed towards the technical parts of the creation process.

Difficulties I faced were largely inefficiencies in exporting image sizes which initially were in print sizes which were too big for screen and need to be resized, and resizing the images in Photoshop is not an efficient thing to do, especially when trying to resize them in batches. 

Initially, I exported the Illustrator files to PSD format so I could make some changes and also edit the images for making animation and gifs. However due to the lack of a standardized process of creating the illustrator files, the brushstrokes and colorings were disorganized as Tammy and Stella did not have to consider changes after exporting. So it was inefficient when trying to export an Illustrator file to PSD with layers as every brush stroke, every dot were converted into one layer, and without label, it was not able to be worked with. 

The next best method was to export the entire illustrator file to png format and open again in Photoshop for editing. This method is next best because all layers are compressed into one image, it was tedious and messy to extract only parts of the image itself. Especially when the extracted image is to be used to make a gif, because gif do not support transparency and anti-aliasing, edges of extracted images by selection are pixelated and ugly, much time had to be spent on cleaning up the images, which could be better spent.

Another difficulty was dealing with so many links, it gets confusing after awhile, especially our collaborative database is Dropbox, when different people update the links differently without documentation, miscommunication occurs and extra work had to be done to rectify for standardization. 

Screenshot

Generally, the process of this project has been highly enjoyable and enriching. Three “woots” for creating our first webcomic! 

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.

Experimented with animation on load. The swindlers image shook on picture load. 

Experimented with Dreamweaver Spry scrolling effect, does not work well with horizontal images, so I changed it to the vertical one below.

Image scrolls automatically within a frame to create the effect of a animated transition. 

NM3228 Final Project 1 - Initial Panels

Emperor’s new clothes

NM3228 Assignment 2 - Slice of Life - One night…

With respect to my assignment 2 comic strip, using a semi-collage method, I combined sketch and colored pictures together to tell the story of a strange dream I had.

The more significant panel-panel transition is used in the second row of panels; I used the moment-moment transition to emphasize the urgency the protagonists had to mount the slides. The individual panels were trapezium shaped so that the slanted lines give a sense of change and urgency compared to straight rectangles.

The most important panel was the third row single panel; it shows the protagonist coursing through crazy looking water slides. The protagonist appears several times in the same panel, but readers can understand that she is not duplicated but is sliding through the slides. It is similar to moment-to-moment transition except that there is no gutter, an imaginary gutter could be fitted between scenes and the panel would convey the same meaning.

The transition to the next panel is abrupt, intentionally. The sound effect words are added to aid the conception of a highway.

Words are used minimally; only 2 out of 10 words used makes up an effective sentence. The rest are to suggest sounds, combined with font effects to create the illusion of certain sounds. 

NM3228 Assignment 1 - Visual Story in 5 photographs

For this assignment we had to tell the story within 5 frames without the use of words, which I am particularly glad of as I am inclined to not use words much as I find that it kills the subtleness.

The “vomitting rainbow” is an internet meme trending on 9Gag. It generally expresses the feeling of wanting something really “cool”. I guess the image came about when one gawks in awe with mouth open and stars in the eyes, and the rainbow is added for the image to look more colorful and “full of want”. 

Made use of some conventional manga visual guides to highlight the point of the picture.

Added some dreamy effect to express that stickman is feeling dreamy and imagining that he is flying on the broom too. 

Slightly adjusted exposure to make it darker, to show that “situation is bad”, to contrast with the previous image, highlight the abruptness as well. 

And the black and white effect is employed to make a ending statement. 

NM3228 Class Exercise 2 - McCloud’s 6 Category of Panel-to-Panel Transition

Above is the McCloud’s Six category of panel-to-panel transitions.

As illustrated in the lecture, these transitions can be mixed and matched to achieve the effect the artist wants, and how well the effects play through depends on how skillful the artist is in feeding readers the information. These panel-to-panel transitions have distinct effect on the sense of time and it is interesting that there really isn’t a fixed formula to achieve one effect. For example, the action-to-action panel above gives substantial time and attention to each action of the driver entering and driving off in the car.

The passage of time here can be minutes, as suggested by the sound “SLAM” in the second frame, as many of us would know, only closing the door forcefully will there be a “SLAM” and doing something forcefully would mean doing it quickly; and since each panel is of equal width and stays on the same scene, the unit of time in the second frame can be equally applied to the rest, and the reader sense that the sequence may have a time-frame of a few minutes. 

However to understand the use of certain technique, one must analyze in context, why would the artist emphasize on the few minutes of time passed here? Is there any relation to the story development? Did something else happen within that time-frame while we were focusing on the man entering the car? 

Conventional square/rectangular frames convey time frames, juxtaposing frames of different height and width is another sequential art literary device that we are “un-warily” aware of. I think it is natural for us to spot differences and similarities, a extra long frame among all shorter frames dictates comparisons to be made subconsciously. Juxtaposition can be used to direct readers’ attention and control readers’ thought processes. 

Apart from designing how the story progresses from one panel to the next, there is page layout to encompass the entire story onto one canvas for viewing, and this viewing experience makes a difference to the reading experience and how the story gets through to the readers. 

From experience, when I read manga, I will take a overall glance at each page before I zoom into the individual panels, it is done unconsciously without myself noticing it. It is like entering a house, there is the overall style and general feel of the place, before entering each room or examining each furniture. The page layout sets the tone of the story and adds flavor to the storytelling.

This is the Jack’n Jill comic strip created during the class exercise. I like to use slanted frames when suggesting motion and erratic point of views. I think I am too influenced by 9Gag comic strips in the sense that I like to write “action words” next to action pictures, I feel like this adds some weird humour into the action, and especially so when the words are repeated like “roll roll roll…”. 

NM3223 Assignment 3: Urban fantasy

A super overdue post because I couldn’t find time to redo my assignment 3 until now. Anyway, the theme is Urban fantasy. My first instinctive idea was to realize my fantasies in a urban setting. At this point in time, my fantasies are a mix of dance-battles, animes, hell-ish and gore related elements. I would love to create a dance related story whereby each character represent each genre of dance and be able to unleash mysterious powers with them, using them in battles against one another.

I then began to put them together into what I call the “Dance Off from Beyond”, affectionately coined after one of the local dance crews “Styles from Beyond”. This was the first attempt:

The idea was to make this street dance army that rises from the dead at night and takes over. One difficulty I met while creating this photomontage was that, while Dance is a verb, the photos are static, I can’t remove the feeling that my army are not dancing but are somewhat “posing”. And furthermore, the first try did not bring across the “urban” notion at all. 

here comes the second one:

Version 2 is improved in terms of bringing the idea of “army” and “urban” across. And the army seems more powerful in taking over the night as they literally fill up the streets. I had luck in finding the background stock image that uses a distorted fish- eye effect that gives the viewer a feeling of smallness and fear. 

I used smudge tool and blur filter to create the sense of motion for the giant, making it seem like it sprang out of nowhere and looming over everyone else. 

I learnt a lot from creating this photomontage from various photoshop tutorial sources, and learnt to position subjects on backgrounds to make them look cohesive by using vanishing lines. 

Stock photos that I have used in the second version are as follows: