Changing Faces – One to One Consultation

Recently we were scheduled one to one meetings with David to discuss our projects and evaluate them. Seeing what ideas we had come up with, looking at how we could refine or build on them, as well as looking for basic errors and misjudgments.

By this point I had a very solid basis for my project. My core ideas had been laid out and begun taking shape. My color scheme or blue/cyan tinted monochrome was solid and my imagery was coming along.

Page 1&2 #5pages 3-4 #5

Still far from a six page spread. The last spread being columned text and nothing more I decided to just leave it out and save some space. Since my last version of this I had entirely redesigned the second spread with my photo series of a dying candle. Details of this can be found in a prior post. Here were the major points of improvement suggested to me.

  • The quote on page 2 is not pulled from the article and therefore must be removed.
  • The text would be far more flowing and dynamic if it was not justified
  • there is no need for a stand first on the second spread
  • All pull out quotations should have a common font size, color etc.
  •  The candle image should not have a border and the title along the edge should instead be in the foreground of the image (this is something I had tried previously but changed last minute)

What I’ve changed

Pages 1&2 #10

In my first spread I have completely reworked the typesetting. Unjustified the body text (this was done throughout the article) and adapted a new pullout quote. I have also created stylized wax dribbles, the details of their creation and reasoning behind them are explained in detail in a prior post.

Pages 3&4 #10

On the second spread I did something similar. The stand-first remains as I neglected to change it by this point. However the quotation has been adapted, the image on page four has been expanded and the title placed in the foreground in white font that is of the same family as the heading and pullout quotes (Bodoni 72 Oldstyle). I also increased the contrast of the image to make it appear more stark and highlight the change as the eye progresses down the page.

Pages 5&6 #10

Similar things have been done to my third spread. Another wax splash, a pullout quote in blue and a final image that lends the article an air of finality. The progression from dark to like as the reader progresses was an idea David nudged me towards and I feel it works very effectively.

My thoughts

These improvements from my fifth version to my tenth were made in just two days, possibly my most productive two days in the course of this project so far. This task quickly went from something I was desperately trying to make presentable and get over and done with, to a piece of work I’m genuinely proud of and filled with enthusiasm to have completed and professionally printed.


The Finished Product


Here is our finished work, my animating work was on the open three scenes. The project will consist of this piece, as well as a corresponding series of posters and a printout of a gif and will be exhibited in the Cardiff School of Art and Design Atrium.


During the process of creating this work I have developed a huge respect for the animators art. It is immensely time consuming and frustrating. What we have created of the course of these past weeks is among the most basic of animations, yet I am very pleased with the result given our lack of experience.

Designing and general preparation for the animating was a pretty standard affair for us as we all understand the depth of knowledge of a subject one need before they stark work. That happens to be my favorite part, throwing around ideas and developing something from all the best bits, ideas bouncing around and being shaped by us as a group. Even a project as seemingly simplistic as this takes huge effort on all parts.

An example of the minute alternations we made even in our last few days of work, are Emily’s eyes as she cries in the second scene. It was suggested to me by a lecturer to have her eyes change as she cried, I made ‘U’ shaped eyes to appear downcast and upset. But through group discussion, we had three designs before we reached, what we felt, was the best style.

Given the time-frame we were working within (45-60 seconds) I am really happy with the variety within our film. Some groups chose to work from a single computer to insure the work would be absolutely uniform. I am glad we chose not to do this. We of course made a great effort to plan out every aspect of the work before we began, but by working separately and simply pooling our work and asking for feedback as we went, I feel we managed to make our piece more vibrant and interesting. Each one of us took some small liberty to change small details based on what we thought worked. I, for example, decided to add the tear rolling down Emily’s face in the moment and asked the group who basically said ‘ sure, see if it works’.

Working separately brought up challenges such as scale of Emily and surrounding objects. I feel the advantages outweighed even this though. Each of us are still only have a cursory understanding of Adobe After Effects, I feel like I could use it for years and still be discovering more about it. The result of this was that in each of our sections, we made different animating choices based on what we knew. We all had different ways of tackling problems. This variety only enriched the work in my opinion.

Audio Work

In honesty it wasn’t until we began including audio into the project that I saw it coming to life. The animation on its own was never going to be that impressive. But just small stuff like the clacking of the computer keyboard and the clicking of the mouse, gives a whole other dimension to it. These were easy to come by online, it just took an awful lot of scavenging to find free effects. I have listed a few of my favourite go-to sights on my last blog post.

Along with almost every other file we collectively amassed in the project. I decided we should upload everything to a memory stick of mine as backup and way of sharing large files. Many of our files, especially audio, would be necessary for each others portions of the project. This was another step we took to insure continuity and uniformity. I found a lot of the sound effects but they were going to be needed in all three parts of the video.

The music you hear throughout the video was a find of Callum’s, I wasn’t aware he’d added it until he played it back to me a couple of days before the exhibition. I was really happy with it. It’s light and melodic while fitting the very simplistic style of the animation and not being intrusive. It also contrasts well with the deep foreboding note as Emily falls in the fourth scene.

The final piece of the puzzle was the narration. I am not a narrator but for this project I was the unwilling voice over. We used a borrowed voice recorder from the Graphic Design office and me and Callum went off to find a quiet area in which to record. It was actually quite an educational crash course in acoustics. Everywhere was either too small and echoy or full of people.

The script was nonexistent. We just played the video, counted the length of each scene and then cut the sentence on the screen down until it could be said in the time allotted. I decided (I got to call the shots as the only one willing to use my voice) that simply reading what was on screen would be a bad idea. I personally hate adverts with text that is read out word for word by a narrator as if I am too stupid to read it myself. I understand, however, that some people cannot read whats on the screen for various reasons and in that case the text should be paraphrased. Which is exactly what I did in the end.

Summing it up

This was horrendously stressful and irritating brief and I hope to have a significant time out before being asked to do something similar again. However I understand the necessity of learning every skill related to Graphic Design. It was really fulfilling to see it all come together in the end and have our polished pieces to show off. It tested my ability to work in a group more than once but I am happy to have been through it. It must have really stuck with me because I have found myself wandering how I would change it if given the chance and several ideas have already been flying around my head.







Finishing my Animation

My role in our animated film was to create the first three scenes. The last of those depicts Emily being attacked by the computer mouse. The idea behind this is as a visual metaphor demonstrating the unseen dangers of using the internet, the harm, while unseen, is very real.

I first had to rebuild the background of Emily’s room from a side on perspective. Using my judgement and recording the swatches from the previous backgrounds, I recreated the scene as accurately as possible. Scale being less important as all the elements depicted are important and I could use the excuse that their size is exaggerated to enhance the scene.

side desk

This was my first model for the desk space. i animated from this base. Emily, the mouse and the car were all independent layers. I was aware before starting that this scene would be the most difficult to animate. Having Emily fall backwards with arms flailing and her reaction to being attacked by the mouse would be time consuming but perfectly doable. The mouse, however, would be tricky.

Here is my final scene in all its mediocre glory. You will notice the monitor has been updated to include the Facebook style page. The main issue I had with animating lal my scenes up to this point was the preview. The real time render rate is usually 20fps or less. Which means the preview doesn’t accurately show how quickly things move within the animation. This gave me huge difficulty making scenes appear the same in terms of speed of motion. Camera adjustments in Scenes one and two were far too fast and required significant change. Equally the part here where Emily falls backwards is a little slow for my liking.

My biggest issue with this scene is the motion of the mouse. I did a great deal of research into finding a way, using a path or something to have the mouse cord move and flow like a flexible living object, in the manner of a snake. I was completely unable to understand how to achieve this and sothrough necessity i was forced to draw in sections of the cord in after animating the mouse. This was less than ideal and leaves a lot to be desired. There are gaps as the mouse moves and no flexing of the chord.

This final scene was as difficult as I thought it would be to complete. However I knew the addition of audio would do a lot to fill in the gaps. Audio helps to convey the spirit of what on the screen. Emily’s hand moving and jerking across the keyboard looks very crude. But with the addition of keyboard clicking sounds it’s far more convincing.

The next stage will be to stitch our work together into a final composition and include our audio files. I have also been unwillingly volunteered to narrate our project by democratic vote (2 to 1).

Animation first steps

Although I had only a very brief time to become accustomed to using Adobe After Effects and am not particularly accustomed to Illustrator. I tend to learn best out of necessity. What is clear with animation is that it is usually best to build layer upon layer, starting from background forwards, anything moving, weather, vehicles etc must be created and put behind the main focus of the animation. In this case, Emily.

In creating the piece I had several false starts. I used countless Youtubers tutorials such as Terry White who has a huge range of instructional videos on all things Adobe. And Gareth David at Tasytuts who specialises in graphic and particularly logo design and especially in Adobe Illustrator and Photoshop . I tend to find I learn far more when I listen and watch someone perform the action than reading through a step by step guide.

Being very aware that I had limited skills, I decided to utilize all the simple tricks I had learned in the tutorial session with Matt.

I was in charge of the opening scenes of our animation which meant I could play around with the establishing shot. I was slightly constrained by the storyboard however. I decided a simple fade in from the story’s title would be best. Fading from black to open into the room to give context before zooming in to focus on Emily. I wanted to leave her face unseen until the second scene so as not to give everything away all at once.

The clicking finger although incredibly basic, took some time to include as it ended up being on a layer of its own due to a technical issue I couldn’t resolve. I found there were a lot of times when I had to think on my feet and find other ways of doing something. After Effects is such a complex software that there often isn’t a tutorial of website guide for your highly specific problem.

The messages appearing were only very broadly defined in the story board. All I had to work on was the idea that she should receive aggressive messages. As I had only 15-20 seconds to work with for all three of my scenes and I was well over the allotted time frame for each scene. I had to make something visual that needed no reading. My first thought was that everyone of the age this is aimed at (children of internet using age) would be using the same social media. And the largest social media website is obviously Facebook. Over a billion people are currently have active accounts. Using emojis from Facebook would make them instantly understandable by everyone. Why waste effort building it yourself when Facebook has spent billions building up recognition of all its products.

Here in the second scene I wanted a drawn out moment of realisation. The perspective turns to face Emily and is set as if peering out from the computer screen, she is suddenly given a personality. At the same moment she is scrabbling on the computer to find and understand the contents of the messages she’s just received. The wide shot provides enough of a view to see she is alone in  darkened room. This was carefully thought out. Most cyberbullying is a very solitary experience for the victims as those in a position to help, would most often be unaware of it.

I wanted to pan from the wide shot right in to Emily’s face. She is the focus and her expression is key to imparting the message. I wanted her to bow her head, but in two dimensions this was difficult. I settled for having her features literally sink. I was very pleased with the mechanics of the tear. I had it fade in to view before rolling down and pausing at her cheek before dropping.

I was very plkeased with the outcome of my second scene, but after a group meeting with Neil Angove, I decided on a change. We agreed that the unchanging eyes were lacking emotion. To some extent I felt a dead pan face with a tear would be very effective. But I understood the sentiment and I’m always happy for constructive criticism.

Here we have a far more advanced rendering. My first change was to alter the eyes in scene two when Emily cries. But I also decided to add audio. I spent quite a long time selecting the highest quality free audio clips I could and found from numerous forums, .wav files were far better than mp3 format. Website used include:

Although simple in theory, adding audio turned out to be a complete nightmare. The week in which I was animating this section of the video I was way from University and so only had my laptop to work from. For some reason when previewing my unrendered footage with audio files imported, there was no sound. This made aligning it with the visual queues impossible.

After some research I determined it would be possible to add the audio files using other software with rendered footage and then import the file back into After Effects. This would only give me a working model but mean I could share my progress with Laura and Callum using a shared google drive account. The software I used was a free trial of VideoPad, similar to After Effects but far more basic in its capabilities. It served well for audio editing however.

With two of my three scenes complete at this point. The only thing left is to create the last scene and apply final touches before combining them with the other’s work.


Animation Brief – Character Development

In our latest work session, we decided we needed to hash out some of the fundamental elements of our project so as to be ready for the next phase – animating. As part of our research we had all come across the Share Aware campaign by the NSPCC. It explains the potential risks posed to children who venture online and offers advice and resources for anyone effected. The campaign includes illustration and educational videos designed for children, with a child featured as the main character and a narrator. The simplistic art style appealed to us and was something we hoped to emulate.

Image result for share aware

With this in mind we began the process of creating and refining design ideas. We knew a couple of key requirements we would adhere to based on our research thus far.


  • The character featured in our animation would be a girl – In my research I found studies by the NSPCC that suggested girls are, on average, twice as likely to be the victims of cyber bullying than boys. While this in no way demeans the experience of boys who suffer cyber bullying, in our 60 second short we have only planned to feature one character as our main focus and it seems only appropriate to use someone of the group most at risk.
  • The style would need to be simple –  We had already agreed we liked the Share Aware campaign’s, style. It’s merits are numerous but it also can be broken down into relatively few component parts, making the animation process a simpler one. We have limited time to create our short video so reducing its complexity will help us create a more refined finished product.

Sifting through ideas

I decided the easiest way to come up with a unique style that we could all agree on would be to turn it in to a kind of pick & mix. I drew numerous types of facial shapes and features and then people could pick the ones they liked and we could mold all the prefered elements into a finished character.

These are all quite rough designs simply good enough to convey general shape and style. The finished work will be far more refined and less scrappy. As with the top left image, we were freewheeling ideas throughout the process. At the same time we came up with a number of other aspects of the animation.

2017-03-06 19.54.05
Emily, our protagonist

The ink passing the through the paper of my sketchbook was unfortunate but again, this will all be recreated digitally. From all the sketching and discussions, this was our final product, essentially. I’m very happy with what we created, it fits several key requirements. It’s a very simple design, the round face and small features and rosy pink cheeks suggest a child, adults tend to have more structured and defined faces. And the lines are clean and filled with block colours.

My Thoughts

I really enjoy the process of character creation. The process of refinement is very satisfying. I will feel happy to go into the animation stage of this project knowing that our character, the main focus of the whole thing, was poured over and is the best combination of elements that we could make her. The key to a project like this is that everyone has a part in each step and each decision. Having defined our character, we will now need to fill her universe with objects and surroundings. Knowing we have a solid basis for a style will make it easier for us to work separately on each element while maintaining a uniform style of design.


Cyber Bullying Research

Since changing groups, my topic research up to now is somewhat irrelevant. My new group is working on a piece exploring Cyber Bullying and raising awareness of the issue. To be a productive team player I will need more information about the subject and that’s the point of this post.

Bullying and Cyber Bullying

Bullying is behaviour that hurts someone else – such as name calling, hitting, pushing, spreading rumours, threatening or undermining someone. It can happen anywhere – at school, at home at work or online. It’s usually repeated over a long period of time and can hurt a child both physically and emotionally.

Bullying that happens online, using social networks, games and mobile phones, is often called cyberbullying. A child can feel like there’s no escape because it can happen wherever they are, at any time of day or night.

Bullying is an issue faced by young people and adults alike. But children are often far less autonomous and can feel they have less  control or recourse. A child spends 5 days a week in school, the majority of the people they see are school piers, if they suffer in school then it can feel as though they are trapped.

NSPCC (link)

  • There were over 25,700 Childline counselling sessions with children about bullying last year. (2016)
  • Over half of lesbian, gay and bisexual young people have experienced homophobic bullying at school
  • More than 16,000 young people are absent from school due to bullying
  • There were over 11,000 counselling sessions with young people who talked to Childline about online issues last year

Children aged 11-16 on social media

Researchers conducted an online self-completion survey in December 2012 of 1,024 11-16 year olds in the UK.

  • 28% of children aged 11-16 with a profile on a social networking site had experienced something upsetting on it in the last year
  • Of the children and young people who were upset, 11% were dealing with upsetting experiences on a daily basis
  • The most reported issue experienced on social networking sites was trolling, experienced by 37% of children who had been upset.
  • Other issues experienced by children who had been upset included: pressure to look or act a certain way (14%), cyber stalking (12%), aggressive and violent language (18%), encouragement to hurt themselves (3%), receiving unwanted sexual messages (12%), and requests to send or respond to a sexual message (8%).
  • Over half of 11-16 year olds (58%) believed at least one of the people responsible for the behaviour which had upset or bothered them was either a complete stranger, someone they only knew online, or they did not know who it was at all.
  • Only 22% of the children who were upset talked with someone else face to face about the experience.

What children have said of their experiences with bullying

Published 2016. Bullying has been among the most visited subject by NSPCC callers since 1989.

  • Bullying is the second most common reason for boys and the third most common reason for girls to contact Childline. It makes up 9 per cent of all counselling sessions
  • Bullying is the most common reason for children aged 11 and under to contact Childline; almost 1 in 4 sessions with this age group
  • Physical bullying is the top bullying concern for children aged 11 and under; peer pressure is top for 12–15 year olds and online bullying for 16–18 year olds.
  • Bullying affects academic performance and is linked to mental and physical health problems. 1/4 children is counselling sessions talked about mental health concerns

Article suggesting girls are twice as likely to be cyber bullied than boys. (Survey by ‘What about YOUth’ organiation)

Swansea girl committed suicide after being bullied on Snapchat and Facebook

A quarter of teenagers suffered online abuse in the past year. (Article posted 2016)



Illustrative Styles Research

As we will be creating a 60 second animation as part of our brief, we will need a uniform style that allows each member of our group (4 members doing 15 seconds each) to create something that when stitched together, will mesh nicely and not appear too dissimilar. In this post I will explore a range of styles from numerous notable illustrators and from various genres.


While researching illustration styles online, I stumbled across an article on, about an illustrator called Mike Holmes. Holmes is a cartoonist for shows like Adventure Time and Bravest Warriors and he created a series known as Mikenesses in which he drew himself (often accompanied by his cat Ella) in the styles of more than 100 different cartoonists and animators. It’s a neat study that shows a real understanding of the styles, and it’s also incredibly charming.

I am not going to show each one as this post would be insanely oversize by the end. But here are some of my favorites.

The style of Quentin Blake
The Powerpuff Girls
The TV show Archer
Nicholas Gurewitch
George Prosper Remi’s Tin Tin
Tim Burton…who else?

You can find the rest of the work at Mike Holme’s page on Flickr.

While these styles may be somewhat ambitious for our group with only 3-4 weeks left to animate the entirety of our video. It has given me a valuable insight into the way various  styles can be utilized to turn the same content (Holmes and his cat) into such a vast array of images, situations and atmospheres. Clearly styles are created to suit the narrative they tell.

George Prosper Remi’s Tin Tin tends to be in general, an adventure series with high stakes and tension. This reflects in the rather life like approach to character creation. Not that they’d pass as real, but clothes, bodily dimensions and expressions are complex and made to be accurate-ish to reality. This is sharply juxtaposed with the angular, block colour designs of The Powerpuff Girls. They employ a lighthearted anime like style full of exaggerated light and movement to appeal to children. In the same vein, Tim Burton’s Gothic style relies on us to fill in the gaps, it cares little of reality but delivers a hugely stylized set of characters. It is dark and Gothic, which is ideal of the genre of films and media Tim Burton is responsible for. It adds to the narrative.

My Thoughts

From my research so far I have come to understand more of the importance of illustrative styles, the aim of the style is to compliment a narrative. The tone of the story is established and the illustration is an effective way of complimenting that tone and feel and enhancing the audience’s experience and immersion.