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. 

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:

NM3223 Assignment 2

This assignment is about the ketai phenomena, how it being so ubiquitous and advanced so far that it’s sub-feature, the ketai camera has dealt a heavy impact on photography. 

My concept is to highlight how the ubiquity existence of camera phones altogether with mobile apps that enables the user to apply different filters to express their “perspectives”. Using a method that is similar to photo-collage, I took photos of objects from different angles and applied different filters, and pieced them together using Photoshop. 

uitous ex

NM3223 Assignment 1

It is yet a again a late post as I finally muster up the motivation to revisit this blog. I happen to have an innate cringe whenever I visit this ‘portfolio’ blog. Beats me to know why.

Anyway, back to subject. This post is about the photos I have taken for Assignment 1 which is to experiment with basic photography techniques and produce photos of each category, namely: Shallow Depth-of-Field, Deep Depth-of-Field, Motion Blur, Freeze Motion and possibly Panning. 

I honestly had lots of fun and spent enjoyable amount of time on it, I ended up with close to about 300 shots of different objects, people, time, place and composition. I was really quite impressed with myself when I squatted at the traffic light opposite ION Orchard for close to an hour, just to capture 1 satisfying shot. Which did not really happen, I was still unsatisfied with the best shot I have gotten, I guess everyone has got to deal with failures and limitations. 

The idea is to show the contrast of static and motion. Difficulties I faced with regard to this photo per se, is that it was during night time around 8pm, there was little natural lighting. I was told that beginners will find it difficult to shoot at night, so true. I wanted to capture the motion blur from the traffic, yet I also wanted to give good portray of ION’s grandeur, (the flowers in the foreground are an added bonus which happen to sprout nicely right where I squatted). It was difficult to find a good balance of aperture, ISO and shutter speed. 

In order to capture the motion blur, I needed a slightly slower shutter speed but fast enough to capture the vehicles. Most of the shots turned out really blur because my hands could not be steady for long and the lights were flying all over the place. And because I set my aperture to be wider and ISO high, the photos turned out to be overexposed and ION was just a mess of light. Other times, in order to counter the exposition, I tweaked my ISO, and in turn got back a bunch of underexposed pictures…

I’d love to blog more about that one particular shot but I guess I should shift the focus on to the shots taken for the assignment. 

1. Deep Depth-of-field

This is taken at Vivocity’s open rooftop, overseeing the little gap of sea between Singapore and Sentosa. The original photo was much gloomier which I personally liked, as it gave a feeling of the ships being trapped under the looming thundercloud. I chose this picture over the next one because I thought the foreground, middle-ground and far-ground are more distinct.

Deep Depth-of-field 2

I love this photo very much. I felt so happy after I shot this and could not stop looking at it. I applied a vintage filter to the photo and amplified the feelings I get when I look at it, kind of like a childhood love story, don’t you feel? The little kids are really fun to take photos of, they don’t know what you have in hand yet they know you are being attentive to them and they show off their most beautiful smiles :)

2. Shallow Depth-of-Field

I waited for a certain bug to land on this flower for about 5min, and I gave up, and just took a SDOF shot of it. 

3. Freeze Motion

I have trouble representing this photo here on the blog, the colors look so dull here, but the original file is much more vibrant with a vintagey touch. This photo makes me reminiscence my younger years, brings back so much memories even though this photo is not about me.

4. Motion Blur

This was my proudest shot from the first experimental shooting session. I firmly believe that luck is an important element in photography, aside from skills and gears.

5. Panning

Taken in a moment of frantic excitement as a string of bubbles suddenly flew past when I was searching for shootable objects. Again, what a lucky shot and lucky bubble :)

Conclusion

I learnt a lot out of this assignment, such as positioning the object, cropping the photos strategically, applying different filters and adjusting photo balance. And personally, such shooting trips are like precious me-times, where I can enjoy a serene time of just me, my camera and my surroundings.  

Assignment 6

This assignment we are supposed to convey meaning using typefaces. I chose the chorus from the song Clarity by Shawn Mcdonald. 

I need clarity and truth to be, and peace to make me whole. I need freedom to come, hate to be done. And Love to guide my soul.

I used a simple font for the word “clarity”, with a clear blue color and a top-down reflection to bring out the “clear” feel of the word. 

For the word “truth”, because it is so abstract, I have no idea how to make a non-English speaker get it, but I used a combined layer of three fonts spelling out the word to symbolize the multi-faceted nature of “truth”.

“Peace” i think the pigeon and the warm colors should convey the meaning. 

And “to make me whole” I intended a person to hug the three words to bring out the “wholeness”, but left only the arms so that the top of the picture does not look too cluttered. 

Then “freedom” — butterfly, “hate” — blood, to bring out the general feelings associated with the word. 

Thereafter, “Love”, I tried to make it less cliche by placing the words “love” into the heartshape, kind of combining too cliches so that it end up not so. 

Assignment 5 POSTCARDS

This assignment is about using colors to convey information. I did 6 different color scheme based on weather and climate. 

Please comment thank you!