DESIGN ESSENTIALS ANGIE TAYLOR CHAPTER 4

CHAPTER 4 ANIMATION

• ANIMATION: describes the process of sequencing images such as drawings or computer generated artwork, photographs or models
• VISUAL EFFECTS: applying effects to film, video or animation
• COMPOSITING: combining images and footage together in the form of layers
• KEYING: removing of background to replace with another one
• "A motion graphic designer designs layouts, creates animated sequences, incorporates video, and photography to the mix, and adds visual effects."
• Based on the nature of movement
• Traditional stop frame animation started in the 1900s, photos of hand drawn images were taken and then played back to create the sense of movement
• ROTOSCOPING: drawing over individual film frames
• KEYFRAMES: points where major change occurs
• TWEENING are the frames in between the keyframes
• INTERPOLATION: term often used in computer software to describe how change occurs between keyframes, changes in speed to make it look more realistic
• MOTION PATH: path an object travels along
• ANIMATION:
  1.Straight Ahead Animation: animator draws a series of frames in sequence until they reach the end of the animation, no plan or schedule, most experimental and creative
  2. Pose To Pose Animation: sketches ideas and then storyboards, storyboard is approved, main poses are drawn, music and sound effects are planned before production stage, tweener adds in between frames, most common used approach
  3. Computer Generated Animation: software applications allow you to animate designs, use key frames to mark most important poses, adjust motion path using bezier curves
• Exaggerate things with animation, draw attention to it
• STAGING: set your scene
• ANTICIPATION: dramatic pauses, slower movements, exaggeration
• SECONDARY ACTION: action after the main event has happened, creates more excitement
• Overlap actions to make it appear more natural
• RHYTHM: define rhythm in your piece, use music if it's there
• TIME REMAPPING: useful tool Taylor likes, you can adjust timing, create freeze frames etc
  

Points to remember...

When importing footage and files into Adobe After Effects, I need to make sure that I achieve the highest quality. This involves importing files from softwares such as Adobe Illustrator directly into After Effects without compressing beforehand. I need to also use raw JPEG images that I take or create all drawings using the trace tool in Illustrator to make sure that no compression occurs until the very end.

Fonts for Going the Distance

There are two fonts used in the opening credits. One is a sans serif font and used for the title headings such as 'Executive Producer', 'A......Production', 'Casting By...' etc.

Pistilli

John Hancock CP

ARB-187 Modern Caps

The seconds font used is extremely unique to the film's own titles, therefore it would be extremely hard to find an available similar one online for free. I could create my own font, yet I feel that this is extremely difficult and would not look as effective as if I were to find a font online. Therefore, I have instead looked at the characteristics of the font and tried to find a font that creates the same emotions. The main characteristics are that it is sans serif, quite skinny and elongated and very simple.

Headline

Big Noodle Titling

Tall Dark and Handsome

Aspect Ratios

I felt I needed some reassurance as to what the difference is between some of the popular aspect ratios.

4:3
This has been used for many generations, even being used for 35mm films in the silent era. This format is normally only used now to view older generation films.

16:9
This is most commonly used now and is a widescreen HDTV format used for DVDs. There are many ways to convert 4:3 footage to fill a 16:9 screen. This includes stretching, zooming in or using the pillar/letter box effect.

Different Compression Formats

I looked at the presets on Adobe After Effects to see which of the different available formats I can use for my project. Below is a list of some of the most important options.

HDTV 1080 25
This format stands for High Definition TV, and the 1080 stands for the number of horizontal lines of vertical resolution. It normally refers to the aspect size ratio 16:9 which is widescreen format. The 25 in this case refers to how many frames per second. Its is widely used in Britain when uploading footage onto monitors or projections, whereas 24p is used widely in film. 29.97 (or 30) fps are used normally in the United States.

WEB VIDEO 320x240
This is a good size for standard quality web videos. It has an aspect ratio of 4:3 and the file size will be smaller than a video of higher resolution. The video size for extremely high quality videos is 1280x960 and is a large file size.

NTSC DV
This stands for the National Television System Committee. It is a format used in North and South America, Japan, South Korea etc. It is an analog television system yet many countries are now switching to digital standards. The desired result for NTSC DV is an aspect ratio of 4:3 whereas DV widescreen will be 16:9.

PAL
Stands for Phase Alternating Line and is a colour encoding analogue television system. 25 frames are transmitted each second, and is commonly used here in the UK. Each frame is made up of 625 individual  scan lines. For widescreen movies, 16x9 enhanced PAL DVDs provide the highest resolution image.


http://www.michaeldvd.com.au/articles/palvsntsc/palvsntsc.asp
http://www.ihffilm.com/videostandard.html
http://en.wikipedia.org/wiki/NTSC
http://www.longtailvideo.com/support/jw-player/26/web-video-compression

DESIGN ESSENTIALS ANGIE TAYLOR CHAPTER 3

CHAPTER 3 COMPOSITION

• Refers to arrangement of objects/components in your design
• Can convey messages and feelings to a viewer
• ELEMENTS: line, colour, shape, contrast, depth, size
• The space where nothing exists is included within your composition and can have a strong effect - it is called negative space
• Line is used only in art and design to provide edges - in real life there are no lines
• SCALE: refers to the relative size of an object
• ORIENTATION: refers to the rotation of your objects - experiment with angles and not always placing an objects perpendicular
• DEPTH: brings in more of the 3D element, can be exaggerated by lighting effects
• MOTION: movement of objects within your design. Includes speed, direction and motion path
• COLOUR: can change over time using motion graphics, what is the effect on the audience?
• TEXTURE: used to create feeling, contrast and attract attention. 
• There are different guides you can follow when experimenting with the composition of your objects
• FRAMING: how much available space. 4:3 or 16:9? 
• Adobe has an application called Device Control where you can see your frame on different screens as text on a large monitor may be difficult to read on a mobile phone for example
• 'Closed Space' refers to when objects are positioned within the frame with no depth and horizontally and vertically level
• STAGING: looking at the layout of the space and working out where everything will be placed
• Mise en scene is everything in the shot
• Fake depth with the use of perspective
• GRIDS: encourages consistency and order
• SCREEN DIVISION: can be divided into halves horizontally or diagonally, divided into quarters,
• RULE OF THIRDS: grouping items into threes make it memorable and more attractive, divide screen three times horizontally and vertically, used for cropping and rotating
• THE DIVINE PROPORTIONS: a formula for creating perfectly aesthetically pleasing compositions, used to make the Apple iPod Classic shape
• Experiment with perspective grids to create depth
• Try to create UNITY within your frame, this includes choose colours that match or look good together
• Be consistent! Find a house style
• REPETITION is used to create rhythm, different rhythms create different moods, add variety to surprise viewer or to draw attention to something

Vector and Bitmap

Vector and bitmap are the two major 2D graphics types.

BITMAP
These images are made up of pixels in a grid and rely on resolution. This makes it difficult to resize your image without sacrificing clarity and image quality. Common bitmap formats include JPEG, GIF, TIFF, PSD etc.

VECTOR
These images are made up of many individual and scalable objects and render at the highest quality. You can resize these images to any size and the edges will always remain smooth. Fonts for example are a good example. However, there are negative points to vectors, the  main one being it is difficult to recreate realistic scenes. Vector based images are normally just a solid or gradient fill.

Aliasing and Anti Aliasing

Aliasing occurs when the resolution of an image is too low. If it is a straight line for example, the edges will be jagged and make the image look distorted. Anti-aliasing is a technique which chooses the average colours in a certain area and blends them, making the line not look as harsh. The new updated version of Paint actually has an automatic anti aliasing system. Below are two lines I drew in the software. The top line (1) is jagged and an example of aliasing. The line below (2) is what happened when I released the mouse. The lines are smoothed out.

Storyboard for Going The Distance

Typography for The Number 23

Mom's Typewriter

Rough Typewriter 

My Underwood 

Typenoksidi

(www.dafont.com)

Storyboard for The Number 23

Yes Man Typography

The font used throughout the opening credits is extremely basic. It is a sans serif font that is easy to read and simple. Below are some examples of the fonts I will use for my title sequence.

Coolvetica

Old Sans Black

Alte Haas Grotesk

(www.dafont.com)

Yes Man

List of aspects from the Yes Man opening titles that caught my attention:

STORYBOARD:

Moodboards for chosen Opening Credits

Yes Man
The opening trailer for 'Yes Man' is based on bright neon colours and paint dripping. It is extremely fast paced, with paint splattering everywhere as the camera moves 90 to 180 degrees. The font used is extremely simple, sans serif and bold. Lines, squiggles and triangular shapes appears quickly and then disappear off the screen, and most frames are led into each other by a painted line. The mood of these credits is quite quirky and upbeat.

References for images used in this moodboard:

http://science.pixeladdiction.co.uk/?page_id=70

http://38minutes.ning.com/photo/neon-lights

http://www.ledsunbit.com/pro_detail.php?id/33.htm

http://candypaint.mktos.info/paint-splatter/

http://rainbowwallpaper.info/rainbow-paint-splatter-2/

Number 23
The background for this trailer is a sort of parchment paper. The text is a type writer font with numerous ink smudges. The camera changes rames quite statically, constantly jerking around and zooming in and out quickly. Letters within words change rapidly, and the numebr 23 is seen numerous times throughout. Blood stains seep into the paper, eventually becoming thicker and more frequent towards the end of the opening credits. There are many times the camera zooms in to letters close up which is extremely effective. The mood is quite sinister and tense.

References for images used in this moodboard:

http://www.queness.com/post/2744/40-amazing-free-paper-textures

http://www.brusheezy.com/Brushes/1290-13-blood-and-splatter-brushes

Going The Distance
The opening titles for this film are really upbeat, playful and feminine. They are focused specifically on travel, with many plane tickets, famous landscapes and maps visible throughout. Black smooth lines run throught the different frames, twisting and turning into different shapes such as dashes and hearts.There is a large use of clipart throughout such as the aeroplane and telephone. The camera appears to take a relatively linear route, following the frames from left to right.

References for images used in this moodboard:

http://graphicalerts.com/paper-textures-50-awesome-free-paper-textures-collection/

http://www.arthursclipart.org/silhouettes/misc1.htm

http://my.opera.com/norskblu/blog/?startidx=20

http://www.freeclipartnow.com/buildings/famous/Big-Ben.jpg.html

http://www.clipartoday.com/clipart/objects/objects/phone_180093.html

http://www.learn2swimsuits.com/

http://www.techdigest.tv/2007/11/30_trends_in_di.html

Videos by Imaginary Forces

GOING THE DISTANCE
http://www.imaginaryforces.com/archive/alphabetical/going-the-distance/

BACK TO YOU?
http://www.imaginaryforces.com/archive/alphabetical/back-to-you/

THE NUMBER 23
http://www.artofthetitle.com/2009/03/09/the-number-23/

HUMAN TARGET
http://www.imaginaryforces.com/featured-work/broadcast/human-target/

YES MAN
http://www.imaginaryforces.com/archive/alphabetical/yes-man/

History of Opening Titles

http://www.smashingmagazine.com/2010/10/04/the-art-of-the-film-title-throughout-cinema-history/

BEGAN WITH SILENT MOVIES

• Words and lettering played an enormous role
• Had to be clear and easy to read
• Mono stroke letterforms or letters with small serifs
• New fonts were later introduced, as well as basic animation
• Followed by cartoons as well as text
• Sound was introduced, animating it in time with the visual effects
• Continued to grow and develop visually......

Exploration of Colour

COLOUR
Even though my chosen studio prefers to stick to grey and white for their logo, I decide to explore the use of colour in case there was ever a time grey and white did not stand out on their website or if they were placing their logo in a magazine and it needed to be more eye catching. However, to compromise I have decided to stick to a monochromatic colour scheme so that there are just different hues, the same as the actual Imaginary Forces logo which has different hues of white, grey and black.

http://realcolorwheel.com/tubecolors.htm

Above is a colour wheel which I feel is extremely detailed and useful for creating in particular monochromatic colour schemes. Not only does it shows you the different colours you get when you combine certain amounts, but it also displays all the hues within one colour.

DIFFERENT COLOUR SCHEMES FOR IMAGINARY FORCES ONLINE LOGO

Below are three different colour schemes for my studio's online logo. I experimented with both warm and cold colours to see the effect, as well as active and passive colours. I feel that the red is extremely active and eye catching, especially when on a white background like this. It sort of feels as if it demands attention, whereas the blue logo is much more passive and subtle. It looks like it is aimed at an older audience who are more elegant and sophisticated. The green looks as though it appeals to teenagers and is quite a young trendy colour scheme. It is interesting to see the effect colour has and definitely something worth experimenting with when designing logos in the future.

When I changed the background to black however, the effect was extremely different. Whereas the white background above looks extremely passive and also unnoticeable, the black background appears to become an active colour and all three colour schemes become quite passive. It shows that the brightness of the hue highly affects whether or not it attracts attention. I feel that when the background is black like this, the three small squares, especially the green ones, are more eye catching and would therefore probably just use these as a symbol for the company.

DESIGN ESSENTIALS ANGIE TAYLOR CHAPTER 2

CHAPTER 2 - PLANNING

• PREPARATION: First step is to understand the brief and requirements of the client. Know the target audience, targets, purpose of the product etc. Conduct research both visual and technical
• DEVELOPMENT: design the project by making storyboards, animatics, brainstorms, rough planning. Then respond to brief: negotiate ideas and present them to client. Designing the brief is where you create final storyboards, source the images and generate your assets. Then you implement your designs and develop a prototype
• TESTING: evaluate, carry out technical checking and conduct audience testing, add finishing touches and last minute changes
• DELIVERY: deliver final project
• Brainstorm ideas and carry sketchbooks for when you're inspired
• STORYBOARDING: planning your shots, use software or draw on paper. Add comments such as frame numbers, camera movements, characters, colours, edits
• ANIMATICS: more 3D and lifelike example of what your final outcome will be, show to client and respond to feedback
• Adobe Photoshop is useful for making storyboards and animatics
• Scan images in, manipulate them, clean up photos
• PLANNING AND TIME MANAGEMENT: logistical planning, make sure you meet the brief in time!!
• Scheduling techniques: gantt chart to plot times and dates, add float time so that you have a few spare days for any surprises that may arise, Microsoft Project I found is good at creating gantt charts

Logo Designs - Font and Sizing

I really like tho logo, even though I feel that I should look into a few more fonts a I feel that this one just isn't quite right yet. However, in terms of sizing I feel that this logo works particularly well. The three squares are almost always visible and recognisable whatever size. They also are quite strong just as their own without the need for additional text next to it. It also is very successful when inverted, in terms of still being able to be read. 

I feel this logo below is still successful yet the actual logo alone without the text is not particularly the strong. Also, when it is resized quite small, the squares become merged together, looking like one rectangle rather than 6 individual squares. This is not as intended and not meeting the criteria for a successful logo. However, it does look quite interesting when inverted.

Saul Bass: A Life in Film and Design

I was advised to visit this link which I found extremely interesting. Saul Bass's daughter has worked with writers to design a book with over 1,500 of Bass' illustrations, many of which have been unpublished. It shows his creative process and what it was that he was trying to achieve through his unique designs for many of the most successful films of all time.


http://www.brainpickings.org/index.php/2011/11/03/saul-bass-a-life-in-film-and-design/

Imaginary Forces Show Reel 2011

http://vimeo.com/22093708

Above is the link to a showreel for the studio Imaginary Forces for Spring 2011. What I find fascinating about this is the words 'Imaginary Forces' that are being 'inked' onto a glass screen is in a completely different style and design to their logo use on their website. The website version is elegant and defined, whereas the online showreel version is far more 'messy' and gothic in a way.

ONLINE LOGO

SHOW REEL LOGO

Below are two different logos I have made in black and white specifically so that my client has the option of either using the online logo and also a showreel logo if they wanted to. I have saved these as editable files so that if I need to change them I can. I downloaded a free ink splatter brush from www.brusheezy.com to add the effect in the background. The fonts were from www.dafont.com.

Formal Design Ideas

What is Formal Design?

"Conscious symmetrical repetition, while clearly creating perfect balance within a design"

From this statement, formal design is based on mathematics and absolute precision. They meet a checklist of things including balance, proportion, unity, repetition etc. to make the overall image look balanced and structured.

I was surprised to see online how often informal and formal design is used in relation to gardens. Professional gardeners actually use this design theory to create landscapes. Formal designs are precise and symmetrical around the centre of an axis. Vertical elements are introduced as well as accurate spacing between objects. In terms of gardens, water elements are often introduced in the form of a geometric shape to enhance the overall look.

http://www.idahofallswebdesign.net/archives/130
http://www.myhomemygarden.co.uk/garden-design/garden-styles/formal-informal.php

Fonts

Raspoutine

Callie Hand

Speedline

Regular Joe

Inky Dinky

JON KRASNER MOTION GRAPHICS

CHAPTER 4