1 / 14

Vector and Raster Graphics

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:

jana
Download Presentation

Vector and Raster Graphics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related