Final Major Project

Working Title – Miloses Resurgence

Genre – Action/Fantasy/Drama/Japanese

Duration – 4 Minutes

Possible Software

  • Adobe Flash
  • Aftereffects
  • Photoshop
  • Adobe Animate

Ideas

Basis

The general Idea is a minimum 3-minute long fight scene in which one of the characters goes through a major mental battle, this then causes them to re-evaluate their thoughts creating new values ultimately giving them the deciding factor in the fight.

To think about

  • Colour – How am I going to incorporate colour into my animation?
  • Sound – Am I going to add sound effects and voice overs?
  • Visual Effects – How am I going to add in visual effects, what software would be best?

Ultimately I aim to create a 4-minute short consisting mainly of fast-paced action, however, there will be added story to keep the viewer intrigued. This will all be done via frame by frame animation using Photoshop to draw each scene out and putting them together as well as Aftereffects to lessen my workload allowing to use two types of animation techniques. This is also very helpful as I can add pre-built effects instead of drawing everything out myself. Lastly, I’ll be using Premierpro as my video editing software allowing to make any speed changes along with adding sound and a watermark.

Modern: Times, Values, Change

I feel Change would be a very interesting aspect to incorporate within my project as it allows for multiple connotations and different ways I could portray this in my animation. As a sub-aspect, I’m also going to add in Values as both parties have their own morals they abide by, I also feel this would keep the viewer interested and the story gets more developed.

Problems I may face

One of the key problems I’m going to face is the fact this is a very big and time-consuming project due to the fact I have planned to hand draw everything including Characters, Background, and Effects. One way I planned to help lessen my workload was reducing the amount of redrawing I had to do via simplifying the characters. I would do this by removing all unnecessary detail from the character leaving just the basic shape, however during very intense and detailed scene, I would re-add some of these details.

A major problem I’m going to have to work around is the fact that this will be my first-time doing animation frame by frame along with the programme I’m using for it. However, I feel this will give me a fresh look on things due to everything still being fresh in my mind.

Research

These videos above are what helped me to chose photoshop as the selected software to create my animation in. As well as this it helped me to learn how to use the programme and navigate around the software, as this would be the first time me creating an animation within photoshop. This also helped me to understand the processes I have to go through to create my animation which made me adapt my goals and make that more realistic.

These two videos are a prime example of what I want to create. The first video may seem like it was easy to create due to the characters being blobs however this allowed them a lot more time to focus on the finer details such as the backgrounds and different effects. This video is highly what I base my FMP around as I was really drawn to it.

The video below is ultimately what I would aim to create if I had the extensive knowledge on how to create a frame by frame animation. As well as this the message the animation had along with how the story progressed really influenced my ideas especially with choosing what message to convey e.g. what values will be seen along with how I would incorporate change.

Books

– BlackClover by Yuki Tabata

– Naruto by Masashi Kishimoto

– FullMetalAlchemist by Hiromu Arakawa

–  FairyTail by Hiro Mashima

Character Ideas

A very interesting idea came to me which I went and got multiple peoples unbiased opinions on. This idea was an interesting way to incorporate colour into my animation whilst also having an interesting meaning behind it. All of the animations would be drawn in black and white, so that includes the background and even the characters themselves, but would separate these thing is that all the effects (namely the powers) would be the only colour within the animation.

Anwil – Beloved (Welsh Origin)

Amor – Synonymous with love and romance (French Origin)

Prem – Love (Indian Origin)

Amadeo – Lover of God (Italian Origin)

Milos Lover of Glory (Slavic Origin)

 

Kibou – Hope (Japanese Origin)

Fidel –  Faithful (Latin Origin)

DaijonGod’s gift of hope (American Origin)

References: http://www.momjunction.com/articles/baby-names-inspired-by-love_00359083/#gref

http://www.momjunction.com/articles/baby-names-that-mean-hope-and-faith_00400948/#gref

Milos Story

Milos is the definition of mediocre, average kid with an average family living an average life. Every day is the same thing, he knows exactly what will happen and when because every day is a repeat. He’s finally become tired of living this life, he wants to create a new life and he will stop at nothing to achieve his goals no matter what it takes.

Daijon Story

Daijon comes from a family where his parent are no longer together. During his childhood, he suffered from family abuse and constantly being told he wasn’t good enough, and that his only purpose was that he was supposed to be his father’s prodigy. After years of constantly being told this repeatedly, he vowed to become better than his father without his help.

Fights story

They both have a mutual friendship they honor, however, they both won’t let this come between winning. At any cost, they need to not just impress the scouts but the world now. They have to prove they are worth the time and effort of being chosen and the best way to prove this is winning.

The image below is Miloses mood board, each image has carefully been picked out to represent either a character look or character emotion I’m looking for. Each image has been precisely placed with the top row of images showing distraught, anger and sadness whereas the images below are showing how generic he is as well as other emotions.

Milos_moodboard.png

Daijons mood board was my favourite to create. Below the images are separated into Confident, Battle ready and Calm on the left to Unpredictable, Enraged and Uncontrollable on the right.

Diajon_Moodboard.png

Tournement_stage_moodboard.png

 

Advertisements

Obstacle course

 

Here is my attempt at creating and animating my own character in an obstacle course. The overall vibe I wanted to give off was that this course would be a breeze for my character as he has special power as you can clearly see throughout the video. I first animated the head and arms of my character to create a sought of bow with palms his facing each other, this ends up lasting for 75 frames.

Screen Shot 2018-03-15 at 14.19.22.png

Then from 75th frame onwards to the 190th frame, I animated his arms raising as I wanted to make him levitate.

Screen Shot 2018-03-15 at 14.20.26.png

After him levitating back down I added his lower body getting ready for impact with the ground. This was him bending his knees which would also leave him in position to jump straight after. This last from the 280th frame till the 300th frame.

Screen Shot 2018-03-15 at 15.07.35.png

He then slides down and begins to walk the rest of the course before phasing through the ground and skipping the frontal part of the course.

Screen Shot 2018-03-15 at 16.16.28.png

 

 

Bouncing ball Animation

In today’s lesson, I was tasked to create a bouncing ball in order to get used to all the tool within Maya. The first step was creating the actual ball, this was easy as all I had to do was create a sphere.

Screen Shot 2018-03-14 at 10.19.23.png

Screen Shot 2018-03-14 at 10.20.00.png

Now, this is where I actually started as I had to set the first keyframe for animating. At 1 I set a keyframe as this would be the resting state of the ball, I then proceeded to change the location of the ball in the workspace so the ball is suspended in the air.

Screen Shot 2018-03-14 at 10.26.20.png

The next step was to create the first bounce where the ball would be in a contracted state. To do this I went to frame 13 and changed the dimensions of the ball to;

Screen Shot 2018-03-14 at 10.27.11.png

After this, I duplicated the first frame to frame 24 would be the end of the animation. However, this still didn’t give the animation a nice smooth look so I went into the Animation editing – Graphics Editor to fix this problem.

Screen Shot 2018-03-14 at 10.31.53.png

I then adjusted the curve so the ball would look like it had an increase and decrease in velocity whilst bouncing, making it look a lot more realistic. On top of this, I played around with the point seeing depending on where they were placed how it would correspond with my balls motion.

Screen Shot 2018-03-15 at 10.35.06.png

Now It was time to add in the contracting and stretching of the ball, to do this I simply changed the dimensions of the ball to forScreen Shot 2018-03-15 at 10.42.37.png

the contraction which I placed on frame 12. I then did the same for the stretch except for the dimensions where;

Screen Shot 2018-03-15 at 10.57.47.png

and this is what was produced;

 

 

Basic Keyframe animation

During today’s task, I was learning how to use the basics of Adobe Maya. I was tasked to create 3 shapes all doing different motions at varying speeds. The first thing I did was created a file save so everything would be tidy.

Screen Shot 2018-03-15 at 11.02.04.png

Screen Shot 2018-03-15 at 11.02.14.png

So the first actual step was to create the object I would be animating. To do this I went and selected 3 random shapes from the polygon shape tab and placed them in a row. When you first place the shapes they’re suspended in the air so to stop that I changed the X value to -9.825 so all the shapes were levelled with the workspace.

Screen Shot 2018-03-15 at 11.08.28.png

For the first keyframe, I selected the ball and used the keyboard shortcut to set a keyframe, I then moved the sphere and set a keyframe at frame 24.

Screen Shot 2018-03-15 at 11.29.30.png

I then repeated this with the square, however, I set the second keyframe at frame 48 as this would make one quicker than the other.

Screen Shot 2018-03-15 at 11.30.11.png

I later then added a keyframe at 5 frames for the Cylinder, so this would ultimately be the fastest one out of the 3.

Screen Shot 2018-03-15 at 13.00.06.png

I then later added a rotation to the square for added effect.

 

 

 

Web Design

Portfolio Websites

1. https://www.wix.com/website-template/view/html/1589

Screen Shot 2018-01-17 at 11.48.09.png

This design I find very bad due to the lack of design effort put in. They haven’t correctly utilised the amount of negative space on the page, making the viewer have to scroll down to view the images. This leaves the page looking very bland and empty, giving off the feeling of a lack of effort. As well as this the font used doesn’t reflect the page and effect he’s trying to give off, It looks very basic.

2. https://www.camartinart.com/illustration

Screen Shot 2018-01-17 at 11.53.53.png

Here is an example of a well-designed portfolio website. Here they’ve filled up the negative space with relevant tabs to navigate around the page. They’ve also kept with a colour scheme that sticks throughout and looks very sophisticated yet artsy. They’ve chosen to go with a slide format where the image changes via the tabs on either side, this allows for the image to stay within the centre of the page, due to this a lot of attention is brought towards the artwork itself and stays that way.

In this portfolio, they’ve also separated all their work under tabs, this is something I will also do with my portfolio so it’s easier for the viewer to navigate to specific area they want to look at. 

Screen Shot 2018-01-17 at 14.40.45.png

With this section of the portfolio, they’ve gone with a grid format to allow for more images in a tight spacing, in addition, this grants extra space for annotations and information. 

Screen Shot 2018-01-17 at 14.45.38.png

Screen Shot 2018-01-17 at 14.46.03.png

Another thing I noticed with this portfolio is the depending on the selected tab it will change from grey to orange fitting in with the whole colour scheme of the portfolio. 

3. http://www.roandcostudio.com/#0

Screen Shot 2018-01-17 at 14.50.09.png

This portfolio is very bold and in your face with the homepage being a display of artwork with the name of the company in the middle of the image. Where this portfolio excels is the user interface on the website, depending on whether you press either the left or right side of the page it switches to different pieces of artwork;

Screen Shot 2018-01-17 at 14.54.42.png

Screen Shot 2018-01-17 at 14.55.01.png

One thing this portfolio failed to do is consider whether the viewer is still able to see the different tab depending on which artwork is showing example;

Screen Shot 2018-01-17 at 14.56.42.png

Screen Shot 2018-01-17 at 15.01.00.png

Here it’s nearly impossible to see the tabs due to both the background and the text being black, what they could have done is change the text’s colour depending on which image is being shown. This would have also been an opportunity to make the portfolio look visually pleasing with the tabs complementing each image differently due to its varying colours. 

Regular Websites

1. Uglytub.com

Ugly-tub.jpg

This website is unbelievably bad, with a combination of poor quality images, unreadable fonts and bright bold colouring makes this website very unappealing to the viewer. In addition, this website has very limiting frames that minimise the images to small boxes leaving zero negative space making the page look clunky and messy, even the text at the top is squished together making it hard to navigate around the page. 

2. mrbottles.com

 184.png

Here is another example of bad website design, it’s impossible to tell whats going on due to how cluttered everything is, there are even images covering text which is a big no-no, it’s near impossible for the viewer to navigate throughout the page. The colours and text used don’t stand out, having both shades of blue makes the text blend into the background. There are no clear headers and the uses of the italic and bold font have been used incorrectly.

3. https://www.virginamerica.com/

Screen Shot 2018-01-18 at 17.03.39.png

Virgin America’s website design is very clean and looks easy to navigate around the page. They have clear, visible tabs as well as very geometrically precisely placed text as if placed on a grid, which is visually pleasing.  Unlike the websites above Virgin America has refined their information to keep it small yet informative, this leaves them with a lot of negative space to play around with. This also keeps the page looking very clean and inviting.

Web browser functions

HTML – Hypertext Markup Language. It is the language used to create web pages.

CSS – Cascading Style Sheet. CSS portrays how HTML components are to be shown on screen, paper, or in other media.

Javascript – Is a high-level prototype-based programming language.

jQuery – jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AJAX – AJAX is not a programming language. AJAX is a set of Web development techniques. Ajax is a client-side script that communicates to and from a server/database without the need for a complete page refresh.

Client – A client is a piece of hardware or software that accesses a service (such as a website) from a server.

Database – A database is a collection of information that is organized so that it can be easily accessed, managed and updated.

Web-Server – A web server is a PC framework that procedures demands by means of HTTP, the essential system convention used to circulate data on the World Wide Web.

PHP – A scripting language that is generally used to make dynamic Web pages. Joining linguistic structure from the C, Java and Perl languages, PHP code is implanted inside HTML pages for server-side execution.

SQL – Structured Query Language (SQL) is a standard coding for relational database administration and information control.

mySQL – MySQL is an open source relational database management system (RDBMS) based on Structured Query Language (SQL).

ASP – ASP is also an abbreviation for Active Server Page. An application service provider (ASP) is a company that offers individuals or enterprises access over the Internet to applications and related services that would otherwise have to be located in their own personal or enterprise computers.

Angular – It allows you to extend HTML’s syntax to express your application’s components clearly. AngularJS eliminates much of the code you would otherwise have to write yourself.

What do these parts of the website do?

Header/Banner – Headers are found at the top of almost every website. The header usually consists of features such as the navigation bar, the brand logo, search bar e.t.c

Logo – The logo is used as an identifier. The logo is usually placed inside of the header and is a way for a user to easily identify your brand.

Slider – This is a slideshow used on the website, this is most commonly used to showcase different images and can be seen almost anywhere on a website.

Navigation bar – The navigation bar is the bar scene inside of the header in the majority of websites. Its purpose is to break up the website into different sections of similarities e.g. all sketches would be placed under the ‘My Sketches’ section of a website.

Gallery – The gallery is a section on the website that provides you with various different images that are related to the website.

Thumbnail – Thumbnails are smaller versions of original images used to give the user an insight into what they are about to click on, but to also reduce bandwidth and download time.

Lightbox – A Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

Footer – The footer is much like the header, however, it is placed at the bottom of the web page and can consist of different pieces of information such as contact information.

Social Media Icons – Social media icons are small icons of the desired social media platforms, often found in the header or footer, and when clicked will redirect you to the desired platform.

Responsive Web Design – Responsive Web Design (RWD) is a feature added to websites that allow them to load differently to fit different screen sizes

 

Media log

Costume and prop planning

Masks

steamworkshop_webupload_previewfile_171558053_preview.jpg

Outfits

MW40_341R_10_CALVIN_KLEIN_FORMAL_MAIN.jpeg  fb.jpg  Poly_tracksuit_black_a3ebdbfa-9f5d-4f77-916a-76a7dd31d922_1024x1024.jpg

Probs

396774-the-10-best-ultraportables.jpg  IDShot_540x540.jpgF7HTE72I21R0Q5O.RECT2100.jpg

Firecracker-Day2-Blueprint.png 61-59GNP6jL._SL1500_.jpg

5035334-BK000.jpg best-airsoft-pistol-reviews.jpg

Media Log

18th Jan – During this week me and my team discussed which story we were going with, which we then decided to plan out the basis of on a powerpoint for a presentation. This contained the story, props and potential locations we could use.

25th Jan – During this week we went and created an in-depth script to help us whilst filming and to help us figure out location and probs.

1st Feb – Today we noted all the props we’ll be using along with adding the final touches to the script.

 

 

Fuse Character

When I first found out we were tasked to create our own character and animate them around a course the first thing I thought of was the army training camps, so straight away I decided to go and look up a bunch of different clothing for navy seals. I realised different sectors have very different gear so I mainly prioritised on researching how the field operators and stealth marines looked. Heres a little mood board on some of the pictures I looked for inspiration.

[Character Moodboard]

Here are some sketches I drew for the character that I would create in Maya. I eventually went with the field operator look as I felt this would make more sense.

scan_kc62409_2018-03-14-10-12-16.jpeg

During my research, I found a program called AdobeFuses which allows you to create a character and download the files and textures which can be imported into Maya. By doing this I would spend a lot less time creating my character and more time spent animating.

Screen Shot 2017-11-29 at 09.36.20.png

As you can tell by the images each slider corresponds to a different part of the selected body area, moving these sliders up and down will increase or decrease the value selected. Here what I was aiming to do was make my character look a lot younger the base model I selected. I tried to do the by decreasing most of the sliders.

Screen Shot 2017-11-29 at 10.10.57.png

Screen Shot 2017-11-29 at 10.11.34.png

Here the base model was very masculine and had a lot of muscle so I decided to reduce this and make the torso area a lot smaller.

Screen Shot 2017-11-29 at 10.51.21.png

This was a test to see how the clothes would fit my character.

Screen Shot 2017-11-29 at 10.51.08.png

Here is the final result. I ended fitting him with a 1 layer of standard camo clothing with gloves and a tactical balaclava. I felt this best suited my character as it did pull off the field operative look I was going for.

Screen Shot 2018-01-10 at 09.42.48.png

Animation research

Software

For animation, Pixar generally uses heavily modified versions of Autodesk Maya and 3DSMax. Pixar’s also has a secret modelling/layout software un-accessible to the public called Presto as well as a software called Marionette which is exclusively used for rigging. I also found out they have specific software for rendering and texture processing called RenderMan and some other auxiliary programs I couldn’t get the names of.

However, due to Pixar frequently collaborating with Disney’s Animation Studios and ILM, the animators most likely have access to Disney’s special programs like Meander, Hyperion, Zeno, and whatever other software Disney has hidden away.

Animation Techniques

Using the art department’s model packet (which a set of informational drawings) the characters, sets and props are either sculpted by hand and then scanned in three-dimensionally or modelled in three-dimensions directly in the computer. Since these are 3D objects, they’re modelled on the X, Y and Z axes and can be rotated and viewed from any angle. When you first begin to model an object, it doesn’t have any surface colour or texture, all you see on your screen is the object’s skeleton(wireframe). Once the wireframe is made they the models are then given “avars”, or hinges, which the animator will use to make the object or character move.

Pixar’s animators choreograph the motion in each scene by defining keyframes or poses. They do this by using computer controls and the character’s avars to define key poses. The computer then creates the “in-between” frames, which the animator adjusts as necessary.

Lighting

Lighting had a very key part n this film as it set a tone for the whole film s soon as it started. The first scene is the babysitter getting interrogated which instantly raises the question “What did she do to get in this position?”. What they’ve used to create this lighting technique is something similar to Maya’s Spotlight tool which they’ve directed right t the characters face.

Another key scene where lighting was used was when Jack-Jack was teleporting through walls, the area as a whole was really dark due to it being a closed off room (lights were switched off perhaps), however, the effect from Jack-Jack teleporting created enough light to light-up the side of the room.

In conclusion, lighting reflects the mood of the character, for example, giving the scene a Blackgrey filter would present that the character is sad and unhappy. unlike when the scene would have more brighter and vibrant filter to create a much more happier tone of mood.

Process Of Animation

Storyboarding

An episode’s animation begins with storyboarding, a process that contains multiple steps, and ultimately produces the materials an animation studio will use to complete the episode. In early seasons, storyboarding was done entirely on paper. In mid-season, the show switched to animatics — a series of images paired with the voice track — that would be edited on tapes. Relatively recently, storyboards transitioned to digital, in which all of the art and audio is uploaded to an online hub accessible anywhere from computers and smart devices.

Storyboard Revision

Storyboard revisionists get roughly two weeks to revise or outright create new scenes, following notes from the previous screening. Because hundreds of hours of animation and design have already gone into the storyboard, revisionists try to salvage parts from scenes that have been cut by repurposing them within the revisions.

Layout

The layout is the closest phase to what the layperson imagines animation to be — that classic image of a Disney cartoonist fanning paper back and forth, sketching characters into motion. Normally the layout is a digitized version of that method. Each animator — divided into character and background artists — uses Pencil Check Pro to animate roughly 15 scenes for an episode, making as accurate a depiction of the final product as possible. While storyboards are rough, the layout is refined.

Timer

As soon as a character layout artist finishes a scene, they deliver to the timer. A timer’s role is to write exposure sheets, the notes for the studio on how to interpret and apply the work of the story layout artist. If the layout artist’s work is the wood for your new bookshelf, the exposure sheet is the instruction booklet. And like any furniture instructions, it’s indecipherable to everyone but the experts. The role is called “timer,” because, in the past, the timer broke down all dialogue and animation, assigning tiny pieces to specific frames — or times — of the episode. Each line on the exposure sheet represents a frame or group of frames of film. To the right of each frame number, the timer writes what needs to be animated and how.

Checkers

Two checkers review everything — all of the character layout artwork, the exposure sheet, and the printed materials — and they make sure that every piece of art and line of direction matches on the exposure sheet.

 

 

 

 

 

 

Game Trailer Ideas

                                 Yu-gi-oh

Synopsis 

The main character joins his group of friends expecting to play the usual game of Yu-gi-oh, however, he unexpectedly finds out there’s a new digital released version for mobile. As he leaves his friends whilst playing the new mobile version he’s conscious of someone following him, an unexpected challenger? Who knows.

Story

The main character goes to join his group of friends expecting to play the usual game of Yu-gi-oh as is tradition to his group, to find out they’re all on their phones. When he asks what they’re all doing he finds out earlier today a new digital app for Yu-gi-oh was released. In a burst of excitement and fear for getting left behind, he installs the app quickly adding all his friends and getting help with all the features. As he leaves his group of friends to go home (the viewer assumes) You as the viewer can see someone loosely following him. You then see from the main character’s point of view, him looking at his phone seeing a notification saying “You have been challenged to a duel!”, as he goes to look around to see if they’re nearby the mysterious person following him raises their head allowing for both the main character and the viewer to distinguish who it is. The mysterious character is a girl on her phone who smiles at him telling both the viewers and the main character she’s most likely the person who challenged him.

The battle then concludes with the main character winning and getting a rare card (item), which he then goes to tell all his friends in a group chat (this is a first-person view) to which they reply with emojis and phrases such as; OMG and NO WAY!!. The last shot is the main character smirking to which the trailer ends.

Colours

-The visual effects on the phone

-The main character will be wearing brighter colours than everyone else (signifies he’s the chosen one or just that it makes him stand out a lot more.

-The mysterious character will be wearing darker shades, but lighten up after the confrontation as if an evil has been lifted.

Target audience

-As Yu-gi-oh already has a massive following it’s guaranteed to get a lot of view/downloads

-Children and up as it is a popular cartoon aimed at 8+, I also expect the trailer to appeal to the same audience.

-People who play app games to pass time, for example, workers on public transport.

                                   GTA V

Synopsis

The main character turns into his custom character from GTA due to him looking at a billboard poster saying GTAV VR is not out. As the world around him turn into Los Santos he goes doing everything he couldn’t normally do in today’s society, from robbing banks to stealing random cars parked on the street.

Story 

After looking at a billboard poster stating GTAV has finally been released the world around him starts to change into Los Santos (City in GTAV). In then pans to the main character wearing VR goggles which gradually vanish to signify how real it feels. He then starts by robbing a car which he drives to the store to get a new outfit, using the pistol he found in the car he robs a local shop to get money to buy guns with.

He then gets a phone call from a friend inviting him to a heist which they carry out. As the police arrive they go to bust out the bank doors and escape which is where the trailer ends.

Colour

-Bright to contrast the fact he’s doing illegal activities in broad daylight

Target Audience

-GTAV already has a massive following so all the fans will definitely go out of their way to view the trailer.

-VR fans, as VR is an ever-growing genre man fans of VR are sure to check the trailer.

-18+ Due to the language and adult humour within the game, the trailer is very reflective of that.

 

A WordPress.com Website.

Up ↑