315CR Digital Media Technology 2 Andy Abgottspon

Transcription

315CR Digital Media Technology 2 Andy Abgottspon
portfolio
315CR Digital Media Technology 2
Andy Abgottspon
April 2010 – Coventry University
315CR Digital Media Technology 2
Portfolio
Contents
1 Ident
1.1 Purpose
2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.2 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.3 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.4 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
2 Advert
2.1 Purpose
4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.2 Pitch and storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.3 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.4 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
2.5 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3 Alternative Animation using Processing
4 3D Compositing
4.1 Purpose
8
10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
4.2 Pitch and storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
4.3 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
4.4 Choice of sound and imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
4.5 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
5 Poster Design
13
5.1 Purpose
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
5.2 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
5.3 Choice of imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
5.4 Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
6 Mobile Application Development
16
6.1 Marketing and statistics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
6.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
Andy Abgottspon
1/20
315CR Digital Media Technology 2
1
Portfolio
Ident
1.1
Purpose
The task was to create a short ident clip for Creative Computing @ Coventry University.
This could then be used to identify clips from CU on platforms like iTunes U or YouTube.
1.2
Techniques
The editing has been subdivided into several compositing steps:
1. The 3D animation itself has been created entirely in Cinema 4D. The stairs have been
re-modelled in 3D and a solver object containing a gravity object has been used to
create a realistic behaviour. Following a tutorial [4], the background image could be
imported to Cinema 4D. Also, the light source has been placed to cast shadows as if it
were the sun.
2. After rendering the 3D animation, the ball’s shadow is just on top of the background
image (as shown in Figure 1). To solve this issue, another step in Adobe After Effects
is needed. A mask has been used to cut out the ball and copy it onto the background
layer. This way, the ball is on top of the original video and the shadow get cast correctly.
3. The explosions in the beginning and the end, as well as the "smoke" following the ball
have been created using the program Particle Illusion.
4. The final compositing has been realised using Final Cut Pro.
1.3
Choice of sound and imagery
The concept behind this ident is to combine something real with a 3D animated content. The
scenario takes place in front of Coventry’s cathedral. A ball falls from the sky, leaps down
the stairs and becomes a part of the Creative Computing logo. Since Coventry University’s
logo is a Phoenix, the fire ball explodes and the logo with Phoenix appears "from the ashes".
This particular background has been chosen because the cathedral is located right in the
heart of the campus and for a lot of people it’s simply the landmark of Coventry. The story
with Phoenix is unique to Coventry and therefore particularly memorable.
Andy Abgottspon
2/20
315CR Digital Media Technology 2
Portfolio
Figure 1: Overlaying shadow after the first compositing step in Cinema 4D
1.4
Reflection
From a production standpoint, the use of multiple programs allows more freedom and the
editor is able to use specialised tools for each task. On the other hand it is a very timeconsuming procedure requiring good planning and an optimised workflow.
Andy Abgottspon
3/20
315CR Digital Media Technology 2
2
Portfolio
Advert
2.1
Purpose
The goal of this task was the creation of a television advertisement. The team decided to
make an ad for Apple Inc., trying to underline the their strengths by showing rather bad
examples from their competitors. Following Donald Gunn’s 12 Types of Advert and Peter
Every’s lecture notes [2] the ad would be considered a comparison, although it contains
elements of analogy and exaggerated graphics as well.
2.2
Pitch and storyboard
The pitch is Think different, suggesting to lay down the conventional thinking and start to
look at things with new eyes. The team put their ideas together and developed a storyboard
(see Figures 2 and 3).
2.3
Techniques
1. The footage from the Canon XL2 has been transferred to the computer using Sony
Vegas.
2. The paper clip has been edited using Adobe Photoshop.
3. The 3D animation of the house is animated with Cinema 4D. Tutorials for the grass
[7] and the roof tiles [1] were very helpful. Figure 4 shows the final result.
4. All compositing has been realised using Final Cut Pro.
Andy Abgottspon
4/20
315CR Digital Media Technology 2
Portfolio
Figure 2: Storyboard for Apple ad (part 1/2), drawing by Krystl Gill
Andy Abgottspon
5/20
315CR Digital Media Technology 2
Portfolio
Figure 3: Storyboard for Apple ad (part 2/2), drawing by Krystl Gill
Andy Abgottspon
6/20
315CR Digital Media Technology 2
Portfolio
Figure 4: Animation of the house including raising grass and tiles modelled in Cinema 4D
2.4
Choice of sound and imagery
Apple is known to be very innovative and their products are widely beloved because of their
simplicity and beauty in design. The scenes in the ad are chosen to show the opposite side,
like Microsoft’s helping paper clip which by most people is considered rather annoying than
helpful. Another example is the slogan Windows – Life without walls. The question is just:
If there are no walls, what do you need windows for? It is not really well thought through.
The calm, idyllic sound (Adama Falls from the Album Battlestar Galactica: Season Three)
and images in the intro sequence have been chosen to build up tension. The viewer might
wonder what this ad is all about and get excited. He might get confused at first, but then
realise that the examples shown can not possibly be meant seriously. After all that, the idyll
stops and the user finds himself back in reality with a blue screen.
Thanks to my friend Patrick Venetz (www.patrickvenetz.com) for his amazing work with the
voiceover.
2.5
Reflection
One of the difficulties was to transfer the footage from the camera to the computer. A lot
of footage had to be handled and Quicktime with the H.264 codec turned out to be the best
compression without losses in quality. In addition, the camera handling is not trivial and
especially the zoom has to be used with care.
Andy Abgottspon
7/20
315CR Digital Media Technology 2
3
Portfolio
Alternative Animation using Processing
The program takes the photographs from the data folder and creates a 3D transition effect.
Pixels raise from the ground and their brightness determines how fast they grow. Using the
mouse (x and y axis), the user can interact and change the angle of the camera. In addition,
a nice calm tune called Naval by Yann Tiersen is playing in the background.
With the pixel-by-pixel image manipulation being very CPU-intensive, the application can
perform very slowly depending on the computer it is run on. To solve that, you can either
decrease the resolution and/or increase the variable cellsize in the script (default setting: 5).
Figure 5: Slideshow in Processing
Andy Abgottspon
8/20
315CR Digital Media Technology 2
Portfolio
Figure 6: Slideshow in Processing
Andy Abgottspon
9/20
315CR Digital Media Technology 2
4
Portfolio
3D Compositing
4.1
Purpose
For this key assignment, a one minute composited video with computer generated content
had to be created. The idea was to create a video that advertises my iPhone game Roll it!.
4.2
Pitch and storyboard
The pitch is referring to the name Roll it! of this Yahtzee-like dice game and the fact that it
is available worldwide via the Apple AppStore. The pitch therefore was: Roll it all over the
place. Now available on the AppStore. Worldwide.
From this pitch, the idea was further developed and the dice in the game actually should
become real. The storyboard was basically very simple. It begins at a table where a person
shakes his phone and the dice in the game pop out. One travels around the world before it
finally ends up back on the table. For the "world scenes", famous cities like New York and
London have been chosen. The dice are shown on the table just as if he had thrown real dice.
Then they disappear and the player is wondering what just happened.
4.3
Techniques
The camera has been kindly provided by former employer Radio Rottu Oberwallis whose
Thomas Burgener also helped me with the shooting.
1. The footage from the Sony HVR-V1E has been transferred in HDV 1080i50 using Final
Cut Pro. This format has also been used as the Sequence Settings for the final cut (see
Figure 7).
2. The background images for the "world scenes" have been edited (resizing, colour correction) using Adobe Photoshop.
3. In the final scene, the dice lie on the table and the player covers them with his hand.
The masking for this was done using Motion (see Figure 8).
4. All 3D scenes were animated with Cinema 4D. Using the "background" object, the
original footage has been placed in the animation space and the camera movement
matched manually. To render, the same settings as the original footage have been used
(see Figure 9). This saved a lot of render times later editing.
Andy Abgottspon
10/20
315CR Digital Media Technology 2
Portfolio
5. Compositing and exporting (including de-interlacing) have been realised using Final
Cut Pro.
Figure 7: Project in Final Cut Pro showing the different audio and video tracks, as well as
the details of the video footage.
Figure 8: Hand masking in Apple Motion. With the Shape Masking Tool, the hand contour
has been drawn and using the recording tool key frames get created wherever needed. The
animation between is automatically created.
Andy Abgottspon
11/20
315CR Digital Media Technology 2
Portfolio
Figure 9: Render settings in Cinema 4D
4.4
Choice of sound and imagery
For the sound, there were different options ranging from The Prodigy – Invaders Must Die
up to a song Apple already used in one of their iPod touch commercials Around the Bend.
Also two songs from Ronald Jenkees were discussed. A lot of experimenting has been done
and finally, The Tempest by Pendulum has been chosen to fit best. It combines rock with
electronic sounds and gives the video a slightly dramatic and epic touch. Furthermore, a
fair amount of audio editing was needed in order to find the best segment in the sound. In
the end, the 40 second movie contains more than 3 seamless audio transitions from the same
song.
4.5
Reflection
The workflow between Motion and Final Cut Pro is amazing. With a simple click, any given
scene can be sent to Motion for further effects like Particle Systems, masking, etc. Once
changes are saved, the scene gets rendered within FCP automatically without further steps
like exporting and re-importing.
Using the same codec settings (HDV 1080i50) throughout all the programs saved a lot of
precious rendering time.
Andy Abgottspon
12/20
315CR Digital Media Technology 2
5
5.1
Portfolio
Poster Design
Purpose
An existing poster had to be re-designed in a visually appealing style without losing information and following the basic principles of design – proximity, alignment, repetition and
contrast – from The Non-Designer’s Design Book [6].
5.2
Techniques
The poster has been designed fully in Adobe Photoshop CS4. The background image originally
was in a 4:3 aspect ratio. Using Photoshop’s Content-Aware Scaling function, the image
could be stretched to fill the A4 portrait page without having to worry about reflection
and background gradient. Furthermore, the use of visual guides helped aligning the various
objects (see Figure 10).
5.3
Choice of imagery
A 3D rendering of a plane has used as a background [3]. The image conveys the main message
and attracts a lot of attention even if seen from a distance. This is particularly important
for posters, as well as big and clear typesetting for titles and all the details presented.
Figure 10: Poster in Adobe Photoshop CS4 with Visual Guides enabled
Andy Abgottspon
13/20
315CR Digital Media Technology 2
Portfolio
Figure 11: End Result: Poster for a fictional Model Show
Andy Abgottspon
14/20
315CR Digital Media Technology 2
5.4
Portfolio
Reflection
Due to a fair amount of experience using Adobe Photoshop, the production was very straightforward and although the creation of all these little details take up a lot of time, the process
was still very efficient. Having a good naming and organisation of both groups and layers
helps a lot in the course of the creation. The poster’s resolution is only 150 dpi (A4, 1240x1754
pixels) because it does not go into print for bigger sizes and the background image used is
not available in a much higher resolution anyway. Also, this kept the file quite small and the
processing time more bearable.
Andy Abgottspon
15/20
315CR Digital Media Technology 2
6
Portfolio
Mobile Application Development
The development and maintenance of a mobile application is a challenging endeavour. Idea,
planning, design, implementation, testing (functionality and usability), optimisation, localisation and distribution are just the beginning. Marketing, customer support, bug fixing,
finances and evaluation follow. "Roll it!" went through these stages multiple times during its
development process. For example, to make the game more attractive to people all over the
world, it is available in 7 languages (as of March 10, 2010) and even more are planned.
The application is written in Objective-C using Apple’s developer tools. Graphics have been
produced in Adobe Photoshop CS4 and 3D renders in Cinema 4D.
"Roll it!" is being sold on the iTunes AppStore for the price of $0.99 (from which Apple
gets 30% for hosting and distribution). The game can be downloaded directly on the mobile
device, but also synced via iTunes (see Figure 12).
Figure 12: "Roll it!" on the iTunes App Store
Andy Abgottspon
16/20
315CR Digital Media Technology 2
Portfolio
In January, Apple revealed the iPad. The bigger screen offers even more possibilities when
it comes to graphics. The game has been ported and adapted already and is planned to be
released upon the launch of the device (see Figures 14 & 13).
Figure 13: The new splash screen for "Roll it!" on the iPad, created in Cinema 4D
Figure 14: "Roll it!" on the upcoming iPad
Andy Abgottspon
17/20
315CR Digital Media Technology 2
6.1
Portfolio
Marketing and statistics
The application has been promoted via a variety of online media such as Facebook, Twitter
and various blogs. Furthermore, the video from the 3D Compositing exercise (see Section 4)
has been used as a promotional video.
A website has been created to present the app outside of the AppStore and offer people a
form for feedback (see Figure 15). The traffic has been monitored and evaluated using Google
Analytics.
Figure 15: Website www.aaweb.ch/iphone with app description and download link
Since its initial release on December 2nd, the game has been sold nearly 2000 times in over
25 countries (as of March 10, 2010). A web service like AppFigures (www.appfigures.com)
allows the tracking of reviews, downloads, updates and ranks worldwide. It also features
automatic email notifications with detailed statistics every day .
Andy Abgottspon
18/20
315CR Digital Media Technology 2
Portfolio
Figure 16: Worldwide sales of the "Roll it!" app since its release in December
Looking at the numbers (see Figure 16), sales quickly reached an average of 20 downloads
per day, even with very limited promotion and no marketing budget. During the Christmas
period, when people obviously have more time and are willing to explore and spend money
on apps, sales even increased to up to 68 a day. While the average is stable at around 20,
sales are usually the highest on weekends and drop rapidly during the week.
6.2
Conclusion
With more than 130’000 applications on the AppStore [5] and numbers still increasing, this
huge competition is putting developers under pressure, forcing them to lower the prices. The
range of free apps is enormous and people hesitate to spend money on applications they do
not really need.
However, the domination of the iPhone OS as a platform in combination with the iTunes
AppStore make it look very promising. The way in which millions of customers can buy an
app from everywhere at anytime with a single click is a unique opportunity for developers of
quality apps.
Andy Abgottspon
19/20
315CR Digital Media Technology 2
Portfolio
References
[1] archc4d.
Cinema 4d tutorial - creating roof tiles.
2009.
Available from
http://www.youtube.com/watch?v=ARIVB7OIoWY.
[2] P. Every. Lecture notes. 2009.
[3] Z. G. M. Factory. Plane model. 2010. Available from http://www.zs-gl.com/.
[4] MaxonC4D. Cinema 4d: Putting your 3d model into a real photo or movie. 2008. Available
from http://www.youtube.com/watch?v=ZaMooVuXoUs.
[5] Wikipedia. App store. 2010. Available from http://en.wikipedia.org/wiki/App_Store.
[6] R. Williams. The Non-Designer’s Design Book: Design and Typographic Principles for
the Visual Novice. 2003.
[7] A. Woodhouse.
Cinema 4d tutorial
how to create 3d grass.
2008.
Available
from http://www.youthedesigner.com/2008/08/13/cinema-4d-tutorial-how-to-create-3dgrass/.
Andy Abgottspon
20/20