Magic exist

I believe in magic… and miracles :)

Leave a comment

Final: My Research and Idea Generation

Idea 1:Video shows people of different occupations and careers eg. Teacher, Dancer, Singer, Musician, Scientist, Engineer, Architect, Accountant, Entrepreneur etc looking at their watch and rushing off. They all come back to NUS or get together to for the word NUS.

Slogan: NUSrian, they are everywhere…
Idea 2:
Adapting the method from this video, I’m thinking of using the location of the UCC: I was here sign to work on the video. We can place the signs of the different facult or just have people running around different faculty, doing some passing the balloon or passing the baton thing and then end with NUS: I was here sign.The main problem will be to have good and happy music.
Idea 3. Using the NUS map, we can make a Harry Potter’s Marauder’s Map, and show people walking around on the map, then focus in to show what they are doing eg. in LT, in canteen etc at different parts of the day….
Idea 4. I saw this Singapore Airlines ad and thought it will be cool if we can make a video something like this! But it seems super challenging!!!
Idea 5. I saw this mini commercial on tv and had a hard time trying to find it on youtube, this commercial will be a good idea to portray NUS student as people who are flexible and will try their best to reach the top/ their aim etc. They will end up merging to form the word, NUS. Woo hoo.. I’m soooo….. happy that I managed to think of so many ideas!! This idea can be combined with my first idea.

Leave a comment

NM3208 Presentation 2iv

Spotting different filming techniques: SALT


Refer to the caption at the bottom of the clip.

I find this trailer clip uses many of the techniques mentioned in the presentation questions, thus I decided to make an attempt to try spotting the different techniques. Labelled the techniques and transitions used in the trailer, some parts are really very short, since it’s an action-packed movie, so you may have to pay attention to catch it!

(P.S. Not that I have a lot of time on hand, just that I’m super interested in filming stuff, and it’s partly to make up for my late completion for my first presentation, so hopefully I can get back the points for the extra hard work I’ve put in!!! Muahaha~ Spent 3 days working on this 4 blog entries, but enjoyed myself!!!)

I’m still not quite sure of the differences between wide-angle and telephoto. So pardon me if I spot wrongly!
This trailer uses a lot of fade-to-black transition, and with the sound effects, it created a lot of suspense and mystery around the movie, attracting people to watch the movie.

The use of very fast panning and zoom to close-up also dramatise and enhance the personalities of each character in the movie.

Leave a comment

3b. Songs Exploration for Kinetic Typography

I thought of several songs that I will like to try working on.

One of them would be my childhood favourite show: Mighty Morphin Power Rangers. It influenced my life a lot. I learnt gymnastics and like pink, mainly because of my favourite pink ranger, Kimberly. I’m not sure if there is a time limit for the songs we choose, but there is the short 1 minute version and the extended 3-5min versions.

Difficulty level: ***

Other songs that I thought of working on are the songs from high school musical.

Difficulty level: ****

Here’s two songs from Simple Plan which I thought will be relatively easier to do the placing of the words

Difficulty level: ****

The next song, is a song mixed with English and Chinese. I tried searching for Chinese songs with typography, but I realised that there is almost none. So this will be a HUGE challenge for me. I chose this song as this is a song that brought many memories back to me and made me cried alot few months back..

Difficulty level: ******


NM3208 Presentation 2iii

III. Define what are “pan, tilt‐up, tilt‐down, zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto”
– Show us how to and discuss the suitability of using pan, tilt‐up, tilt‐down zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto in the clips.
– What is the meaning/the purpose of pan, tilt‐up, tilt‐down zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto?
IV. [Additionally for group presentation]; Please find clips which make good use of pan, tilt‐up, tilt‐down zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto. What are their purposes?

1. Pan
Definition: the use of a camera to scan a subject horizontally with the camera remaining stationary and rotating.

Suitability in clips: Panning is usually used to show the character/object moving from one area to the other.
Purpose: In this video, panning method is used in many parts eg. [0:41-0:44s] and it also mix it with high-angle and film the scenes from a higher place and panning at the same time.

2/3. Tilt-up /Tilt-down
Definition: the camera is stationary and rotates in a vertical plane

Suitability in clips: To draw attention to something on the ground (tilt-down) or something above eyeline (tilt-up), making audience feel like they are the main character looking at the particular object of focus.
Purpose: In this Mr Bean opening theme, a tilt down was used to focus on the ground, where the credits were shown. It draws the attention of the audience to the spotlight.

4. Zoom
Definition: Moving in to a close-up or away from a close-up
Show: I cut this clip from a part of Harry Potter 7, showing the zoom effect

Suitability in clips: It is often used to show emphasis on a particular object or character, bring viewer’s attention and focus to it.
Purpose: In the above clip, the attention is brought to Professor Dumbledore’s hands on Harry’s arms, showing that Dumbledore has been Harry’s source of support all the while.

5. Close up
Definition: A certain feature, such as someone’s head, takes up the whole frame
6. Extreme close up
Definition: The shot is so tight that only a fraction of the focus of attention, such as someone’s eyes, can be seen
Show: This video has 2 effects, extreme close-up and close-up side by side, thus I decided to explain these 2 effects together

Suitability in clips: A closeup is often used to show tension, or emotion or a particular intricate activity of the hands. Major characters are often given a close-up when they are introduced as a way of indicating their importance
Purpose: In the case of the above video, viewers are first shown the pain in someone’s eyes, followed by the closeup of him (in this case, Harry Potter), bringing the audience into the situation, continued from the previous movie.

7. Wide angle
Definition: Wide angle view, like its name, gives audience a wider angle of view.
Show: Despite the description and googling, I still couldn’t get the idea of wide angle in videos. However, I found a video, that shows the difference between normal angle and wide angle. Though it may not be the best one to describe what a wide angle is, I think it at least showed me the difference between the normal angle and the wide angle.

Suitability in clips: To give audience a larger picture of the situation
Purpose: I’m thinking of situations where wide angle will be used, but I’m thinking in term of the main character trying to find something in the middle of a busy street, and the camera man will usually focus him/her before zooming out and show him/her in midst of many people. Correct me if I’m wrong!

8. High-angle
Definition: High-angle is where the camera is located above the eyeline and looks down on the subject.
Show: I was thinking what kind of video films from high-angle when I remember how babies are often filmed from high-angle to portray vulnerability. I found this amusing video from youtube which was recorded throughout from high angle. Although it may not be really very high-angle used in baby comedy movies/shows, but I felt that it was quite nice

Suitability in clips: It is often used to give the impression that the character or object seems vulnerable or powerless, making the moment more dramatic
Purpose: In this video, the baby gave audience a helpless and trapped feeling. When the daddy joins her in the crib, it was his turn to be trapped!

9. Fish-eye
Definition: a kind of wide-angle filming method that takes in an extremely wide, hemispherical image
Show: This is a video showing a friend who filmed his/her another friend outside the door through the peep hole. Though they are not using the fish-eye lens, but they managed to get the same effect.

Suitability in clips: Used to portray character looking through a peephole or looking through a hole to the outside environment.
Purpose: The fish-eye filming method usually has a bit of comedy effect and shows a wide field of view.

10. Telephoto
Definition: Allows capturing and focusing of objects at a very distant location.
Show: This is a test for telephoto lens, it can see as far as the beach not visible to naked eyes!

Suitability in clips: Capturing of objects very far away eg. motion/ action clips.
Purpose: To show audience the distance of the object/character or the vulnerability/ small-ness of the character compared to the wide surroundings.

Something extra!
I found a great website teaching us how to make a good movie and it offered some really cool tips!
More information about the different types of shots, transitions and effects used in films


NM3208 Presentation 2ii

II. What are the types of video transition? Please list 5 different video transition effects (see the Adobe Premiere menu). When should these transition effects be used? What are the meaning attached to each transition effect?
Please find 5 clips which illustrate when these five effects are used, and their meaning/purpose.
[eg. The meaning of the direction: From left to right [the good guy], from right to left [the bad guy], an example from Week 3 lecture].

1. Dissolve/ Crossfade: a gradual fade from one shot to the next, one of the shots gradually fades in until it encompasses the screen, the other shot gradually fades out until it is completely gone.
When to use: It should be use when a video or photo of a scenery transits to next image, or a location changes to another location to give a relaxed feeling, meandering pace or contemplative mood.
Meaning: Crossfades can also convey a sense of passing time or changing location.
Video Clip using Crossfade:

Meaning in the video: This is a video tribute to Jimmy Lin and Ruby Lin, using Jimmy Lin’s song, and the whole video uses mainly crossfade, (see first 20 seconds). In this video, the crossfade shows the transition of the two actors over the past 10 years.

2. Fade: transites to a single colour, usually black or white
When to use/Meaning: Usually used to  signal the beginning and end of scenes or video clip, often used in film and television.
Video Clip using Fad:

Meaning in the video: A fade to black was used in between [4:04- 4:-08] of the video to signify that the video has ended. 

3. Digital Effects:
When to use/ Meaning: Usually in trailers, to arouse excitement and curiosity.
Video Clip using Digital Effect:

Meaning in the video: This is a unique wedding clip trailer by Andrei Bart Studios and it uses many digital effect as transition, especially [0:30-0:32], making the wedding seems exciting and anticipating instead of the usual sweet and romantic feeling.

4. Wipe: transition that gradually replaces a shot with some kind of a stroke or pattern
When to use/ Meaning: Used to show a change in location.
Video Clip using Wipe: (Video url changed!)

Meaning in the video: This video is a tribute to the two high school musical couple. The heart shape wipe transitions shows the different photos of the couple in different locations, imparting the sense of love.

5. Cuts:  an instant change from one shot to the next without any special effect.
When to use: It is often used in news reports when there are only a few seconds to show multiple shots.
Meaning: It is usually a simple transition to tell viewers to move on to the next photo or clip.
Video Clip using Cut:

Meaning in the video: This is a photo tribute of two celebrities who had been together in the past, and the creator uses mainly ken burns effect of panning and zooming and cut as transition.

Go to Part (III)

Leave a comment

Final: Meeting 1 (Minutes)

Minutes for NM3208 meeting (25 January 2011, 4pm-430pm)

This is our first time meeting one another, me, Helen and Daryl. All of us did a short introduction of ourselves, before getting down to discussed the things we need to do for NM3208. We plan to help each other out for the photostory and other individual projects that we may need help with.

I shared my idea about promoting NUS as a place where you can find your true love besides making friends and studying.

We decided to each brainstorm 3 ideas each for the video and then try to combine or mix around with the ideas we have on hand.

As Helen will be away the whole week for Chinese New Year, we decided to share the ideas via email and meet up again the following week after Chinese New Year.

Leave a comment

NM3208 Presentation 2i

I. Watch the video above. Point out the part(s) that applies Ken Burns Effect.
– Which part(s) of using Ken Burn Effect you think are (is) good?
– Evaluate this video from other aspects (sound, photo, script, transition and so on). Which are (is) good and which can to be

I felt that the two zooming effect of the photo above is well done as it effectively showed the dreadful long flight of stairs and also Cheryl’s dread of climbing them. She included the words “Not Again!”, showing that it was not the first time she encountered the long flight of stairs.

However, if the first photo could be taken or zoomed out until viewers can see the top of the stairs, it will be a good way to bring out the loooong flight of stairs in NUS.

I’m not sure is the above two panning transition are considered ken burns effect when it uses a series of photos instead of one. But yea, Cheryl used the word stairs with her standing on the stairs, and the word Stress in a library, which I think is a good way to emphasize the words

The effect of the pile of suffocating books may be dramatized if the photo is taken from a lower angle, showing the book towering on top.

I think this is a good picture, which showed students studying along the library passageway, and the panning effect revealed the number of people “mugging hard” in the library.

I like this picture as it pans down from a smiling face to a face with wide laughter, effectively portraying the joy in Cheryl’s social life when she mixed around with her friends.


I like the way she mention that she has summarised the highlights of her 2 years worth of NUS Life in 2 minutes.

Something that she can improve on is perhaps the use of the graphics when she mentioned about how she does not have to travel all the way to the east. A photo of the East West Line direction board will be better than a graphic.

Something extra!
What’s so good about Ken Burn effect? (Credits to deskshare)

  • Breathe Life to Images:  That amazing collection of photos you have could enrich your video.  Simply use this effect to pan from one side of the picture to another (or from the top to the bottom), creating an illusion of movement.
  • Avoid Jarring the Viewer:  While it is nice to supplement video with images that add to the overall story, a sudden jump from video that has motion to still photos can startle your viewers.  Pan across snaps to create an illusion of continuous movement.
  • Highlight an Element:  You can simply zoom in on the person or section of the video that you want to emphasize.  The point of view gradually moves toward to the target, providing the viewer a closer look at a crucial component of your visual composition.
  • Enhancing Video Motion:  If the camera panned during filming, but you would like a more sweeping movement in your final video, use Pan and Zoom to sweep across the width of the video frame while the camera is also panning.  This can produce a truly dramatic feeling of fast movement.  This technique lets you focus on important elements in the image, while simultaneously showing the entire setting.

Go to Part (II)

Leave a comment

1b. Idea Generation

After the research, I decide to merge a few design ideas and came up with three main design.

Design 1:



Design 2:



Design 3:



Design 1 Design 2 Design 3
Typography San-Serif
2 type of fonts
2 type of fonts
2-3 type of fonts
Color Scheme Vintage, Warm Comic, informal Warm Informal
Layout 3 column 2 column 3 column
Grouping and Hierarchy Yes Yes Yes
Figure and Ground Good Separation Good Separation Good Separation
Composition Rule of Third Rule of Third

Sections I want to include in the portfolio website:
1. Home
2. Blog
3. About
4. Portfolio
-Creative Works
5. Contact

1 Comment

1a. Portfolio Website Research


I was wondering what kind of portfolio website will I want and suit me best when I was researching for inspiration. In the end, I found a long list of cool designs where I will choose 3 types and come out with three different sketches of my website.

Stand-alone unique design:

Something I Like and may adapt: I like the way the web designer integrate the menu into his ‘steps’. This is a simple design, yet unique, which I may wanna adapt and work on.
Rating: ****

Something I Like and may adapt: I always have a thing for notebook/ organiser-like website, but I realise that this is quite a common concept, and I will most probably not use it!
Rating: **

Something I Like and may adapt: I like the 3-dimensional effect of this website. Although the menu button are below, I could actually make the ‘decorations’ and ‘shelves’ be one of the buttons etc. This “in-a-room” effect is something I would like to try out. The picture of the kid by the cot actually changes when user clicks to go other pages, so I can try putting my own photos inside for personalization?
Rating: *****

Accept Joel Sitotis Matriz
Typography San-Serif and Serif
4-5 type of fonts
2 type of fonts
1-2 type of fonts
Color Scheme Comic, Informal Notepad, Semi-formal Warm, Informal
Layout 1 column 2 column 2 column
Grouping and Hierarchy Yes Yes Yes
Figure and Ground Good Separation Good Separation Good Separation
Composition Rule of Third

Something I Like and may adapt: This is a simple design similar to that of the organiser. I like the background design, and the complementary designs on the ‘paper’ which is elegant yet unique. However, this website is no longer functional.
Rating: ***

Something I Like and may adapt: This website is so cool! Everything was portrayed from the top view of a working desk, but it won’t be easy to design something like that… hmmm… unless I can think of a simpler idea… KIV
Rating: *****

Something I Like and may adapt: This flash click shows cut-outs of people shopping for organic goods. I like the way it is purposely made to look like cut-outs and I thought it will be a good idea to have something like that in my website, and people can click on these figures to enter a particular page of my website.
Rating: *****

Jobs on Wall Simpleart Organic
Typography Serif
3-4 type of fonts
4 type of fonts
2 type of fonts
Color Scheme School, informal Cool, Semi-formal Warm, Informal
Layout 1 column 4 column 3 column
Grouping and Hierarchy Yes Yes Yes
Figure and Ground Good Separation Good Separation Good Separation
Composition Rule of Third


Cool concepts: (downward scrolling -continuity)

Something I Like and may adapt: This website separates 3 sections of the website by using the theme of space, land, sea. Though the division is rather abrupt but the idea was quite good.
Rating: *** (side-scrolling)

Something I Like and may adapt: I was quite amazed by this website as it operates via side-scrolling, and it makes me wonder how does Mac-mouse users navigate the website (as Mac-mouse doesn’t have the rollers for scrolling). Also, the picture is linked by the lines, hinting users that there are more information by the side. The top menu uses the shapes of clouds and sun, which I felt was clever as they were the only things that remain in the same position. Thus the movement of the website makes it look like they were clouds moving past the page.

I would like to try this concept if possible.

Rating: ***** (beach theme, downward scrolling-continuity)

Something I Like and may adapt: The transition of this website theme is much smoother, with the sky, the beach and the underwater world. I like the illustrator graphics and perhaps I can work on something like that.
Rating: ****

Something I Like and may adapt: This is another example of a website that uses 3 main design themes- sky, land (field) and soil as their content division. The graphics is much better than the first design, and more detailed that the second one.
Rating: ****

Rosso/Morphix Artcore Jeannieweb
Typography San-Serif and Serif
3-4 type of fonts
San-Serif and Serif
2 type of fonts
3 type of fonts
Color Scheme Cool and warm, informal Warm, informal Cool, Informal
Layout 1-2 column 2 column 1-2 column
Grouping and Hierarchy Yes Yes Yes
Figure and Ground Good Separation Good Separation Good Separation
Composition Rule of Third Rule of Third


Websites with nice headers/ menu buttons (hand-drawn effect)

Something I Like and may adapt: I like the doodle-like drawings as the menu buttons, and the picture will give user a pleasant surprise when there’s a mouse-over. It provides additional expressions and information which made the website unique.
Rating: ****

Something I Like and may adapt: This is a different version of a graffiti-menu which I like.
Rating: ****

Something I Like and may adapt: This website uses a lot of colours and exquisite drawings. The cursive font may not be an ideal font to be used in websites, but it gave this website an individualistic and cutesy feminine look.
Rating: *****

Sarahhyland Creative dot Red velvet
Typography San-Serif and Serif
4-5 type of fonts
2-3 type of fonts
3 type of fonts
Color Scheme Warm, informal Warm, Semi-formal Warm, Informal
Layout 3-4 column 2-3 column 3-4 column
Grouping and Hierarchy Yes Yes Yes
Figure and Ground Good Separation Good Separation Good Separation
Composition Rule of Third

Website: No organisation of content, mixed tabs

Something I Like and may adapt: This website uses a lot of speech bubbles as menu and different colours against the black background. It is a simple website, but there are quite a few website that uses this concept and it may not be suitable for my portfolio.
Rating: ***

Website: Simple categories by having four columns.

Something I Like and may adapt: This website uses four images and a short sentence to introduce the photographer and his works. The simple design gives users a clear view of the content of the website and make it easy for navigation and browsing.
Rating: *****

duplos Craigearl
Typography San-Serif
3-4 type of fonts
1-2 type of fonts
Color Scheme Colourful, informal Cool, formal
Layout 2 column 1-4 column
Grouping and Hierarchy Yes Yes
Figure and Ground Good Separation Good Separation
Composition Rule of Third Rule of Third

Leave a comment

NM3208 Presentation 1

Please list 3 good websites which you like and evaluate these websites. Do these websites use CSS (Cascading Style Sheet) ? If yes, how do they implement the CSS across the websites? If no, why? What make them good?

I chose the three games websites I like most as it is important for a game website to be visually attractive to users, so that users will be willing to try out the games promoted and also to purchase them.

1. Big fish Games website:

Colour Scheme: The colour scheme of this website changes every other month according to the game of the month. The website uses dark background colours like dark purple, black and blue to promote their game “The Curse of the Ring”, while their white scrolling page uses blue and yellow for their font colours.

As their recommended game of the month is related to themes like dark magic, curses etc, using dark purple, blue and black colours brings users the excitement of the game, triggering their curiosity and encouraging them to purchase the game.

On the other hand, the clean white background also provides a nice neutral backing for the website to display other games, allowing users to choose for themselves the game they would like to try.

Layout: The website uses a 3-column table to display the various games. The text in the website in the first and third columns were aligned left, while the text in the middle column were centered. This give the website a slightly disoriented look, especially with the animation in the top 2 rows.

CSS: Yes. Website uses Flash, javascript and external stylesheet


2. IAH games’ Dragonica website:

Colour Scheme: The dragonica website has a white background with brown, wooden coloured buttons. It uses this simple colour scheme to bring out the graphics of the game characters.

Layout: Dragonica website has three columns and it is filled up with graphics, and the words are all located in the second column. The overwhelming graphics may cause the users to be slightly lost, not knowing where to look. However, the concentration of text in the center attract the users to read the words instead of looking at the graphics.

CSS: Yes. Website uses


3.Playfish Website:

Colour Scheme: Playfish, the website holding some of Facebook’s most played and popular games uses light blue for their headers and white background. They also used primary colours for its other buttons. This give the website a relaxing and light-hearted feeling which is how the games hosted by playfish are like.

Layout:Playfish has three clearly-defined columns. The clean and simple layout with clearly stated headers make it easy to read and well-organised. It has a good  balance between graphic and text.

CSS: Yes, the website uses Flash, javascript and external stylesheet.

II. What are the advantages of using CSS?

CSS allows the web designer to change the style of documents without editing every single page within the entire website. It also allows the layout and position of text or graphics to be consistent across the entire site. CSS makes it convenient and efficient to maintain a consistent look.

Also, a CSS-enabled website uses less bandwidth as a lot of code is condensed into one file. Only one style sheet needs to be downloaded for a browser to render the entire website.


III. What is Woff?
Woff stands for Web  Open Font Format, a simple compressed font format used in webpages, developed in 2009 by three font designers, Erik Van Blokland, Tal Leming and Jonathan Kew from Mozilla. The designer get to decide on the set of fonts, and Woff tells the browser the correct font to download and use. The WOFF format is directly based on the table-based sfnt structure used in TrueType, OpenType and Open Font Format fonts, which are collectively referred to as sfnt-based fonts.

What are the advantages of using Woff? Any disadvantages?
Using woff allow website to use lesser bandwidth and it will load faster as the font data is compressed. As Woff uses ‘real’ fonts, it is easier to edit any typo error without having to change the whole image (eg. Headers jpg OR flash).

Also, the fonts can be searched via websearch as they are fonts, this allow optimization in terms of search engines.

The main disadvantage of Woff is that it may allow people who know css to rip off the fonts without paying (for paid fonts).

Find 2 good websites which apply Woff. Elaborate how Woff is used in the websites.
1st website:

I think many people will have this website as it’s like one of the top choice in Google search. In the picture, you can see at least 4 different type of fonts and they are not images! They are all real fonts!

In this website, you can scroll all the way down and the font type changes as the user moves further and further down.

This enhance the website aesthetically and it will be easy to change their content or information when there is a need.

2nd website:

In this webpage, there’s 10 different fonts used. Although it is not encouraged to use so many different types of fonts on the same page, but as there isn’t much text, the use of the different fonts does not really make the webpage look bad.

So I felt it is quite successful in that sense.