Download PhotoShop w/ TWAIN

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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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)
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
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
Chapter 8
Image Creation
PhotoShop w/ TWAIN
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
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
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
Chapter 8
Image Manipulation
• Overview
– Steps for manipulating
• Adjust image input
• Optimize image
• Edit image
• Resize image
• Save image
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
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
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
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
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
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
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
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
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
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.
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
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?
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
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
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
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
Chapter 8
SWF Animation
• Overview
– SWFs are vector-based
• Resulting files very compact
• Can include wide range of high-quality, lowbandwidth 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
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
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 CDquality sound
• Compresses sounds by removing parts that are
inaudible, yet still retaining the full frequency
spectrum
• Requires high bandwidth connections
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
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
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
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
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
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
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
Chapter 8
Digital Audio and Video
• Digital video capturing
– Use a very fast computer and a highquality 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
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)
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
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
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"