T454

Week 1 - Spring 2006

Agenda:

  • Course Introduction
  • Pre-test
  • Graphics overview, theory & application
  • Intro to Photoshop
  • File/pixel sizes
  • Color Modes
  • Play with Photoshop

What this class is about:

This is an advanced hands-on production course focusing on DVD design & authoring. Students are expected to posses a strong, working knowledge of graphic design, video editing and animation. Students will analyze, critique and discuss the design of DVDs. They will propose, design and produce their own DVDs. Skills covered include: creating motion graphics, designing interactive menus, editing digital video, encoding, designing and testing navigation, scripting, and DVD production.

This is a brand new class. As you'll see soon, the syllabus will change as we determine the skill level of the class as a whole.

Review syllabus, schedule, critique forms & assignments

Important Announcement converning graphcis and audible/visual design elements: Please keep your work 100% original. Your projects should not rely on other people's visual work. It should highlight what you can do- not what others can do. You must rely on your own creativity and design skills- not existing images and clip art. Except for the assignments where I ask that you specifically incorporate other work, you must keep it 100% original.

Student introductions

Pre-test & Bio

Write down:

  • Your name
  • Academic focus / other interests
  • One DVD, TV show, or movie with production design that you love
  • One DVD, TV show, or movie with production design that you hate.
  • Three specific things you’d like to learn in T454.

Answer five questions:

  • What size or pixel dimensions is standard-definition DVD-Video?
  • What is the frame rate of an NTSC television signal?
  • What are the primary colors you use when making TV graphics?
  • What is the aspect ratio of a standard TV display?
  • What is an alpha channel?

 

What is digital video?

Video that has been digitized. Its contents can be represented through binary coding (0s and 1s).

Examples include:

  • Blair Witch Project- shot with a digital camera & edited in a non-linear editing system.
  • Star Wars Attack of the Clones
  • The program you edited in iMovie
  • Your After Effects or Motion animations output to DV

Digital video can contain video, animation, audio, and embedded information

Digital video is used in a wide range of applications:

  • Streaming video for the Internet
  • Video conferencing
  • DVD
  • Home movies
  • Broadcast
  • Media archiving & distribution

It can be stored in a number of forms:

  • Chip RAM - (Digital camera movie mode, booting up a Playstation)
  • Tape
  • CD
  • DVD
  • Magnetic or Optical Disks

How does video become digital? There are a number of ways to digitize video:

  • Feed an analog signal from a video camera or videotape player into a computer with a digitizing card
  • Record onto a digital video recorder from an analog source
  • Record source footage directly to tape with a digital camcorder
  • Use animation, compositing or 3D software to make digital video files

Digitizing: How does it Work?

When we digitize video, we sample it. We take a digital snapshot and convert it into 0s and 1s. Digitizing can take place in a digital camcorder or in a video capture or editing system.

Digitizing steps:

  1. Capture the original picture. This may be a "live" camera shot or something already recorded on an analogue videotape
  2. Sample the input signal. This converts the analogue signal to a digital signal
  3. Quantize the signal. This gives each sample a numeric value.
  4. Compress the signal. The data is reduced in size with a codec.
  5. Record the signal onto a videocassette or disk.

Movie metaphor: The sampling rate is how many times a second you take a “picture.” Quantizing is “how good the picture is.”

The higher (faster) the sampling rate, the better the quality. The larger or deeper the bit depth, the better the quality is.

Think about different audio formats

  • 8 bit at 22KHz - low end, early computer alert sounds
  • 16 bit at 32 kHz - extended play DV, extended play DAT
  • 16 bit at 44.1 kHz - DAT, CD, MP3 at high quality)
  • 16-bit at 48 kHz - DAT/mini disc/DV
  • 24 bit at 48 kHz - DAT/DAW (digital audio workstations)
  • 24 bit at 96 kHz - DAW
  • 24 bit, 192 kHz - bleeding edge DAW

Note that while the DVD video spec supports audio up to 96 kHz, A-Pack, the software that encodes AC3 (digital dolby) won't accept anything over 48 kHz.

Video Codecs vs. architecture & file types

Don’t confuse codecs with video architecture.

QuickTime is multimedia architecture created by Apple. It supports many different file types and codecs. Similarly, Windows Media (what once was Netshow) is Microsoft’s audio/video architecture.

So when you see that a file ends in ".mov" you can bet that QuickTime can support it but you'd have to analyze it to see what the particular codec it is.

Most digital video editing systems on the Mac use QuickTime architecture.

What is a codec?

Codec is an acronym that stands for "compressor/decompressor. A codec is a method for compressing and decompressing digital information. It can use specialized hardware, software or a combination of both.

Digital Video Codecs

To save space on digital videotape or on disk, the signal is compressed. When played back it’s decompressed. Codec is short for compression/decompression.

Codecs for video can be divided into two types:

  • Spatial or intraframe
  • Temporal or interframe

Spatial or intraframe compression, such as JPEG, crunches down each individual frame of video. In temporal or interframe compression (MPEG, for example) some frames (keyframes) contain an entire image and other frames (delta frames) record only what differs from the preceding frame.

Inter-frame compression thus allows greater compression ratios because only the difference between frames is stored. That is to say, the codec can compress the video better because it doesn't have to store every frame of information- only what is unique to each frame.

Codecs:

MJPEG - This is the motion form of JPEG (Joint Photography Experts Group). Many versions of video editing systems use MJPEG (M100, Avid)

MJPEG takes equal amounts of time to compress and decompress. This is known as a symmetrical format. It's called symmetrical because it takes equal amounts of time to compress and decompress the data. Hardware-assisted JPEG-capture cards let you grab video off tape in real time. The edited footage can be played off your hard drive and onto tape in real time.

Cinepak - Developed by now-defunct Radius. Cinepak, was developed to put small movies on CD-ROMs.

Sorenson – Well supported by a number of platforms.

Indeo – Mainly for the PC platform, Indeo has gone through many versions. For more info visit: http://www.ligos.com/

Smacker – Developed for games. For more info visit: http://www.radgametools.com/ Also home to Blink (another game codec)

RealVideo – Developed by Real, it’s a streaming video codec for use on the web. For more info visit: http://www.real.com/

H.261 & H.263 - Video-conferencing codecs.

MPEG - (Moving Picture Experts Group) uses interframe compression and can store audio, video, and data. The MPEG standard was originally divided into four different types, MPEG-1 through MPEG-4.

MPEG-1 produces medium quality video and audio streams at low data rates, which can be used for CD-ROM playback. Standard MPEG-1 is full frame rate (24 - 30 fps, depending on the source) with a quarter size image (352x240), and is useful for playback on most new desktop computers.

MPEG-2 is capable of high data rate and can support full broadcast quality files. MPEG-2 is the standard format for DVD-Video and many satellite dish systems. Standard MPEG-2 is full frame rate (25 - 30 fps) and full screen resolution (720x480, NTSC, 720 x 576 PAL).

MPEG Layer-2 audio - Generally used for high bandwidth MPEG audio at near CD quality. Used for audio with both MPEG-1 and MPEG-2.

MPEG Layer-3 audio (MP3) - A popular audio format. Generally used for audio-only files (.mp3 files), this is a lower-bandwidth format than MPEG Layer-2 audio, too fat for modem streaming.

MPEG-4 supports a variety of playback applications from wireless & hand held devices to satellite and streaming playback. Visit these sites for more info:

DV - uses 5:1 compression based on DCT (Direct Cosine Transform). A growing number of consumer and professional camcorders are using this format. Other variants of DV include DVCAM (Sony) and DVCPRO (Panasonic).

Up side: It's possible to attain excellent image quality with inexpensive gear. While the DV codec is the same regardless of whether the camera is a $25,000 Ikegami or a $600 Sony handycam, there are large differences in electronics, camera housings, implementation and lenses, which results in noticeable differences in quality.

Another key benefit is that once the signal has been digitized, it can be transferred onto a computer or another machine without any loss.

Video capture: Video is digitized as it's being recorded. Video "capture" simply involves transferring those files to the computer.

Down side: DV is sampled at 4:1:1. Its color performance is not as good as DVCPRO50, digital Betacam or Digital S, which all have 4:2:2 performance.

Video sampling: 4:2:2 vs. 4:1:1, 4:2:0 etc.

These numbers refer to the ratio of the number of luminance samples to the samples of each of the two color difference signals used in component digital recording.

For a good discussion of 4:2:2, 4:1:1, and 4:2:0 see the links below.

There are other CODECS, but these are the main ones used today

Digital Video Disc or Digital Versatile Disc

DVD characteristics:

  • Superior picture to VHS
  • Superior sound to VHS HiFi and CDs.
  • DVD Video players have the ability to play audio CDs.
  • Direct access to any scene in a DVD movie
  • No more rewinding
  • Easier manufacturing process (A DVD contains no moving parts!)
  • Easier playback technology No pinch rollers, brakes etc)
  • Small size & easy to store
  • Alternate video tracks -- watch a scene from multiple angles.
  • Alternate audio tracks -- listen to director commentary or foreign languages.
  • Double sided disks allow wide screen or full screen format on the same disc.
  • Extra "bonus" features: movie trailers, features, music videos etc.
  • Alternate language subtitle and karaoke tracks
  • Excellent durability: no tape drop-outs, wrinkles etc.
  • Virtually all commercial DVD-Video disks use MPEG-2.

DVD Applications

There are different types of DVDs for varying applications. Applications include:

  • Data storage
  • Software
  • Games
  • Video
  • Audio

You can classify DVDs by their physical construction (single sided, double-sided, single layer, dual layer etc) or by the type of data (logical format).

Capacities

Capacities vary depending on the type of disc.

  • CD-ROM – about 700 MB
  • DVD-5: Single sided 4.7 GB
  • DVD-9 – Single sided, dual layer 8.5 GB
  • DVD-10 – Double sided, single layer 9.4
  • DVD18 – Double sided, dual layer 17 GB

Two different groups of companies have emerged, each trying to establish their position in the DVD market.

Physical Formats

Group 1 (Apple, Hitachi, NEC, Pioneer, Samsung & Sharp.
DVD -Video
DVD-ROM
DVD –RAM
DVD-R
DVD-RW

Group 2 (Dell, HP, Philips & Sony):
DVD+RW
DVD+R

Physical Format Characteristics

DVD-ROM (Read only memory)

Playback movies, games and computer files

DVD-R (Recordable)

Is like DVD-ROM, but you can write once to it. DVD-R can hold audio, video & data.

Can be accessed in set top devices (games!) and computers.

Subcategorized into: General & Authoring

General can only hold 4.7 GB. Pioneer’s DVR-A03/Apple Superdrive can write to it.

Authoring can hold twice as much. Only higher-end professional drives can write to them.

DVD –RAM (Random access memory)

Has random access storage, like a ZIP disk or hard drive.

Can be written to thousands of times.

Can be single or double sided. 2.6GB & 4.7 GB or 5.2GB & 9.4GB.

Can only be used with DVD-RAM systems and discs.

Won’t work on set top boxes.

DVD-RW

Like the DVD-R format, but can be written to thousands of times.

Like the DVD-R format, it will work in set top devices and computers.

Pioneer’s DVR-A03/Apple Superdrive can write to it.

DVD+RW

The other computer camp’s version of DVD-RW

Similarly, it can be used with set top devices.

Logical Formats

Logical format refers to the type of data or files on the DVD.

All DVDs can be played on computers

Not all can work in DVD players.

DVD-ROM (see above)

DVD-Video

Physically the same as a DVD-ROM, but contains DVD-Video files and structure

Video files are stored in the Video_TS directory

Support 4:3 or 16:9 aspect ratios

Playing multiple streams

Can support up to 32 subtitle streams. This is for closed captioning and displaying text in foreign languages.

Can be used for Karaoke. (Highlighting the lyrics one word at a time)

Hybrid DVDs

Contain the Video_TS directory and other folders containing various types of data. (HTML, QuickTime movies, games etc.)

DVD-Audio

Better audio quality than CDs. Can hold 24-bit sound at 192 kHz.

Readings/Sources:

 

Lab info

For classes taught in Room 250 - (does not apply to the production lab)

You must work off of your portable firewire drive. There is a scratch drive available so you can back up your work. We also use it  for turning in your work. (Creatively named "Scratch")

On your individual computers, look under the Apple icon to "About this Mac". Then click on the "More info" button. Then view "Disc burning".

Intro to TV Graphics

What are we looking at when we see graphics in TV or in the theatre?

Is it a simple title underneath someone being interviewed, or a spaceship flying through an alien landscape? Maybe it’s something in the middle.

Generally tools used to make the graphics fall into a few categories:

Character generators allow for creation of text and graphics for TV (Inscriber, WriteDeko, Boris Graffiti) – they mainly focus on text with some support for graphics and still frames. The latest ones allow for incorporation of moving backgrounds and animations.

Paint & drawing programs let you create flat (2D) objects and artwork. Examples include Adobe Illustrator, Fractal Painter & Photoshop. Photoshop is probably the most useful and used piece of software in the world of web, print, multimedia and video.

3D modeling & layout programs let you create objects in three-dimensional space. You can create objects and place lights virtual cameras in 3D space.
If the object rotates and you can see both sides, chances are it’s a 3D object.

Movies like Titanic or X-Men rely on programs like Lightwave, Maya, Softimage and 3D Studio Max to create the ships, people and places.

Compositing and animation programs (such as After Effects) work mainly in 2 dimensional space, but are offering more and more 3D capabilities with each release. Even in 2D space, they can provide the illusion of working in 3D.

Color

Color can be objectively described in a number of ways. One of the most common methods is using the HSB model:

1. Hue (the actual color)
2. Saturation (the strength or intensity, or how far it’s removed from gray)
3. Brightness (how dark or light)

But you can also describe it in other ways- depending on what color mode you are working in. Photoshop lets you work in different color modes. The two color modes you should be most familiar are

  • Subtractive Color (CMYK)
  • Additive Color (RGB)

Subtractive Color

The subtractive color system is used in world of print and painting. The primary colors (think paints or inks) are:

  • Cyan
  • Magenta
  • Yellow

Mix them all together and you get black. In Photoshop when you work in this mode you can change colors by adjusting the CMYK (K is black) sliders in the color picker window.

Additive Color

The additive color system is used for computer graphics, TV and lighting design. This is the color mode we’ll use to create TV graphics.

The three primary colors (think of them as light sources) are:

  • Red
  • Green
  • Blue

If you mix them all together you get white. In Photoshop when you work in this mode you can change colors by adjusting the RGB sliders in the color picker window.

Vector and Bitmapped graphics

Paint and drawing programs work with vector or bitmapped images, or a combination of the two.

Vector graphics are made up of shapes, lines and curves defined mathematically.

When you draw a circle or create a piece of text with a vector-based application (such as Adobe Illustrator), it keeps track of the lines and angles that make up objects. From this mathematical data, it draws the display. We can scale a piece of vector artwork up to any size, and it will still retain its quality.

Bitmap or raster images use a grid of pixels to represent an image. Each pixel has a specific color and brightness. It is well suited for images with subtle changes in color and brightness such as photographs or digital paintings. If you were to enlarge a bitmap graphic, it would lose resolution.

Enlarging a small circle would produce jagged edges.

A vector-based program like Illustrator simply draws the circle bigger, so the edges would retain their smoothness

Photoshop can work with both vector and bitmap files.

File Formats:

Photoshop lets you work on and save in a number of different color modes and file formats.

  • BMP: standard Windows compatible image format (no alpha channels)
  • EPS Encapsulated PostScript: Can describe both vector & bitmapped graphics.
    Support by virtually all page layout and desktop publishing programs
  • PDF Portable Document Format. Used by Adobe Acrobat. No alpha channel
    support,
  • GIF graphics interchange format: Developed by Compuserve for bulletin boards. (8 bit or 256 colors, Compressed once, Basic GIF doesn't support alpha channels but GIF89a does.
  • JPEG: joint photographic experts group (no alpha) use variable compression. Doesn’t support alpha channels. Do support 24 bit (true) color.
    • Lossy vs lossless: Whenever you open something (like a JPEG) and save it again it loses some detail. This is know as lossy.
  • PNG: portable network graphics (Used for the WWW. Lossless.) Supports 24 bit color. Supports alpha channels)
  • PCX: another PC based image format
  • PICT: widely used on Macs (Supports alpha channels)
  • TIFF tagged image file format: Widely used by all image apps (Supports alpha channels)
  • Targa (tga) Video format designed around Targa cards. Supported by most PC-based graphic applications. 32-bit color. Supports alpha channels.

Message

Graphics are a form of visual communication. They convey a message. The message should be decipherable by your viewer. Ideally it should be clear and easy to understand.

The graphics you make in this class should always have a message. This is because in TV we are focused on Applied Art, not Fine Art.

Aesthetics

A solid understanding of Photoshop & After Effects is a great place to start, but it’s not worth much without a minimal sense of graphic design skills. Obviously, the TV graphics we make should look good. But what is “good?” How do we identify a tastefully composed graphic?

Like painting or photography, TV is a 2-dimensional medium. Most of the rules that apply to classic art similarly can be applied to TV. Composition can be described as the orderly arrangement of elements within a scene.

Rules of composition and color are very useful to the video graphic designer. But the screens of our computer and television monitors emit light, and allow for movement. The entire color system that video and film graphics are based on (additive color system) is counter to that of the print world (subtractive color system).

Subjective and objective analysis for judging the aesthetics of TV graphics is weak. While personal opinions will always vary, I’ve identified some general guidelines that serve as a good starting point.

Make sure you are familiar with Jim's Graphic Guidelines!

Photoshop Tour

Main interface
Tools (keyboard shortcuts, foreground background etc)
Tool option bar
Windows (remember arrow on right hand side)
Navigator, options, info
Swatches, colors, brushes
Layers, channels, paths
Preferences: work in pixels not inches!
Color modes: Use RGB for video graphic work
Color picker
Layers
Text (kerning & leading)

Thursday In-Class Photoshop Exercise - 6 points

Create a TV graphic for a DVD using the following criteria:

  • Use only two colors. (Try picking one color, then varying the amounts of saturation and brightness.)
  • Use at least one image taken from the web and at least two separate text elements.
  • Follow the technical guidelines in Jim's Graphic Tips
  • Place a full-size version (720 x 480) of your Photoshop document and a half-sized (360 x 270) JPEG copy in the week 1 folder on the Scratch Drive. (In the T354_Krause/Week 1 class folder) You should create a folder within the Week1 folder on the scratch drive called your username. Place your two graphics inside of your folder. Name the large one "full" and the smaller on "half."

A note about working with layers and saving copies- Always keep your original layers intact. You may need to manipulate these later & make changes. You can flatten copies for display or distribution.

Optional exercises:

If students are really struggling with Photoshop, they should work through some optional exercises. There is a good tour of the interface in the Photoshop CS Help PDF. There is also a good tour in the "help" section. If you have PS Classroom in a Book, work through “Tour” and “Working with Selections” tutorial. “Layer Basics” is also a good introductory exercise.

Vocabulary (know these)

  • Kerning –Adjustment of the space between a pair of letters on the same line. Proportional fonts typically "auto kern". In this manner a small letter o can be tucked under the top of the capital letter T (To). Most design programs let you adjust the kerning between two characters by positioning the cursor between them and then holding down the option key while pressing the left/right arrow key.
  • Tracking - Tracking is similar to kerning in that it is a control of horizontal spacing. However tracking controls the spacing of an entire line of text, not just a pair of characters.
  • Leading – the space between different lines of text
  • Anti-aliasing – You can turn this feature on and off. It produces intermediately shaded pixels to smooth out the appearance of jagged edges.
  • Vector graphics - Vector-based images use mathematically-based geometrical primitives to convey the visual appearance of an object. Vecotr graphics use lines, points, strokes, angles, polygons, etc. (Adobe Illustrator is a great tool for creating and editing vector graphics.) You can increase the size of vector graphics and not lose quality.
  • Bitmap (aka Raster) graphics - Bitmap graphics (like GIFs & JPEGs) contain a grid of pixels. Each pixel is given a hue, saturation & brightness value. When you zoom in on a bitmapped image it will become pixelated.

Homework (due next Tuesday):

  • Burrows & Wood reading (Chapter 10 PDF file)
  • Take a VHS tape & record your favorite (or least despised) commercial channel for 30 minutes or so in order to capture some commercial graphics. (Alternatively, you can take a digital snapshot or screen capture of the graphic.)
  • Analyze two of the TV graphics that you find appealing. One should be simple in design, the other more complex. Write a paragraph or two about each graphic. What was its purpose? What colors were used? What can you say in terms of composition, texture, contrast, font selection, foreground or background elements? Why do you like it or not? Be sure to bring your analysis and VHS tape or digital snapshot of the TV graphic you recorded (Tapes should be cued to the graphic you used).
  • Important: Make sure you order the Martin Sitter book.
  • Secure a portable firewire or USB2 drive to work off of by week 3.

Back to Jim's T454 Home page

 

 

 

Programs of Study | People | Jobs & Internships | Facilities | Index | FAQ | Home

For general questions regarding IU's Telecom Department contact tcom@indiana.edu
For questions or comments about this website contact jarkraus@indiana.edu
Last Updated: August 24, 2005