Task 4 – Kinetic Typography

My task:

Use and develop your knowledge of AfterEffects to generate a sequence of no less
than 20 seconds in which kinetic typography is used to accompany and enhance a
soundtrack featuring voice. The soundtrack can be of your own choosing, but we
suggest you use an extract from a piece of existing media. Try to avoid using any
other graphic images other than pure type.

For this task I was asked to create video sequence containing kinetic typography, in which the text displayed what a sound track was saying. I decided to use a sample from the movie The Wolf of Wall Street.

Before I started the task I looked into some history of typography and how it has been used in the past to broadcast a message and provoke a feeling, the actual word doesn’t matter here, its the way the word is displayed that I am interested in.

I was shown in a lecture a website called Art of the Title. This website displays many movie and TV shows title sequences which are more commonly known as “intros”. Looking though some of the title sequences I noticed how many much text was important within the sequence to the bring over the theme of the show. For Example, the Are You Afraid of the Dark title sequence only uses one string of text but displays the very theme of the show, which is to be scary.

task 4 research

However I also noticed this title sequences also relied on the use of other images, which I was not allowed to do. So I deiced to look on YouTube at some videos people have already created using just kinetic typography and I found some amazing exampled which were very professional and helped me a lot during the creation of mine. Here are some of my favorites:

I then watched a video about The History of Typography  to get a better understanding of where it started and how it has changed and evolved.

I felt confidant I had enough inspiration and knowledge on kinetic typography and with my new skills with After Effects, in which I created these:

This is my final outcome of the task:

If had a chance to do this again, I think I would make the transitions from one scene to another more smooth instead of a jump cut. I would also try to make it longer adding a longer  mp3 and one that I was more interested in.


After Effects Workshop

My newest task is all to do with Kintetic Typography. Using a program by Abode within their creative suite called After Effects, I created the below video as a test to my task.

the idea of my task is to have a piece of media that is spoken words such as a song or speech and have Kintetic Typography illustrate whats going on.

TASK 3 – Animation

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.

During the seminar you should initially generate a 12 frame hand-drawn sequence using the

Praxinoscope (SpinnerScope) provided, and digitize it to create either an animated gif (using

gifmaker for example) or a video sequence in Adobe Premiere. The theme CYCLE continues by

default since the praxiniscope is cyclic by nature.

My first task within the Animation task was to create a basic gif from hand drawn 12 frame sequence. Using techniques from people such as Kasimir Malevich and the De Stijl techniques, through their ideas I decided to go for an abstract idea, using shapes and colours to create an animation.

My animation idea was to create a growing square which then has circles which grow within the square and all are different colours. Below is the final result:


Pulling inspiration from this picture destijl_lamp which again itself is inspired by  Kasimir Malevich and such people, I created my animation, I used one based colour (green) but instead of using just straight lines I decided to add other shapes which were all different colours.

for my stop motion animation I decided to create two shoes look like they were walking:


Task 2 – Temporal Expressions3

For this task I was asked to create three different photos using three different techniques:

1. create a joiner image in the style of David Hockney
2. produce creative photo-images which exploit long exposure (eg light painting,
motion-blur, slit-scan etc)
3. produce creative photo images or sequences which exploit short exposure (eg,
sports, frozen motion etc)

For my first image the joiner I need to research David Hockney and take a look at some of his work. He is an English painter, draughtsman, printmaker, stage designer and photographer. In the photography world he is properaly most famous for his joiner images. A joiner is were you take one collection of images of the same thing but at different points of the object and join them together to create one image. here is an example:

For my joiner I decided to use a water bottle here is the outcome:

task 3 photo thing

For my second image I was ask to use long exposure, which is using a long duration shutter speed to capture the stationary elements of images, it works well on images on displaying the movement of an object or captioning the trail of light. I decided to use sparklers to capture the trail of light from them here is the outcomes:

This slideshow requires JavaScript.

My final image need to use short exposure, which is captioning an frozen image, for example, a car speeding past, you would be able to get the full car without the need for it to be going slow. I went back home to Wales and decided to go to the coast to try and catch some waves crashing into the cliffs here are the outcomes:

This slideshow requires JavaScript.

Task 1 – Photo

My first task for Concept and Ideation is to create a collage of a collections of photos that look like letters of the English alphabet. I need to find naturally-occurring shapes for the photos, I couldn’t use images of signs that have letters on them. I was going to Brown sea Island with family this weekend and decided to use this opportunity to complete my task as the area of the island is mostly natural and had a wide range of natural objects.

Before I started the task I did do research on what was asked of me and found that this task is a big thing online and many people have tried to complete it. I used many of these as inspiration for my own

task 1

After completing the task I feel that my photographer’s eye has improved and was quite weak before I started.

Workshop 5 (Processing 3)

Today I was taught about Arrays. Arrays are just a collection of data that allows the coder to type out less code.

Using the skills I have learnt over the last few weeks, I had to create a program that when the mouse is clicked the colour of the rectangle changes to a random colour within a array I had set

Screen Shot 2014-10-16 at 16.05.55 Screen Shot 2014-10-16 at 16.05.52 Screen Shot 2014-10-16 at 16.05.50 Screen Shot 2014-10-16 at 16.05.29 Screen Shot 2014-10-16 at 15.25.18 Screen Shot 2014-10-16 at 15.22.03

Workshop 4 (Gif Making in Photoshop)

Today in my workshop I was taught how to create a GIF animation within Photoshop, I had researched how to o this before but it was a while ago and it was nice to refresh my knowledge on the subject. First I took a sprite sheet from google and split up the different sprites into their own layers and put them in order the way I wanted the gif to run, it is important that you don’t put the different sprites to far from each other as the animation won’t look smooth. I then added a few more sprites (explosions) and a background.

Then I opened up Photoshops timeline and made sure it was create a stop frame animation. Then I told Photoshop to create the animation by using my layers as each frame.

I exported it as a GIF file and below is the outcome.


Workshop 3 (Processing 2)

Today I had another workshop using Processing.

We went over data types again such as boolean (true or false), string (text), etc. I was given a task to create a program which drew 10 circles, all of which were random sizes and colours and appeared at random points on the canvas, then when a user clicked the mouse the staged cleared. Below I will break down my code:

void setup() {
println(“program is starting”);

This is my “setup” it tells the program the basics, mine is saying make the canvas (600 pixels in the x and 300 pixels in the y) and set the background colour to black. it also has a print line which just prints whatever I type which in the println to the console.

int circles = 10;

This bit of code sets a name to a piece of data so in my program circles = 10.

void draw() {
println(“circles were drawn”);

while (circles > 0) {
float circleSize = random(20,80);
ellipse(random(width),random(height), circleSize, circleSize);
fill( random(255), random(255), random(255), random(255));




now the draw is used to create the circles, my code is telling the program to create a circle that is a random size and colour and is placed randomly on the screen. It is also within a loop and is saying while circles is greater then 0 (which we set using int circles = 10;) which would also be true if not for the circles–; which is telling my program every time you loop take 1 from the circle value so until it reaches 0 it will raw a circle and as the value starts off at 10 it will create 10 circles.

void mouseClicked(){



Now this bit of code is telling the program to do something when the uses clicks, however my clearStage function is below

void clearStage(){
background(random(255), random(255), random(255));
println(“Mouse was clicked”);

So this is telling the program whenever the clearStage function is called set the background colour back to black.

Workshop 2 (Procssing)

Today in my second workshop  was taught Processing which is an application used to create programs that run from Java, this ws my first ever time with the software and coding Java however I have done some event driven programming before (mostly JavaScript) so the term were familier to me.

Our outcome was to create a object in this case a circle that follows the corser as the user moves the mouse and depending on where on the screen the user clicks changes the background colour.

A few function used:

  • mouseClicked
  • background
  • printIn