vector and raster graphics l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Vector and Raster Graphics PowerPoint Presentation
Download Presentation
Vector and Raster Graphics

Loading in 2 Seconds...

play fullscreen
1 / 14

Vector and Raster Graphics - PowerPoint PPT Presentation


  • 355 Views
  • Uploaded on

Vector and Raster Graphics CSE5060: Multimedia Applications on the Web Lecture 7 Dan Eaves Raster versus Vector Graphics All the discussion so far has related to raster graphics: a moving point that touches each pixel position from top left to bottom right:

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

PowerPoint Slideshow about 'Vector and Raster Graphics' - jana


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
vector and raster graphics

Vector and Raster Graphics

CSE5060:

Multimedia Applications on the Web

Lecture 7

Dan Eaves

CSE5060: Lecture 7: Vector & Raster Graphics

raster versus vector graphics
Raster versus Vector Graphics
  • All the discussion so far has related to raster graphics:
    • a moving point that touches each pixel position from top left to bottom right:
    • Bitmaps compressed with GIF and JPEG, etc..
    • The worst possible case.
  • We can generate images using vector graphics
    • Using 4-6 coordinates we can specify a Bézier curve.
    • Many such curves are used to create the outline of a shape

CSE5060: Lecture 7: Vector & Raster Graphics

b zier curves
Bézier Curves
  • Having an outline, we can fill with a colour or use a fountain fill to flow changing colours into the shape.
  • Bézier curves trade tiny file sizes for considerable computer processing.
  • Traditionally, Flash animations are vector graphics “movies”, with the occasional raster layer in the background.
    • In contemporary use, may contain a raster video

CSE5060: Lecture 7: Vector & Raster Graphics

flash introduced
Flash Introduced
  • First released in 1996 by Macromedia
    • (Macromedia was bought by Adobe in 2005)
    • Now called “Adobe Flash” or just Flash
  • Has two parts
    • Flash – An IDE for developing animations for use on the web.
    • The Flash Player – a browser extension for running Flash animations within HTML-based pages
  • Hated by many
    • Time-consuming Intro pages
    • Intrusive advertisements on web pages
    • But somewhat less horrible if you have broadband (and browse with the sound turned off!)

CSE5060: Lecture 7: Vector & Raster Graphics

monash has a site license for
Monash Has a Site License for:
  • “Macromedia” Web Tools 8
    • Dreamweaver 8
      • IDE to develop web pages with HTML hidden
    • Flash 8 Basic
      • IDE to develop Flash “movies”
    • Fireworks 8
    • Freehand MX
  • The suite is installed in all labs
  • The license is limited to labs and staff, so you can’t get a copy from the Help Desk
  • Note that we are using Release 8 (late 2005)

CSE5060: Lecture 7: Vector & Raster Graphics

assignment 3
Assignment 3
  • Will be based on learning and using Flash
  • May be integrated with Assignment 4
  • As you learn Flash, keep your mind on coming up with ideas for those two assignments.
    • They may be combined!
    • There’s some risk with that
    • But you will certainly end up with a good demonstration of your forecasts!

CSE5060: Lecture 7: Vector & Raster Graphics

raster versus vector
Raster Versus Vector
  • Best way to distinguish them is to compare
    • A photograph to a drawing

CSE5060: Lecture 7: Vector & Raster Graphics

raster image jpg top left corner @ 4x
Raster Image (.jpg) Top Left Corner @ 4x

CSE5060: Lecture 7: Vector & Raster Graphics

vector image cdr top left corner @ 4x
Vector Image (.cdr) Top Left Corner @ 4x

CSE5060: Lecture 7: Vector & Raster Graphics

there are always tradeoffs
There are always tradeoffs
  • With raster graphics
    • Many colours, lots of detail, realistic, but
    • Very big, can’t increase/decrease size, slow download, little clientside processing
    • Required if realism/people necessary, so
    • “Postage stamp” size necessary
  • With vector graphics
    • Limited number of colours – colour gradients (“fountain fills”), solid colours
    • Small file size, can increase/decrease size, fast download, considerable clientside processing

CSE5060: Lecture 7: Vector & Raster Graphics

the formats are not interchangeable
The Formats Are Not Interchangeable
  • You can’t turn a raster image into a vector image
    • Well, you can but the resulting file is too big to use!
  • You can’t turn a vector image into a raster image
    • Well, you can but you then lose all the advantages of the vector formats.
  • Flash (and other products) let you superimpose vector layers on top of a raster image.
  • And that raster image may be a compressed movie.

CSE5060: Lecture 7: Vector & Raster Graphics

industry standards
Industry Standards
  • For creating/editing vector images
    • Adobe Illustrator (market leader)
    • Corel Draw
    • Macromedia Freehand (not long for this world?)
  • For creating/editing raster images
    • Adobe Photoshop
    • (There isn’t really any second)
  • For creating cheap 2D vector animations
    • Macromedia Flash

CSE5060: Lecture 7: Vector & Raster Graphics

do not confuse flash animations with real 3d animations
Do Not Confuse Flash Animations with Real 3D Animations
  • These are produced with expensive products:
    • LightWave 3D (NewTek)
    • 3D Studio Max (Autodesk)
    • Maya/Alias (Recently Autodesk)
    • Softimage|XLS (Avid)
    • RenderMan (Pixar)
  • (Roughly in price order)
  • Require enormous “render farms” to build final images
  • Produce images too big for regular web use

CSE5060: Lecture 7: Vector & Raster Graphics

just to prove me wrong
Just to Prove Me Wrong
  • 3D Animations for Flash
    • Swift 3D Showcase
    • Joe Pingleton
  • Less fancy animations
    • Viva Graphics
    • Don’t Click It
    • My Flash Resource

CSE5060: Lecture 7: Vector & Raster Graphics