Lecture Ten - Week 12 - Website Development / Final Motion Graphic Critique

Webpage - 

I have started developing from the HTML lecture in class a webpage mock-up to put the motion-graphic into as I haven't heard anything from Timmy as to the website he was working on. With the new colour scheme, I am working off the wireframes originally mocked up for presentation back in Week 3 -

Although the webpage I am creating will not be technically as great as it could have been if I was more aware of the situation I would be in, this webpage is something that once I have finalised my motion-graphic and am really happy as to where that is, for hand in. I will try and refine the webpage.

Here is the progress - I have created this from scratch, and on early weeks did watch all the lynda tutorials which have really helped for this.

Final Motion-Graphic Critique from Mon - 

- Look at your audio levels, they are a bit low and need to be punched up a bit. 

- Look at those opacity levels on type and see if you can soften them up a bit - The colours aren't working as harmoniously as they possibly could. 

- Keep the overall composition in mind also - focus should be in the centre - this is where you need to direct peoples eyes if you're working with a lot of negative space - anything below the centre line tends to fall off the screen

REFLECTION:

If the website was progressed and developed from the early stages, our webpage would be a stronger illustration of the ideas and have a lot more functionality fitting the illustration style much better and really reflecting the webpage the animatic expresses.

Going back and looking at brief - 

Web combined with Motion-Graphic create a narrative.

Narrative to engage, inform and a call to action for your audience.

Things to consider with the Motion-graphic

- I have considered much of the brief, and there are only the small design critiques that need working on.

Things to consider with the Webpage 

- The webpage is apart of the narrative, proposing the solution to the problem
- The main page of the website be more dedicated to the scenario and what you can do to help.
- How text, image and interactive nature can enhance the story

Submission - via stream

-Website with the embedded video - packaged in ZIP File named - (e.g. BaileyJo_BondiMatt.zip)
-Submit your story-boards PDF
-Wireframes PDF
-Workbook
-Peer Review Form
-Animatic uploaded to workbook?

Research into text - Looking at type in motion-graphics

What layouts do they use, how are the types coloured ?

The type in this is creative how this moves into the animation -



This type with the change of the whole screen when type appears.
- Something I should have used more of in my motion graphic is the stretch, although there isn't really parts where this would be needed so much.

This motion-graphics parts and animations look so interesting and work so well, I have gone for a strong narrative theme that more tells a story than the abstract feeling like this. The animatics are illustrated really well though.

Lecture Ten - Week 12 - Homework - Final development Motion Graphic

Final Video for a final critique - 

I have emailed this video to get a final critique, the type is smaller now but does feel less in your face and blocked.
Hopefully the feedback will be much better and the motion graphic is looking successful for final hand in.

Final Critique from Kristen Mabey on Vimeo.

From here I am going to develop a webpage to show I have learnt coding skills throughout this paper.

Lecture Ten - Week 12

Tutorial 

Further Critique Motion Graphic - 

Curning and leading on text - all lettering tighter
Opacity on type - soften white 80% and blue
Use a lighter blue
Type could left aligned and same text size.
Rubbish pile on the light background - doesn't work that great.
Lighter background?
Try lighter yellow coins
Tidy spacing on stop - Make it smaller?
Hang on logo
One frame shorter so there is no black at end
Take off names

This is looking way better and definitely progressed well since last week, finally starting to look resolved!


From here I will refine the final critiques and work on positioning the motion graphic into a webpage.

Lecture 9 - Week 11 - Taken on all critiques

I have taken on all critiques and really developed the motion graphic.
From here I am hoping critiques tomorrow go well and that I get some positive feedback about where the motion graphic is.

Here is the updated video -

The colour scheme is much cleaner and the whole video links together well. The transitions also are more legible and simplistic.

Going into final critique from Kristen Mabey on Vimeo.

Lecture Nine - Week 11 - Development

Colour scheme - 

The colour scheme I found in research I have applied to the motion graphic -
I have used the 12 for the motion graphic, and Timmy could use the three of the 5 for the webpage.

This colour scheme looks much better, Timmy and I are meeting tomorrow to go over our work and the webpage and video together for a final critique on Monday, I am really hoping that the teachers are going to like our new colour scheme. Overall it does work well throughout the video.

Lecture Nine - Week 11 - Back to research

Self-Critique -

After class today I am really needing to desperately change the motion-graphic, I need to be positive and believe that this can become the awesome graphic it can be. The pace is good and the ideas are clear with the script, so I just need to work on everything else, and the best place to go from here is back to the research.

Timmy is working on the webpage, which also needs much more development to get towards where the final piece should be. We are meeting on Saturday to discuss and pull the progressions together.

Research from critique and points that we MUST take on to get a well resolved final - 

http://www.premiumbeat.com/blog/7-must-know-guidelines-for-motion-title-design/
- Has some important points about making a motion graphic

Lecture Nine - Week 11

Tutorial -

Getting final critiques - 

Motion-Graphic:

Negative space on sides and top and bottom with type.
Type layout - Make the type look better and more stylised.
Text white - colour pallet is still too flat. Gradient on the sides or a vignette.
NZ map smaller
Get colours right - this is the biggest downfall.

Use only a couple best before dates illustrations

I found the feedback very negative and there is so much to do in this next week. I am feeling really concerned as I really liked the motion graphic.

 Critique on the webpage was the webpage is looking good, it is very simplistic but it is a progression.

Look on motionographer.com and Adobe Colour

Lecture Eight - Week 11 - Refining Motion graphic

Refinement of Motion Graphic - Development

Working further on the colour scheme, the transitions and the backgrounds to make the motion graphic more interesting. This is starting to look much more refined and interesting with the designs looking nice and successful. The only thing I could work on now is the refinement of the text at the end positioning it more centred on the page instead of from the same above alignment.

I will  also from here show and get some critiques from others about how they feel and whether they like the motion graphic -

Colour Scheme Change from Kristen Mabey on Vimeo.

Critiques from others -

The sound could get turned down as at times the music overpowers the voice over. The alignment with the fridge looks funny and the spacing needs changing. It may also be too long in length? But maybe this is because of the music, so we could try a few variations and see what works best for the final. Otherwise the graphics and transitions look good and work.
So some of the transitions are a bit fast and a bit harsh on the eye. Also at the start with the truck that's hard to look at because it goes to fast. The voice needs to be recorded again because there were pops from speaking to loud and the music needs to be quieter but it looks really nice good job.

Lecture Eight - Week 11

Tutorial - No Lecture 

Motion-Graphic Critique - 

The backgrounds do need changing in colour urgently. Though the video the pace is really good, some of the transitions need advancements and changing as they are boring in the beginning.

Pausing and refining each frame -
1st Scene - zoom in and out of the logo
Money, try something different, zoom into the cheese?
Stop sign - just have STOP and maybe bounce text?
-Change the colour of NZ
-Update the colour pallet
-Best before transition - try bottom up or slower
-Pig blows up and suddenly into the pile?

The biggest critique urgently is the colour pallet and background. The colour is too strong and the food waste is waste focus on the waste colour. Use an adjustment layer on aftereffects.

Logo also needs changing and development - Food WastagePath?

Colour range selected -

After doing further research I found a really nice info graphic with a colour pallet which could work nicely as ours - 

Took the info-graphic into adobe colour to generate a colour scheme - 

This works really well and now we will update the webpage and motion graphic to look like this - 

Rough attempt at executing the colour change:

Lecture Seven - Week 10 - Homework - Developing the animatic

Starting to illustrate and develop the animatic into a motion-graphic -

First 30 seconds with movements - 

Full motion-graphic - 

First full Motion Graphic from Kristen Mabey on Vimeo.

Motion graphic without backgrounds - 

Lecture Seven - Week 10

Lecture - 

FADP’s in motion, and transitionsLooking through all the PADP’s and how they can be used in motion graphic design.
When making your animatic have the key frames but add in aspects and parts to help with transitioning and movement.
One you have found out time you can add in quick changes or slower changes and develop this. 


Transitions -Cuts - match cuts to change this. You can zoom in on parts to change the background colours. move around the space with the changing of the backgrounds.
Cross fades - fading the frame out.
Wipes - objects moving past the screen.
Credit the sounds used.
Aftereffects -Animating type - should use type in after effects, the type tool is better than use it as a grahic.
Trim comp to work area.
Make the type, change modify and move it.
Animate text - animate scale - type animator - individual letters will be scaled.
Animation - browse presets - these are all ways you can animate type. These are a good easy way to get the effects you want to do. You can start with the presets and then develop these and make changes and other effects in these. You an copy the keyframes so all the text will come in at the same time.
Rotoscoping - tracking a mask on a moving object.
TO mask - pen tool select layer - draw around object - mask under layer - mask path  -drag corners so the mask will move with where you want it to go.
Split layer to cut where you want it to be cut - Cmd Shift D
3D / 2.5D animation - To move anchor point use the square tool with arrows facing outwards - click 3D cube, then can change all of the axis.
Can relate objects together and use them in 3D -
3D radial shadow
Lights and cameras - you can light the scene to get a 2.5 D experience. Camera - can click and move your camera around.
Layer - new mason cinema 4D file. - 3D render capability app. Extrude text - you can make anything look real and 3D.
Renderer - ray traced 3D - geometry options extrusion depth this makes the object 3D.
Cinema 4D lite - What is possible in aftereffects.

BLOGS - Email link to teachers - on stream submission from
Tutorial

Tutorial -

Critique with Luiz- 

Motion graphic - Not sure about the background, the pace seems a bit slow. The background textures he doesn't like, replace and change the colour pallet it is to broad. We need a consistency. The voice over is good, but could be shortened.
Website with the new layout is cleaner and better, the colour pallet needs refining for the entire motion graphic.

Working on critique - 

Colour Scheme refinement - finding a simplistic colour scheme which could reach over both the website and the motion graphic.

From here we developed the style of the motion graphic and have decided either we go very recycled feeling of very illustrative - but are unsure currently which one we will decide to continue with but for now will try both ideas.

Lecture Six - Week 10 - Motion Graphic Research

Motion Graphic Research - 

Continued research into the movement and transitions of motion graphics and the best way to illustrate our motion graphic now that the key frames are all executed well
This video is a good example of motion graphics and transitions.

Rent Motion Graphics - presentation from JelioDimitrov on Vimeo.

Size and scale worked really well as a transitional part - I need to watch all the aftereffects tutorials so that my skills are not limiting what I can do which I feel they are currently.

Respublika. Motion graphics from CJ Basie on Vimeo.

Remember the key rules discussed in the lecture when it comes to motion graphics. The animatic stills do follow the FADPS though and I do have a grid alignment though the motion graphic. I could refine this further though. This motion graphic really works to the rules nicely.

Motion Graphics Trend: The Thin Line from in60seconds on Vimeo.

Lecture Six - Week 10 - Refining audio and scripting + animatic

Script for original motion-graphic - 

Food wastage path

The world produces four billion tonnes of food per year, and one third of this gets wasted.

81 percent of this food waste is avoidable. 

As individuals we contribute 260 kg’s of food waste per year, this amount could easily be quartered with 200 dollars wasted from your pocket. 

as a country if we were to stop this unnecessary wastage we would feed the whole of Hamilton for a year, or provide all school aged children throughout New Zealand with lunches for three years. 

As a nation we need to change our habits and stop wastage. Our world is not sustainable. Its about time we make the change. 

Buy less and only what you need.

Plan meals, using leftovers.

Store food properly, so it lasts longer before going off.

Don’t rely on best before dates, as foods usually last longer, go by smell and appearance instead.

Dispose of food in a good way, animals eat anything and composting is good for the gardens. 

This solution starts with you. 

We can reduce this pile together.

It starts now.

Trailing video on vimeo - there is a limit on uploads but this may be more successful than uploading parts though blogger - and can have higher quality. 

Foodwastage Path - Animatic 1 from Kristen Mabey on Vimeo.

Revising the script -

Working on shortening the motion graphic trying to keep all of the information in tact. 

Food wastage path

The world produces four billion tonnes of food per year, one third of this gets wasted.

81 percent of this food waste is avoidable. 

As individuals we contribute 260 kg’s of food waste per year, equalling over 200 dollars wasted from your pocket. 

As a country if we were to stop this unnecessary wastage we would feed the whole of Hamilton for a year, or provide all school aged children throughout  the country with lunches for three years. 

As a nation we need to change and stop wastage. Our world is not sustainable, but your small actions can help.

Buy less and only what you need.

Plan meals, using leftovers.

Store food properly, so it lasts longer before going off.

Don’t rely on best before dates, as foods usually last longer, go by smell and appearance instead.

Dispose of food in a good way, animals eat anything and composting is good for the gardens. 

This solution starts with you. 

We can reduce this pile together.

It starts now. 

Animatic with shortened script - 

This animatic is working well, and the backing track with the vocals is very strong. I am feeling confident that this motion graphic is getting across the key points and ideas.

Lecture Six - Week 10 - Developing storyboards/Refining motion graphic

Storyboards relayed as illustrations - ready to put into another animatic with more detail to therefore develop into a motion graphic - 

I am also working on the scripting and music behind the motion graphic. These illustrations developed into an animatic with the backing sounds will work really well.

Further Research:

Looking into food-wastage expired dates -

Developing the script:

Food wastage path

The world produces four billion tonnes of food per year, and one third of this gets wasted.

81 percent of this food waste is avoidable. 

As individuals we contribute 260 kg’s of food waste per year, this amount could easily be quartered with 200 dollars wasted from your pocket. 

as a country if we were to stop this unnecessary wastage we would feed the whole of Hamilton for a year, or provide all school aged children throughout New Zealand with lunches for three years. 

As a nation we need to change our habits and stop wastage. Our world is not sustainable. Its about time we make the change. 

Buy less and only what you need.

Plan meals, using leftovers.

Store food properly, so it lasts longer before going off.

Don’t rely on best before dates, as foods usually last longer, go by smell and appearance instead.

Dispose of food in a good way, animals eat anything and composting is good for the gardens. 

This solution starts with you. 

We can reduce this pile together.

It starts now. 

Motivational music for the backing track: Creative Commons.

http://freemusicarchive.org/music/Podington_Bear/Melodic_Ambient/Trillium

Lecture Six - Week 10

Lecture:

Zip file on stream for this class - 

Ensure you have working documents for the line diagrams with the things you need and the rough ideas around the page.
Middle column 960 px wide
Start on illustrator with a quick outline of this page.
use three elements - things inside things inside things - everything nester properly. Can minimise down into broader areas.
<header>
<main>
<footer>
PDF quick guide - Css quick guide
In class we will be using the file and developing our own website file to play around with.
Use ½ screen brackets ½ chrome
Start with header - header {background-color: (rgb works for transparency)
width: 100% ?
height: 48px
Indenting to tell nesting
Layout of code doesn't matter for browser but is more for us.
In CSS give each box and position a colour and place.
Need text for paragraphs written up.
Remember to look at the box model and think about the padding and margin. Margin is white space between elements. Margin-bottom etc just for one side of the object.
Comments help to disable the code so browser ignores it. /* on each side */ margin: top right bottom left 0 0 0 0; to set margins on all 4 sides. Values need units as well.
margin built into body automatically. Self styling built in. Inn chrome - right click inspect. Can see the rules for the header in chrome. Things you write overnight the rest of the rules.
Give an item a width and margin left and right are auto - this makes sure that the item is positioned in the middle of the page.
Work top to bottom, once the largest boxes are all done you can now go into the larger box and develop from here.
<video src=“link” controls=“true” autoplay=“true” the video will play by 100% zoom normally - so ensure that the video does fit the box
1 em default size of a paragraph text - -3 em = 3 times this. 1 em is 16px
Text transform - uppercase
text align
section { background-colour width height etc} remove height in something like main so it will expand to include the new items
float - left or right it will need the space to ensure they fit side to side - need everything planned exactly with the margins in account etc. Section images etc. ensure that the images are the correct size to full in the boxes.
Exercise for webpage for the rest of the class. By the end of class have a webpage live to work with.

Developing webpage exercise - 

I have started the code exercise working with my own model - this is working well.

Lecture Five - Week 9 - Homework - Developing the Motion Graphic

Motion Graphic Short videos - 

Redeveloping with refined technique using collages and bringing these into the main motion graphic - 

I still need to watch the tutorials on aftereffects to understand everything better

Lecture Five - Week 9

Lecture - 

Animatics
Looking at aftereffects - how to use tutorial

Think about FADPS when creating the motion graphic, thinking about scale etc.
Think about transition. Sound effects, type how the type transitions and changes. Very simple animations.
Animatics -
Going into aftereffects - basic
Aftereffects is just like photoshop with lots of buttons and ways to do everything, it is a good program to master and gain collective knowledge from.
Story reel - a roughly animated version of the video. They fit with the sound and the voice overs - this is important for me to refine and finalise the voice over for the motion graphic.
The story board is the working document for you, its not finalised.

Making an animatic - 

Start with a rough script to define the message, read the script though timing and recording it for reference.
Establish key scenes
Work fast and iterate
Don't get caught in detail - just key movements and timing.
Have the points and then develop the parts in between these, work fast and iterate this, this is a quickly stepped storyboard.
Have the parts and place all together. This shouldn't take too long, don;t get caught in the details.
THIS IS TO BE SUBMITTED IN THE FINAL,

Aftereffects - recap

Applying knowledge -
Close all apps use an external hard-drive. - FREE SPACE ON YOUR MAC.
The aftereffects file references to the outside links.
1080 p 1920x1080 16:9- preferable - can do 720 p if needed due to RAM and Machine size.
Composite - putting together - comps - composition
Keyframe, Interpolation, Ease in/out, Nesting, Effects, Mask/Matt, Tracking, Outputting Formats and codecs, Rendering (baking)

Keyframe demo - 

Can drag along and change the work area for when you are playing with the space.
Making less robotic, highlight frame and put easing frame - will make the object slow down etc. Key frame interpretation changes and makes the object move in not exactly a straight line. Auto bezier - linear etc.
 The squiggle key makes whatever tool bar you are working in full screen, good for small screens. U key opens only what you want.
Effects - Like photoshop as it works all in layers, Effect - Blur and sharpen - fast blur, new toolbar open, type a number - can keyframe and animate when effects happen.
Can draw shapes etc in aftereffects.
Right close - pre compose, composition, change the rotations. Pre compositions, can copy wheel action to file, duplicate this item and jump between pre-comp and the full composition to change this animation. Make pre comps and use them many times.

Creating an composition - 

You need more than what you would just see in your storyboard, everything needs to be clearly labeled. If you double click on comp it will go into the composition, keeping layers in tact
Change composition size to 1920x1080
Fast blue effect for speed etc. Blurring things when they move etc. Making a simple animation. This works really well and you can make small compositions and compose these together into a whole.
Use different shots etc through your composition.
These is masks just like photoshop. Toggle/switches transfer - alpha matte - makes the object as a mask. or select layer draw box and layer become a mask, Change from add to subtract. Turn on a duplicate underneath.
Can put animatics together
Then render your image files and effects into a movie file to apply motion graphic - baking the render, once you have all the ingredients ready to put into a final render. ;Will render your work area. Composition -> add to render queue. Output module - Quicktime - Compression makes your file play better - apply codek - h264 Quicktime option - render with animation. output to. If you don't compress the file will be monster. Format options - h264 render for final. 200 mb file is ok.
Using full file, open media encoder - drop big file, then change format - H264 render - will make way smaller. Can do quicktime as well.

Tutorial -

Developing first animatic with a voice over for some timing ideas and the thumbnails. This is the initial idea, and will be developed much further. We also need a backing track with some music we will research and decide.

Full Quality Animatic -
Showing storyboards and original script

Full Quality Animatic from Kristen Mabey on Vimeo.

To Do:

- Record Voice over
- Select music behind video
- Start toying with ideas in aftereffects
- Develop some code for webpage
- Write layout of pages and text on webpage
- Finish all story-boards in illustrator

Lecture Four - Week 9 - Homework - Developing imagery further

Developing more stills and imagery from my thumbnails - to develop into the motion graphic - 

Starting to attempt to code my webpage - 

I originally planned to code from scratch, but after looking at the temples, one of them worked really well for my page so I have had a look at template one which I intend to start to play with and develop. So far I have worked out how to position a background.