task 4 – The outcome

This was the outcome of task 4; to complete a audio clip of at least 20 seconds and apply what I have learnt from workshops using After effects. I chose to change some of the spellings within my clip such as ‘captain’ to not include the ‘a’ so that the words would portray phonetically the actors voice over. I would have liked to make the scenes flow better and with more practice change the backgrounds to something other than a colour. However I have managed to show the way I can use 2D and 3D effects to change the way in which the words dominate the screen.

Below is the outcome, I am fairly happy with the timing in this result however I would like to try and edit this some more to make each new slide flow without appearing jumpy on the screen.

Task 4 – After Effects

The workshop today focused on using a short green screen video and the editing it through after effects. We learnt how to crop down the videos and add affects to the background to make it look like a realistic old styled T.V. We then used the skills we learnt previously to add in some basic text to accompany our videos. Below is the outcome.

This can link to the research I have already done into Kinetic typography. I have also done some research briefly into the history of green screen and when it became popular as well as when it actually began. A useful website to support this research is http://visual.ly/history-green-screen . I was able to find a photograph which sums up the history of green screen nicely.


After Effects workshop

The task today will help towards my Task 4 on Kinetic typography. Using the program after affects i went through each word of “look mum! I’m doing after affects” and changed the position, rotation, opacity and when the word would appear. The most important part of the task was to work backwards, starting from what you want the end result to look like and then moving back in the timeline to edit the word. Below is some screen shots of how i did this.

Screen Shot 2014-10-28 at 13.36.49 Screen Shot 2014-10-28 at 13.42.58 Screen Shot 2014-10-28 at 14.18.15 Screen Shot 2014-10-28 at 14.20.10 Screen Shot 2014-10-28 at 14.41.08 Screen Shot 2014-10-28 at 14.41.15 Screen Shot 2014-10-28 at 14.41.37

This was my end result

Task 4- Research into After Effects

I did some research before starting my task into how to use After Effects to create a powerful piece of Kinetic typography. Below are some videos which can be helpful when you are a beginner. After Effects have been used to create not just Kinetic typography but also green screen effects in films and news broadcasting.

This will link to the workshop I will have on After Effects and the process I am going to use when completing task 4 on Kinetic typography.

Task 4 – research into Kinetic typography

Motion Graphics has developed into the realm of digital media and draws influence
from both animation and graphic design. A study of the history of Motion Graphics
reveals, for example, early work by Saul Bass in creating film title sequences.
Typography provides a pathway into the complex world of contemporary Motion
Graphics, and by using existing typographic font elements and animating them to a
soundtrack it is possible to experiment with many aspects and dynamics of motion and

Use and develop your knowledge of After Effects to generate a sequence of no less
than 20 seconds in which kinetic typography is used to accompany and enhance a
soundtrack featuring voice. 

History of Kinetic typography :

In fact, the first known use of kinetic typography appeared
in film – specifically, Saul Bass’ opening credit sequence
for Hitchcock’s North by Northwest [Bass59] and later
Psycho [Bass60]. This work stemmed in part from a desire
to have the opening credits set the stage for the film by
establishing a mood, rather than simply conveying the
information of the credits. Use of kinetic typography is
now commonplace for this purpose, and is also very
heavily used in TV advertising where its ability to convey
emotive content and direct the user’s attention is generally
a good match to the goals of advertising. We believe that
if it can be made accessible via good tools, the power of
kinetic typography can also be applied to benefit other
areas of digital communications



Saul Bass

Saul Bass was one of the “greatest graphic designers of the 20th century. He became known for designing brilliant animated sequences for motion pictures. In his 40+ year career he did work for the best Hollywood movie makers including Otto Preminger, Alfred Hitchcock, Stanley Kubrick and Martin Scorsese just to name a few.

He did work for numerous movies, including classics such as Psycho, Casino, West Side Story, Anatomy of a Murder and dozens of others. He won numerous awards, including an Oscar in 1969 for best documentary for “Why Men Creates.””


The website below explores what exactly motion design is :


Kinetic typography can be used to enhance historical speeches and make them have a greater impact on the audience, as well as give them a clearer understanding of the underlying meaning.This can be shown in the example below of Charlie Chaplin’s ‘ The great dictator’.

HTML workshop- Basic website design

I have learnt to create a basic webpage layout using  ‘Bootstrap ‘ http://getbootstrap.com/ and also the program ‘Brackets’. This will help me more in my second semester projects, however it is useful to know how to develop a webpage that will be able to open on more than one device and change to fit the selected screen size. Below is the code I used in Brackets.

<!doctype html>

<meta name=”viewport” content=”width=device-width,intitial-scale=1.0″>

<title> First HTML page </title>
<!–load stylesheets –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.css” rel=”stylesheet”>

<script src=”js/bootstrap.js” type=”text/javascript”></script>

<script src=”js/processing.js” type=”text/javascript”></script>
<script type=”text/javascript”>
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return ‘becky’; }


<div class=”container”>

<div class=”row”>

<div class=”col-md-4″>
<img src=”image/imgres-1.jpg” />

<div class=”col-md-4″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>

<div class=”col-md-4″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>


<div class=”row”>

<canvas id=”becky” data-processing-sources=”becky.pde”
width=”600″ height=”300″>
<p>Your browser does not support the canvas tag.</p>
<!– Note: you can put any alternative content here. –>




This was the outcome of my webpage.

Screen Shot 2014-10-23 at 16.25.29


Task 3 part 2 – Here comes the Eggs!

Task 3 part 2

2) Create a short experimental sequence using a still camera, smartphone, or video camera which explores the technique of ‘stop-motion’ animation and/ or pixilation (animation of humans).

To start with I took a range of 59 photographs, moving the objects very slightly each time. I then used the same method as before through Photoshop to create a simple story with the use of food (ignoring the fact I was always told not to play with my food). Like I said it is very basic but not bad for a first attempt. I would like to maybe develop this GIF and include some sound and even some narration. So far the basic story line is a damsel in distress (Girl egg) who is saved by a hero (Boy egg) who live happily ever after.

Here was the outcome, Enjoy!


Task 3- part 1

The task
1) Starting from the very basics of film production technology you are invited to explore the first principles of motion picture creation and use drawing to generate a simple animated sequence. 

This is my first experimentation using Photoshop and the animation process to create my own GIF, it obviously does need a lot of work but I have managed to show a cycle in the form of a face appearing and the expression shown. This was made by using 12 photographs of the pictures I had drawn with a 1 second space between each photograph.

This method can link with my research into the Zoetrope that by definition is;

a device for giving an illusion of motion, consisting of a slitted drum that, when whirled, shows a succession of images placed opposite the slits within the drum as one moving image.”

My Outcomes



I also tried to create a character that I might explore more at a later date, this is shown below.

IMG_9749 IMG_9750

Task 3 – Historical Aspects

Before starting on my task I have had a look into the first parts of animation and how they were made.

1878 Eadweard Muybridge

1878: Photographer Eadweard Muybridge uses high-speed stop-motion photography to capture a horse’s motion. The photos prove that the horse has all four feet in the air during some parts of its stride. The shots settle an old argument … and start a new medium and industry.