Chapter 8




  Chapter 8
Media Creation
Chapter 8




     Media Creation Overview
•   Web Writing
•   Image Creation
•   Image Manipulation
•   Animation
•   Ani...
Chapter 8




             Web Writing
• Web vs. print
  – Text: the voice of a Web site
    • Ensure appropriate voice fo...
Chapter 8




             Web Writing
• Content voice
  – Text should express website’s intention
    • Make text as clea...
Chapter 8




            Web Writing (1)
• Writing tips
  – Start with a summary
     • Present the most relevant and imp...
Chapter 8




           Web Writing (2)
• More writing tips
  – Simplify writing for clarity
  – Make headings literal (n...
Chapter 8




           Web Writing (3)
• Even more writing tips
  – Avoid scrolling
    • Readers don’t like to have to ...
Chapter 8




             Web Writing
• Relevance and accuracy
  – Text must be clear, concise, scannable
    and relevan...
Chapter 8




               Web Writing
• Timeliness
  – Users expect Web information to be current
  – Three levels of u...
Chapter 8




                Web Writing
• Originality
  – All written material must be original or cited
    with permis...
Chapter 8




                Web Writing
• Copyright on the web
  – Original work is protected on the Web
     • Just bec...
Chapter 8




            Web Writing
• Scanned text
  – OCR (Optical Character Recognition)
    software scans text
  – C...
Chapter 8




            Web Writing
• Typography
  – Arrangement and appearance of printed
    matter
  – Use of type st...
Chapter 8




             Web Writing
• Proofreading
  – Careful proofreading should be
    conducted throughout each dra...
Chapter 8




           Image Creation
• Overview
 – Five sources
   •   Scanned photos or illustrations
   •   Digital c...
Chapter 8




               Image Creation
• Scanners
   – Flatbed
     • Transforms one line at a time
     • Converts c...
Chapter 8




              Image Creation
• Additional Scanners
   – Drum
     • Opaque art or transparency is taped to a...
Chapter 8




             Image Creation
• Scanned images
  – For professional image scanning, advisable to
    import th...
Chapter 8




Image Creation
       PhotoShop w/ TWAIN
Chapter 8




                Image Creation
• Digital cameras
  – Contain a two-dimensional array of detectors
    that c...
Chapter 8




           Image Creation
• Image libraries
  – Stock photography a good alternative to
    high-cost custom...
Chapter 8




                 Image Creation
• Generating and preparing images
   – Vector-based software
      • Adobe I...
Chapter 8




        Image Manipulation
• Overview
  – Steps for manipulating
    • Adjust image input
    • Optimize ima...
Chapter 8




           Image Manipulation
• Calibrate your monitor
  – Adobe Gamma utility
     • Calibration helps elim...
Chapter 8




        Image Manipulation
• Optimizing images
  – Straighten the picture (de-skew)
  – Remove noise, dust, ...
Chapter 8




        Image Manipulation
• Optimizing images: de-skewing
  – rotating the image by tiny angles until it
  ...
Chapter 8




         Image Manipulation
• Optimizing images: removing noise
  – Monitors reveal many more small imperfec...
Chapter 8




         Image Manipulation
• Optimizing images:
  brightness and
  contrast
  – Control allows you
    to a...
Chapter 8




         Image Manipulation
• Optimizing images:
  Levels
  – Lets you extend the
    tonal range of the
   ...
Chapter 8




         Image Manipulation
• Optimizing images:
  focus adjustment
  – Photoshop provides
    set of filter...
Chapter 8




           Image Manipulation
• Image editing
  – Filters and Effects are
    most popular way to
    enhanc...
Chapter 8




           Image Manipulation
• Cropping, rotating, and resizing
   – Cropping
      • Eliminates all unnece...
Chapter 8




            Image Manipulation
• Manipulating color using the Variations command in
  Photoshop
   – Increas...
Chapter 8




        Image Manipulation
• Saving images
  – Important to reduce resolution
    • Number of pixels per inc...
Chapter 8




                  Animation
• Overview
  – Choice of animation will depend on nature of
    the site
  – Add...
Chapter 8




              Animation
• Reducing download time
  – Reduce amount of information the files
    contain
  – ...
Chapter 8




               Animation
• Animation options
  – Advantages of DHTML
    • Animate HTML text rather than cre...
Chapter 8




              Animated GIF
• Overview
  – Graphic that contains multiple images played in
    succession
   ...
Chapter 8




             Animated GIF
• Using GIFs
  – Examine quality of image
    • Does it make sense?
    • Is timin...
Chapter 8




             SWF Animation
• Overview
  – SWFs are vector-based
     • Resulting files very compact
     • C...
Chapter 8




     Digital Audio and Video
• Digital audio overview
  – Advantages
    • Sound effects can add life to a w...
Chapter 8




      Digital Audio and Video
• Digital audio streaming
  – User can begin displaying data before entire fil...
Chapter 8




      Digital Audio and Video
• Digital audio streaming
  – Must begin with good source file
  – Use good qu...
Chapter 8




      Digital Audio and Video
• Digital audio editing tools
  – Cool Edit
     • digital sound editor for Wi...
Chapter 8




      Digital Audio and Video
• Digital audio embedding
  – EMBED tag
     • Allows designers to embed objec...
Chapter 8




      Digital Audio and Video
• Digital video overview
  – One of the most dramatic media type that can
    ...
Chapter 8




     Digital Audio and Video
• Digital video streaming
  – Usually best to use a streaming format
    for vi...
Chapter 8




      Digital Audio and Video
• Multicasting
  – Video depletes bandwidth quickly
  – Most promising solutio...
Chapter 8




     Digital Audio and Video
• "Live" video via web cams
  – Web cams take individual pictures
  – Designed ...
Chapter 8




     Digital Audio and Video
• Digital video capturing
  – Use a very fast computer and a high-
    quality ...
Chapter 8




     Digital Audio and Video
• Capturing hardware
  – Requirements
    • Capture card (supporting analog, DV...
Chapter 8




      Digital Audio and Video
• Digital video editing
  – Non-linear (allows special effects)
     • Adobe P...
Chapter 8




     Digital Audio and Video
• Digital video compression
  – Many video compression schemes are lossy
     •...
Chapter 8




     Digital Audio and Video
• Digital video embedding
  – QuickTime embedding
    • Supported in GoLive
   ...
Upcoming SlideShare
Loading in …5
×

Chapter 8 Chapter 8 Media Creation

517
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
517
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chapter 8 Chapter 8 Media Creation

  1. 1. Chapter 8 Chapter 8 Media Creation
  2. 2. Chapter 8 Media Creation Overview • Web Writing • Image Creation • Image Manipulation • Animation • Animated GIF • SWF Animation • Digital Audio and Video
  3. 3. Chapter 8 Web Writing • Web vs. print – Text: the voice of a Web site • Ensure appropriate voice for your audience • Check and re-check for spelling, grammatical and syntax errors • Write clearly and concisely – Web copy needs to be significantly shorter than comparable print copy
  4. 4. Chapter 8 Web Writing • Content voice – Text should express website’s intention • Make text as clear and brief as possible • Level of diction must match audience • Should be understandable, no matter the subject matter – “Voice” qualities • Gender-specific or neutral • Funny, stern, whimsical • High-pitched and fine or low-pitched and bold
  5. 5. Chapter 8 Web Writing (1) • Writing tips – Start with a summary • Present the most relevant and important material first – Limit each paragraph to one idea – Write for scannability • Use short paragraphs • Use descriptive, meaningful headings with 2-3 levels • Use bulleted lists and highlight important information with colored or bolded text
  6. 6. Chapter 8 Web Writing (2) • More writing tips – Simplify writing for clarity – Make headings literal (no metaphors) – Be brief • Split long text into multiple pages with hypertext links – Use information chunks – Work in a pyramid scheme • Start with short conclusion to gain interest • Build detail in subsequent paragraphs
  7. 7. Chapter 8 Web Writing (3) • Even more writing tips – Avoid scrolling • Readers don’t like to have to scroll through large amounts of text – Write concisely • Strive to use half the amount of text that you would write for print – Divide text into pages • Use hypertext links and other elements to break up the text into succinct units
  8. 8. Chapter 8 Web Writing • Relevance and accuracy – Text must be clear, concise, scannable and relevant – Eliminate clutter – Research and verification of information is essential • Announce questionable material in site • Be direct and honest in delivery
  9. 9. Chapter 8 Web Writing • Timeliness – Users expect Web information to be current – Three levels of updating • Replace key information • Restructure copy to add variety or new info • Replace all content on a page when appropriate – Schedule all levels as part of site maintenance – Allocate ample time to collect information and write new copy
  10. 10. Chapter 8 Web Writing • Originality – All written material must be original or cited with permission – Stipulations in contracts between Web designer and client • All materials provided to the designer should be copyrighted by the client • Materials should be free of any additional fees to be paid by the designer – Include copyright symbol and statement at the bottom of every page on site
  11. 11. Chapter 8 Web Writing • Copyright on the web – Original work is protected on the Web • Just because it is out on the Internet with or without a copyright notice or registration does not mean it is free for you to use – Use of source code is ambiguous – Music and domain names are murky as well – Best advice • “It’s much better to be safe than sorry. Only copy something if you have permission; otherwise don't do it.” Jodi Sax Internet and legal consultant
  12. 12. Chapter 8 Web Writing • Scanned text – OCR (Optical Character Recognition) software scans text – Converts symbols it understands into ASCII characters, which can then be used in Web pages
  13. 13. Chapter 8 Web Writing • Typography – Arrangement and appearance of printed matter – Use of type styles in Web page layout can set the tone of a publication – Designer approaches type as a visual element with a specific purpose and character
  14. 14. Chapter 8 Web Writing • Proofreading – Careful proofreading should be conducted throughout each draft – Remember to check labels, headlines, subheadings, and buttons – Spell check insufficient for catching errors in context and usage – Some text-heavy sites require professional proofreaders
  15. 15. Chapter 8 Image Creation • Overview – Five sources • Scanned photos or illustrations • Digital camera photos • Stock photography (photo CDs and clipart) • Computer generated vector graphics • Computer generated bitmap graphics – Original buttons and other graphics can be generated in programs like Adobe Illustrator or Adobe Photoshop.
  16. 16. Chapter 8 Image Creation • Scanners – Flatbed • Transforms one line at a time • Converts color and tonality into digital pixels with specific color values. • The higher the dpi, the better; beware of interpolated values – Transparency • Passes light through the emulsions on a piece of negative film or a color slide • Quality of the light is better and less distorted because it is stronger than reflected light • Look for high dynamic range (3.0 - 3.4) and a high optical resolution (2700 - 8000 dpi)
  17. 17. Chapter 8 Image Creation • Additional Scanners – Drum • Opaque art or transparency is taped to a drum • Scanner's sensors record its color and tonality information • Ability to scan large reflective art and outstanding quality color separations • Being replaced by high end flatbed and transparency scanners
  18. 18. Chapter 8 Image Creation • Scanned images – For professional image scanning, advisable to import the scans directly into image editing software – TWAIN technology • lets you scan an image directly into the application • runs between an application and the scanner hardware – The more pixels or dots per inch, the better an image looks. – However, a higher resolution translates to a bigger file size
  19. 19. Chapter 8 Image Creation PhotoShop w/ TWAIN
  20. 20. Chapter 8 Image Creation • Digital cameras – Contain a two-dimensional array of detectors that convert tone and color into digital values • higher quality charge-coupled devices (CCDs) • less expensive complementary metal-oxide semiconductor (CMOS) – Create these image files (see Chapter 2) • JPG • TIFF • PICT • PCX
  21. 21. Chapter 8 Image Creation • Image libraries – Stock photography a good alternative to high-cost custom work – Images published on CDs or are available, for a fee, online – Disadvantage that you may use the same pictures as another designer who has purchased the same library – Images usually topic specific
  22. 22. Chapter 8 Image Creation • Generating and preparing images – Vector-based software • Adobe Illustrator • Macromedia Freehand • Corel Draw – Bit-mapped software • Adobe Photoshop • Macromedia Fireworks • Corel Photo-Paint – Steps to prepare images • Optimize digital image file to improve its quality • Edit image to change the composition or apply effects • Re-size or crop image to fit it in Web page space • Save image in an appropriate image file format and compress it to reduce file size
  23. 23. Chapter 8 Image Manipulation • Overview – Steps for manipulating • Adjust image input • Optimize image • Edit image • Resize image • Save image
  24. 24. Chapter 8 Image Manipulation • Calibrate your monitor – Adobe Gamma utility • Calibration helps eliminate any color cast in monitor • Makes monitor grays as neutral as possible • Standardizes image display across different monitors – Tips for calibration • Monitor set for 16-bit color minimum • Set Desktop to display neutral grays (RGB 128) • Set white point before starting • Recalibrate every month
  25. 25. Chapter 8 Image Manipulation • Optimizing images – Straighten the picture (de-skew) – Remove noise, dust, and scratches – Adjust tonal range (brightness/contrast) – Adjust highlights and shadows (levels) – Adjust focus
  26. 26. Chapter 8 Image Manipulation • Optimizing images: de-skewing – rotating the image by tiny angles until it looks "straight” – Easily accomplished in graphics applications like Photoshop – Disadvantage • Areas in corners may be cut off
  27. 27. Chapter 8 Image Manipulation • Optimizing images: removing noise – Monitors reveal many more small imperfections than a printer does – Three Photoshop filters designed to reduce noise • Despeckle – Blurs image subtly while preserving areas with strong contrasts • Median – adjusts brightness of adjacent pixels by interpolating their color values • Dust & Scratches – lets you designate the size of the dust scratches that you want to eliminate by using the Radius slider
  28. 28. Chapter 8 Image Manipulation • Optimizing images: brightness and contrast – Control allows you to adjust both, much like a television – However, Levels command may yield better results
  29. 29. Chapter 8 Image Manipulation • Optimizing images: Levels – Lets you extend the tonal range of the image by examining histogram of image – Stretch the histogram of an image to the maximum amount by adjusting the black and white Input Levels
  30. 30. Chapter 8 Image Manipulation • Optimizing images: focus adjustment – Photoshop provides set of filters to eliminate fuzziness (enhance sharpness); part of Filters menu under Sharpen – Unsharp Mask a good example
  31. 31. Chapter 8 Image Manipulation • Image editing – Filters and Effects are most popular way to enhance and manipulate images – Also may get “creative” by using transparencies, drop shadows and colored backgrounds
  32. 32. Chapter 8 Image Manipulation • Cropping, rotating, and resizing – Cropping • Eliminates all unnecessary image areas • Does not affect image quality • Better to size ahead of HTML implementation – Rotating • Moves each pixel to a new location in grid by rotating it around central axis – Resizing • Best to reduce or enlarge by a percentage of the whole – Slicing • Works best for GIFs (smaller download time) • May increase download time when used with JPGs – Changing canvas size • Allows you to add or remove space around an image
  33. 33. Chapter 8 Image Manipulation • Manipulating color using the Variations command in Photoshop – Increases or decreases the amount of red, green, or blue in the image to find correct value. – Photoshop presents array of thumbnails showing how the addition or subtraction of a color impacts the photograph.
  34. 34. Chapter 8 Image Manipulation • Saving images – Important to reduce resolution • Number of pixels per inch determines resolution • Recommended resolution for web images is 72 pixels per inch • Once resolution is adjusted, file should first be saved in the image editor's native format • Next, save image in the format that will be used on the Web page
  35. 35. Chapter 8 Animation • Overview – Choice of animation will depend on nature of the site – Adding animation to a website can increase download time – Questions to ask • Will animation improve the delivery of the information you need to convey? • Will it be reasonably quick and easy for the user to download and play back the animation?
  36. 36. Chapter 8 Animation • Reducing download time – Reduce amount of information the files contain – Create animation from a single graphic, whose movement is controlled via a script – Streaming lets a user begin playing the file while it is being downloaded
  37. 37. Chapter 8 Animation • Animation options – Advantages of DHTML • Animate HTML text rather than creating text within an image • Can be interactive because user chooses what an element in the image will do next • No plug-ins required • Create animations with a single image
  38. 38. Chapter 8 Animated GIF • Overview – Graphic that contains multiple images played in succession • Can be used to act out an idea • Ex: slide shows, processes • Important to keep repetitive annoyance to a minimum – Photoshop’s ImageReady creates animated GIFs easily • Line up each image in order • Create time delays and effects between images
  39. 39. Chapter 8 Animated GIF • Using GIFs – Examine quality of image • Does it make sense? • Is timing between frames right? • Check out with a dial-up connection – Examine implementation • Does GIF distract visitors from the rest of the content? • Does it loop unnecessarily? – Limit page to one animated GIF
  40. 40. Chapter 8 SWF Animation • Overview – SWFs are vector-based • Resulting files very compact • Can include wide range of high-quality, low- bandwidth design • Audio may be added – Instead of downloading a graphic for each frame of the animation, SWFs download program code • Browser plug-in browser interprets code and animates graphics
  41. 41. Chapter 8 Digital Audio and Video • Digital audio overview – Advantages • Sound effects can add life to a website • Spoken words can deliver essential info • Music can weave environmental texture • Audio can strengthen emotion of a site • Sound can fill download time gaps – For pre-recorded music, Web designer must get artist's or publisher's permission and may have to pay a fee
  42. 42. Chapter 8 Digital Audio and Video • Digital audio streaming – User can begin displaying data before entire file has been transmitted – RealAudio • Standard for streaming audio • Supports FM stereo quality sound • Users need RealAudio player – MP3 • Advanced audio format that provides almost CD- quality sound • Compresses sounds by removing parts that are inaudible, yet still retaining the full frequency spectrum • Requires high bandwidth connections
  43. 43. Chapter 8 Digital Audio and Video • Digital audio streaming – Must begin with good source file – Use good quality microphones for live recording – Analog recordings must use analog-to-digital (A/D) converter • To produce the best quality sound, must have a very high sampling rate – Results in large file • Most sound recording software offers a range of compression levels that trade off sound quality for smaller files
  44. 44. Chapter 8 Digital Audio and Video • Digital audio editing tools – Cool Edit • digital sound editor for Windows – Sound Forge • professional sound editing software – AudioTrack • good audio editor for musicians – Pro Tools • for professional audio editors – Sound Edit 16 • affordable digital audio editing software that creates Shockwave Audio files
  45. 45. Chapter 8 Digital Audio and Video • Digital audio embedding – EMBED tag • Allows designers to embed objects directly into HTML page • Can be used more or less the same as the image tag – Accepts typical image embedding attributes » align, alt, border, width » height, hspace, vspace, name • Multiple embed tags can be grouped
  46. 46. Chapter 8 Digital Audio and Video • Digital video overview – One of the most dramatic media type that can be used on a website – However, can be overdone – Huge bandwidth consumed • Even in compressed formats, such as QuickTime and AVI, video files of more than a few seconds are commonly measured in megabytes – Should be of a professional quality for best acceptance on the Web
  47. 47. Chapter 8 Digital Audio and Video • Digital video streaming – Usually best to use a streaming format for video on the Web – Requires the use of special servers – Microsoft NetShow • offers most universal support for virtually every video format – ASF, RealVideo, QuickTime, AVI, and MPEG
  48. 48. Chapter 8 Digital Audio and Video • Multicasting – Video depletes bandwidth quickly – Most promising solution to problem of limited bandwidth is “multicasting” • Lets web servers send out just one video stream • “Reflectors” duplicate the stream as it is sent out – Results in a geometric increase in the number of streams as it is passed from reflector to reflector – Requirements • Server software that can originate a multicast signal • Enough reflectors in place to duplicate the stream • User software that can tune in to the multicast
  49. 49. Chapter 8 Digital Audio and Video • "Live" video via web cams – Web cams take individual pictures – Designed to be broadcast on a Web site • New pictures are broadcast at predetermined intervals • Useful for weather forecasts and other continuously changing events
  50. 50. Chapter 8 Digital Audio and Video • Digital video capturing – Use a very fast computer and a high- quality video capture card – Have the highest color depth and highest resolution possible • 720x480 at a 24-bit color depth for video • 320x240 for multimedia work • 240x180 for Internet work – Important to keep aspect ratio accurate
  51. 51. Chapter 8 Digital Audio and Video • Capturing hardware – Requirements • Capture card (supporting analog, DV, MPEG- 1 and/or 2 • 16-bit sound card • Additional hard drive to store video files • Plenty of RAM (128 MB minimum)
  52. 52. Chapter 8 Digital Audio and Video • Digital video editing – Non-linear (allows special effects) • Adobe Premiere good example of editing app – Multitude of web output formats – Storyboard window allows for quick creation of live cuts • Output formats – RealVideo » Impressive image quality that is sharp and crisp » yields sluggish response on slow systems – QuickTime » Less CPU overhead; more responsive than RealVideo
  53. 53. Chapter 8 Digital Audio and Video • Digital video compression – Many video compression schemes are lossy • Worse: videos with high resolution and low color depth using a lossy compression scheme • Better: low-resolution video with good color depth using lossless compression – Lossless compression requires special software • Codec (Compression/DECompression ) – Cinepak, Indeo, Sorenson, Microsoft Video 1, and Microsoft RLE • QuickTime’s Sorenson Professional Codec – variable bit rate (VBR) for encoding » video image quality equal to or better than RealVideo
  54. 54. Chapter 8 Digital Audio and Video • Digital video embedding – QuickTime embedding • Supported in GoLive • QT files need to be flatted and end in .mov – RealTime embedding • Requires a meta file with absolute URL • must have the extension ".ram" or ".rpm"
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×