Tips for Producing Multimedia Content

1
Tips for Producing Multimedia Content

• H. Iris Chyi
• School of Journalism
• The University of Texas at Austin

2
Understand Web Browsers

• Major players
• For Windows
• Microsoft Internet Explorer 6 Launched 8/27/01
• Mozilla Firefox First launched Feb. 2004
• IE 7 Oct. 2006
• Safari for Windows June 2007
• Mozilla Firefox 3 June 2008
• For Mac
• Safari (comes with Mac, since 2003)
• Firefox
• Browser share http//en.wikipedia.org/wiki/Usage_
  share_of_web_browsers

3
What Can We Serve on the Web (I)

• Simple text-based page
• HTML (.htm or .html)
• How to view source code?
• Graphics
• .gif
• .jpg
• .png
• How to copy capture images?
• How to capture screens?
• http//www.howtouniverse.com/CI/howtoscrncapt.htm
  l
• http//www.tuaw.com/2005/03/02/mac-n00b-switcher-
  tip-print-screen/

4
What Can We Serve on the Web (II)

• Document
• Word (.doc)
• Adobe Acrobat -- Portable Document Format (.pdf)
• Whats the difference?
• Animation
• Gif animation (.gif)
• http//tvb.com.hk/
• Flash (.swf)
• http//www.coca-cola.com.tw/
• How to distinguish Gif from Flash?

5
What Can We Serve on the Web (III)

• Audio
• Real Audio (.ra)
• Mp3 (.mp3)
• Video
• QuickTime Movie (.mov)
• RealMedia video (.rm)
• Windows Media (.wmv)
• Flash video (.flv)
• What plug-in programs are required?
• http//websitehelpers.com/video/

6
Technical terms

• Dimension of your screen (pixels)
• ____ x ____
• File size
• bit, byte, kilobyte (KB), megabyte (MB), gigabyte
  (GB)

7
Image Processing
8
Procedures for image processing

• 1. Import image (from scanner, digital camera)
• 2. Edit (w/ Photoshop) for two purposes
• -better quality
• -appropriate size (max. 35K)
• 3. Save in GIF or JPG or PNP formats
• 4. Upload
• 5. Place on Web page.

9
Guidelines for image processing

• File formats
• Color
• Resolution
• Typography

10
Color depth

• 1-bit color (21 2 colors) often black and white
  
• 2-bit color (22 4 colors)
• 4-bit color (24 16 colors)
• 8-bit color (28 256 colors) GIF
• 24-bit (224 millions of colors) True colors
  JPG

11
GIF format

• Compression No more than 256 colors
• Transparent GIF But may produce disappointing
  results when the image contains antialiasing.
• Animated GIF But GIF animations are rarely
  meaningful!

12
JPG format

• True colors (24 bit)
• Best at compressing smooth tonal transitions
• Cannot properly reproduce the hard-edged graphics
  or bright color boundaries.

13
(No Transcript)
14
(No Transcript)
15
Summary

• Advantages of GIF
• GIFs of diagrammatic images look better than
  JPEGs
• GIF supports transparency and animation
• Advantages of JPEG
• JPEG produces excellent results for most
  photographs
• JPEG supports full-color images

16
PNG format

• Default of Fireworks
• Alternative to GIF
• PNG gives a much wider range of colors than GIF
  (truecolor up to 48-bit compared to 8-bit
  256-color for GIF)
• But PNG doesnt support animation
• (Previously) not as widely supported as GIF or
  JPEG

17
PNG vs. JPG

• PNG is a better choice than JPEG for storing
  images that contain text, line art, or other
  images with sharp transitions.
• What if an image contains both sharp transitions
  and photographic parts?
• A choice must be made between the large but sharp
  PNG and a small JPEG with artifacts around sharp
  transitions.

18
Imaging strategies

• Photographs as JPEGs
• Line arts and hard-edged graphics as GIFs
• Dont enlarge any graphics
• Always save your original uncompressed images.

19
Color management

• RGB (Red, Green, Blue)
• Decimal (base-10)
• _ _ _ (0-255) _ _ _ (0-255) _ _ _ (0-255)
• Hexidecimal (base-16)
• _ _(0-F) _ _ (0-F) _ _ (0-F)
• http//www.webmonkey.com/reference/color_codes/
• SHB (hue, saturation, brightness)

20
(No Transcript)
21
Screen vs. printed color artwork

• Low vs. high resolution
• Insufficient for displaying diagrams that
  incorporate many curves or angles

22
Screen resolution

• The number of pixels a screen can display with a
  given area. Usually 72 pixels per inch (ppi).
• So a 72x72 square graphic is one inch on a 72 ppi
  monitor.
• Scanning guidelines http//www.chicagomediaworks.c
  om/2instructworks/3digital2/digitalimaging2scannin
  g.htmlcontinuoustone

23
Typography

• Typography plays a double role as both verbal and
  visual communication.
• Use typeface to create a personality for work
  Its the voice.
• Each typeface speaks in a different tone of
  voice.
• Typefaces Two font families
• Serif
• Sans serif

24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
Read this

• Aoccdrnig to a rscheearch at Cmabrigde
  Uinervtisy, it deosn't mttaer in waht oredr the
  ltteers in a word are, the olny improetnt tihng
  is taht the frist and lsat ltteer be at the rghit
  pclae. The rset can be a total mses and you can
  sitll raed it wouthit porbelm.Tihs is bcuseae
  the huamn mnid deos not raed ervey lteter by
  istlef, but the wrod as a wlohe.

28
And this

• AOCCDRNIG TO A RSCHEEARCH AT CMABRIGDE
  UINERVTISY, IT DEOSN'T MTTAER IN WAHT OREDR THE
  LTTEERS IN A WORD ARE, THE OLNY IMPROETNT TIHNG
  IS TAHT THE FRIST AND LSAT LTTEER BE AT THE RGHIT
  PCLAE. THE RSET CAN BE A TOTAL MSES AND YOU CAN
  SITLL RAED IT WOUTHIT PORBELM.TIHS IS BCUSEAE
  THE HUAMN MNID DEOS NOT RAED ERVEY LTETER BY
  ISTLEF, BUT THE WROD AS A WLOHE.

29
Typography

• Dont use more than 2 typefaces on one page
  without a good reason
• Sans serif fonts usually work better on screen
• But serifs work well for headlines
• Dont use all capital letters

30
(No Transcript)
31
HTML and graphics

• Specifying height and width attributes will save
  loading time

32
Image processing tools

• Adobe Photoshop
• Free and simple alternative to Photoshop Picasa
  (Google)
• http//picasa.google.com/

33
Basic image processing skills

• Scanning
• Photoshop basics
• Rotate
• Crop
• Resize
• Exposure adjustment (levels, curve)
• Color adjustment
• Sharpen (Filtersharpenunsharp mask)
• 1) Filter Sharpen Unsharp Mask2) Amount
  between 120 1303) Radius 0.8 pixels4)
  Threshold 4
• Save for Web

34
Photoshop Tutorials

• http//www.picturecorrect.com/photoshoptips/diffus
  e.htm for Black White with diffused
  glowhttp//www.photoshopcafe.com/tutorials/layer
  s/intro.htm for basic explanation of
  layershttp//tutorialoutpost.com/count/5585 for
  images superimposed on text layershttp//www.roc
  hester.edu/ATS/Documentation/WebHelp/Graphics/
  for creating web graphics using
  photoshophttp//www.learnthat.com/computers/cate
  gory-26http//www.absolutecross.com/tutorials/ph
  otoshop/

35
Slideshow tools

• ASNE has its built in slideshow program
• Soundslides 75, with soundtrack
• Slideroll free, with soundtrack
• http//www.slideroll.com/
• Flickr.com

36
Slideshow examples

• What's wrong?http//hosted.ap.org/dynamic/files/s
  pecials/interactives/_international/princess_di_an
  niversary/index.html?SITEAZTUSSECTIONUSTEMPLAT
  EDEFAULT

37
Audio editing tool

• Audacity (freeware)

38
Video production tools

• Which video camera to buy (with a link to the
  Canon HV 20 camera) http//mindymcadams.com/tojou
  /2007/which-video-camera-to-buy/
• Video editing
• Final Cut Pro (Mac)
• Adobe Premiere (PC)
• iMovie (Mac)
• Jumpcut http//jumpcut.com/ (Online, free)
• Video posting YouTube

39
Video shooting guides

• BBC's video shooting guidehttp//www.bbctraining
  .com/onlineCourse.asp?tID5914cat2781 Mindy
  McAdams' interview shooting guidehttp//mindymca
  dams.com/tojou/2008/how-to-shoot-video-interviews/
  Why jump cuts are bad?http//newsvideographer.c
  om/2008/02/13/why-jumpcuts-are-bad/Video
  workload for journalistshttp//www.andydickinson.
  net/2007/11/03/video-workload-survey-results/

40
More video guides

• This blog discusses video journalism in the new
  media contexthttp//cyndygreen.wordpress.com/

41
Blogging platforms

• Blogger.com (easy to use, works well with all
  Google services)
• Wordpress.com (read more option available, more
  templates available)

42
CMS tools and examples

• Wordpress.com (free with some limitations)
• Wordpress.org (you may pay for a hosting account,
  e.g., bluehost.com or hostmonster.com with more
  flexibility)
• Drupal and Joomla More powerful, complicated

43
Internet audience measurement Know the Terms

• Hits
• the number of files requested by users
• Page views
• the number of times a page was requested by users
• Visits
• Unique visitors
• Clicks
• The number of times an ad was clicked by users
• Leads
• the number of users who leave personal
  information on web site

44
Google Analytics
45
Lets do it!

• Log in page for the ASNE system
• http//my.highschooljournalism.org/schools/admin/