Animation Brief – Treatment



LA Noir Trailer – Treatment

we are doing a trailer for the game ‘call of Cthulhu’ which has not yet come out. 

the genre is a horror/adventure mystery type of game so the trailer we plan to make is going to be using the mystery elements as well as showing off the horror atmosphere. we have once again been given a short amount of time to get everything done especially the filming itself, we have a few weeks at most, that only being a maximum of two lessons to get this done. The trailer has to be from 1-2 minutes in length, though we’ve been told 2 minutes would be too long for a trailer so sticking under that would be preferred. The audience for this trailer will of course be people eager for the game itself but if we’re talking statistically it will most likely be mid teens and up, i think the game leans very well to all genders but would probably attract a more male audience. 

The story of the trailer is that a detective arrives in a washed up, quiet and slightly isolated village where there have been rumours of a beast and the best lead is a cult residing in the villages depths, the detective is here to question and find answers as quickly as possible. 

In this trailer not too many characters will be shown, only the main ones and a few side characters, nothing too major such as the main antagonist Cthulhu itself. The main characters are of course the main detective and their side helper{possibly}, side characters would include members of the cult itself and innocent villages who only bystand as this goes on in their village.

Audio will use will be both diegetic and non. Any music we use will have to be made by ourselves or royalty free as to avoid copyright issues. Foley may also have to come into play depending on the final scenery we decide on. I image very low instruments will be used since the trailer is going to be based around the horror mystery genre. 

We chose and agreed on this idea because it is doable, even if a bit ambitious and horror mystery is a genre we all find interest in, in some way or another. We did look at other games, we researched varying trailers for games, films and the like, looking at how different genres were all tackled and in what way, for example we initially thought Professor Layton was a good idea but Call of Cthulhu had the horror element that the other game did not. 

The obvious equipment needed are the camera, tripod, possible lights for the mood lighting, props and costumes as well as things to add into the scenery. The last piece of equipment which we will have access to are of course the macs with the editing software on them themselves to be able to put the trailer together how we would like. The time constraints we have cannot be altered as we have no power of authority on that matter, there is no solution to time constraints i’m afraid. The trailer itself will most likely be shown on youtube, the ranges of the internet and television, possibly even before films currently in cinema at a closer time to the films release. 

Potential problems would be not being able to film in locations that we have in mind, not having enough time to film the clips and put them together along with finding decent sound and recording enough voiceover. 


Web Design – Research

HTML – Hypertext Marker language // this is useful for the portfolio site because 

CSS – cascading Style sheet // 

bootstrap – a layout/designer technology to help keep the website looking good in all adjustments and on all platforms  // this would be extremely useful for the portfolio site because it would be viewable on all sites, devices and platform

javascript – script and specific code used to make things interactive on a website 

jquery – 

ajax – 

database – 

client – 

web server – 

php – 

sql – 

mysql – 

asp – 

angular – 

what do these parts of websites do? 

  • header / banner
  • logo
  • slider 
  • navigation 
  • links
  • gallery
  • thumbnails 
  • lightbox [fancybox]
  • footer

what types of media could you show on your portfolio site? where could you host these?

  • for example 
    • images on website
    • video – embedded 

Obstacle Brief – Research

Pixar Short Film; Piper

Animation Techniques{inverse, forward kinematics};

Production process; the director visited San Francisco bays sandy beaches to get a more realistic idea of how sand and the sea work as well as the birds themselves he visited Monterey bays aquarium to document and observe behaviour. 


Software Used; 

Job roles; animator, storyboarder, director, composer, modellers, visual artists, editors, fx {character}


one of the first things to come after the research trip was of course character design, and how many of those there were going to be, this of course included sketching out different birds of sizes and shapes – relating to the actual bird itself still – but they all ready had an idea of what they roughly wanted piper to be. they also looked at documentaries as they wanted it to seem liked it was filmed as one, going so far as to look at recreating the lenses and looking at the macrophotography closely, the director himself said he found this very interesting. the director said that films like wall-e gave him confidence in tackling piper and its troublesome feather animation. 

paperman Pixar short

job roles; editor, animator, visual artist, modeller, director, scriptwriter, storyboarder, fx artists, sound design, lighting design, matte painters riggers 

  • a lot of lighting 
  • 3d animation
  • environment interactions {train in background} 
  • characters look specific ways to show their main traits and help convey emotions better 
  • no colour

pipeline stages; 

  • movies flow in one direction 
  • 15 areas
  • 1
    • story
      • director – has the vision, so people working go towards the same purpose 
      • storyboard – made from script / comic book version of the movie
        • pitch it back to the director
      • poems, comics, books
      • write script / finalise script 
  • 2
    • editors 
      • story reel
        • build sequence – no dialogue – record self doing voices
        • add music sound fx – polished as possible
  • 3
    • art
      • many artists – visual development artists
      • sit down at the desk and create props. character, environment design 
  • 4
    • modelling
      • build all characters, environments, props 
      • receive 2d artwork and bring it into 3d
      • sculpt characters based on the artist’s concepts
  • 5
    • rigging
      • build skeletons for models 
      • design how characters move – puppet makers
      • facial expression, wrinkles, details
      • joint movements, facial movements and expressions, how they move, skin etc 
  • 6
    • surfacing artists
      • surface quality of assets or characters
        • colour, texture, how light interacts with
        • adding things to textures/models
        • scratches, etc 
        • texturing 
  • 7
    • rough layout
      • nexus point of pre-production and production
      • recreate storyboard in 3d with the virtual camera
      • gateway into production
      • blocking and staging of characters {initial} 
  • 8
    • final layout
      • compare shots for animation 
      • replace already existing assets with higher quality assets
      • stereopass – 
  • 9
    • animation
      • draw all keyframes – pose up the character using CG puppet
      • keyframing
      • bring personality and performance to chars
  • 10
    • crowds
      • extras of film
      • automated ways – few little animation applied to many models for bg chars
      • set personality traits 
  • 11
    • character fx
      • everything thas moving on a character that’s not the character itself
      • clothing, hair, fur interaction 
      • environment 
  • 12
    • fx
      • details; smoke, footprints, wind, things changing colour, fire 
  • 13
    • matte painting
      • things beyond the set -sky cloud mountain
      • model assets paintings using the art colour keys
      • very far backgrounds 
  • 14
    • lighting
      • take all assets
      • CPU animated lights
      • look for ways to bring more emotion and atmosphere
      • help tell the story
      • editorial plays a part 
  • 15
    • sound design
      • the composer writes music for the story
      • audio levels, equalisation mixed into the final version of the films audio 

LA Noir – Film


  • planning, pre-production, filming, final edit involvement. [evidenced in sketchbooks and blogs]
  • 1:30-2:00 max minutes + only 20 seconds of in game graphics


  • come up with two ideas/narratives [evidence; as synopsis/plot with clear narrative development, min chars and visual design in detail – add to blog]
  • write a paragraph about the trailer – ‘this is what happens in my trailer’

Games to draw inspiration from;

  • until dawn
  • la noir
  • the wolf among us
  • gmod; murder
  • resident evil 
  • watch dogs
  • ——–

the wolf among us

the scene sets, a tall figure is walking down a street, weaving through alleyways and people as they go, its cold out but the figure isn’t wearing a coat or anything to stay heated, the only clothing covering them is jeans and a short sleeved shirt. they walk round a corner to a police station, where a crowd is gathering, a crowd which the figure easily and effortlessly pushes through to the front steps where a woman is standing, trying to calm the scene, theres a dried blood spatter on the floor of a step and some strands of hair, the figure frowns, walking up to the women to stand beside her 

“everybody stay calm, we have the investigation under control” 

[and fade to title] 


  • Lady Detective [ Snow]
  • Figure [Bigby] 


colours + effects;

  • comic book city aesthetic 
  • purples, blacks, dark tones of orange
  • neon city light aesthetic 
  • shadowed figures 


Crime in fairytale city, and only one wolf to fix it. The main character is the cop to watch over the city, 


Trailer Breakdown

  • figure steps out of a moderately shadowed area of a city/town, into low lights of a lamp
  • a phone screen with a text chat on it can be seen for a few moments before the screen is shut off and the figure begins to move down the street
  • more and more people are starting to pop up on the street as the figure gets closer to a specific building
  • that building being a police station, where a large crowd is gathered in front of a woman

super mario brothers

it starts with a blank screen, a sound effect of marios jump plays and the scene lights up, a mid shot of a figure with dungarees and a red shirt under that is shown briefly before it fades to black and fades back in to a close up of a moustache being readjusted slightly. a hand holding up a wrench is shown and transitions into a hand tipping a green hat forwards. 


Web Design – Task one

  • produce portfolio in web format in 5 or 6 pages
  • [research+development, pre-production, production, post-production-evaluation]
  • ^mind map, brainstorm
  • professional 
  • note good and bad design aspects of 6 websites

Screen Shot 2018-01-04 at 13.25.50.png

the first site i’m going to be reviewing from a design perspective is ‘’. This site is a professional portfolio for an artist by the name of Kendra Haste who is mostly known for her sculpting work. First of all, the site gives a very professional and relaxed impression once you enter the site itself. The main background colour is white and although that can be glaring to some people it very much gives a fresh and clean cut look to the site. The black text and blue titles make them pop out against the white background of the site, alerting the attention of the visitor. the text is all the same font so it is consistent, though this could be seen as a bland choice. the grid layout is very pleasing and a neat way to show a lot of information in a non-invading way.

Screen Shot 2018-01-03 at 12.04.56.pngthe second site i am going to review is the portfolio of an illustration story boarder by the name of Diana Ling []. This site also uses very basic and simple colours, white background and black text. a grid is in place here but its a very loose grid compared to other sites. This is a very picture heavy site, which for a story boarder makes sense but it would help to have captions or descriptions for each piece even if they could just pop up when you hover. there is only one page with text and information which is small and accompanied by even more text.

Screen Shot 2018-01-04 at 13.28.43.png

another site to look  at is a digital portfolio. this artist is mainly a background artist and an environmental artist. the site is very plain and simple and its layout includes a lot of negative space and images, the balance of text and images is good. There is the option available to click on a thumbnail of the photos to bring up a larger version, there is no quality loss during this which shows how high quality the site is. There are subjective downsides, for example the site is very plain and lacks colour, splashes of colour here and there could do the site some good since the layout could become uninteresting with how it is portrayed now. []

Screen Shot 2018-01-04 at 10.38.59.png

this is a digital portfolio of a popular artist and animator from the youtube community, they also draw their own comics. This site has a very neat layout and uses soft colours that work well against eachother, for example, keeping the soft feel to things there are no sharp edges and such, everything is rounded even the text. The font is well picked and sized, coloured differently so it just stands out from the background of clean white, but not so much that it invades the atmosphere. unfortunately there is a big lack of text on almost all the pages, there are images and drawings, parts of their work etc. They use the hot and cold areas to their advantage, keeping things mostly to the left side and the top corner, not using the bottom right corner much if at all.


Screen Shot 2018-01-04 at 10.51.31

behance is a huge website where people can create and display their portfolios, easily add to them and look at others work as well for inspiration! The site is easy to navigate around but there does seem to be too much going on with the opening home page. It is nice that others portfolios pop up the moment you enter, since it can serve as a way to show how the site looks and/or works but the layout looks too cluttered for a grid, if there were less portfolios on a row it would seem less cluttered. this site actually seems to use more colour and less negative space, which looks good overall since it doesn’t seem too bare. the site is pleasing to the eyes, no neon colours or bright glaring shades, soft and dark colours are being put to use, everything is coloured accordingly to show what is separate to the background. this site is surprisingly easy to use, aside from a few mechanics when you ARE logged in that can become confusing. all available activities are easy to complete, edit and apply 


Screen Shot 2018-01-04 at 12.55.47

this is actually a blog on a specific blogging site but its used to post and update with art so it is a type of portfolio. the layout is very vertical based, it only scrolls down and then has a next page option and continues on like this for the remainder of the blog. once again the only colours used are black and white, and considering how simple the layout and posts are set i don’t think this is a particularly good choice, it makes it come across as unfinished in a way. The dates by posts are a useful point as not most artists with portfolios add this kind of information in at all. In some ways having a bland background can fit very well when mixed with other colours in text and buttons but there is none of that here, it isn’t very convincing to keep the visitor on the page. thankfully the site is still easy to use and it takes next to no effort to interact with the site and its widgets. though in my opinion i don’t find this site pleasing to the eyes as it doesn’t touch any aesthetic choices. 


Web Browser Functions; [Explain how Web browser functions and how they have changed with browser development ]

  • plug-ins
    • plug-ins are software that adds a specific feature to already existing programmes{computer} – plug-ins allow customisation.
    • plug-ins allowed new features and customisation which was not accessible {difficult to even find} before the plug-in was put into creation 
  • cookies 
    • small text files that are stored on the site, registering the users computer for that session or multiple sessions of the site on the hard disk, this provides a way for the website to keep track of you and recognise your preferences. 
    • cookies make it easier for sites to retain information about what you see and show you more of it, in the earlier days of the internet this was not as simple
  • javascript
    • a specific use of code and software to create interactivity on a website
    • sites did not used to be nearly as interactive as they are nowadays, the possibilities are surprisingly broad now that javascript has been developed and is still being given updates even today.
  • FTP
    • stands for file transfer protocol 
    • protocol that is used to transfer files between a server/cloud/network and a client computer. 
    • ftp has always been around, though in the present day it works a lot quicker then when the internet was first introduced
  • bootstrap
    • a layout/designer technology to help keep the website looking good in all adjustments and on all platforms – keeping the website inside a specific grid type format so that when the site is stretched or squished it wont ruin the format.
    • bootstraps weren’t even considered until people realised that the internet became accessible to phones and tablets were created, they realised that computers were not the only media they had to abide by. 
  • CSS
    • short for cascading style sheet
    • this is a html feature that was added to give control over style and help shape how certain aspects and assets appear 
  • html
    • hypertext mark language
    • system to tag text files