Camera Movement, Scale, Angle and Lens

From “From Words To Image” by Marcie Begleiter (p. 57)

Camera Movement

Camera movement refers to the movement of the camera during a shot. It can be as subtle as a slight tilt to a swooping motion that covers dozens of feet in a few seconds. Some camera moves are dolly shot; pan; swish pan; tracking shot; tilt; boom shot; crane shot; car mount; static shot; steadicam shot; zoom; zolly; smash zoom; handheld; follow shot and travelling shot.

pan – moving the camera along the horizontal (x) axis, usually panning can be done either with a fixed base or using tracks, if done from a stationary position, simply rotate the camera horizontally to follow the action. Panning is often used with tracking shots to follow the direction of action or to reveal something in the bigger picture.

tilt – camera base does not move but the angle changes up or down (tilt-up, tilt-down). Tilting the camera is similar to making the camera look up or down without moving the absolute position of the camera. Tilting is used to track the movement of objects, if the object moves towards the camera e.g. camera following a plane, and is also used to reveal something something higher than the subject creating the impression that the subject is looking up.

zoom – camera does not move but the operator changes the zoom lens to enlarge or shrink the scale; zoom is used when the producer wants to show the setting before focusing on a specific detail in the composition. Zooming in can also be used when the subject focuses his/her attention on something or someone far away. Zoom in is used to create the impression of getting closer/identifying what the subject is seeing. Zooming out can be used to reveal someone or something who is standing (hiding) far away.

Scale

Scale refers to the relationship between the frame to the object being framed. Scales include extreme close-up; close-up; medium shot (m.s.); American shot; full figure; long shot (l.s.); single; two shot; insert; two-T shot.

extreme close-up (e.c.u.) – a shot with a very narrow field of view, usually half a person’s face, which gives the impression of being very close to the subject; used for showing facial details or subtle expressions.

close-up (c.u.) – larger than the e.c.u. showing the subject’s head and shoulders; most commonly used when subject is interacting with someone; to strike a “conversation-like” feeling with the subject.

wide shot (w.s.) – a shot which spans a wide view horizontally; used to depict a wide scene e.g. a living room or a car park.

Angle

Angle refers to the relationship between the camera position and the point it is focusing on. Camera angle can change both horizontally and vertically. Angles can be high angle; aerial shot; low angle; high hat shot; ¾ shot; profile; straight on/frontal; over the shoulder shot (o.t.s.);  canted frame.

high angle – camera is facing downwards on the object from above; high angles are widely used but one of their uses is for overhead tracking in pursuit/action scenes.

Lenses

Fisheye – A type of camera lens which captures and extremely wide shot in a spherical shape. Shots with Fisheye are usually distorted making the photo look wider in the center and smaller at the edges.

Telephoto – A type of long-focus lens which allows for capturing shots at great distances. One advantage of the telephoto is that it has a narrower shot angle and thus distant objects are more proportionately scaled as opposed to using a normal lens and standing closer.

Video Transitions

Video transitions are used to join 2 seemingly disparate scenes in a smooth way so that viewers do not feel that they suddenly “jump” from one place to another. Below is a list of 5 common transitions used in film and advertisements, I deliberately excluded the Cut because it is so widely used and can be used virtually anywhere that there is not much room for bringing in opinions.

1. Cross Dissolve – By far the most widely used transition in my opinion, can be used anywhere. Most effective use with camera pan to close distances.
2. Dip to White – Bringing closure to a climactic scene, opens for post climax scene especially when sadness or relief is the primary emotion. Also for flashback.
3. Dip to Black (also known as Fade in and Fade out) – Ending of scene usually to depict end of a certain day and next scene is the day later. (e.g. The Shawshank Redemption)
4. Wipes – Rarely used, only found in Star Wars movie when there is transition between planet surface to space and back. Gives the impression that the next scene is happening very far away. (e.g. Star Wars – Revenge of the Sith)
5. Slides – Rarely used in movies but the exciting and fast nature of these transitions made them popular in advertisements where they need to grab the attention of the viewer. Used when multiple photographs are shown sequentially. Slide is also used in TV comedies.
6. Zoom – Zoom as a transition is also used in certain movies. Quite often the camera will zoom in an object in the foreground and then zoom out to show a different scene. This transition is often used when there is a change from reality to a dream analogous to the act of staring at an object and losing oneself in his/her own thoughts. Alternatively zoom can also be used to "zoom out" into splitscreen to show another scene going on at the same time.

Now how do I cut those video clips from the movies....

(Hey Julian if you're reading this, I uploaded the video clips to the server because I cut them from movies and they are copyrighted bla blah blah...)

Cheryl Ho's Video Ken Burns Effect

Here's the link to the video:

http://www.youtube.com/watch?v=cULOFcZ93Ug

So where in the video did she use any Ken Burns effect. I think this girl used a hell lotta transitions but only these few would qualify as Ken Burns Effect in my opinion.

0:12 -> (NUS Map) “Being an arts and social sciences student…”

0:15 -> (Stairs) “…this has become a part of my everyday life…”

0:23 – 0:35 -> (Stairs2) “At Block ADM…” to “…not again…”

0:43 – 0:47-> (Subway) “Subway…” to “…munchie monkey”

0:58 – 1:10 -> (Books) “While I’m staring at the…” to “…stronger”

1:22 – 1:28 -> (Friends) “…friends and laugh at her” to “extra special”

1:33 – 1:41 -> (Bedroom) “I have my own place…” to “…to and fro”

I don't want to say this but while the use of Ken Burns effect in this video keeps the viewer visually interested, it does little to add “meaning” to the photos (no offense meant, CHERYL HO if you are out there kudos on your survival, I hope you have a long and prosperous life hahahaha). As Ken Burns would say himself, “you are altering the perception of reality or meaning that a still photo conveys when you add motion.” Besides Ken Burns effect also guides the eyes by focusing attention on a certain detail before panning/zooming out to reveal something else. In that sense, photos are no longer an illustration but they tell a story.

What would have made it better?

I have to say that this video has a good match between the shots and the voice. I like how certain shots have been selected to illustrate the words like “stare” when she’s staring into the pile of books. However, some compositions were created deliberately to illustrate some events such as the “piling of books,” such carefully arranged compositions may not be available if looking into old pictures or photo albums. One thing she could have improved on might be the synchronization between the scenes and the music. It would have been tidier if the transitions were on beat.

In terms of the script, it is certainly an effective narrative of the author’s life in NUS. I have much less to say about it since everybody experiences life differently. But one way she could have improved might could be by adding drama and twists to the script. Can't really tell her add drama to her life anyway, can I? 

Another Web Template

Just another possible web template that I made considering that my previous template lacked a theme. idea was ludic engagement... i have all these small things on the screen that the user can click, e.g. clicking on the shoes would open my photo story assignment which was about a shoe collector :D oh crap... i think it's about time to settle on a specific design and start working on it. Critique session last week wasn't very useful either, didn't print out my sketches, was the near last one to present and had to present on my laptop which i kept shaking around...

haha and I so wanted to put a chibi julian on my website. doesn't really make sense to have him on now. hmm... i think colorwise, the green is too bright. might have a lot of adjustments to make before putting this thing up.

anyway what's the theme? i was thinking farm/scenery when i did it (maybe needs more sheep) but to me it  looks more like something kindergarten kids drew... (i can hear my pride shouting: blame it on the new tablet! blame it on the new tablet!!) what??? 6.18am already? gotta post my homework for this week... ja!

Toilet sketches

4 styles based on my latest concept. Hahaha sry for the title but i really drafted these sketches when i was in the toilet. If I start now, I should be able to at least finish the website with "Happy" style by Tuesday.

A Web Template created in Photoshop

I guessed I had too much spare time... or rather I just wanted to try out drafting web templates in photoshop to get the overall picture. I followed a guide to create the following template. Didn't turn out as it was supposed to be cuz I got a couple of steps wrong. Also got the size of a marquee wrong so I had to stretch some layers in the end causing the "flattening" of the posts. Sry for the hatsune miku on top, it just came in handy as I had no pictures of any logo on my comp.

Web layout sketches

Trying to get inspiration by sketching web layouts that come to my mind. Seriously having a designer's block here.

A simple layout.

Makes more sense to bring down the navigation and stretch the header to the full width, but still lacked an original theme.

Blending the navigation into the header. Otherwise pretty standard layout.

A classical left navigation with a themed design instead of rectangular boxes. Characters on top would wear different clothes. Website theme would change based on which character the user selected.

Thinking about using Realist (real pictures), Minimalist (abstracted) and Graphical (illustration) themes.

Stick to graphical theme but now change the theme choices based on emotions of viewer - Joy, Sorrow, Anger. Added a single character on top portraying the emotion of the theme selected.

Brainstorming a web template

Every good design starts off with some rough sketches and weird ideas. As someone with no experience in web design, this was a particularly difficult phase for me. And I had all those fancy ideas with animations and sound effects but soon realised that it required flash and javascript and lots and LOTS OF TIME!!!!

Fact is I needed something that could be done quickly and efficiently with html and css only. I have absolutely no idea how "good" the website is supposed to be and I'm pretty sure some geek is gonna come up with some flashy flash stuff. Arts students just lose out to computing students when it comes to this stuff.

ARTS 0 - SOC 1

Now I found a couple of web templates that would be suitable for displaying our 2208 assignments. Particularly like the first one cuz of the colors. Second one looked very professional but a lil bit too monochrome. I forgot where I got those pictures hmm... 

Web Open Font Format

While more and more people are joining the pool of web developers, it has become harder for developers to create websites that can stand out and many of them have resorted to using fancy fonts (non-system fonts) to create their webpages. The disadvantage of that method is that, if the client computer did not have the font, the web page would be displayed incorrectly.

Uploading the font family to the server for download by the client was expensive because it consumed space and bandwidth. This method also faced copyright issues. Other counter measures such as converting the fonts to images or using flash rendering, all of them were expensive and unreliable.

Web Open Font Format (WOFF) is an attempt to solve that problem by using an encoding tool that is more efficient than the TrueType Font or the OpenType Font. The WOFF is a compressed format meaning that the file size is significantly reduced and the developer can embed their fonts to their webpages much more efficiently.

Only disadvantage of WOFF so far is that it is not fully supported by all browsers yet. But development plans are on their way to make WOFF a standard for the WWW.

External Links:

1. Mozilla WOFF Discussion (http://hacks.mozilla.org/2009/10/woff/)

2. IE WOFF Demo (http://ie.microsoft.com/testdrive/Graphics/WebFonts/Default.html)

3. Another WOFF Demo (http://lostworldsfairs.com/)

Despite scouring numerous stylesheets for the past days, I couldn’t find any websites that used the WOFF for the sake of the website itself. I guess it’s because of their “under construction” nature. A google code search for woff inside css also returns mostly results from github.com indicating that WOFF is far from being widely used.

The 2 demos above (2 and 3) used WOFF to promote it and thus their usage clearly differs from the way a regular web developer would have used WOFF.

They should however provide a good glimpse of the possibilities for typography with the WOFF. There is one thing that the 2 websites make clear is that it is now easier to have webpages comparing typography because it is easier to display them all in 1 page without having to convert them into images.

What is CSS?

CSS essentially separates all formatting related functions into a separate section of the html document or into a completely separate document known as a stylesheet. It is not difficult to think of multiple derived advantages that this has over traditional html.

Firstly and perhaps most importantly, it saves a lot of work. Traditional html formatting meant that the author had to write formatting tags for each line in the document that differed from the format defined in the body tag. This represented a lot of work especially if the author jumped from one style to another very often in the document. The clutter became a real nightmare for authors. Now authors can define classes and ids to format chunks of text without having to rewrite all the tags. At the same time, using external stylesheets allow the author to use the same styles across different webpages again saving a lot of work in terms of formatting if the author wanted all the pages to display in the same style.

Secondly, since there is less “code” to process, pages are smaller in terms of size, pages usually load faster, use less bandwidth – in general it made the web more efficient saving money and time.

Lastly, css allows for far more customization than traditional html. Web designers can let their creativity run wild where they were previously restricted by the html limitations. Some css pages can be equally appealing and produce equal functionality to pages created using javascript or flash both of which are considered to be heavier in terms of coding having security loopholes.

Three Websites

“YII!... ERR!... YII!... ERR!...” I suddenly woke up to the voice of a crude sounding middle-aged man counting in Mandarin. It has been a while since I last heard those folks practicing “tai-chi” in the terrace right outside my window. Irregular sleep and video game addiction means that you sleep when people go to work and wake up when people go to sleep. After a while, you don’t quite know what’s going on in the world anymore.

With the voice still resonating in my head, I opened my eyes and saw myself lying on my chair with my head on the bed and my feet on the table. It’s surprising even to myself how I manage to sleep in such an acrobatic position.

It was already 7am.

As I pulled myself up, memories of what I did last night came back. I remember sitting in front of my laptop, pen and paper on the table, wondering how in the world I was supposed to start my assignment. I thought it would just come to me. It never came. Finally my will gave up as I succumbed to the power of the Sandman.

I’d have learnt most of hypertext mark-up language (html) and cascading style sheets (css) by now but it’s one thing to learn them and another to look at websites and say how they implemented css or how good they are. In fact, the best websites I’ve ever visited either made use of java scripting or flash or both.

I probably visited over 200 websites in the past few days. There was this website which looked nice but which caused my browser to hang and there was also another one which was equally good but animations made it so slow that it became a pain to navigate. Well I came to the conclusion that if I was looking for a perfect website, this would never end. In my eyes, there’s no perfect website (other than Google.com). So here’s my 3 shortlisted websites for evaluation:


1. www.templar.com

This website is all about experience. At first glance, it looks like some video game (I must admit that gamers like me have a certain weakspot for anything game-like) but don’t be fooled! This is a pure corporate website! Clicking on the different parts of the castle will open up the different pages and if you look close enough you can even see people in the castle and hear the sounds they make when eating!

Well I must say that this website strikes me as it’s not the usual black background neon colors fade in fade out animations kindof websites (the other type of fancy websites). Suffice to say that the layout is neat with equal-width scrolls. It’s perhaps the overall design (gestalt) that makes it look good without necessitating grids. But this does not mean that they can do without grids completely.

In terms of colors, it’s in harmony with a natural theme – lots of brown in the pages and the walls, green in the trees and blue in the water which provides color balance and makes it easy for the eyes.

Now the same reason that made the above website so awesome is the same that makes it impossible for me to replicate. Frankly speaking, it’s not something that you can do solo. Plus, it would be hard to showcase my projects and that’s exactly why no. 2 exists.


2. http://www.cas-p.net

This website wins over the others because it loads a lot faster and it is not as simple as you think it is. The artist used a lot of techniques which are seemingly trivial but very effective. The use of the right colors and shadows creates an illusion of depth. He also uses a technique to make as if the pictures stack over one another making it seem less “flat” than other websites.

In terms of grids, everything is in order. Using slanted words and graphics was also very creative in this case because it makes the page look less “squarey” and rigid. Color scheme also follows a “nature” palette with brown and green. Lastly, needless to say, he used css to style the page.

http://www.gangoeditions.com/designlab/?paged=2

3. http://who-is-erin-smith.com/blogger-vs-wordpress
 


Now before you start getting the idea that I like all nature color websites and hate box designs, here’s another website that I found to be quite appealing. A classical blog at first glance – a blog about blogs. It’s almost similar to those marketing pages where people desperately try to sell you a product and use all kinds of popups to make you stay, but fret not this one doesn’t.

There is something about it that makes it look nice (I’m sure others will disagree with me however). If you looked carefully, you’d notice that the designer paid extreme attention to the layout.

The comments section look impeccable. Blogs usually look good until the comments section but not this one.
The other thing that makes this website appealing is the use of high contract colors. The use of dark purple on a beige background makes it stand out.

http://realcolorwheel.com/tubecolors.htm

Now this website may not look as impressive as the first 2 but there’s a reason I put it here and that reason is it’s extensive use of css. The author defines the styles for her entire website in one external file (http://who-is-erin-smith.com/wp-content/themes/flexibility3/style.css).

Basically, all the pages in her website follow the format which saves a lot of work considering the number of pages she has and also the number of times she jumps from one style to another throughout the blog.