Motion Graphics: Character Animating

Character Creation #1 from Jordan Harnett on Vimeo.


For this motion graphics studio, the group was asked to design and create a character in adobe illustrator, which would then be placed into adobe after effects to be animated. In order to make the particular parts of the character to move, I needed to create each part of the character on separate layers so that when imported it transferred the layer information into after effect, so that the character would animate correctly. I wanted to create a minimal design for a character, so that I could focus on transferring an expression in correlation to motion. What inspired this design was the concept of Disney's Inside Out characters, using colour and focusing on a select emotion. In this case my character was to display bordem through the use if a blank expression and rather frustrated eyebrow and mouth placement. I think that this resembled the concept of boredem.

Once the static character had been created, I needed to understand how motion could better express this, so I decided to have the character dancing slowly while moving his eyes, this expressed the my character was uninterested in taking part of the dance. Overall I am very happy with the outcome of my character.

Creative Cloud Suite: Photoshop And Illustrator Photograph Editing Tutorial

This creative cloud session we looked at using photoshop, a photo-manipulation software created by Adobe. This focused on editing photographs, primary photographs shot in a Raw file format. It was explained that Jpegs are compressed version of a photograph, whereas Raw files are the complete unaltered file. The importance of Raw files is that they can have many more colours available when editing, making the quality of the image much more realistic. 

We were tasked to edit a poppy image provided within the mini photoshop window which opened before the image was opened into photoshop completely. This is where we could change the image from 8 bit to 16 bit. Once the image was changed to 16 bit, I then played around with the sliders, changing the contrast, saturation and clarity of the image. As a photographer I knew much about this process, found the task easy to do.

After editing the poppy, we quickly moved onto another image in a city. We followed a similar process as before, however with this image I changed some of the composition and kept the image in colour. Once I got the look I wanted we then was to produce an image with a creative look.

I decided to threshold the image on one layer and use another image to create sections of colour. The image was made up of 4 colour layers overlaying each other, but retaining the threshold effect of the black on top. The outcome was a really unique acid looking image, which added some unique creative flare to the image.

Image After Manipulation

Image Before Manipulation

We then learned about the clone tool which is a tool used to clone areas of an image, if a area is lost due to image rotation. For instance, we was asked to rotate this image, however when done so in photoshop, the white canvas was showing. I could however stretch the image so that it fills the canvas, however this would compromise many aspects. Stretching the image could create a less detail image, which isn't good for if the image was be printed. However with the clone tool, I would select an area of the sky near to the area which I would want to clone, and then paint the area. This tool mostly work on areas like the sky and water, if done with other detail there would be a unwanted glitchy effect, ruining the entire photograph.

Below is a an example of when the clone tool is used incorrectly.

Here are some art boards made in photoshop, this was something new to myself as I previously thought that Art boards were only exclusive to illustrator. This would be useful for when constructing application designs in the future.

After the initial session an addition session based on illustrator was offered and I stayed behind. This session focused on create vector shapes, which look very much like musical waves. We did this by creating a shape with the pen tool on illustrator and duplicating it to intercept with each other. This is when we were introduced to the tool which created this.

With both shapes selected you then clicked on make, which then created another shape and merged all shapes in a group. We then expanded the menu to increase the amount of steps within the vector. This produced a mesh like vector, which I then placed the vector over to photoshop and with this vector created a quick album cover. The album cover generated was in correlation to my visualisation of sound project.

Set Task Outcome

Non destructive portait 

After (Left)                                                   Before (Right)

With all the photoshop skills learnt from this creative cloud photoshop tutorial I then enhanced one of my own photographs I had taken. With this image I increased the vibrance and changed lighting levels to best suit the image as it was underexposed. I am happy with the outcome of this non destructive portrait and I will keep into consideration the skills and apply them in my future practices.

Motion Graphics: Kinetic Typography Part 2

The task for this motion graphics workshop was to produce text in a 3D space, in adobe after effects as this was the second part to our kinetic typography theme. We first had to choose a some text to be within the 3D space. For example, a quote, phases or song lyrics. I decided that I would choose the lyrics from a song called Kings And Queens by 30 Seconds to mars. These words would give me the foundation for how the 10 seconds animation would be set out.

I began by laying out the the composition of the text, arranging each word onto layers in illustrator, this would allow me to move each word thought the 3D space. With this complete I then place the text into After Effects, clicking on the 3D icon so that they would be reconized as a 3D object. This was done for when I introduce lighting and the 3D camera tool, making the text look much more realistic. Changing the current camera view to the full perspective I then moved each text closer and further away so that when I implicated the camera zoom, each text would move closer to the camera at different speeds, producing cool 3D visuals.

I then moved onto creating the lighting and shadows, this was done through the placement of two lighting emitters, to capture the atmospheric lighting that I wanted. However to be able for shadows to for, both the text and the lighting needed to have certain boxes ticked.

It was at this point that I wanted to create two different version of my 3D kinetic typography. One version would include sound and text and the other would have a minimalistic design, using only two colours and lighting. The minimalistic design would resemble the bands colours.

I took into consideration that I would be unable to use the copywriter material of 30 seconds to mars song King and Queens, so I opted for some royalty free music from bensound.com. This music using an acoustic guitar, drove the purpose for the inclusion of text ad for the animation to be slower than the minimalistic one.

I personally like the texture and sound kinetic typography better, as it creates a soothing aura, more enhanced by the worm orange lighting.

Kings And Queens Texture And Sound from Jordan Harnett on Vimeo.

Kings And Queens Minimalistic Version from Jordan Harnett on Vimeo.

Overall I found this motion graphics lesson very beneficial, as I now one more about the 3D workspace within After Effects, which in future could allow myself to create some really nice music videos, with kinetic typography visuals.

Motion Graphics: Kinetic Typography Part 1

For this motion graphic workshop we was asked to produce a 10 second kinetic typography video and upload it to my Vimeo account. Firstly we began by mocking up our design in adobe illustrator where we could produce the overall layout of text, and generate a short storyboard for key time frames in the animation. This was created using the same document size as the after effect animation so that when I exported my assets across the separate softwares, there was no sizing problems.

Here is my storyboard which I created in illustrator, overall I am rather happy with the result. The idea behind this style was to be clean and minimalistic, following a short story. I picked helvetica as my font because it is a very common font among designers and I would use this as my basis for the story.


Arrows shot across the screen and text appears in place.

Arrows carry on moving right and text appears on screen. Dots gradually produce a line.

Text moves in from the right. Arrow slowly jumps to each font style. Black line comes from bottom revealing white text.

Black line moves further up and text goes white.

Arrow moves across screen and comes back, Text forms into place.

Fade to white. Smilely Face Emerges.

During the creation of my animation we was also asked to provide some music as a backing track for the kinetic typography, we had to only use royalty free music so that I didn't breach copyright laws.

Unfortunately I extended over my time limit and couldn't fit everything from the storyboard for the session, however in future I hope to extend this kinetic typography animation so that I can see how the animation would look in a complete form.

Here is my 10 second animation.

 
Helvetica Kinetic Typography "10 Seconds" from Jordan Harnett on Vimeo.

Intro And Abstract

The purpose of this seminar was to broaden my sense of knowledge when constructing written forms in relation to current projects and for my own personal development. The words 'Intro' and 'Abstract' were heavily emohisisesed, the breakdown of the key pieces of information within a written context, allowing for better understanding when engaging and capturing audience intrigue effectively. I personally like the concept of developing my writing skills as I find that it is a crucial skill to improve the clarity of information that I would be transferring to a client, if I was producing work for a live brief or freelance work. This would transfer relatively well corresponding with my studio 'Sense Of Place' project and aid me in producing a proposal at a much more professional standard, while having a greater understanding of how to market to a specific audience demographic.

Abstract = A Brief Summary Of Context

At the start of the seminar James Dyer asked one simple question, what do we think of the word 'Abstract'. I personally like to think of abstract as an unusual concept designed to make an audience perceive an idea which is out of there common perspective of the individual. However for the purpose of a writing standpoint,  it would allow for myself to abstract key important data and relay it to an audience. I do think that extract is a more fitting description for this process, as the process requires you 'Extract' and emphasises on specific pieces of information. Once the basic overview of the presentation had been explained, I then took part in a group activity where we was separated into six different groups. The purpose of this task was to be able to quickly write down a sentence describing what happened in a particular section of the video. The video was a clip from a film called Withnail And I, and involved each group focusing on twenty seconds of the video each to create one sentence, which would be combined with one sentence from every other group. This would then be included to produce a single paragraph, producing a abstract concept.

Here is my sentence I produced in the last twenty seconds of the clip;

"Overall this is quite the melodramatic performance of the two actors, which i found comical, mainly due to the fact of the use of pink gloves and how erratic they were when responding to each other."

Clip Link - https://www.youtube.com/watch?v=K6R9fY8lfGo

Example Of A Abstract Paragraph From The Presentation

"Two scruffy looking men argue over the content of a bowl, one seems agitated and the other nervous. In retaliation, the more confident of the two threatens to do the washing, it sounds disastrous in the kitchen. They fear there may be a rat amongst the growing mould and decay which clogs the sink—a cleaning task not to be taken lightly. After the more proactive of the two burns his hand on the kettle, the dazed men seem both hesitant and determined to investigate their littered kitchen. For the sake of their civility gloves are donned, and pliers are wielded for protection against rodents. Their energy subsides as they find an innocuous lump of “matter” in the sink, prompting a tired and withered looking man to declare: “I feel unusual, I think we should go outside”."

We then began looking at a more formal writing process known as Clipped Writing, here are a few requirements;

- Pace
- Content
- No Pith
- Words Have Purpose

Clipped Does NOT Mean Inconsiquential

Once I had an understanding of what clipped writing involved, we then evaluated a number of clips from movies on what was successfully/unsuccessfully relayed information in a subtle manner to an audience. Unlike the previous task, we were told to focus purely on the script of the video and none of the visual content provided. This was done so that I could successfully identify information within a script, understanding how they portrayed the information and how it was contextual relevant to the scene and characters. One of my favourite clips was the Casablanca secret sentimentalist clip which we was shown.

Casablanca (1942)

I found that the Casablanca script provided quite a broad range of information for the viewers, this was then discussed to share out findings with the group. It provided information on;

- The Backstory Of Characters
- The Characters History
- Distinctive Character Traits
- The Characters Purpose
- Story Plot

With this information I discovered that the main protagonist had a cynical attitude, a shady history and who's main purpose at that point in time to free a friend who was in trouble. I found this really enlightening as I did truly underestimate how powerful and engaging writing can be, if the audiences questions are answered effectively, and provides a motive to progress further into a context.

Video Link - https://www.youtube.com/watch?v=IBJGHvt7I3c

Abstract Essay Task

This abstract 250 - 500 word essay is a developed version of my second proposal idea.

The WE ARE HUDDERSFIELD Campaign

Identity... Identity is core fundamental aspect which everything needs in order to have a place in the constantly growing informational age. Talent and culture are in abundance and what is truly considered to be a significant feat in the modern world is to be unique. But how does Huddersfield become a unique distinctive landmark? Through change. The true nature of humanity is to evolve so that we can become better at our weaknesses and to better suit our environment. This is why I want to produce this campaign, not only to make huddersfield a more student friendly place, but to have others sharing in the prosperity of which a multicultural society brings. I want to produce an improved identity for huddersfield, developing on the current representation of what Huddersfield is and emphasising on elements of graphic design