Inls102 week7 multimedia graphics for the web
1 / 23

Graphics and multimedia photoshoping - PowerPoint PPT Presentation

  • Updated 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

PowerPoint Slideshow about 'Graphics and multimedia photoshoping' - Melvin

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 l.jpg

INLS102 Week7:Multimedia/Graphics for the web

Date: 10/12/05

Instructor: Leo Cao

Today s overview l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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.


Intermission l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Show & tell time

  • Quick overview of paint in windows

  • Quick overview of fireworks

  • Quick overview of flash

For next week l.jpg
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