chapter 8 chapter 8 media creation

54
Chapter 8 Chapter 8 Media Creation

Upload: ronny72

Post on 13-Jan-2015

522 views

Category:

Documents


12 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Chapter 8 Chapter 8 Media Creation

Chapter 8

Chapter 8Media Creation

Page 2: Chapter 8 Chapter 8 Media Creation

Chapter 8

Media Creation Overview

• Web Writing • Image Creation• Image Manipulation• Animation• Animated GIF • SWF Animation• Digital Audio and Video

Page 3: Chapter 8 Chapter 8 Media Creation

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

Page 4: Chapter 8 Chapter 8 Media Creation

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

Page 5: Chapter 8 Chapter 8 Media Creation

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

Page 6: Chapter 8 Chapter 8 Media Creation

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

Page 7: Chapter 8 Chapter 8 Media Creation

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

Page 8: Chapter 8 Chapter 8 Media Creation

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

Page 9: Chapter 8 Chapter 8 Media Creation

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

Page 10: Chapter 8 Chapter 8 Media Creation

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

Page 11: Chapter 8 Chapter 8 Media Creation

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 SaxInternet and legal

consultant

Page 12: Chapter 8 Chapter 8 Media Creation

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

Page 13: Chapter 8 Chapter 8 Media Creation

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

Page 14: Chapter 8 Chapter 8 Media Creation

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

Page 15: Chapter 8 Chapter 8 Media Creation

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.

Page 16: Chapter 8 Chapter 8 Media Creation

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)

Page 17: Chapter 8 Chapter 8 Media Creation

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

Page 18: Chapter 8 Chapter 8 Media Creation

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

Page 19: Chapter 8 Chapter 8 Media Creation

Chapter 8

Image CreationPhotoShop w/ TWAIN

Page 20: Chapter 8 Chapter 8 Media Creation

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

Page 21: Chapter 8 Chapter 8 Media Creation

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

Page 22: Chapter 8 Chapter 8 Media Creation

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

Page 23: Chapter 8 Chapter 8 Media Creation

Chapter 8

Image Manipulation• Overview

– Steps for manipulating• Adjust image input • Optimize image• Edit image• Resize image • Save image

Page 24: Chapter 8 Chapter 8 Media Creation

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

Page 25: Chapter 8 Chapter 8 Media Creation

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

Page 26: Chapter 8 Chapter 8 Media Creation

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

Page 27: Chapter 8 Chapter 8 Media Creation

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

Page 28: Chapter 8 Chapter 8 Media Creation

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

Page 29: Chapter 8 Chapter 8 Media Creation

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

Page 30: Chapter 8 Chapter 8 Media Creation

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

Page 31: Chapter 8 Chapter 8 Media Creation

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

Page 32: Chapter 8 Chapter 8 Media Creation

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

Page 33: Chapter 8 Chapter 8 Media Creation

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.

Page 34: Chapter 8 Chapter 8 Media Creation

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

Page 35: Chapter 8 Chapter 8 Media Creation

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?

Page 36: Chapter 8 Chapter 8 Media Creation

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

Page 37: Chapter 8 Chapter 8 Media Creation

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

Page 38: Chapter 8 Chapter 8 Media Creation

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

Page 39: Chapter 8 Chapter 8 Media Creation

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

Page 40: Chapter 8 Chapter 8 Media Creation

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

Page 41: Chapter 8 Chapter 8 Media Creation

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

Page 42: Chapter 8 Chapter 8 Media Creation

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

Page 43: Chapter 8 Chapter 8 Media Creation

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

Page 44: Chapter 8 Chapter 8 Media Creation

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

Page 45: Chapter 8 Chapter 8 Media Creation

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

Page 46: Chapter 8 Chapter 8 Media Creation

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

Page 47: Chapter 8 Chapter 8 Media Creation

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

Page 48: Chapter 8 Chapter 8 Media Creation

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

Page 49: Chapter 8 Chapter 8 Media Creation

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

Page 50: Chapter 8 Chapter 8 Media Creation

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

Page 51: Chapter 8 Chapter 8 Media Creation

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)

Page 52: Chapter 8 Chapter 8 Media Creation

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

Page 53: Chapter 8 Chapter 8 Media Creation

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

Page 54: Chapter 8 Chapter 8 Media Creation

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"