Vector and Raster Graphics - PowerPoint PPT Presentation

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

play fullscreen
1 / 14
Download Presentation
Vector and Raster Graphics
366 Views
Download Presentation

Vector and Raster Graphics

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Vector and Raster Graphics CSE5060: Multimedia Applications on the Web Lecture 7 Dan Eaves CSE5060: Lecture 7: Vector & Raster Graphics

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. Raster Versus Vector • Best way to distinguish them is to compare • A photograph to a drawing CSE5060: Lecture 7: Vector & Raster Graphics

  8. Raster Image (.jpg) Top Left Corner @ 4x CSE5060: Lecture 7: Vector & Raster Graphics

  9. Vector Image (.cdr) Top Left Corner @ 4x CSE5060: Lecture 7: Vector & Raster Graphics

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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