Saturday 18 October 2014

MOTION GRAPHICS PROJECT - Research into Motion Graphics

WHAT IS "MOTION GRAPHICS?"

I made no mystery of not knowing just what counts as Motion Graphics. I just think it's a stupid term, because animation is in a sense Motion Graphics. They are images (or graphics) that move (motion). In the same way VFX are Motion Graphics. You can be adding things to a scene that were not there originally, or emphasising them in ways that were not possible in the original shoot. More often than not, through a form of animation. Look at Corridor Digital's Dubstep Guns: When they fire and the visual representation of  the music is emitted, a series of lines are wrapped around and animated to pulse and grow using an key framed Start/End percentage. To me, that is Motion Graphics. To others, it's VFX.
This made my progression through the early stages of the project very slow and laborious, as I wasn't sure what actually constituted Motion Graphics, as it draws from multiple areas, but is a blurry line at the edge of just being one of the individual pieces.
I was told, "Add text, so it is definitely Motion Graphics," so I've done that. I'm also using a lot of Parallax motion, as that too is safely Motion Graphics. I will also incorporate Rotoscoped segments (1 of them, due to timing), because as I said above, animation is a form of Motion Graphics and vice versa.


  1. Motion graphics are graphics that use video footage and/or animation technology to create the illusion of motion or rotation, and are usually combined with audio for use in multimedia projects.
Or to put it another way...
http://vimeo.com/43976740



Examples:
Opening sequence to Right At Your Door (Lionsgate, 2006)
https://www.youtube.com/watch?v=fhow0P3Yxbw

I like this opening sequence. At the start, the words just seem to be randomly aligning themselves in the frame, but the final reveal shows a street plan in LA, where the film is set.

007: Casino Royale opening (Columbia Pictures, 2006)
https://www.youtube.com/watch?v=Eje28TK4D00

Hugely imaginative, opening with a Live Action sequence, the iconic down the barrel shot, then the fantastical animated sequence bringing in the intricate details found on playing cards and turning them into interactive elements in the piece. The suits being used as bullets and knives, the patterns found on the face cards becoming almost like snakes. And Chris Cornell doing the theme is always a winner.

Mad Men intro (AMC, 2007)
https://www.youtube.com/watch?v=eQdihTFaKj8

The bold, contrasting colours of the falling man and again at the end, with Don Draper sat on a sofa with a cigar. That imagery sticks with me, especially when placed on top of the 50s style advertising projected on the buildings as he falls. Very simple, but very powerful in my eyes.

Panic Room Opening sequence (Columbia Pictures, 2002)
https://www.youtube.com/watch?v=crXK8kF1Ing

Not all sequences need to be running and gunning. This simple intro to Panic Room is simple text on film. It does remind me a lot of the Element 3D Metropolitan trailer from Video Colpilot, https://www.youtube.com/watch?v=cC7fCpX9fZU

Almost: Round 3 - Almost Skateboarding Video (Whyte House Productions, 2004)
https://www.youtube.com/watch?v=B4y_0atFblo

One of my favourite skate videos with some of my favourite skaters! The intro to Almost Round 3 blew my mind when I first saw it. I had been animating on Flash for a couple years by this point and set about recreating the intro in Flash (as it was actually made in Flash originally). My Flash skills improved a lot through this!

The Walking Dead intro (AMC, 2010)
https://www.youtube.com/watch?v=NUiP6JstO9U

Above link shows a the intros to Seasons 1 through 3 (2010-2013)
The Walking Dead uses a lot of Parallax in it's intros.

InFamous -PS3 (Sucker Punch, 2009)
https://www.youtube.com/watch?v=t5Te2CrQsjE
InFamous intro video.
A 2D comic style added into 3D, added parallax. I've always loved this effect.
https://www.youtube.com/watch?v=WplrwsW0UzE
A behind the scenes look at how they made the comic style cutscenes.

Dubstep Guns (Corridor Digital, 2011)
https://www.youtube.com/watch?v=hDlif8Km4S4
I will fight you if you say the emission from the guns are not Motion Graphics. They are.

25 Amazing Motion Graphics Animations and Videos
http://creativeoverflow.net/25-amazing-motion-graphics-animationsvideos/
I love the Cartoon Network one. That is similar to what I want to achieve.

Pacific Rim Making Of
https://www.youtube.com/watch?v=7SIxnzhw29Q
It even calls them Motion Graphics, where some would say VFX. Showing that not only are Motion Graphics and animation reflecting forms of each other, but the same is for VFX.

Second Year Graphic Design Student - Sindre Dahl
https://www.youtube.com/watch?v=eIQviREC1QU
A Scandinavian student who was tasked with creating an opening for a fictional TV show.

Lichtspiel Opus I (Walther Ruttmann, 1921)
http://youtu.be/aHZdDmYFZN0
Coloured shapes moving to music

An Optical Poem (Oskar Fischinger, 1938)
http://youtu.be/they7m6YePo
Coloured shapes moving to music

Rhythmus 21 (Hans Richter, 1921)
https://www.youtube.com/watch?v=b972EQOOEoY
Coloured shapes moving to music

Mirror's Edge Intro (DICE, 2009
https://www.youtube.com/watch?v=5UPi5uiKIls
Mirror's Edge is a beautiful game. The clean rendered environments make me think of running through a Motion Graphics set of a city. The intro itself, with the text would be regarded as Motion Graphics. There are amazing cut scenes that, although very simply done, are brilliant at conveying 3D space in 2D.

RESEARCH NOTE:
Researching for my Short Story project brought up a lot of Motion Graphics pieces for book advertising.

R.L. Stine Novel advert (Circle of Seven, 2012)
https://www.youtube.com/watch?v=DwjODGS-gWY

Correen Callahan, Knight Avenged (Rasit Creations, 2014)
https://www.youtube.com/watch?v=o_KdxrTIIlU
A series of images that zoom in, with some text. Very basic looking.

Jennifer Lyon, The Plus One Chronicles (Rasit Creations, 2013)
https://www.youtube.com/watch?v=CtZkekZUbo4&list=UUm6eiieeQ5Xw5DFsLkslkjg
Rasit Creations create their adverts the same way. Images with zooms and some text.

Dean Koontz, Deeply Odd (2013)
https://www.youtube.com/watch?v=3uBDc2UPkGQ
Video with voiceover

Dean Koontz, 77 Shadow Street (2011)
https://www.youtube.com/watch?v=8kKCo7jVO4w
Motion Graphics heavy work.
Sadly, I was unable to see who made these Dean Koontz videos. They didn't have their name on their videos and the Dean Koontz site doesn't advertise them.

Jo Nesbø, The Snowman (2011)
https://www.youtube.com/watch?v=5t_8yJ6wY2c&spfreload=1
This is the US trailer for one of my favorite authors, Jo Nesbø. This trailer is a lot of video and VFX work, stunningly shot with a voice over

Jo Nesbø, The Redbreast (2007)
https://www.youtube.com/watch?v=h3350u5ECL0
A Motion Graphic/3D sequence with some Live Action and voice over.

Lori Foster, Hard To Handle (Circle of Seven, 2007)
https://www.youtube.com/watch?v=Xto9cIb0dL4&list=PL653BEBCA056AB043
Using video from wrestling and 3D sequence (in the car) with some text.


Royalty Free music that can be used on any project:

Teknoaxe:- They create music that can be freely downloaded and used in projects, whether monetised or not.
They produce a range of music styles, but I feel a metal track would work best for my project.
**This track is Royalty Free and is free for anyone to use in YouTube videos or other projects, whether monetized or not.**
http://www.facebook.com/teknoaxe
Each video on Youtube holds these disclaimers, plus a link to download the track.
https://www.youtube.com/watch?v=PdYpnhlSDA4 - Simple Metal
https://www.youtube.com/watch?v=ZhXTACf03wU - Psycho Nu Metal
https://www.youtube.com/watch?v=lAIkfyE8tOA - Hyperbole

Smoking Rolo Sideshow:- My brother's friend's band. Originally thought of using a track from their second album, Rocket Silence, but I am leaning further towards the harder metal sound to link in with the mindless violence in my piece.

And of course, the greatest song in the world, Synthadel's Bergerac. My old band. We did a song called Bergerac which I also used in my L5 VFX work. Again, leaning towards a metal soundtrack, though.


STORYBOARDING
Using a technique from an animator friend on mine, Stephen Brooks, I created the storyboard on stickynotes in a process he also calls Stickyboarding. I like this technique because if I don't like how it looks, I can simply remove it and replace it (which happened a few times). From there, I scanned them onto my PC, then arranged them in Photoshop to just show the stickynotes, which I could then use to create the animatic.






ANIMATIC



ASSETS
I have created my own assets to use in the project. Key features that will work alongside the main graphics are noise/grunge graphics - pieces that will be placed on backgrounds to give them more interest, rather than just plain slates of colour. It also allows depth to them, which will help with the parallax . Ink splats will be used on the characters to "grime" them up a bit, but also be used in the place of blood. The images I have created can easily have their colours changed. I have only used these colours while working on them in Photoshop, removing them from their original photos. I've also used in for smoke-like, or blood effects. By dropping ink into water, the ink spreads out. I tried a few different coloured inks because, as a model painter, I know that the pigmentation of different inks vary, not just from brand to brand, but colour to colour. I find Yellow Inks tend to have thinner pigments meaning less dilution is required. Black ink is a very thick ink and requires a lot of dilution, or you risk using what is essentially watered down paint. Blue pigments in inks vary a lot, so I made a note to try this one out. The ink I used was quite thin, giving interesting results in the long term, but not as much on the initial drops. Red ink worked fantastically. It was just the right pigment thickness, giving a great result. For the final asset creations with the inks, I will be using both black and red inks as I found they gave the best results. Here I will be showing snippets of the videos I took of the ink. Note, the black ink test, I coloured in post, as you wouldn't see it on the background after it was keyed out.

Red Ink test - Colour has been boosted
Black Ink test - Colour changed in post. The thick ink gives a great effect

Blue ink test - Colour boosted. A thin ink, not really ideal for my use on this project.


For testing the ink in water, I made use of my green screen, daylight bulb (a must for painting) and ink. My camera was placed on a tripod. I also used White foamcore boards to reflect light.
The conditions I made these tests in are by no means good enough for final creations, so I would strongly advise against it. With the lack of studio lighting in my house, if I was to create the final assets at home, really I'd look at creating them on an overcast day. The light diffusing on the clouds theoretically would give a good lighting.

Ink splats, simply ink on foamcore (a sheet of foam with thin card on front and back faces), then photographed using the GH4, giving me RAW images which I can later edit in Photoshop. By varying the height at which the ink was dropped would give me different results, as would loading different amounts of ink on the brush. I also experimented with different sized brushes with different bristle types. Smaller drops were obtained from the Windsor & Newton Series 7 Kolinsky Sable brushes, Size 00 - some of the finest brushes made, as far as I'm concerned. Soft bristled brushes which held ink very well. Larger splats were from generic stiff bristled brushes, size 5. With these, I also tried with the unbristled end of the brushes to see if they gave different results. Those ones were small, rounder splats which weren't ideal for what I was looking for.






Taking the images into Photoshop, I coloured them just for ease of viewing on my end. The colours will be easy enough to change in After Effects when needed. The smaller, trail like splats could even be animated to progress through the image. Something I will keep in mind for the scene where the riot police are shooting the protesters.

Grunge it up!
Scrunching up a sheet of paper, then flattening it out makes for a decent grunge map. There are a few effects you can add to it to tie it together and use it a few times without it looking the same. Altering levels to either harden or soften the creases works well, or even adding a blur to it. I prefer to use Gaussian Blur for it.

How it looks on an image.

Generate noise on a square and you have a simple noise/grunge map

How it looks on an image.


Smoke is another asset I may want to think about creating. I can do this in Maya fairly easily. Last semester I had done it on a couple occasions successfully.


I made this last year as part of Animation & Simulation. Creating something similar, I could do. Removing the fire effect would be a matter of reducing the area the fuel burns. Alternatively, the ink in water can give a very nice smoke effect, too.

Particles could be a possible addition for sections and muzzle flashes, too. Muzzle flashes could be created in After Effects. During the Summer, I had worked on a couple tests for muzzle flashes thanks to Video CoPilot.

For this test shot, it uses a directional blur coming from the muzzle. Altering the shape to be like that of a "conventional" weapon, directional blurring could give very nice muzzle flashes for my Motion Graphics piece. A few different shapes shooting together would look pretty nice, I'd think!

ROTOSCOPE
A technique of taking footage and drawing over it. a-ha's video for Take On Me is one of the best known uses of Rotoscope.

ELEMENT 3D

I will be using Element 3D for two reasons in this piece. The 3D text and the 3D room. Element is a Video Copilot plugin that makes using 3D models in After Effects easy! Not only does it allow you to place OBJ files into the scene, you can texture it up using UVW maps and add HDRI images for environment reflections. This will mainly come into play on the text. Making a reflective Diffuse Map and making a simple pattern in Photoshop can garner good results.

COMIC ART
In a similar style to the InFamous cut scenes, I will be looking at comic art for the main part of the piece. 
I very much like the style of Charlie Adlard, a British comic artist best known for his work on 2000 AD's Judge Dredd and Robert Kirkman's The Walking Dead.

Sadly, I know I wouldn't be able to replicate his style, but it is a big influence on mine.

An example of my drawing. Photoshop, Pen and Tablet.
I prefer drawing alone, then shading it rather than colouring, but this project will require colour. By muting the colours, though, I'll be able to make some stark contrasts to the backgrounds, keeping attention on the characters on screen.

The "Guy Ritchie" Effect
An effect I picked up from Film Riot. I love these guys' work. They started out just wanting to make films, but not having a budget, so figuring out what Hollywood did, but on a tiny, TINY budget. They are really close with their community, too, which shapes their video uploads, this technique, for example!
They refer to it as the Guy Ritchie effect, because it's an effect he uses a lot. I want to use it, as it would combine with the comic look very nicely!
I've done a test of the effect with my... *ahem* good friend Jean-Claude Van Damme. (Thanks to No Film School for this footage)

Simply a test I did for the effect, with no bearing on my final piece.

Tracking
I will have part where the camera pans around to the front of two characters at the start. I want to have this tracked and revolve with the 3D scene they are in. I have shown this in the animatic, too. As it will be handheld, the footage will need stabilised.

Test of stabilising footage and tracking in After Effects


Equipment

To be allowed to use the DMC-GH4 Lumix off site, I was required to fill out a Risk Assessment form. I've blacked out personal details.


My assets would be best filmed on the GH4 cameras, as they are 4K (Cinema 4K: 4096x2160 /24fps and QFHD - Quad Full HD - 4K: 3840x2160 up to 30fps). 
The live footage section will be shot with the GH4, as the camera suppresses rolling shutter effect when using electronic shutter.
Still images would also be best shot on the GH4, as the 16.05-Megapixel Digital Live MOS Sensor gives high quality, high sensitivity image recording with a very quick response.

Although as backup, I would have my Nikon D5200.

It's not as high quality as the GH4, but when all else fails, it would have to do. It has 23.5 x 15.6mm CMOS sensor and can shoot RAW images, just not RAW video.

Things to bear in mind:

Noise, Rolling Shutter
Noise:
The noise is able to throw off the tracking of shots. Noise is especially prevalent in dark shots, which should not be an issue for my shots. If you raise the ISO to give yourself a brighter shot, you are going to open yourself up to more noise, so you have to be very careful and shoot on a lower ISO. Noise is always going to be there, but you can remove that in post. At the end of the sequence, however, I will add noise. This will keep the piece looking "right" as we are used to seeing the noise in film.

Low ISO, giving a very dark scene for the lighting available. (

High ISO, the image is brightened by the High ISO 

Just right!
ISO is the last port of call for brightening images. It's best to alter the F number, which determines how much light is able to get to the sensor. If that fails to give the desired result, THEN you deal with the ISO.
(From Wikipedia)



Rolling Shutter:
Unless the camera has Global Shutter, you will be dealing with this. The sensor scans from top to bottom, meaning that if the camera is moving side to side, your image is going to be skewed, like this: \
Global Shutter is, if you imagine a stamped image. Everything is scanned at once.

DOF
Depth of Field in the video sequence will be important only on the characters, as the rest is blue screen. But in the CG elements, there will be DOF, as the parallax is making 2D images into 3D (or 2.5D to be precise).

Focus is on the background, bringing the front of the scene out of focus, blurring it.
Focus on the front of scene, the cat is fully focussed, where as the background has begun to blur out.

GANTT CHART
Ironically, for an animator, I don't like the image based planning or full chart style Gantt Charts. I prefer mine to be written out as below. It's not pretty, but it works for me, just like sticky boarding does.


Not being sure what Motion Graphics were really hindered my progress...

No comments:

Post a Comment