inls102 week7 multimedia graphics for the web l.
Skip this Video
Loading SlideShow in 5 Seconds..
INLS102 Week7: Multimedia/Graphics for the web PowerPoint Presentation
Download Presentation
INLS102 Week7: Multimedia/Graphics for the web

Loading in 2 Seconds...

play fullscreen
1 / 23

INLS102 Week7: Multimedia/Graphics for the web - PowerPoint PPT Presentation

  • Uploaded on

INLS102 Week7: Multimedia/Graphics for the web . Date: 10/12/05 Instructor: Leo Cao. Today’s Overview. Multimedia formats Graphics Audio/Video Multimedia tools: Photoshop Banner and button design Navigation design issues Layout design issues. Bitmap Graphics basic: pixels.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

INLS102 Week7: Multimedia/Graphics for the web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
inls102 week7 multimedia graphics for the web

INLS102 Week7:Multimedia/Graphics for the web

Date: 10/12/05

Instructor: Leo Cao

today s overview
Today’s Overview
  • Multimedia formats
    • Graphics
    • Audio/Video
  • Multimedia tools: Photoshop
  • Banner and button design
  • Navigation design issues
  • Layout design issues
bitmap graphics basic pixels
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
graphics basic image resolution in pixels
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
graphics file types
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
file size explained
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.
graphics basic vectors
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 ( check it out if you’re interested
vector images
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.
bitmap images
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.
  • 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
audio formats
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
video formats
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
photoshop fundamentals
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
image editing
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
photoshop tools useful ones
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
photoshop details
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
photoshop details17
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
photoshoping for the web
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)
logo banners
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
photoshop exercise
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
exercise image rollovers
Exercise: Image rollovers
  • Another skill to learn, adapting code to your use
    • Make a working rollover image
    • This instruction is as good as any
show tell time
Show & tell time
  • Quick overview of paint in windows
  • Quick overview of fireworks
  • Quick overview of flash
for next week
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