（・⊝・∞）

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

Read comic here

In this reflection, I will talk about the strategies I use to enhance the reading experience of Assignment 4. This assignment is the same as Assignment 3, except we have to add two new branches. The style of panelling did not change.

New Strategies

Incorporating one happy and one sad ending: In A3, my assignment had a sad ending. Now that we had choices but they had to lead to the same ending. It was tough to plan how I could have one ending that led to a happy couple and another ending that led to the girls' death. When I attempted this, the draft was not smooth and a little draggy but I hope that it is smoother now! Also, I do not like sad stories. :(

Directing to choices: The choices were made through direct hyperlinks using drop down. The reader can choose to proceed anytime by pressing 'Go'. The process is straightforward and the reader has 100% control of the pacing.

Animation: I faded in most of the frames for a softer and more dream-like mood. The library I used was wow.js and it allowed me to set the duration and the type of animation. Some ways I took advantage of this was that I could speed up animations for exclamations and slow them down for train of thoughts. I would also make the links to the next page "woosh down" to catch the attention of the reader. Here's an example:

And another:

In assignment 3, I took advantage of the infinite canvas that is our web browser.  Here are some things I considered about web comics and how I applied them to this comic.

1. Gutter spaces. Unlike print comics, we are allowed to have as large gutter spaces as we want.  This was useful for my comic because I could select the pace of the comic by leaving calculated amounts of space in between my panels. I did not even need to use borders for my panels because the space acted as a separator. Sometimes I feel borders restrict the story and gives it a static feel. Not having them gave more flow to my comic.

2. Image optimization. Even though we have an infinite canvas, a web comic is still has to be stored in a server somewhere and must be retrieved in a reasonable amount of time. First, I made my comics in monochrome not only because it saved time, but also because images with fewer colours had a smaller file size. Secondly, I saved everything in .jpg and set the quality as low as possible without compromising the experience of the comic (50-100kb is good).  The very long panel gave me a problem, so I reduced the shades of gray as much as possible to save file size.

1. Scripting

First I thought about the story I wanted to tell.

I wanted to highlight my concern about the situation of stray cats in Singapore, that was easily accessible with a story. I wrote down some important news that had affected community cats in the past, such as cat abuse and banning of cat ownership.

Symbolism - In the story, there are two cats. The first one is never seen again, whereas the second one appears near the end of the story to symbolize a new beginning after it is told that things are improving for our stray cats!

Then I penned the narrative text and speech. Once I finished writing everything, I split them into rows. (What text goes in the first row of panels, second row, etc.) The demarcation is seen with "]".

Also did rough character design (cat/main character).

2. Rough draft

Turned my script into a rough sketch of the comic.

I wish I could describe more about my thought process for this one, but everything (panel placements, shapes, characters, actions, backgrounds) were drawn on the spot. If I didn't like where something was, I would erase it and place it somewhere else. I just wanted to go with the flow and see where it took me.

3. Lineart

I have to admit that I felt pressured to produce a near perfect piece of work, so I redrew everything in pen this time for colouring.

This step also helped me modify the sizes of certain panels. You can see that in the sketch, the last two rows were shorter than the rest. Over here in the lineart, I made every row equal sized.

4. Coloring

As usual, my colours were decided on the spot. I tried to use bright colours such as lime green, yellow and orange to symbolize happier moments, red and tangerine for alarm and passion, and a dull taupe for darker situations.

5. Critique Session

Hehe, so right before the critique session I realised I made an awful mistake in the second row. The diagonal direction of the cat's movements seeped into the row below, making it seemed like the cat was never seen again after rolling off. Whoops!!!

Other than that, my classmates seemed to be able to access the story. However, they were confused by the parking lot scene, because I drew road lines instead of parking lines, so they thought the cat was hiding at a road junction!

Following everybody's advice, I fixed my mistake and redrew the parking lot in my later revision.

6. Final digital comic

I scanned my traditional comic and redrew everything once again digitally using my favourite CG software, Paint Tool SAI.

I am pleased that it looks way neater and more readable when I use computer fonts. My handwriting is awful, haha! I used about 3 different fonts, one for narration and the main character's speech, one for the "Meows!" and one for more serious narration.

I also made the background colours more uniform. In my traditional version I would pick random colours for the walls, buildings, floors etc. I think, with more consistent backgrounds, it lessens the distraction of reader from the actions that are taking place. If I had the time, I would colourize the background lineart to lighter colours to give the illusion of depth.

Overall, I am satisfied with the balance between the neatness and organic feel of the comic.

7. Experiment - no panel borders + flow

To end off, here's an interesting experiment I did - removed all the black borders that separated the panels and speech bubbles. Surprisingly, it looked pretty nice :) Everything seemed to flow better!

However I'd also like to note that even with borders, I did not let it completely restrict the objects within the borders. I don't know if it's a style of mine, but I like to have some speech bubbles and objects go beyond the boundaries of the boxes, giving the illusion of "popping out" because it seems more lively that way. It also helps with the flow of the panel sequence.

This CE is about this comic, which illustrates a first-hand account of life inside an Australian immigration detention facility, told from the perspective of a former employee of Serco, a multinational security service provider.

Our group identified some techniques used in this web comic that cannot be possibly replicated in print:

1. Auto resizing

This webcomic applies a responsive layout to its container page, making it fit comfortably into any device's width, be it mobile, tablet or desktop, making it readable for everyone! Print media will only appear in one size.

2. Scrolling and unlimited space

Web comics can make comics as long as possible without caring for page limits thanks to scrolling in the web browser.

In fact, thanks to unlimited space, artists no longer have to worry so much about making their panels fit into the size of a page. Of course, these panels still have to be arranged reasonably for the story to make sense.

3. Large gutter spaces

This brings in two pros:

Anti-spoiler: reader has to scroll down to view what happens next as the next event is blocked by the large white space. In print, artists can only use a page flip.

For this class exercise, we talked about how time and space is portrayed in this comic strip, "Some People".

These are the ways our group came up with:

Color gradiation: The artist uses a lot of yellow to red (or vice versa) transitions to symbolize lots of time passing as a person grows up or goes back to being a child. We also noticed that when the person is placed in a red background they are angry or miserable, and when they reach a yellow frame their expression mellows out (becomes neutral/happy). I like his choice of using colors to complement the characters' expressions!

Lines: In the frame with the bus, the backdrop is a group of parallel horizontal straight lines. They are used to symbolize very fast motion. (The straighter the line, the faster the object is moving. Diagonal lines are used frequently by artists to portray ultra speed!)

"Evolution" type panels

Compare the image above and below.

Looks kind of similar! The artist used this method to portray the growth of a single subject, signifying that time has passed as she grows up.

Single panel contrast: The same character's young self and old self is put side by side, signifying that they have grown up.

Now to talk a bit about the comic. I felt so miserable for the characters when they grew up to have troubled lives, because I was already attached to their kid-selves! I don't know what to feel about the artist leaving out explanations for their development - it's good because it keeps the reader thinking about them, but it's bad because some don't really make sense (eg. the anti pakistani father)

Class exercise

Click here to full view the comic!!

Honestly, I don't have much to say about this one, because the text was made up on the spot. The atmosphere of this story was obviously depressing, and Zixuan and I decided to play on it. When I saw ice cream, I thought about stress-eating and vaguely recalled stories about girls chugging down pints of ice cream after a bad breakup.

I will try to identify the relationships between text and image in our submission!

"Bad breakup, huh?" Complementary.

"Silly men.. always thinking it's about them" could be complementary, could be unrelated (since it's a thought)

"I just fucking love ice-cream." Complementary. It could be contrasting, depending on how you perceive the mood of the last panel.

Yep!

Relationships

In this lecture, we learnt about text-image relations in sequential art. Here are four relationships we learnt about:

Redundant - Words and image are basically carrying the same message. Might be good to use if your audience are less flexible/familiar with your content.

Contrasting - Words and image are carrying opposite messages. Surprises the reader. Sarcasm is a good example of contrasting text.

Complementary - Words and image work together to convey an idea that would not be possible without each other.

Before critique

Here is the work submitted for critique:

During critique

I was given these suggestions for my visual story:

Could try adding on some drawings to illustrate their expressions

The guy looks like he steps backwards in the fifth frame.

The fourth frame is redundant, removing it might give a story more of a "twist" factor.

The fourth frame is important to capture the thoughts and emotional process of one that has undergone a similar situation.

In the fifth frame, he could be pretending to fiddle with his phone instead.

Lessen the blurs in the frames as it makes the story look weird.

What people liked & disliked:

The motion blur in the fifth frame.

The hand wave motion in the first frame.

It was tough to process so many suggestions. People had different ideas on what was the best sequence of events, and I strongly considered all of them. They were all good and would make an interesting story. If I could submit many versions, I would do each and every one of them!

But in the end, I could only submit one. I thought about what compelled me to create this visual story. It was meant to mirror my personal experiences with strangers and I did not want to change that. So, I stuck with the original frames.

(And also, my main actor had migrated overseas and I felt he was irreplaceable...)

Testing out with drawings

Okay! I decided to follow a suggestion and tried adding comical drawings that helped to exaggerate the emotions and actions portrayed in my story.

Even though they did enhance the characters' moods, many people (including myself) felt that without drawings, the actors already brought out the story well enough! So I stuck with the original. Still, I would like to leave this here, in case any of you would like to critique the added illustrations :)

Final submission

Here is my final submission. There were not much changes.

I removed some blurs that did not enhance the story.

There was a mixed reaction for the motion blur in the last frame, and I did try to remove it, but I felt that it looked better with the blur. I kept it in the end.

I also tried to make it look like Patrick did not move backwards in the last frame but alas, when I tried to move him to the right, his expression became more hidden and less powerful. As such, I made him a little bigger in the fourth frame to lessen the illusion of moving backwards.

SHOOTING STAGE

Using: iPhone 5

Venue: Utown

Actors: Patrick (my CS1101S TA), Kintan (FASS Y2), Maggie (Eng Y2)

Method: I took multiple shots of each frame and crossed my fingers that at least one of them would be decent enough for the visual story.

frame one

Too much empty space in the middle.

Had to bring them much closer.

The table is a little distracting, but this is the best shot I have of a wave.

frame two

This one, I felt, was perfect from the first shot, thanks to my amazing actor :D

frame three

The only vertical shot. I hope I can fit everything into a horizontal frame later!

frame four

Yikes, he looks angry here!

Told him to frown less.

frame five

troubledly fiddling away with the phone, what dennis thought would be a better idea. but it was not my original plan, and not what i would do.

Poor patrick! It's not a bad shot, but seems too depressing.

This one has the 'awkwardly slinking away' look I wanted to capture. So, I decided to use this!

EDITING

Photos were edited in Photoshop by:

 Blurring backgrounds to put more focus on the actors.

 Adjusting levels for a brighter, cuter outlook.

 Cropping to fit horizontal panel.

 Adding motion blurs to illustrate movement.

Here is a sample of before/after:

MAKING COMIC

Yup, and then I created five rectangles that matched the size of my smallest photo, and overlay the photos on the rectangles, creating my comic panels! Add the title and a cute background, and here's the final result:

I was nervous for this assignment because I have almost no photography experience other than the occasional selfie and picking the best instagram filter, but the deadline drew near and so I came up with something really simple!

PLANNING STAGE

First, I planned out the five frames by drawing them out. I discussed improvements for the layout of each panel with a photographer friend of mine and decided on the placement of the characters inside the panel and the direction they would be facing.

1. I notice someone waving at me.

2. I look confused.

3. I wave back politely.

4. Suddenly, I see that person talking to his friend.

5. Embarrassed, I run away.

I thought that the transition from 3 to 4 was quite sudden especially with the appearance of a new character. Even though the confused expression in 2 was cute, I decided to scrap it because I needed an extra frame to smoothen the transition. Then, I drew a second draft!

1. I notice someone waving at me. From the previous draft, the person is less distant and can be seen more clearly.

2. I look confused, and wave back.

3. From behind, his friend appears while I am in mid-wave.

4. Both ignore me and start talking to each other.

This set of photos was considered a bad visual story:

Why it was considered bad:

title "Curiosity made for a few magical moments" did not seem to match storyline

lack of a storyline

not much use of composition, visual story looks like a collection of deer pictures

How my group improved it:

Changed the colours and added embellishments to represent a more magical and surreal environment

Added a storyline that matches the title (Deer discovers magical flower and upon eating it, grows wings magically)

Disclaimer

I was not present for this exercise because I was unwell. But I am making this post to revise content that I missed by reading the powerpoint slides and this article :)

Closure

One of the important concepts of this chapter. It is the act of observing the parts and perceiving the whole. One assumes that the world doesn't disappear even if it cannot be seen.

Over here, the mind tries to fill in the gaps to connect the lines to form a familiar shape. Even though there are no whole circles or triangles, we are able to connect the parts that are grouped together to form them.

Panel-to-panel transitions

McCloud has categorized panel-to-panel transitions into six classes:

1. Moment-to-moment 

The same subject is displayed in adjacent instants, one happening immediately after another. Think: A very laggy animation.

Not much closure needed.

2. Action-to-action 

Two separate, consecutive actions are displayed, still focusing on one subject.

3. Subject-to-subject 

Both panels are within the same scene or idea, but each portrays a different subject.

4. Scene-to-Scene 

Great leaps in time or space, like fast forwarding or flashbacks.  Requires lots of closure and deducing what has happened between the two panels.

5. Aspect to aspect 

"Bypasses time for the most part and sets a wandering eye on different aspects of a place, mood, or idea."

Think of different parts of a panorama being shown in separate panels. Could help a user familiarize himself with the environment.

6. Non-Sequitur 

No logical relationship between panels.  Although McCloud argues that any panels placed side by side will inevitably generate the impression of some sort of relationship in the reader's mind. He says, "--alchemy at work in the space between panels which can help us find meaning or resonance in even the most jarring of combinations."

My first NM3228 lecture and exercise!! We were shown a series of images and had to decide whether each was sequential art.

Our lecturer's first question was "Does anyone know what sequential art is?" And I was thinking, I know, I know, I read the course syllabus and we're gonna do lots of comics that's why i'm taking this course lol!!, so I blurted "comics". It turns out that the real definition isn't that simple, or limited to comics. We found out why later, during the first exercise!!

Process of classifying

We tried to see if the images could be 1. considered art and if 2. they were sequential.

Most of the images had pictures, and those were easier to classify. We just had to spot whether it was sequential, like if the order made sense, or if it told a story.

Some images were straightforward and clearly showed a sequence of events taking place over time. Some weren't as clear cut and linear, so that was a little tougher.

Some images were unclear, like that super long chinese landscape drawing, so we did a google image search for a better view.

Some images had lots of text and were littered with occasional graphics, and looked like a description of instructional steps. We had a hard time deciding if it was considered sequential art.

Criteria

Our class came up with these criteria:

Space

The series of panels have to take place over shared space and/or time.

Before/after

There should be some sort of action that occur to show something happened before and after the panels, some form of link that makes sense. In fact, some of them don't need separate panels - a sequence of events could be taking place in a single frame!

Image dominant

We felt that images that just contained plaintext weren't really considered art, but someone raised a few good examples of text only comics like Arkham Asylum and Neil Gaiman's Stardust. After that we continued debating on IVLE and discovered some cool comics made up of word art. Personally I feel that it is possible to have text only comics but the it must either have speech bubbles or the text must be arranged in a pictorial manner to be considered sequential art.

Artist intention

If the artist intends something to be sequential art, can it be considered sequential art? Hmmm.. I think this is debatable. Just because the creator thinks it, doesn't mean other people hold the same thought. It depends on how the person interprets the piece.

Send message

A message impactful enough to evoke an emotional response - but that also depends on the viewer's interpretation.