Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Chapter 8 – Media Creation Overview You will now use the information that you learned in the previous chapters on layout and design, usability, and accessibility to create the components of a web page. This chapter will focus on how to create and manipulate the content from text to streaming video. Writing copy for the website takes time and should not be rushed since users and your client will judge its quality. The copy should be written clearly and concisely and be free of grammatical and typographical errors. This chapter will discuss how to write copy for the web. You will learn that it needs to be original, relevant, accurate, and timely. You will also learn in this chapter how to obtain images for your website including buying clipart online. You will learn how to take existing images that are on paper and transfer them to a digital format. Once you have your images in digital format, you can then manipulate them to achieve the exact images you want. Manipulating images allows you to remove flaws, adjust colors and tones, and make them a different size. Movement makes websites vibrant and interesting and keeps users engaged. It is only natural, then, that your client will probably want to have multimedia elements on the website. In this chapter, you will learn how to edit your multimedia files. Chapter 8 Page 1
  2. 2. 8.1 Web Writing 8.1.1 Web versus print Although images and multimedia are more exciting to develop, text is arguably the most important element on a web page because it contains the information that users are seeking. Typically, users want to get the information they need as quickly as possible while reading as little as possible. Text is the voice of a site. It should have a voice appropriate for its intended audience and should be free of spelling and grammatical errors. It is also important that the text be clear and concise. Some web designers hire experienced writers and editors to develop the copy for the site. It is not good enough to simply take existing print copy and insert it into your pages. In general, a user's attention span for reading characters made of ink on paper is greater than for reading characters made of light on a computer screen. Therefore, the web copy needs to be significantly shorter than that of the print copy. 8.1 Web Writing 8.1.2 Content voice How you structure your message is critical to reaching users. The success of your site is dependent on how well you understand the audience. You can customize the address by the appropriate selection of images, interactive elements, and writing style. The text, like all of the other elements in the site, should express the website's intention as clear and brief as possible. No matter what ideas the site embodies, they must be made comprehensible to the target audience. The voice and style of the text are an important factor in making your message clear. For example, you would use a different writing style to address an 8-year-old child than you would to address an adult. The most important point to consider in crafting your text is the level of diction that is most appropriate for the site's intended audience. Everyone, especially the demographic most likely to interact with the site, should be able to read it without much difficulty. The voice can have a gender or be neutral. It can have a specific style from a particular era. The voice may have an accent from another language or culture. It can be funny, stern, whimsical, or mechanical. It can be high pitched and fine or low pitched and bold. Chapter 8 Page 2
  3. 3. 8.1 Web Writing 8.1.3 Writing tips Chapter 8 Page 3
  4. 4. • Start with a summary - Because web users do not take the time to read through a lot of material, it is best to start each page with a summary of the material covered on that page. Present the most relevant and important material first. • Limit each paragraph to one idea - You should limit the content of each paragraph to one idea. If you cover multiple topics in each paragraph, many users will not see the other ideas. • Write for scannability - Because the online experience fosters a degree of impatience, users tend not to read text fully. Instead they pick out keywords of interest and ignore the rest. Often users who are scanning text will read only the first sentence of each paragraph so the idea should be easy to recognize. o Avoid long continuous blocks of text. Use short paragraphs instead. o Structure articles with two or three levels of headlines to make scanning easier. o Use descriptive, meaningful headings. o Use bulleted lists to break up the information. o Highlight important information with colored or bolded text. • Simplify for clarity - Simplify your writing to make ideas as comprehensible as possible. Convoluted writing and the use of obscure words can slow the reader or make him/her confused. • Make headings literal - Make your headings as literal as possible. If you use clever metaphors, the user might misconstrue the meaning. • Be brief - Split long bodies of text into multiple pages connected by hypertext links. Detailed information can be placed on additional pages. • Use information chunks - Split information into coherent chunks that each focus on specific topics. This allows readers to select those topics they are interested in. • Work in a pyramid scheme - Each page should be written according to an inverted "pyramid" scheme. Start with a short conclusion so that the reader gets the gist of the page. Then gradually build detail. The reader should be able to stop at any point and still have read the most important information. • Avoid scrolling - Avoid using large amounts of body copy so that you need a scrolling interface. Usability studies indicate that most readers will not scroll through large amounts of text. • Write concisely - Research has shown that reading a computer screen takes about 25% longer than reading from a printed page. Also, most users do not feel particularly comfortable reading online text. You should strive to convey a message in half the amount of text that you would write for print. • Divide the text into pages - Use hypertext links and other navigational elements to break up the text into succinct, readable units. Chapter 8 Page 4
  5. 5. 8.1 Web Writing 8.1.4 Relevance and accuracy Text should be clear, concise, scannable, and relevant. Irrelevant information is clutter and should be eliminated. Since the reader is usually scanning for information, clutter presents an obstacle. Stay focused on the topic and ask yourself whether each passage is needed to help convey a message. Nothing will compromise the credibility of your website more than inaccurate information. You should thoroughly research and verify the accuracy of all information before committing it to publication. The way you present information will serve to enhance the site's credibility. If, for example, you know a fact to be questionable, by all means tell that to the reader. Be direct and honest in your delivery. 8.1 Web Writing 8.1.5 Timeliness Chapter 8 Page 5
  6. 6. The World Wide Web, being the most dynamic of all existing publishing mediums, is unique in that it can be updated fairly instantly. Users now expect information on a website to be current. In industries where information changes quickly (e.g., news, commerce), you will need to update the sites by rewriting the copy and then posting it periodically. Maintaining information as it changes is a critical factor in website stickiness. Stickiness is the site's ability to attract repeat visitors. A site whose information is up to date will usually have more return visitors. Keeping the information current should be part of an overall maintenance schedule. There are three levels of updating that can be done: • Replace key information - Some key information, such as dates and times, needs to be changed occasionally. For example, a movie theater will need to update its website whenever a new movie opens. • Restructure the copy - This is a matter of editing existing copy to accommodate new information. In our example of a movie theater, the copy might be restructured if they want to advertise a sneak preview of a movie. • Replace all of the content on the page - You will do this when the information needs to be entirely new or a completely new format is desired. It is important to allocate ample time to collect information and write the new copy. 8.1 Web Writing 8.1.6 Originality Chapter 8 Page 6
  7. 7. All of your written material should be original. Do not copy information directly from another website or anything in print. If you do, you must give the original author credit by citing them on the website. Copyright laws protect authors from unauthorized use of their material. If your website is found to contain material that is copyrighted, you can be in serious trouble with the law. You may need to ask permission from authors or their publishers before you can use their information. They may charge you a fee for its use. Contracts between a web designer and a client usually state that all materials provided to the designer is copyrighted by the client and free of any additional fees to be paid by the designer. If you are developing a personal home page, it is probably not worth paying a steep fee to license background music or pay for stock graphic images. For commercial sites, however, licensed material can improve the image of the site and may be worth the investment. To further protect your work, include a copyright symbol at the bottom of every page on your client's site to protect him/her from image or content infringement. For example "©Copyright Your Client's Business 2001. All Rights Reserved." 8.1 Web Writing 8.1.7 Copyright on the web Chapter 8 Page 7
  8. 8. Due to the complex nature of legal issues on the World Wide Web, Jodi Sax, a prominent entertainment and Internet legal consultant, clarified a number of issues in an interview held at the WEB Chicago conference in 2000: "A common issue is that people don't realize that everything that is created under U.S. law has a copyright interest. It doesn't mean that someone has to register, or put a copyright notice on their materials." The good news, then, is that whatever original information you create immediately and without registration or notice is considered copyrighted. On the other hand, this means that original work belonging to others is protected as well-meaning that 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. ". . .it doesn't matter whether you credit your source or not-if you copy something and you don't have permission, you're committing copyright infringement." Another question often asked by designers is whether their HTML source code is copyrighted. Sax describes this is an issue up for discussion these days. "There are instances of people trying to claim rights to source code. To a certain extent, people can claim a right in that it's creative. But you can't claim an interest in something that is pure, factual information, such as <a href>." What about music on the Internet? "The problem is that everything is so unknown that it really depends upon bargaining power. Music on the Net is a big mess right now. For people that are building a basic home page, remember that anything you put on there has a copyright interest. If you want copyrighted music, you should go to ASCAP or BMI to purchase the license to use that music on your site. In a legitimate business, get a lawyer to help you learn what kinds of licenses you need. Domain names are another legal issue. "The big issue right now is trademark holder rights versus domain name holder rights. Conceivably, somebody could have gone to Network Solutions years ago and registered Coca- This action is referred to as cyber squatting. The trademark holders get upset as they've put a lot of money into marketing their brand, and they want their domain names….Courts don't like cyber squatters. Typically, they will lose. Before registering a domain, check for trademark. You can do this for free at the UFPTO site." Finally, she advises all designers to not copy something unless they have permission. "I always tell people it's much better to be safe than sorry. Only copy something if you have permission; otherwise don't do it." Web Links Jodi Sax's articles and insights into Internet law can be found at: Chapter 8 Page 8
  9. 9. 8.1 Web Writing 8.1.8 Scanned text Text can be scanned using software capable of converting the image called Optical Character Recognition (OCR). OCR recognizes printed or written characters. In OCR processing, the scanned text is analyzed for light and dark areas in order to identify each alphabetic letter or numeric digit. When a character is recognized, it is converted into ASCII code. 8.1 Web Writing 8.1.9 Typography Typography is the arrangement and appearance of printed matter. The use of type styles in graphic design can set the tone of a publication. The designer approaches type as more than just words but as a visual element with a specific purpose and character. Chapter 8 Page 9
  10. 10. 8.1 Web Writing 8.1.10 Proofreading The text should be checked extensively for misspelled words and grammatical errors. Do not forget to look for errors in labels, headlines, subheadings, and buttons. Careful proofreading should be conducted throughout each draft. If the text is generated in a word processor, a grammar and spell check should be run. But the spell checker is not sufficient to catch errors in context or usage. Therefore, proofreading is essential. Some designers hire professional proofreaders to perform this task, especially on sites that contain large amounts of text. 8.2 Image Creation 8.2.1 Overview The World Wide Web is truly a visual medium. Images may be used to illustrate a concept or to create a mood or feeling for the website. Often, images are used as navigational elements that act as illustrative links to a new page or website. The images can come from several sources. You can use images that already exist, such as photographs or illustrations, or that you create. For photographs or illustrations that are paper, you can use a scanner to transfer the paper-based image into a digital file. Additional images can be obtained from photo CDs and online clipart websites. These are much less expensive than custom art or photographs, but you may sacrifice originality. If appropriate images do not already exist, you will then need to create them. Buttons and other graphics can be generated in programs like Adobe Illustrator or Adobe Photoshop. Images that you can use for the website come from five sources: 1. Scanned-in photos or illustrations 2. Digital camera photos 3. Stock photography (photo CDs and clipart) 4. Computer generated vector graphics 5. Computer generated bitmap graphics Chapter 8 Page 10
  11. 11. 8.2 Image Creation 8.2.2 Scanners Chapter 8 Page 11
  12. 12. If the image material is only available in analog form (e.g., photographs or paper-based illustrations), you will need to scan in the image to create a digital image file you can work with. Scanners work by translating tonality and color from light into digital data that you can store and manipulate on your computer. Think of a scanner as the eyes of the computer converting a photograph or illustration into pixels. Flatbed Scanners A flatbed scanner transforms one line at a time. The light is reflected to a series of detectors that convert color and tonality into digital pixels with specific color values. Most inexpensive flatbed scanners create fair quality images with a reasonable quantity of data. Compare flatbed scanners by evaluating the samples or dots produced per inch (dpi); the higher the value, the better the scanner's ability to "see" and interpret the light. Be wary, however, of advertised "interpolated" values. Interpolation means that your scanner simply guesses at the values between real samples and adds pixels to compensate for the difference. Instead, you want a scanner with optical resolution. Transparency Scanners Instead of bouncing light off of a piece of opaque art, a transparency scanner passes light through the emulsions on a piece of negative film or a color slide. In general, the quality of the light is better and less distorted because it is stronger than reflected light. The transparency scanner's dynamic range determines its ability to distinguish color variations. If you are going to purchase a transparency scanner, look for one with a high dynamic range (3.0 - 3.4) and a high optical resolution (2700 - 8000 dpi). Transparency scanners are available for 2.25x2.25 and 4x5 film. Transparency adapters are available for flatbed scanners but these devices do not produce the quality scan that a dedicated transparency scanner can produce because they use reflected light instead of direct light. Drum Scanners Drum scanners are analog devices that have been in use in the graphics industry for years. The opaque art or transparency is taped to a drum that spins very rapidly while the scanner's sensors record its color and tonality information. Older drum scanners process color film separations by converting the information directly into halftone dots. Newer drum scanners convert the information to pixels first. Two advantages of using a drum scanner are its precision control over color balance and contrast and its ability to scan large reflective art. Drum scanners can produce outstanding quality color separations. High-end flatbed and transparency scanners, however, are gradually replacing them. Chapter 8 Page 12
  13. 13. 8.2 Image Creation 8.2.3 Scanned images Chapter 8 Page 13
  14. 14. A scanner usually comes with a set of image editing tools to take care of minor editing like cropping the image. These tools come in handy for non-professional use. For professional image scanning, it is advisable to import the scans directly into the image editing software. The technology used for this is called TWAIN. TWAIN is a cross-platform interface for acquiring images captured by certain scanners and digital cameras. TWAIN is a widely used program that lets you scan an image directly into the application, such as Adobe Photoshop. The output format of the scanned image files depends on your image editing software. Without TWAIN, you would have to close an application that was open, open a special application to receive the image, and then move the image to the application where you wanted to work with it. The TWAIN driver runs between an application and the scanner hardware. TWAIN usually comes as part of the software package you get when you buy a scanner. It is also integrated into Photoshop and similar image manipulation programs. You can import scanned images directly from any scanner that supports the TWAIN interface. If you cannot import the scan using the TWAIN interface, use the scanner manufacturer's software to scan your images saving the images as TIFF, PICT, or BMP files. Then open the files in your image editing software. Scanned images are available in different resolutions, the amount of pixels or dots per inch. The more pixels or dots per inch that are available, the more realistic and visually appealing an image looks. But a higher resolution translates to a bigger file size. The images should be scanned in high resolution (150 dpi or higher) to make editing easier. To ensure a high-quality scan, you should predetermine the scanning resolution and dynamic range your image requires. These preparatory steps can also prevent unwanted color casts from being introduced by your scanner. Dpi and ppi are different units used for resolution. DPI Dpi is the abbreviation for dots per inch, which indicates the resolution of images. The more dots per inch, the higher the resolution. A common resolution for laser printers is 600 dots per inch. This means 600 dots across and 600 dots down, so there are 360,000 dots per square inch. PPI In computers, ppi (pixels per inch) is a measure of the sharpness, that is, the density of illuminated points on a display screen. The dot pitch determines the absolute limit of the possible pixels per inch. However, the displayed resolution of pixels that is set up for the display is usually not as fine as the dot pitch. The pixels per inch for a given picture resolution will differ based on the overall screen size since the same number of pixels are being spread out over a different space. Chapter 8 Page 14
  15. 15. 8.2 Image Creation 8.2.4 Digital cameras Digital cameras contain a two-dimensional array of detectors that convert tone and color into digital values. Light enters the camera through a lens and is focused onto the detectors. Two types of detectors are used on digital cameras, the higher quality charge-coupled devices (CCDs) and the less expensive complementary metal-oxide semiconductor (CMOS) chips. CMOS chips are much more prone to noise and distortion. The size and quality of the detectors determines how much data can be collected and converted. Digital cameras usually create the following image files: • JPGs • TIFFs • PICTs • PCXs To review these file formats, see Chapter 2. Chapter 8 Page 15
  16. 16. 8.2 Image Creation 8.2.5 Image libraries Chapter 8 Page 16
  17. 17. Image libraries, or stock photography, are also a good source of high quality image material if insufficient or no materials are available and the cost to create custom photos is too high. Companies that publish image libraries hire professional photographers and artists to create photographs and illustrations. The images are published on CDs or are available, for a fee, online. Stock photography offers the advantage of obtaining dozens of high quality images for a fraction of the cost it would take to hire a professional photographer or illustrator to produce a single custom image. The disadvantage is that you run the risk of using the same pictures as another designer who has purchased the same library. The images are usually published at several resolutions or sizes to accommodate most publication requirements and are, for the most part, excellent quality. They are usually topic specific. You have a choice of several dozen photos of a particular theme like wild animals, household objects, or studio models. Archival images are also available in this form. Here are several companies that produce image libraries on CD or have downloadable images: Web Links Corbis: EyeWire: PhotoDisc: Stockbyte: Artville (illustrations): ArtToday: ImageSource: Comstock: DigitalVision: Images: Chapter 8 Page 17
  18. 18. 8.2 Image Creation 8.2.6 Generating and preparing images Chapter 8 Page 18
  19. 19. Computer-generated images can be generated using vector-based software (e.g., Adobe Illustrator, Macromedia Freehand, Corel Draw) or bitmap-based software (e.g., Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint). The choice of software to use will largely depend on the type of illustration you want to produce and the overall look and feel of the site. Vector and bitmap graphics use different techniques to produce images and each type is best for different kinds of images. Vector graphics are used to create high impact, sharp edged color graphics with smooth blends and intense colors. Vector-based illustration software is often employed to draw logos, charts, graphs, maps, cartoons, and highly detailed technical and architectural plans and illustrations. Bitmap images use pixels to define shapes to produce tonal and color variations. Its software is suited for editing, manipulating, and composing scanned photographs and images from digital cameras and photo CDs. Now that you have an image file, you will need to prepare it for the website. The following steps are used to prepare images: 1. The digital image file is optimized to improve its quality. 2. The image can be edited to change the composition or apply effects. 3. Then the image file is resized or cropped in order for it to fit in a certain space on a web page. 4. The images are saved in an appropriate image file format and compressed to reduce the file size. 8.2.6a Lab Activity (PDF 587KB) In this lab, you will learn to paint and edit images. 8.2.6b Lab Activity (PDF 121KB) In this lab, you will learn to create basic shapes. 8.2.6c Lab Activity (PDF 206KB) In this lab, you will learn to use fills and strokes. 8.2.6d Lab Activity (PDF 360KB) In this lab, you will learn to transform objects. Chapter 8 Page 19
  20. 20. 8.3 Image Manipulation 8.3.1 Overview After you have an image in digital format, you will probably need to manipulate it. Manipulation makes the image look better and makes it fit into a predefined space on the website. The steps used for image manipulation consist of: 1. Image input 2. Optimizing the image 3. Image editing 4. Image resizing 5. Image saving These steps will be discussed in more detail in the following sections. 8.3 Image Manipulation 8.3.2 Calibrate your monitor Chapter 8 Page 20
  21. 21. To ensure that the color schemes and images you are creating on your monitor will look good on other monitors, you should calibrate your monitor. Calibrating means to standardize or adjust the way your monitor displays colors to a common baseline, for example, to the color white. A monitor profile uses the calibration settings to precisely describe how your monitor reproduces color. Your monitor will display color more reliably if you use color management and accurate International Color Consortium (ICC) profiles. The Adobe Gamma utility, which comes with Adobe Photoshop, lets you calibrate your monitor to a standard and then save the settings as an ICC-compliant profile. This profile is then available to any program that uses your color management system. This calibration helps you eliminate any color cast in your monitor, makes your monitor grays as neutral as possible, and standardizes image display across different monitors. The following are terms that describe the variables that determine how a monitor looks: • Brightness and contrast - The controls display intensity. These parameters work just as they do on a television set. Adobe Gamma helps you set an optimum brightness and contrast range for calibration. • Gamma - Gamma measures the brightness of the midtone values. The values produced by a monitor from black to white are nonlinear--if you graph the values, they form a curve, not a straight line. The gamma value defines the slope of that curve halfway between black and white. Gamma adjustment compensates for the nonlinear tonal reproduction of output devices such as monitor tubes. • Phosphors - The substance that monitors use to emit light. Different phosphors have different color characteristics. • White point - The coordinates (measured in the CIE XYZ color space) at which red, green, and blue phosphors at full intensity create white. The following are tips for calibrating your monitor: • You do not need to calibrate your monitor if you have recently done so using an ICC- compliant calibration tool such as Adobe Gamma and have not changed your video card or monitor settings. • Make sure that you are using a standard desktop (CRT) monitor. Adobe Gamma does not work with flat-panel (LCD) monitors. • Make sure your monitor has been turned on for at least 30 minutes. This gives it sufficient time for it to warm up for a more accurate color reading. • Make sure your monitor is displaying thousands (16 bits) of colors or more. • Remove colorful background patterns on your monitor desktop. Busy or bright patterns surrounding a document interfere with accurate color perception. Set your desktop to display neutral grays only, using RGB values of 128. For more information, see the documentation for your operating system. • If your monitor has digital controls for choosing the white point of your monitor from a range of preset values, set those controls before starting Adobe Gamma. Later, in Adobe Gamma, you will set the white point to match your monitor's current setting. Be sure to set the digital controls before you start Adobe Gamma. If you set them after you begin the calibration process in Adobe Gamma, you will need to begin the process again. 6500 K is a good white point for most uses; 5000 K is the common standard for U.S. prepress providers. • Monitor performance changes and declines over time. Recalibrate your monitor every month or so. If you find it difficult or impossible to calibrate your monitor to a standard, it may be too old and faded. Chapter 8 Page 21
  22. 22. 8.3 Image Manipulation 8.3.3 Optimizing images Preparing photos for the World Wide Web requires different skills from those to prepare them for print. Photographs used on the web usually cannot be of the highest quality possible since their file sizes need to be considered. This is something that a print designer would not have to take into account. Adjusting the overall quality of your photos -- improving details, correcting colors, and removing flaws -- is probably the most important step in image optimization. In the following sections, you will learn how to manipulate images in the following ways: 1. Straighten the picture (de-skew) 2. Remove noise, dust, and scratches 3. Adjust tonal range (brightness/contrast) 4. Adjust highlights and shadows (levels) 5. Adjust focus Chapter 8 Page 22
  23. 23. 8.3 Image Manipulation 8.3.4 Optimizing images: de-skewing Also known as "straightening," de-skewing really just means rotating the image by tiny angles until it looks "straight" , , . De-skewing is designed for fixing scanned images that had been laid on a flatbed scanner crooked or photographs that are not at the angle desired. It is especially noticeable in images with horizontal lines, such as fire escapes and fences. There is one disadvantage about straightening an image. The areas at the corners will be cut off, which might contain detail that you want, when you crop the image after rotating it. Alternatively, if you do not crop it, the excess new area will be padded with background color. 8.3 Image Manipulation 8.3.5 Optimizing images: removing noise Chapter 8 Page 23
  24. 24. One of the first steps in preparing a photo, regardless of whether it will be saved as a GIF or a JPEG, is to get rid of noise and scratches. Print is much more forgiving of small imperfections than a monitor is. Noise in a photo can come from imperfections in the film itself or from a scanner. It can have an impact when you save it as a GIF or a JPEG. In addition, the flaws can actually have an impact on compression. The less noise you have, the better compression you will achieve. Adobe Photoshop provides not one but three filters designed to reduce noise. They are the Despeckle, Median, and Dust & Scratches filters. Each one employs a slightly different approach. Despeckle Filter - The Despeckle filter reduces noise by blurring the image subtly while preserving areas with strong contrasts. In other words, Despeckle blurs only those pixels with minor differences in color so contours do not become fuzzy. Unlike the standard blur filter, which affects everything in the photo (making it all out of focus), when you use Despeckle, the photo does not lose too much quality. It is great for small amounts of noise, but if the contrast of the noise is very high (for example, if there was dust on the photo you scanned) you may not get the result you want. For smoothing gradations or blended color areas in an image with strong contrasts, the Despeckle filter is the best method. You can apply it more than once until you get the desired blurring effect. Median Filter - The Median filter adjusts the brightness of adjacent pixels by interpolating their color values while disregarding all the values beyond a certain threshold. It works a lot like the Despeckle filter, except that Median interpolates while Despeckle blurs. You use a slider to select the range of pixels that you want Photoshop to interpolate; it is best to stay between one and three pixels. Since a GIF compresses more efficiently if several pixels on a horizontal row have the same color value, this filter can be particularly handy if you are preparing GIFs. Dust & Scratches Filter - The Dust & Scratches filter lets you designate the size of the dust scratches that you want to eliminate by using the Radius slider. If you set the slider to 1 pixel, only 1-pixel scratches will be corrected; all larger scratches will be ignored. Use the Threshold slider to define the degree of contrast that Photoshop should use to distinguish a scratch. 8.3 Image Manipulation 8.3.6 Optimizing images: brightness and contrast Sometimes images lack brightness and contrast. The Brightness/Contrast command allows you to adjust these two meters. This control is very similar to that on your television. But before you use the Brightness/Contrast command, you should try the Levels command first. It often yields better results. Chapter 8 Page 24
  25. 25. 8.3 Image Manipulation 8.3.7 Optimizing images: levels When you select the Levels command, Photoshop creates a histogram of the image. That means it looks at each pixel's brightness value and presents this information in a graph. This makes it easy for you to see the kinds of visual information in your image. But more importantly, Levels lets you extend the tonal range of the image. If the majority of your image's tonal values are in the range of 20% to 80%, you can expand those values to the full range of zero to 100%, which will instantly give your image much more contrast and detail. To stretch the histogram of an image to the maximum amount, simply adjust the black and white Input Levels. 8.3 Image Manipulation 8.3.8 Optimizing images: focus adjustment Chapter 8 Page 25
  26. 26. Focus, the sharpness or lack thereof in a picture, is affected by several variables. Photographs from 35mm cameras can be out of focus as a result of the camera moving while the photo was being taken. On the other hand, photos snapped with a digital camera tend to be blurry as a by-product of the CCD and JPEG compression. Over sharpening can result in ugly, grainy images, especially in a JPEG image (where sharpening just exacerbates existing problems). You cannot put detail in by sharpening; you can only make existing detail look slightly less fuzzy. Always view your images at 100% (this may also be called 1:1 or Actual Pixels, depending upon your software's terminology) while adjusting sharpness. Otherwise, you will not get an accurate idea of the changes you make. Ideally, you really want to have manual control over adjusting sharpness to ensure that the results are as good as possible. When you sharpen manually, use a tool called Unsharp Mask, available in products like Adobe Photoshop 6.0. An Unsharp Mask lets you control not only the intensity of the effect but also the range of neighboring pixels it takes into account for its calculations. A soft focus is a common problem with photographic images. Photoshop provides a set of filters to enhance sharpness; they are all gathered in the Filters menu under Sharpen. As with Levels, you can watch the effect of adjusting these parameters if you check the Preview box. If you plan to save the image as a JPEG, you should use this effect sparingly because the JPEGs compression algorithm actually works best on slightly blurry images. 8.3 Image Manipulation 8.3.9 Image editing Chapter 8 Page 26
  27. 27. Using filters and effects tends to be the fastest way to turn a snapshot into a personal artistic statement. They require no real special instructions to use; whether you are a pro or a novice, the only way to use filters effectively is by trial and error. Of course, some programs provide a broader variety of filters or more interesting sets of effects than other programs. In addition to filters, you can get creative when editing images by creating compositions or using transparencies, drop shadows and colored backgrounds. 8.3 Image Manipulation 8.3.10 Cropping, rotating, and resizing Chapter 8 Page 27
  28. 28. Cropping, rotating, and resizing are three activities that comprise the most common operations you will want to perform after image optimization and editing are complete. These techniques help you to reduce the overall image size by using the approach of physically reducing the image dimensions. Cropping One obvious image management technique is to crop the image. Cropping eliminates all unnecessary image areas. Since the software does not change anything in the portion kept, it will not affect image quality. Cropping an image properly is an art. On the one hand, you want to eliminate as much unnecessary image surface as possible to optimize the file size. And on the other hand, you want to preserve the essential elements of the image and maintain a strong, dynamic composition. Bear in mind that it is more efficient to size the image in image editing software than to size it in HTML code or WYSIWYG editors. If you make the visual size of the image smaller in the code or software, the browser will load an image of a greater file size than necessary, increasing the download time. If you increase the image size, you are reducing its quality because you will not have the optimal resolution to display the image. A better solution is to size the image to 100% of the size that you need or reduce it to the correct size in the image editing software. Rotating Rotating a picture simply moves each pixel to a new location in a grid by rotating it around the central axis. Rotating an image can help you bring the main aspect of the image into an area that might be easier to crop. Resizing Although most programs present you with a similar interface for resizing, the underlying calculations that the program makes to execute this operation can make a big difference in the quality of the final image. Most programs give you separate resizing controls for image dimensions (how many horizontal and vertical pixels comprise the image) and image resolution (how many of those pixels are packed into a square inch). When you shrink an image, the program has to make choices about which pixels to throw away and which ones to keep. The intelligence of these decisions will affect the level of detail preserved. In the same way, scaling an image up requires some intelligence about where and how to add extra pixels and yet maintain a reasonable level of detail. Chapter 8 Page 28
  29. 29. 8.3 Image Manipulation 8.3.11 Manipulating color An easy and yet effective tool for correcting color problems is the Variations command in Adobe Photoshop. When a camera does not compensate properly for the color of the light, the colors in the resulting photograph can be distorted. All image editors basically handle this operation the same way: they increase or decrease the amount of red, green, blue, cyan, yellow, or magenta in the image to find the correct value. Adobe Photoshop presents you with an array of thumbnails pictures depicting how the addition or subtraction of a color impacts the photograph so that you have a basis for comparison. 8.3 Image Manipulation 8.3.12 Saving images Chapter 8 Page 29
  30. 30. When preparing to save files for publication to the World Wide Web, the two most important aspects to consider are the quality of the image and its file size. These two characteristics work in opposition to each other. A screen-sized, high-quality image may take a long time to download due to its excessive file size; conversely, a small image that downloads quickly on the browser may be visually compromised. Next to cropping and resizing an image, the most important method of optimizing the file's size for web publication is to reduce resolution. The number of pixels per inch determines resolution of an image. The recommended resolution for web images is 72 pixels per inch. Usually the image is scanned and edited at a higher resolution (150 dpi or higher) and at 100% of its original size. The higher the resolution and the bigger the image, the easier it is to edit and change image content. After editing is finished, the resolution can be adjusted to 72 dpi, which will also shrink the image size to about half of the original size. You should account for this when creating the image. This setting will preserve the image quality and keep the file size relatively small. Once the resolution is adjusted, the file should be saved in the image editor's native format; in this way, all layers remain editable. This is an important step and should always be performed. You will probably need to modify or tweak the image later and so you need all layers to be intact and editable. The next step is to save the image in the format that it will be displayed in on the web page. Usually this means determining the appropriate file format (e.g., JPEG for photographs and GIF for illustrations). You should then test out which compression setting will achieve an acceptable file size while maintaining image quality. 8.3.12a Lab Activity (PDF 319KB) In this lab, you will work with masks and channels. 8.3.12b Lab Activity (PDF 299KB) In this lab, vector shapes and clipping paths are introduced. 8.3.12c Lab Activity (PDF 527KB) In this lab, you will learn to retouch photos. Chapter 8 Page 30
  31. 31. 8.4 Animation 8.4.1 Overview It is dramatically more memorable to see a concept demonstrated than to hear or read a description of it. Animation is the movement of objects or words. Many types of animations can be produced including GIF animations, Flash animations, and animations made using scripting via Dynamic HTML and related technologies. The choice of animation is going to depend on the nature of the site. There are several ways the animation can be played. To produce real-time motion, the entire file is first loaded onto the user's computer and then played at a frame rate of 24 to 30 frames per second. Streaming media lets the user begin playing the file while it is being downloaded. Adding animation to a website can increase the download time of the web pages. So before you commit resources to animation, it pays to ask yourself two questions about your project: 1. Will animation improve the delivery of the information you need to convey? 2. Will it be reasonably quick and easy for the user to download and playback the animation? If the answer to either of these questions is "no," the cost of animating may outweigh the benefits for that particular project. A series of step-by-step illustrations may do just as well. Fortunately, there are several ways to reduce download time of animations. Chapter 8 Page 31
  32. 32. 8.4 Animation 8.4.2 Reducing download time One way to reduce download time is to reduce the amount of information the files contain. Another option is to create an animation from a single graphic, whose movement is controlled via a script on the user's computer, a technique used by Dynamic HTML (DHTML). Streaming has also been created to help avoid the long wait for multimedia download. Streaming technologies let a user begin playing the file while it is being downloaded. The compressed files are sent to the client software, which decompresses them and feeds them, bit by bit, to the player. Later sections are cached in the client computer's memory until it is their turn. This technique removes the limits on file size that constrain designers under save-and- play systems. No matter how long the file, the user waits only for the first, short section. 8.4 Animation 8.4.3 Animation options Chapter 8 Page 32
  33. 33. Simple GIF animations can be created in Adobe ImageReady. For more sophisticated vector- based multimedia you will need a program like Adobe LiveMotion or Macromedia Flash. Vectors are shapes that can be animated quickly rather than drawn frame-by-frame and pixel- by-pixel as in bitmap-based animation. Vector animations have dramatically smaller file sizes and can be scaled dynamically without degrading the quality of the image. Dynamic HTML The latest trend in animation is Dynamic HTML, which is a mixture of different techniques including Cascading Style Sheets (CSS) and JavaScript. JavaScript tells the browser to move and change embedded HTML elements, such as graphics, in the browser window. Those JavaScript commands can make objects do many things like change their colors, size, or position on the page. Dynamic HTML has several advantages. You can animate HTML text rather than creating text within an image. The text will thus download much faster as HTML code. Also, Dynamic HTML animation can be interactive because you can have the user choose what an element in the image will do next. Another advantage is that users do not need special plug-ins or players. But the greatest advantage to Dynamic HTML is that you are creating animations with a single image. Instead of having to create and download a new image for each movement or change in attribute, the single image is simply manipulated by the browser. This keeps file sizes down and, thus, speeds up download times. 8.4.3 Lab Activity (PDF 317KB) In this lab, you will create animations with DHTML. 8.5 Animated GIF 8.5.1 Overview Chapter 8 Page 33
  34. 34. One of the most popular means of making web pages more visually appealing is adding animated GIFs. An animated GIF is a graphic that contains multiple images played in succession. They can be quite useful for conveying a lot of information in a small space. You can, for example, use an animated GIF to create a simple slideshow, with each frame of the image displaying new information. You can bring your illustrations to life so they not only illustrate an idea but also act it out. These days it is difficult to find a site that does not contain at least one GIF animation. If used without proper forethought, however, animated GIFs can go a long way toward making your page visually displeasing-even chaotic or annoying to the eye. This is not to say that GIFs cannot be an effective means of communication. But, it is important to pay attention to how well the animation is suited to the purpose you have in mind and observe whether it is integrated with the rest of the page. To create an animated GIF, you need to create the images or frames that will be animated. The consecutive images making up an animation are also called "sprites." A GIF image editor, like Adobe Photoshop's Image Ready, will enable you to line up all the images in order and add time delays or fading effects to the sprites. You can preview and then export the animation when done. You will create an animated GIF in the Lab at the end of this section. 8.5 Animated GIF 8.5.2 Using GIFs Chapter 8 Page 34
  35. 35. After you have created a GIF image, there are several questions you should ask yourself to determine if this GIF is ready for the website. First, you should examine the quality of the GIF image. • Does the sequence of the animation make sense? • Is the timing between frames correct? • How will it display when loading over a slower connection? Answering these questions is not easy. The best method is to view the image over a modem connection rather than from your computer to get a better feel for what the typical user might see. One trick that may help improve display over slow connections is to start your animation with a transparent frame with a delay of 3-10 seconds after it. The delay gives the browser time to pre-load subsequent frames so that they play back more smoothly when displayed. Second, you should examine the relationship between your animated GIF and the rest of the page. • Does the GIF distract your readers from the rest of the content? • Does it loop unnecessarily? Always bear in mind that although you want to draw attention to the content being presented in your animation, users may be coming in search of other content. As much as you may be proud of your animation, your readers may only find it annoying. Finally, you should think twice before using more than one animated GIF on a single page. Unless they are carefully tuned in to work together to achieve a common goal, using two or more animated GIFs on a single page is almost certain to create a visual overload. Ad banners are an exception to these guidelines because they are in demand. Given that, you will also want to take into account whether already you have ad banners on the page before adding more animated GIFs. 8.5.2 Lab Activity (PDF 126KB) In this lab, the use of GIFs is introduced. Chapter 8 Page 35
  36. 36. 8.6 SWF Animation 8.6.1 Overview Chapter 8 Page 36
  37. 37. Shockwave is the predecessor of the Shockwave SWF file format. Shockwave was originally developed for Macromedia Director to create Multimedia CD-ROMs. SWF is based on this format but is intended more for Internet-based multimedia and animations. Originally a compact animation tool called FutureSplash, SWF was modified to include sound. With intense support from Microsoft, Macromedia Flash was soon included as a native part of Internet Explorer and built into every operating system, starting with Windows 98 so that no plug-ins are required. Soon afterwards, the SWF file format was built in to other software tools such as Adobe LiveMotion and Corel Draw. Shockwave animations can be created in programs like Adobe LiveMotion. The animations are vector-based. The resulting files are thus very compact and can include a wide range of high- quality, low-bandwidth design. In addition, audio can be added. SWF animations can be interactive since links to other pages or other SWF animations and sound can be embedded within them. File sizes for vector-based graphics can be much smaller than file sizes for bitmap graphics. Similarly, vector-based animations are many times more efficient than bitmap animations, such as those used for animated GIFs. Instead of downloading a graphic for each frame of the animation, vector formats such as SWF download program code, which the Shockwave Flash plug-in on the user's computer uses to create and animate the graphics. Macromedia and RealNetworks have collaborated to create a system, called RealFlash, that combines SWF animations with a synchronized RealAudio track to create more complex, streaming animations. But it requires users to have installed RealPlayer. You will experience the creation of a SWFs animation in the following labs. 8.6.1 Video (11.37 min) In this video, you will learn about exporting as FLA. 8.6.1a Lab Activity (PDF 108KB) In this lab, you will learn to draw basic shapes. 8.6.1b Lab Activity (PDF 234KB) In this lab, you will create basic animations. 8.6.1c Lab Activity (PDF 149KB) In this lab, you will learn to export optimized files. 8.6.1d Lab Activity (PDF 327KB) In this lab, you will learn about scripting and coding with animation. Web Links For more SWFs information, visit: Chapter 8 Page 37
  38. 38. 8.7 Digital Audio and Video 8.7.1 Digital audio overview Audio and video can bring your web pages to life. Sound effects and spoken words can deliver essential information. Music or environmental sound can weave an audio texture, strengthening the emotion and personality that underlies a concept. Sound can fill in a gap in the action while something is downloading or the site is waiting for the user to respond. There are many factors you must consider before producing audio and video including whether you should sacrifice quality for efficiency and whether you should use downloadable files or streaming technology. You must also determine if the users will have the required software to play the audio or video. In this section, you will learn about audio and video choices that are available for you to use. Sound can be used either alone or as part of another media format. Earlier in this chapter, you learned that some animation technologies, such as Shockwave Flash, incorporate sound. Sound is often also useful on its own as a medium for broadcasting speech, music, or other content. If you want to use pre-recorded music, you will need to get the artist's or publisher's permission and may have to pay a fee. You can contact ASCAP (American Society of Composers, Authors, and Publishers ( ) or BMI ( There are basically two methods for delivering audio over the World Wide Web: download the files to the user's computer or stream the files. In general, the download files give you better control over the sound quality and does not require any plug-ins, but the download of a long audio file takes a while. Streaming audio has the advantage that the sound starts playing even before the file has completely loaded. As discussed in Chapter 2, the most common sound file formats are AIFF, WAV, MP3, and MIDI. Web Links ASCAP (American Society of Composers, Authors, and Publishers): BMI: Chapter 8 Page 38
  39. 39. 8.7 Digital Audio and Video 8.7.2 Digital audio streaming Streaming is a technique for transferring data so that it can be processed as a steady and continuous stream. Streaming technologies are becoming increasingly important with the growth of the Internet because most users do not have fast enough access to download large multimedia files quickly. With streaming technologies, the user can start displaying the data before the entire file has been transmitted. The streaming format allows almost instant access to very long sound files, such as songs, interviews, or even live transmissions. The RealAudio algorithm uses high compression rates ranging from about 17:1 to 170:1 based on CD quality. A three-minute song can be reduced to as little as 180KB compared to about 30 MB for CD quality. The sound quality does deteriorate when using these high compression ratios with slower modems. However, the resulting low data rate necessary for those files provides real-time audio access for modems as slow as 14.4kbps. RealAudio is the standard for streaming audio. It was developed by RealNetworks and supports FM stereo quality sound. Users need a RealAudio player either on their computer or supported by their browser. Both Netscape Navigator and Internet Explorer support RealAudio. MP3 (MPEG Audio Layer-3) is an advanced audio format that provides almost CD-quality sound with reasonable file sizes. The compression ratio is up to 12:1. The resulting files are bigger than RealAudio files (17:1) but are superior in sound. MP3 compresses sounds by removing parts that are inaudible, yet still retaining the full frequency spectrum. Streaming of MP3 files requires high-bandwidth connections, such as DSL. Another streaming audio format is LiquidAudio, which is a system for distributing CD-quality sound files over the Internet. It is mainly used by online record stores and so will probably not be used on your website. You will need special software to convert a digital recording into the streaming format. RealNetworks's RealProducer has long been the most popular software for converting files for streaming. The encoding process compresses the files until they are very small. During the compression, some parts of the file are left out. Chapter 8 Page 39
  40. 40. 8.7 Digital Audio and Video 8.7.3 Digital audio recording To have the best quality content after compression, you must start with a good source file. It is hard to ignore bad sound. Viewers are less likely to be distracted if the color is a little off than if the sound is scratchy or muffled. For a designer, getting good sound can be one of the most daunting tasks in multimedia. If you are creating sound from scratch, you must use professional quality microphones. If you are using content that has already been recorded, you should utilize digital, CD-ROM, or DAT (Digital Audio Tape) recordings if possible. Most recording devices create analog recordings. To digitize an analog sound, the signal must be processed through an analog-to-digital (A/D) converter. Most computers now come equipped with the sound cards that have A/D converters. If your computer has a sound input jack, it already has an A/D converter. If your computer has only a sound output jack or an internal speaker, you probably only have digital-to-analog conversion capabilities. Usually some kind of A/D conversion is involved because most computers do not come with digital audio inputs yet. How Audio is Digitized An A/D converter utilizes a "sample and hold" circuit that records the voltage levels of the input signal at a fixed interval. This interval, or rate, at which the signal is sampled, is determined by the A/D converter's "sampling rate." The sampling rate also determines the highest frequency that can be recorded or played back. It is important that the recording be played back at the same sampling rate at which it was recorded. For example, 8KHz is a telephony standard that is emerging as a standard for 8-bit AU file format. 44KHz is the standard audio CD-ROM sampling rate. All formats, except MIDI, record sound by sampling it at frequent intervals and saving each value as a digital code. MIDI, on the other hand, records commands that create sounds in MIDI-capable instruments or sound boards. To produce the best quality sound that closely resembles the original sound, it is necessary to have a very high sampling rate. The common sampling frequencies are 11KHz, 22KHz, and 44KHz and the common sampling bits are 8 bits and 16 bits. Using a sampling rate that is too low will produce an inferior sound. This is because too much important information would be lost as the sound is being digitized. Of course, a higher frequency and bit-depth sampling will produce a larger file, which would then take longer to download. For instance, CD-quality sound is 44KHz and 16-bit sound. One second of uncompressed CD-quality sound can result in a roughly 70KB file (44,000 samples x 16 bits/second). As with video, most sound recording software offers a range of compression levels that trade off sound quality for smaller files. Chapter 8 Page 40
  41. 41. 8.7 Digital Audio and Video 8.7.4 Digital audio editing After you have created your sound file, you will want to edit it. You can use shareware or professional software. The following programs will help you with audio editing: • Cool Edit is a digital sound editor for Windows. With this company you have a variety of software choices from a simple shareware package, CoolEdit 96, to a more sophisticated tool, CoolEdit Pro. • Sound Forge by Sonic Foundry is a professional sound editing software for Windows that includes an extensive set of audio processes, tools, and effects for manipulating audio. Sound Forge offers full support for the latest streaming technology, including RealAudio. • AudioTrack by Waves is a good audio editor for musicians. It combines audio processors including equalization, compression/expansion, and gating. WaveConvert Pro converts your audio files into another format. • Pro Tools by Digidesign is for professional audio editors. • Sound Edit 16 by Macromedia is an affordable digital audio editing software that creates Shockwave Audio files. Web Links The following are links for the above products: Chapter 8 Page 41
  42. 42. 8.7 Digital Audio and Video 8.7.5 Digital audio embedding There are several ways of integrating sound into your Web page, but the most commonly used is the embed tag. The embed tag allows designers to embed objects directly into an HTML page. The user only needs to have an application installed on their computer or have a plug-in that can manipulate the embedded file format. The embed tag can be used more or less the same as the image tag and so accepts typical image embedding attributes such as align, alt, border, width, height, hspace, vspace, and name (for referencing the embedded object in a script function). Multiple embed tags can be grouped together with the same name attribute value to provide multiple separate controls for a single embedded sound file. 8.7 Digital Audio and Video 8.7.6 Digital video overview Chapter 8 Page 42
  43. 43. Video is perhaps the most dramatic media type that can be used on a website. Videos are a dramatic improvement over text explanations or voice-overs. Video can be overdone. Just as too much body copy can be painful to read because of the low resolution of the computer screen, too much video, regardless of its quality or how fast it can be streamed over the Internet, can be frustrating when a person is expecting a more interactive experience. Whenever appropriate, break up the videos into short segments that contain a single concept. Video is also the biggest bandwidth user on the Internet. Even in compressed formats, such as QuickTime and AVI, video files of more than a few seconds are commonly measured in megabytes. Regardless of the size of the video clip, the filming and digitization quality of the original video should be at a professional level. As discussed in Chapter 2, the most popular video formats are AVI, MOV, QuickTime, and MPEG. 8.7 Digital Audio and Video 8.7.7 Digital video streaming To avoid long download times that can last for hours, it is usually best to use a streaming format for video. With the help of special servers, streaming formats allow you to broadcast live video that you could use for your client's press conferences or product demonstrations. As discussed in Chapter 2, the most common streaming formats used are Real Audio/Video, QuickTime, and Windows Media. An additional streaming player is Microsoft NetShow, which is built into Windows and Internet Explorer applications. Players are also available for the Macintosh and for Unix machines. NetShow may offer the most universal support for virtually every video format: ASF, ReaIVideo, QuickTime, AVI, and MPEG. Chapter 8 Page 43
  44. 44. 8.7 Digital Audio and Video 8.7.8 Multicasting If video comes into wide use over the Internet, the available bandwidth will deplete quickly. Even a T1 connection can handle only a few streams of real-time video at one time. The most promising solution to this problem of limited bandwidth is called multicasting. Multicasting is transmitting video to a select group of people. Instead of sending out separate video files each time a user requests it, multicasting lets web servers send out just one video stream. Reflectors duplicate the stream as it is sent out, resulting in a geometric increase in the number of streams as it is passed from reflector to reflector. Users can "listen in" to a broadcast just as they would tune in to a TV or radio program. In order for multicasting to work, there needs to be server software that can originate a multicast signal, enough reflectors in place to duplicate the stream, and user software that can tune in. Some of these requirements are starting to appear. For example, Microsoft NetShow supports both the server and user. In addition, multicast equipment is becoming more common for transferring information across the Internet. This network of multicast equipment that is capable of transmitting and receiving multicast sound and video is called the MBONE, the Multimedia Backbone . Chapter 8 Page 44
  45. 45. 8.7 Digital Audio and Video 8.7.9 "Live" video via web cams Web cams are small cameras that record activities at set intervals. For instance, Electrolux has placed a web cam in the refrigerator of a family in Sweden that is activated each time a member of the family opens the door for a snack. Other web cams have been set up to record weather or to show pets in animal shelters in need of adoption. Snapshots are taken at regular time intervals and then posted on the web. Web cameras are not real video cameras because they take photographs rather than record continuously like a video camera. 8.7 Digital Audio and Video 8.7.10 Digital video capturing Chapter 8 Page 45
  46. 46. When you are capturing video, you should use a very fast computer and a high-quality video capture card. If you do not, the video's quality may suffer. You will also sacrifice quality during the compression process if you do not choose the best video bit rate and frame speed to meet your needs. Resolution has a great impact on the quality of the video. For the best quality video, you want to have the highest color depth and highest resolution possible. The frame resolution used for most video work is 720x480. 320x240 is used in most multimedia applications, and 240x180 is used for Internet streaming video. The size of the image file is the resolution multiplied by the bit depth (size = resolution x bit depth). A common video image is 720x480 at a 24-bit color depth. That is 720 times 480 times 24, which equals 8,294,400 bits of information, which is just under 1MB in disk space per frame. That translates to just less than 30MB per second. Most desktop computer systems will be able to handle this file without many problems. The horizontal and vertical measurement of an image is known as the image's aspect ratio. When cropping a video, it is important to match and, in some manner, convert aspect ratios for all source and output format files. Once you mix aspect ratios, you can be guaranteed a distorted image. 8.7 Digital Audio and Video 8.7.11 Capturing hardware Chapter 8 Page 46
  47. 47. Capturing videos from tape requires some additional hardware. In order to capture video to your hard drive, you will need a capture device that will capture video in the standard of your particular geographic area in the world, whether it is NTSC, PAL, or SECAM. NTSC is the standard in North America. PAL is the standard for most of Europe, the Far East, and parts of Africa. SECAM is used in France, Eastern Europe, the Middle East, and the rest of Africa. Video files can be quite large. You should have enough hard drive space to accommodate the project that you are working on. At a data rate of around 5MB/sec, a 17GB hard disk will hold approximately 73 minutes of video. It is important to have a second hard drive for capturing video. Keep your operating system, programs, documents, and most bitmap graphics on the system drive. The secondary drive should be for capture and playback of your video files. It is important to keep your operating system separate from your video files because the operating system is constantly accessing files from that drive. Video capture requires a certain sustained data rate or else you will get a video file with dropped frames and a sound track that seems to skip like an old phonograph record. Figure shows the hardware suggestions for video capture on a PC. Figure shows the hardware suggestions for video capture on a Macintosh computer. Chapter 8 Page 47
  48. 48. 8.7 Digital Audio and Video 8.7.12 Digital video editing Editing video on a computer is known as "Non-Linear Video Editing," which allows you to create special effects. Adobe Premiere is a professional video editor that provides support for all types of digital video devices. It creates videos for a multitude of web output formats including QuickTime Streaming, Real G2 Streaming, Windows Media, AVI, MPEG-1, and MP3. It has a storyboard window where it is easy to create a rough cut within minutes by dragging and dropping clips. After you have applied effects and transitions to the video, you can preview the adjustments directly on an NTSC monitor. RealVideo creates an impressive image quality that is sharp and crisp, but yields sluggish response on slow systems due to high demands on the CPU when decompressing images. This may result in low frame rates, about one image or less per second, and 'net congestion' errors even on local playback. QuickTime generally requires less CPU overhead and is more responsive than RealVideo. Therefore it works on even slow systems without breakups. QuickTime also has better audio quality than RealVideo and the data rate can be adjusted in finer increments. At the end of this section, you will edit a video in a lab. Chapter 8 Page 48
  49. 49. 8.7 Digital Audio and Video 8.7.13 Digital video compression Compressing your video for publishing is the last significant step. Most of the video formats allow you to store files in either lossy or lossless compression and sometimes both. Lossy compression technologies attempt to eliminate redundant or unnecessary information. Most video compression technologies use a lossy technique. Videos with high resolution and low color depth using a lossy compression scheme are worse than low-resolution video with good color depth using lossless compression. However, lossless compression needs the user to have special software. Codec, which is short for Compression/DECompression, is what allows the video to playback on a user's desktop. Some of the more popular Codecs are Cinepak, Indeo, Sorenson, Microsoft Video 1, and Microsoft RLE. QuickTime's Sorenson Professional Codec offers a variable bit rate (VBR) for encoding so that the video image quality will be equal to (or even better than) that of RealVideo. All video files can be output to a new file using one of these software-based Codecs. Chapter 8 Page 49
  50. 50. 8.7 Digital Audio and Video 8.7.14 Digital video embedding Chapter 8 Page 50
  51. 51. The simplest way to integrate video on your web page is just to create a link to the file. When the user clicks on the link, the file will be opened externally in either QuickTime or RealPlayer. Although this technique works, some web designers actually embed the video in the HTML document. GoLive can do this as it supports both QuickTime and RealVideo. QuickTime Embedding Before you embed QuickTime videos into your web page, make sure that their file names end in ".mov." QuickTime videos also need to be flattened, which means that their headers need to be removed. QuickTime Player Pro and Media Cleaner Pro do this automatically. To place the QuickTime video into the HTML document, just drag it into the document window or choose the Plug-In object from the Palette and press the Browse button in the Plug-in Inspector. The QuickTime plug-in needs to be placed in GoLive's Plug-in folder for the QuickTime Inspector to appear. The following parameters need to be set so that the video will play properly: • autoplay=true - The video will start automatically after the page has loaded. • loop=true - The video will loop after it has ended. • cache=true - This temporarily stores or caches the video on the user's hard drive. • href=[URL of actual video file] - HREF defines a URL that can be absolute or relative. • target=myself - This defines where the HREF video should play. Setting it to "myself" will open it in the original place of the SRC video. • controller=false - Set this attribute if you want to hide the controllers for the SRC video. This attribute does not apply to the HREF video. To avoid placement anomalies in the two videos, the SRC video in the example should have a height of 136 pixels without the controllers and the HREF video should measure 136 pixels with the controllers (or 120 without). RealVideo Embedding Embedding RealVideo content is a little more complicated. First of all, it is important to know that you need to create a metafile if you want to use streaming without a server. A metafile is a simple text file that contains the URL of the media file to be streamed. You can use a simple text editor to create such a file or in GoLive choose File > New Special > New Text Document. The information inside the metafile consists basically of a single text line with the absolute URL of the audio or video file. It could look like this: Again, the URL must be absolute to work, which makes it a bit more tedious to preview your work locally before uploading to the server. The name of this file must have the extension ".ram" or ".rpm." A ".rpm" file is commonly used to play video or audio content inside a web page, whereas a ".ram" file, will play a video or audio from the RealPlayer application. To play the ".ram" file all you need to do is create a hyperlink to it in the web page. 8.7.14a Lab Activity (PDF 322KB) In this lab, you will learn to add transitions. 8.7.14b Lab Activity (PDF 138KB) In this lab, you will learn to create a title. Chapter 8 Page 51
  52. 52. Summary This chapter discussed how to create content. You learned how to write the text, use existing media, and create new media. As technology changes, you may need to learn further skills to keep current. But the design principles and guidelines you learned in the course can be applied to the new technology. The use of images and multimedia can make a website stand out among its competition. It is more important that your design reflects your client's intention than to simply dazzle the audience. Your client needs a website that will help further his/her business. The images and multimedia elements that you choose to use or create should all be geared toward that goal. Even if you have created a very cool animation, do not use it unless it will improve the website from the point of view of the user. The animation should be essential to the site's mission. Deciding what to keep and what to discard is part of the process of design. A cluttered, slow website is not a good website. Your goal is to create a website that fulfills the functions that the client needs, is not too slow when downloading, is visually appealing, and is representative of the client's business goals. Bandwidth is one issue that will affect how you design multimedia. Although it would be easier to design for users who have very fast connections, such as a T1, that simply is not reality. Apply what you learned in this chapter to make multimedia files smaller and thus faster for users to download. Although it is tempting to put all your energy into creating a visually stimulating site, you cannot neglect the information that the site contains. While entertainment certainly is appealing, most users use the World Wide Web for information. Therefore, you should apply the same care to your writing as you do to your images and animations. A well-written site is critical to entice users back to the site. Once a user has seen the graphics, he/she will concentrate on the information offered on the website; this information needs to be carefully thought out and written clearly and concisely. Now that you have learned the skills to create the online content, the next chapter will teach you how to make the website interactive. Chapter 8 Page 52