INLS102 Week7: Multimedia/Graphics for the web

1. INLS102 Week7:Multimedia/Graphics for the web Date: 10/12/05 Instructor: Leo Cao

2. Today’s Overview • Multimedia formats • Graphics • Audio/Video • Multimedia tools: Photoshop • Banner and button design • Navigation design issues • Layout design issues

3. Bitmap Graphics basic: pixels • Pixels, pixels, pixels • Digital images are composed of either vectors (lines) or bitmap (pixels), we’re working with pixels • Get used to thinking and seeing in pixels, in tiny, single-colored squares • This pixel graphics are often called bitmap or raster etc. • See pixel and vector example

4. Graphics basic: image resolution (in pixels) • Measured by ppi (pixels per inch) • Generally monitors have about 72 or 100 pixels per inch • 19inch monitor, 19x100=about 1900pixels for the screen • Screen resolutions, 1024x768 • 1024 pixels across, 768 down, multiply to get the total pixel, 786,642 pixels on that screen • The higher the pixel count of an image, the better it looks, and the larger the file size

5. Graphics file types • File types (ones you need to know right now) • gif – small file size, 256 color limit • Not the best quality, but it’s good for short animations • png is the upgraded version of gif • jpeg – photo quality, 16.7mil colors • Save it at medium quality when you intend to post it on the web, generally when you have a picture that says mb on image size, that’s not good for the web • psd – photoshop specific file, use it for work-in-progress file saving • Image quality’s usually compressed, flattened, and generally decreased when you save as gif or jpeg

6. File size explained • Download speed of webpages are dependent on the file size, and connection mode • 1,024 Byte = 1 Kilobyte (KB) • 1,024 Kilobyte (KB) = 1 Megabyte (MB) • 1,073,741,824 Bytes = 1 Gigabyte (GB) • 1 Gigabyte (GB) = 1,024 Megabyte (MB) • Generally speaking, files over 100kb will be slow for non-broadband connections.

7. Graphics basic: vectors • Store image data as a set of mathematical formulas that instruct the computer how to draw the image • Made up of many individual, scalable objects: • lines, curves, and shapes with editable attributes such as color, fill, and outline • Smaller image size than pixels • Means it can be scaled without quality loss • If vector’s so cool, why aren’t we using it? • Mainly because vectors are based on displaying precise and definable objects; complex images like photos are too difficult for vector graphics to handle • W3c made a scalable vector graphic standard for the web (http://www.w3schools.com/svg/default.asp) check it out if you’re interested

8. Vector images • Vector images are mathematically-based. All lines, shapes, etc. (also called objects) of a vector-based image are independent of one another. • Vector-based images are usually created and edited in "draw" or "illustrate" programs such as Adobe Illustrator. • Vector-based images have smooth edges. • Vector-based images create curves or shapes. • Vector-based images are good for precise illustrations, but are not as good for photorealistic images. • Vector-based images are easily scalable, due to their use of mathematic formulas. • http://www.adobe.com/education/webtech/CS2/unit_graphics1/gb_bitmap_id.htm

9. Bitmap images • The information stored in a bitmap image regarding pixel location and color is what forms the image. Bitmap images are edited at the pixel level; in other words, the color of any one pixel can be changed. Additional attributes of bitmap images include: • Bitmap images are usually created and edited in "photo" or "paint" programs such as Adobe Photoshop. • Bitmap images are mapped to a grid. • The size of the image is based on the image's resolution. • Bitmap images are not easily scalable. • Bitmap images are used for photorealistic images and, therefore, may involve complex color variations. • http://www.adobe.com/education/webtech/CS2/unit_graphics1/gb_bitmap_id.htm

10. Intermission • 15 13 14 12 10 11 9 … • Progressive or inter-laced images • Means the image gets displayed as its being loaded, none to blurred to clear • As opposed to the normal mode, the image appears when its fully loaded

11. Audio formats • MIDI (Musical Instrument Digital Interface): • Developed by the music industry in 1982 • It cannot store songs, only tunes • Extremely small: • MP3 • MPEG (Moving Picture Experts Group) file for audio • Good for music • WAV • WAVE (waveform) format is developed by IBM and Microsoft • .wav is supported by all browsers • Good to record sound

12. Video formats • AVI (Audio Video Interleave) -- .avi • Developed by Microsoft. • MPEG --- .mpg or .mpeg • Moving Pictures Expert Group • Quick time --- .mov • Developed by Apple • RealVideo --- .rm or .ram • Developed by Real Media • Low quality, small size • Flash --- .swf • By Macromedia

13. Photoshop fundamentals • Basic painting • Familiarizing w/ the workspace • Setting size on new page, in pixels • Brush types and sizes • Drawing/erasing • Press down on the menu item to get more options • Undo/redo • History feature (your best friend in photoshop) • Don’t mess w/ the original, save copies, often, • First thing you always do when you start working on a graphic file is to save a backup

14. Image editing • Zooming • Resizing images • Saving files • Use gif and jpeg formats appropriately • Color • Don’t worry about web-safe colors • Various tools such as eyedropper, magic wand and bucket can do wonders

15. Photoshop tools (useful ones) • Text tool • Use it to insert text into an image • Keep in mind that when the image is flattened (saved as gif/jpeg), you will not be able to edit the text • Gradient tool • Useful for creating transition colors between two+ colors • Eyedropper • Useful for stealing exact colors • Bucket tool • Good for filling/replacing colors • Magic wand • Good for selecting parts of an image • Not always precise, but magically cool to use

16. Photoshop details • Pixel-level editing • Zoom in and edit at the pixel level • Layers (best feature of photoshop) • Creating/duplicating/deleting layers • Make layers visible/invisible • Lock/unlock • Linking and merging layers • Always have the file saved in psd format if you intend to keep the layers, anything else and it gets flattened to just a single layer

17. Photoshop details • Fun stuff w/ filters • Mostly trial and error to check out various distortions you can apply to an image • Setting preferences and customizations • Advice • Go check out a book on photoshop if you want to learn more • Again, practice, playing around w/ it is the only way to master this tool

18. Photoshoping for the web • Aware of file size/quality trade off • Design awareness making the image of appropriate size/dimension to fit on the webpage • Apply consistent convention in file naming • Generally use lower case • Names should be informative and make it easy for organization (such as, button_home.gif etc)

19. Logo banners • It’s a website convention to have a banner across the top of the webpage • Your way of branding the uniqueness of your page • Choice of color, contrast, and graphical display is important • Sets the visual tone for your webpage • Usually displayed across all your pages, for consistency and branding

20. Photoshop exercise • Make something (banner and menu buttons), test out the tools mentioned • Save a .psd copy • Save a copy for the web • Make the buttons rollover

21. Exercise: Image rollovers • Another skill to learn, adapting code to your use • Make a working rollover image • This instruction is as good as any • http://www.htmlcenter.com/tutorials/tutorials.cfm/79/Javascript/

22. Show & tell time • Quick overview of paint in windows • Quick overview of fireworks • Quick overview of flash

23. For next week • Read, practice, update your webpage • You’re free to use any web authoring tools such as dreamweaver now • Don’t neglect your group project