Wire Frames

A wireframe is an early and rough design layout of websites and application.  This represents the different pages, as well as where different placements for elements will be located.FHWeb_Client_relay_server_diagram.jpg

The client connects to the server using https, and finds index or homepage, to send back to the client, it gets this information from the database.  The client is the web browser, Firefox.

 

Advertisements

FMP Work

Proposal Document:

FMP Digital Design – Proposal Template 2018 (1) 1 1 1

japanese ink drawings moo board.png

mood board.png

mood boards.png

mood board 1

amurai research:

In olden day Japan, the country was run by a leader and different dynamos which here like clans, the daimyo waged wars between each other to become stronger however during an outside threats they would join together, this wasn’t always the case as sometimes some clans declined to join wars because other clan joined. This brought consequences like trade embargo etc..

The samurai armour depended on the clan as well as the rank of the samurai. Some samurai wore wooden chest plates and arm guards where some only wore clot clothing.

Bushin war area research:

The bushing war was a civil war between the imperials and shogun which were technologically apart where the shogun believed in katanas and old believes where the imperial belief in technological advancement and industrial revolutionary

Proposal Explanation:

The name of the project is psychopath and I’m making a motion comic, slow-motion animation where the elements, movements and background move very slowly to imply an action and not fully complete the action. I’m going to make this using photoshop, after effects, and premier pro for final touches and sound. the style of the animation will be something close to Japanese ink drawings with my own take at them, where I will make the drawings feel more like watercolour as well as Stalinising them with this old, warned out look.

The main focus of the animation is art style and story telling. The story will be about civil war in japan in 1886 as the imperial japan tries to end the times of the samurai.

My starting point is the interest in Eastern culture and rising attention from the west side of the world, as people are becoming more interested in learning and exploring eastern culture. The film last samurai helped me choose the period of time and what I wanted to do for my project. It inspired me to learn more about the Japanese civil war as well as about their life back then and how the modern and old japan fought with it self. The war was between the imperial court and the shogunate(samurai). The story is about a samurai who’s father died in battle as being the oldest son he inherits the clan as well as his fathers katana. Going through battles and countless killings he changes, as he changes his guards and friends turn away and leave, the character turns into a psychopath killing and killing not to protect but to kill for fun to forget his pain from lost ones and those who turned away form him forgetting about the war, his brother, who has turned sides, will kill him at the end where there will be a shot of him kneeing on the floor in front of his brother with a katana pierced through him he will cry and slowly the frame will start being portioned into bits that fly off shattering the image. The story will be narrated thought his brother saying it example”there was a man” I will voice the animation in Japanese and do english subtitles. The colour of the animation will be black and white which important part will be underlined with red like blood, mood, leaves which signify the message.

2d animation Research:

Animation boiling.

Example of animation boiling: https://www.youtube.com/watch?v=gnB6xvmIfY0

Animation boiling is when the animation art style bounces around. Its mostly used by cartoon and simple animation to make the character or object look like its moving.

Processes of animation:

The first step of successful animation is making a storyboard or storyboards that you can represent your idea and see how will it work as well as think about the effect, sound effect, transitions, lighting, staging ,props. When you are making your animation you can always look back at it and see if what you making now is the same as you were planning to do so.

Then you can start thinking about possible voice over or soundtrack to help you support your idea as well as help representing it to your audience, this is the time to start thinking about your target audience and what changes you should make to make it more suitable for the chosen target audience.

Start drawing sketches for you animation and your props as well as characters and backgrounds and see how you can make sure to keep the style of the drawings consistent. After sketching out different poses, emotion, face expressions, movements you can start making the characters and props for the animation, following your story board and looking at your sketches to make sure you follow the plan and story you laid out.

In the old days they had 24 drawings for 1 frame to create smooth movement as well as separating the background from the character to show the movement, they would switch the drawings of the character and take a picture, change to the next drawing take a picture, then they will swap the background when needed for the transition.

The 12 principles of animations are basic rules for animating.

For example having physics and making something look realistic needs to apply to real world action. Like a ball bouncing around and hitting objects or walls need to squash and stretch so the ball looks like its hitting a hard object applying pressure and making it look like the objects have a fill instead of feeling empty. This was one of the principles the others are:

  • Anticipation
  • Staging
  • Straight Ahead Action and Pose to Pose
  • Follow Through and Overlapping Action
  • Slow In and Slow Out
  • Arc
  • Secondary Action
  • Timing
  • Exaggeration
  • Solid drawing
  • Appeal

For character movement and action as well as face expression its easy to us a bone rig tool or parent tool to create smooth movement as well as saving time moving each anchor point on the character. These tool make a connection with 2 anchor points on 2 objects pulling the object connected to it.

These principles and tools apply to stop motion animation as well as 3d and CGI.

This is Kimi no na wa (Your name) directed by Makoto Shinkai Is a modern 2d animation aka anime film. This is high budget production anime that uses 2d hand draw animation with added cgi elements and effect to make it look semi-3d at times.

This animation use music and character interacting with each other to create sympathy and make the audience attracted to the characters and story. The animation also use music which now every single production film has because it helps to create atmosphere and make the audience feel the way the narrators wants.

The two animation are far apart from each other in age however they are still both 2d animation. Kimi no na wa attract audience with its sound, animation style and music where tom and jerry is old and well known attracting audience was easier back then because it was something new.

It uses very complex techniques like reflection, and it uses skeletal animation to make sure each part of the body feels and move realisticly and having laws of physics.

These are different animation styles. For this assignment we were asked to do a 2d animation it can either be traditional or vector based.

One punch man is a westernised animation that got really famous for its story and the animation style of fight scenes and the way that characters express themselves. The animation is a 2d animation that tricks the viewers into thinking some parts are 3d.

The story is original and fresh. Its about a super hero that is insanely strong defeating enemies with just one punch. The story seems boring however its not because the character makes himself look like he is just stealing other peoples. credit, making the show take twists and turns.

Adobe after effects is a program that is very good to use for 2d animation because its simplistic, it support 3 party add ons and it contains already scripted commands for example a sphere package where the user can insert a mesh and it will change that mesh into a sphere, it also fills in the timeline for the user to complete the animation.

HARMONY ADVANCED is a software that can be used instead of adobe after effects is something that the professionals use to create animation and short animated films.

ANIME STUDIO is another animating program that even support unreal engine that is a game engine however its still and good program just to create character movement because it has really good skeleton system where the user can move parts of the body and record for the animation.

Parallax scrolling:

Is a animation technique where there are 3 different layers that move at a different speed to create a effect that makes a moving effect. Parallax scrolling is used in a lot of retro games like sonic the head hog with quick movement as it makes the game feel like its moving around vertically instead of staying on the same background. Its also some times used in web designs to create moving like sites.

With my abstract water colour technique i can make the water colour transition between frames in after effects.

Here is an example of transition between frames in the animation

PsyhcoPath Box art

walking away

walking away copy

fighting

character walking

Music research:

Abstract water paintings:

img10

image example: reference https://graphicriver.net/item/abstract-watercolor-ink-photoshop-action/20953880

My technique:

I’m mixing this technique with Japanese ink drawings to make a abstract image. All my frames are done digital using the dissolve brush to draw the the lines and actual drawings. Then i use an image of water colour that i can find on the internet or make myself with water colour paint on a piece of paper. I fully saturate it of colour then put mess around with contrast and brightness this depends a lot on the frame to see how bright it should be or how dark. I apply a Gaussian blur to the drawing to blur out the dissolve lines which creates this rough line finish. Then I set the drawing to overlay mode which overlays the water colour making it abstract.

References

History about the bushin war.

https://www.onwar.com/aced/chrono/c1800s/yr60/fjapan1863.htm

https://en.wikipedia.org/wiki/Boshin_War

http://yabai.com/p/3217

https://www.warhistoryonline.com/history/last-shogun-first-shots-boshin-war.html

https://www.khanacademy.org/partner-content/asian-art-museum/aam-japan-topic/aam-japan/a/samurai-armor

Title A Guide to the Japanese Civil War: The Boshin War Of 1868
Author Charlotte Adele

Japanese Ink Painting: “The Art of Sumi-e” by Noami Okamoto

https://www.amazon.co.uk/Japanese-Ink-Painting-Art-Sumi/dp/0806908335/ref=sr_1_1?ie=UTF8&qid=1521731246&sr=8-1&keywords=japanese+ink+drawings

“Boshin senshi” By Shizan Kawasaki History book

https://www.amazon.co.uk/Boshin-senshi-History-1868-Japanese/dp/B003QHYLFY/ref=sr_1_1?ie=UTF8&qid=1521731243&sr=8-1&keywords=boshin+war

Film “The Last Samurai” Directed by Edward Zwick

http://www.imdb.com/title/tt0325710/

Book about the japanese civil war and how people lived in those times.

Japanese ink drawings

Artist JungShan does a lot of Japanese ink drawings with humans.

http://jung-shan.blogspot.co.uk/

https://pixels.com/profiles/mariusz-szmerdt.html

https://www.youtube.com/watch?v=ofkgRd6BzuE

https://www.youtube.com/watch?v=wX8yRYGzSi8 by Shozo Sato

https://www.youtube.com/watch?v=3qrr6JosLbI beginners guide on how to use the brush in painting with the japanese style

https://painting-art.wonderhowto.com/how-to/begin-sumi-e-ink-painting-164617/

Abstract water colour paintings

https://www.youtube.com/watch?v=oG3W0xB-lrM

https://www.youtube.com/watch?v=Y-vIBoHEtpI

Abstract water colour in photoshop

https://www.youtube.com/watch?v=Tk-2vrCwM9o

https://www.youtube.com/watch?v=SJSdqYBu6gA

http://10steps.sg/tutorials/photoshop/creating-an-abstract-watercolor-wallpaper/

https://www.photoshoptutorials.ws/photoshop-tutorials/photo-manipulation/create-amazing-watercolor-artwork-photoshop/?doing_wp_cron=1521728404.9405119419097900390625

Motion comic animation

https://www.youtube.com/watch?v=tG0UUdGI01o&t=1502s

This is very close to what I am trying to achive this slow movement that implies action but doesn’t complete the motion fully. This is also very similair to paralax scrolling. Superman :Red son

https://www.youtube.com/watch?v=x4oqfCqdyBU

https://www.youtube.com/watch?v=kgsRhyJQXPg

DC “Watchmen” motion comis part 1 and 2

My story

1868 japan. The civil war is at the brink of the end, a young shinobi finds out about his fathers death, inheriting a village as well as his fathers katana. Inexperienced going to war with his remaning guards, which most of them die. Some leave, some join the other side. After many murders and deaths, he changes losing his mind, going from

Media Game Trailer

04/01/2018

At this stage we still do not know our groups and we have to decide 2 ideas, games to make the live action trailer based on.

Portal 3: This is a highly anticipated game and it won’t require a lot of props as well as cgi. The 2 robots that are in the game will go through portals on the stairs, ( we got a preview of that). Then the two players will have to complete puzzles like in portal where they are separated by a wall and they need to use their portal gun to get across the level. This will require them to put the box through a portal and put it on the button so a door opens for the player so they can get in a lift and go to the second phase. The film will end when two players will go down the lift. To make the portal effect we will wrap a hula hoop with blue and yellow paper and make it glow in photoshop, this part doesn’t have to move. This idea will save time on massive editing.  2 main characters that have to work together to beat the level. the main character atlas and P-body (blue and orange).

My second idea is counter strike: This is a 5v5 game where there are terrorist and counter-terrorists planting the bomb, as terrorist and they will need the counter-terrorists to defuse the bomb. The players will react how the game runs which is high tactical military tactics. For this, we will need a couple of plastic guns and some costumes, mostly bandanas and mask for the counter-terrorists. The CGI and sound for this would have to be gun sounds from the game with a possible explosion which could be part of a gameplay. The players will run through a map and it will swap to the gameplay.

These are my ideas, i decided these based on how easy the idea was as well as how realistic it would be to make. These ideas would require only some props and not much cgi.

11/01/2018

we have proposed our idea to our group  and together have chosen a main idea, planet coaster, as a game for the trailer. We have also started to write up a treatment for the trailer.

18/01/2018

We have continued to refine our ideas as well as  work on the art and story for the trailer.

25/01/2018

We have completed all the documents reeces, contracts, treatment etc.. Also within this week we have started

01/02/2018

We have started to think about sound, and we have decided that we will have no dialogue or ambient noise and use diegetic sounds like clock ticking and scribbling.

08/02/2018

We have Have filmed our shots in this week using a still frame camera shots. We were happy with how the shots turned out and we needed just a double lesson on Thursday. As our shots plan for the trailer didn’t have any dialogue sound we didn’t need to record or worry about ambient noise levels in the room

 

15/02/2018

This was a half term week where we worked individually to put up files into a trailer, we have done this by yourself to later proposed the idea to the others.

22/02/2018

We have decided to use some of the sounds from the shots that we recorded for because we thought that the background noise of cars and fans created this office like atmosphere. At this point, we had a half-finished trailer in premier where some of our clips were in place however it wasn’t finalised.

01/03/2018

We have finished the trailer and colour graded it as well as added a blue tint to them to create this cold boring atmosphere which was completely altered by this warm colour of the gameplay to contrast the boring and fun which the trailer was about.  Showing how warm and fun the gameplay was and this was enhanced by the boring reality. The trailer was implying that the game can take your mind off the reality.

08/03/2018

We have done a final render and finished the trailer as well as made sure all the sheets and paperwork was ready to hand in, as well as made little more storyboards and art sheets as well as a mood boards to further refine and explain our idea.

 

 

 

 

 

Evaluation:

For this assignment, I have used various camera angles as well as techniques. I have created the film noir as well as the game trailer to show and use these techniques. In the game trailer I was the actor, however, we all have contributed to filming as well as discussing shots and evaluating the footage we got on the plan. Before this, I have prepared all the paperwork needed for us to film the game trailer as well as the presentation that we have presented to Jhon and Lewis to propose our idea for the game trailer. I have come up with the layout of the presentation as well as help refine the idea that we have chosen in a group.

The shots we have used to create the trailer were still shots only to create this non-changing environment which will help us create this boring still atmosphere within the office.  This helped us create a contrast between the boring office work and the happy and vivid colourfull gameplay. This is to create the physiological warfare between the office and having fun.

A lot of the audio we have within our game trailer was created by us either recorded or created by speeding up or reverting audio we already had. We have used premier pro to edit the footage.

If I could work again on this project I would make sure that my group does more prop and costume planning, to create a more office-like environment. I would also get more shots as well as use more techniques to experiment and play around with different atmosphere inside the office. This would give a lot more footage to play around with to make the trailer even better. I think that we didn’t achieve the full potential of what our idea could have been. I think that we didn’t fully nail the stressful atmosphere in the office. The trailer didn’t feel stressful enough and the barrier between the gameplay and office footage wasn’t refined enough to make the big difference between fun and boredom.

 

 

Evaluation for website

In the website task I have designed and created a functioning website using muse. My website uses flat design, with the combination of white and grey as the 2 main colours, as well as black for fonts on the gallery page. Overall I think I done well on the design however I should have spent more time  on the usability of the site refining some of the light boxes and navigation around the site.

I have evaluated and research on what so popular about certain part of different websites, as well as fashions. I have done a flat and simple design because its a portfolio website, the users that are going to be using this portfolio are going to be looking at pictures and how the website is designed around my work and how it help to portrait my work.

I have have made the website with the focus of  my work as well as users experience. I done this to fully show of my work and compliment it with the colours. I have research using adobe color to see the best contrast around the website.

In the end I think I have done pretty good with the research and plan however due to being ill I didn’t complete my site completely, however I will continue working on it and finish it. I could have also worked more on book and plan as well as do more mood boards and wireframes.

2 live action trailer for games

Portal 3: This is a highly anticipated game and it won’t require a lot of props as well as cgi. The 2 robots that are in the game will go through portals on the stairs, ( we got a preview of that). Then the two players will have to complete puzzles like in portal where they are separated by a wall and they need to use their portal gun to get across the level. This will require them to put the box through a portal and put it on the button so a door opens for the player so they can get in a lift and go to the second phase. The film will end when two players will go down the lift. To make the portal effect we will wrap a hoola hoop with blue and yellow paper and make it glow in photoshop, this part doesn’t have to move. This idea will save time on massive editing.  2 main characters that have to work together to beat the level. the main character atlas and P-body (blue and orange).

My second idea is counter strike: This is a 5v5 game where there are terrorist and counter-terrorists planting the bomb, as terrorist and they will need the counter-terrorists to defuse the bomb. The players will re act how the game runs which is high tactical military tactics. For this, we will need a couple of plastic guns and some costumes, mostly bandanas and mask for the counter-terrorists. The CGI and sound for this would have to be gun sounds from the game with a possible explosion which could be part of a gameplay. The players will run through a map and it will swap to the gameplay.

website word meanings

HTML= Hypertext markup language, this is a programing language that displays text and with tags and information.

CSS= CAscading style sheets

bootstrap= its a css framework that was developed by twitter which helps you in making sure that the website looks the same on different sites and screen sizes

javascripts= is a programming language that enables the user to go to different web pages and click on links

JQuery= is a client to simplify the use of html.

AJAX=its a concept for a client to help the web to communicate with the database without needed to refresh or restart the website

datebase= a  base where date and memory are stored, this can be accessed through a server, this will keep data from the site, for example, login details.\

Client= is a computer or a desktop that can obtain data from a server.

WEB-server- its a server that takes and sends information from the database

php-server side script used to develop websitres

sql-is a language for managing datebase, taking input information and storing it within the datebase and sending it to the client

asp- another program to help build dynamic websites

angular-its  a program that helps to re use your code to build aps and websites

logo- its  a graphic that represents and business or organization

slider- its a horizontal bar that rotates text or information

navigation its a bar that helps to navigate around the website using links and urls

links- its a url- text that is connected to a another website or page

gallery- a group of pictures that are displayed together on a site.

thumbnails-small images usually linked to the bigger versions

lightbox its  a frame that contains viedeos and images with interactive elements to navigate around them.

stylesheets- they contain all information about the websites structure, design and graphics

Pipelines/task1

15 stops

storybooks comics vision,

script

storyboards,

editorial sound and voices, music making the animatic

art develop thins visually, make the art style of the movie

modelling build characters the environment props, do the 3 dimension and scalp the characters.

rigging  puppeting, muscle and how the object move, face control

Surfacing colour and textures, and how things look

rough layout this is where its start to look like a movie

final layout finishes shots and prepare shot for animation stereo pass blocking

animation animators bring the characters to life like actors

crowds in charge of the extras of the film create a bunch of animation and repeat them on different characters automated

character fx style and everything that moves on the character hair clothing

fx explosions all effects and things like footprints snow, weather

technical director where things go wrong

mapping department skyes mauntains buildings

lighting putting light into the composition

image finaling

sound design music sound, dialog