Vector GraphicsVector Graphics

Digital Media Module – week Digital Media Module – week 33

GraphicsGraphics

What sorts of computer graphics are there?What sorts of computer graphics are there?

How do they differ?How do they differ?

What can we use them for?What can we use them for?

How can we create them?How can we create them?

Session Session IntroductionIntroduction

Today’s first topic is Vector graphics - Today’s first topic is Vector graphics - sometimes called clip art or drawings or sometimes called clip art or drawings or picturespictures

Don’t be misled they don’t have drawn by Don’t be misled they don’t have drawn by handhand

OutlineOutline

We will look at:We will look at:– what vector graphics are exactlywhat vector graphics are exactly– why vector graphics are importantwhy vector graphics are important– how they are createdhow they are created– what they are used forwhat they are used for– how they are storedhow they are stored– what their use is in multimediawhat their use is in multimedia

Introduction to the Introduction to the Nature of Vector Nature of Vector

GraphicsGraphics

They are a static media, so they don’t change They are a static media, so they don’t change with timewith time

That isn’t to say that we can’t appear to make That isn’t to say that we can’t appear to make them change but they don’t change by them change but they don’t change by themselvesthemselves

There are three sources of vector graphics:There are three sources of vector graphics:– Human-created drawingsHuman-created drawings

– Program or script generated drawingsProgram or script generated drawings

– Computer converted scans or digitised printed Computer converted scans or digitised printed materialmaterial

Vector GraphicsVector Graphics

The first major division of graphics files is The first major division of graphics files is the vectorthe vector

Literally a list of vectors (lines with length Literally a list of vectors (lines with length and direction) making up the graphic and direction) making up the graphic (image)(image)– They may enclose areas for form shapesThey may enclose areas for form shapes

Maths and VectorsMaths and Vectors

The mathematical nature makes vector The mathematical nature makes vector graphics suitable for:graphics suitable for:– technical drawingstechnical drawings– outline drawings – cartoonsoutline drawings – cartoons– diagramsdiagrams– flowchartsflowcharts– graphsgraphs

Vector Graphics - Vector Graphics - 22

Even something as simple as an arrow may Even something as simple as an arrow may be a vector graphicbe a vector graphic

Their content is normally characterised by Their content is normally characterised by shapes bounded by lines either straight or shapes bounded by lines either straight or smooth curves – otherwise known as splinessmooth curves – otherwise known as splines– the lines may be a different colour – line colour the lines may be a different colour – line colour

as opposed to fill colouras opposed to fill colour

Their colouring is normally characterised by Their colouring is normally characterised by areas of single colours areas of single colours

Spline-based Spline-based CurvesCurves

A spline is a mathematical representation of A spline is a mathematical representation of a curve - used in most drawing programsa curve - used in most drawing programs– defined by a series of anchor points for the defined by a series of anchor points for the

curvecurve– can manipulate the curve by moving the two can manipulate the curve by moving the two

control handles on each anchor pointcontrol handles on each anchor pointexcept the end points of the line which have only except the end points of the line which have only oneone

– the program can ensure that the curve passes the program can ensure that the curve passes through the anchor points smoothly if requiredthrough the anchor points smoothly if required

Spline-Based Spline-Based CurvesCurves

Conclusion for Nature Conclusion for Nature of Vector Graphicsof Vector Graphics

They are a static mediaThey are a static media

There are five main uses for vector graphics:There are five main uses for vector graphics:– technical drawingstechnical drawings– outline drawings – cartoonsoutline drawings – cartoons– diagramsdiagrams– flowchartsflowcharts– graphsgraphs

They are a just lines and shapesThey are a just lines and shapes

Introduction to Introduction to Vector FilesVector Files

What information the files actually holdWhat information the files actually hold

What determines their sizeWhat determines their size

First we’ll consider types of item held in First we’ll consider types of item held in vector filesvector files

DrawingsDrawings

Sets of shapes created by a drawing or CAD Sets of shapes created by a drawing or CAD applicationapplication

Consist only of linesConsist only of lines

Lines and enclosed shapes may be colouredLines and enclosed shapes may be coloured

Macromedia Freehand, Adobe Illustrator, Macromedia Freehand, Adobe Illustrator, MS PowerPoint, Corel Draw, Autodesk’s MS PowerPoint, Corel Draw, Autodesk’s AutoCAD, etc.AutoCAD, etc.

Drawings - 2Drawings - 2

May also be creatable by the MM authoring May also be creatable by the MM authoring SWSW

Supplied ready-drawn as clip-artSupplied ready-drawn as clip-art

One set of shapes for all sizes of One set of shapes for all sizes of reproductionreproduction– Very compact file storageVery compact file storage– Relatively easy to alterRelatively easy to alter

GraphsGraphs

Shapes created by a Graphing applicationShapes created by a Graphing application

Consist only of linesConsist only of lines– lines and enclosed shapes may be colouredlines and enclosed shapes may be coloured

MS PowerPoint, Excel, etc.MS PowerPoint, Excel, etc.

May also be creatable by MM authoring SWMay also be creatable by MM authoring SW

One set of shapes for all sizes of reproductionOne set of shapes for all sizes of reproduction– Very compact file storageVery compact file storage– Relatively easy to alterRelatively easy to alter

DigitisingDigitising

Digitised DrawingsDigitised Drawings– Shapes created by using digitising tablet to Shapes created by using digitising tablet to

pick out significant points – such beginning pick out significant points – such beginning and ends of linesand ends of lines

– Used within drawing or CAD package to Used within drawing or CAD package to create technical drawingscreate technical drawings

SizeSize

The size of a vector file – the amount of disk The size of a vector file – the amount of disk space it needs depends on two thingsspace it needs depends on two things– The complexity of the “drawing”The complexity of the “drawing”– The efficiency with which the vector The efficiency with which the vector

information is held in a particular formatinformation is held in a particular formatThis may be related to the versatility of the formatThis may be related to the versatility of the format

If it is program specific it may be quite compactIf it is program specific it may be quite compact

If it is generic – designed by a committee perhaps If it is generic – designed by a committee perhaps – it may have to incorporate more types of – it may have to incorporate more types of information in less compact formsinformation in less compact forms

Conclusion for Conclusion for Vector FilesVector Files

Hold information about vectors and coloursHold information about vectors and colours

Complexity determines their sizeComplexity determines their size

Introduction to Introduction to Specific File FormatsSpecific File Formats

We’ll consider the need to choose the file We’ll consider the need to choose the file formats that you will use carefullyformats that you will use carefully

Common file formatsCommon file formats

To use a vector graphic that already To use a vector graphic that already exists your SW must be able to handle exists your SW must be able to handle the format in which the graphic is savedthe format in which the graphic is saved

Vector File FormatsVector File Formats

There are numerous formats; some common There are numerous formats; some common ones are:ones are:– WMF, EMF, CGM, DXF, CDR, AI, FH10, WMF, EMF, CGM, DXF, CDR, AI, FH10,

PICT,PICT, PS,PS, FLAFLA and and SWFSWF

Many vector graphics formats permit the Many vector graphics formats permit the saving of embedded image (bitmap saving of embedded image (bitmap graphic) within the filegraphic) within the file

Vector Graphics Vector Graphics File Formats - 1File Formats - 1

Windows metafile - .wmfWindows metafile - .wmf– Created by Microsoft for drawings produced by Created by Microsoft for drawings produced by

Office mini-apps, i.e., Draw, and Office clip-artOffice mini-apps, i.e., Draw, and Office clip-art– updated enhanced version, Enhanced Metafile updated enhanced version, Enhanced Metafile

- .emf - .emf

Computer Graphics Metafile - .cgmComputer Graphics Metafile - .cgm– Long established standard for graphicsLong established standard for graphics– Many component parts but many variations Many component parts but many variations

permittedpermitted

Vector Graphics Vector Graphics File Formats - 2File Formats - 2Drawing Exchange Format - .dxfDrawing Exchange Format - .dxf

– AutoCAD’s open formatAutoCAD’s open format– Designed for CAD drawingsDesigned for CAD drawings– Also Drawing - .dwg AutoCAD’s native formatAlso Drawing - .dwg AutoCAD’s native format

CorelDraw - .cdrCorelDraw - .cdr– Proprietary formatProprietary format– Also newer open standard .cmx format, used for Also newer open standard .cmx format, used for

CorelDraw clip-artCorelDraw clip-art– .cdx CorelDraw compressed and .cpx Corel CMX .cdx CorelDraw compressed and .cpx Corel CMX

compressedcompressed

Vector Graphics Vector Graphics File Formats - 3File Formats - 3

Adobe Illustrator - .aiAdobe Illustrator - .ai– Proprietary formatProprietary format

Macromedia Freehand -.fh9 (also .fh8, .fh5, etc.)Macromedia Freehand -.fh9 (also .fh8, .fh5, etc.)– Proprietary formatProprietary format

Macintosh PICT Files - .pic or .pctMacintosh PICT Files - .pic or .pct– A hold-all format that can be used for bitmaps or A hold-all format that can be used for bitmaps or

vector graphicsvector graphics

Postscript - .psPostscript - .ps– Adobe’s page description languageAdobe’s page description language– Can include a bitmap in the encapsulated (.eps) Can include a bitmap in the encapsulated (.eps)

versionversion

Vector Graphics Vector Graphics File Formats - 4File Formats - 4Macromedia Flash - .flaMacromedia Flash - .fla

– Proprietary format proposed for adoption as Proprietary format proposed for adoption as WWW standardWWW standard

– Vector graphics drawing package that also Vector graphics drawing package that also animates and can incorporate audio and add animates and can incorporate audio and add interactivityinteractivity

– Designed for the Web – produces small filesDesigned for the Web – produces small files– Native Flash files - .fla – are editable files that Native Flash files - .fla – are editable files that

contain the material Flash works oncontain the material Flash works on– Shockwave Flash files - .swf –the optimised files Shockwave Flash files - .swf –the optimised files

for web usefor web use– Flash will create the Shockwave Flash fileFlash will create the Shockwave Flash file

We’ll We’ll summarisesummarise briefly things to bear in mind briefly things to bear in mind when using vector graphics when using vector graphics

Look at where you get them from and Look at where you get them from and copyright implicationscopyright implications

We’ll consider the need to choose the file We’ll consider the need to choose the file formats that you will use carefullyformats that you will use carefully

Common file formatsCommon file formats

DrawingsDrawings

Diagrams/Graphs/CartoonDiagrams/Graphs/Cartoon

Compact and easily alteredCompact and easily altered

RememberRemember

Create them yourselfCreate them yourself– if you if you createcreate, you own it, you own it

Copy them from another sourceCopy them from another source– if you if you copycopy, you don’t own it but you may or may not , you don’t own it but you may or may not

be entitled to use itbe entitled to use it– if you do use it you must have a clear written if you do use it you must have a clear written

agreement that you may use itagreement that you may use it

Where Do You Where Do You Get Them?Get Them?

When in Doubt, Don’t CopyWhen in Doubt, Don’t Copy

Buy rights from a stock media houseBuy rights from a stock media house

Bitmap GraphicsBitmap Graphics

Bitmap graphics are sometimes called Bitmap graphics are sometimes called bitmap imagesbitmap images

Commonly photographic and painting Commonly photographic and painting imagesimages

Bitmap AgendaBitmap Agenda

We will look at:We will look at:– what bitmap graphics are exactlywhat bitmap graphics are exactly– why bitmap graphics are importantwhy bitmap graphics are important– how they are createdhow they are created– what they are used forwhat they are used for– how they are storedhow they are stored– what the consequences of using many what the consequences of using many

colours are on storage requirementscolours are on storage requirements– what their use is in multimediawhat their use is in multimedia

Introduction to the Nature Introduction to the Nature of Bitmap Graphicsof Bitmap Graphics

They are a static media, i.e., they don’t They are a static media, i.e., they don’t change with timechange with time

That isn’t to say that we can’t appear to That isn’t to say that we can’t appear to make them changemake them change

But they don’t change by themselvesBut they don’t change by themselves

Sources of BitmapsSources of Bitmaps

There are three sources of bitmap graphics:There are three sources of bitmap graphics:– Human-created ImagesHuman-created Images– Natural ImagesNatural Images– Pre-existing ImagesPre-existing Images

Normally characterised by far greater Normally characterised by far greater variation in colours and shapes than a variation in colours and shapes than a vector graphicvector graphic

Bitmap GraphicsBitmap Graphics

Literally a map of the colours used for each bit Literally a map of the colours used for each bit (pixel) making up the graphic (image)(pixel) making up the graphic (image)

With no mathematical limitations imposed they With no mathematical limitations imposed they can be used for pictures created:can be used for pictures created:– by hand – sketched or paintedby hand – sketched or painted– from vector graphics packages – by exporting at a from vector graphics packages – by exporting at a

specific size and colour depthspecific size and colour depth– from photographs – by scanningfrom photographs – by scanning– from video – by image capturefrom video – by image capture– directly with a digital cameradirectly with a digital camera

Human-created Human-created ImagesImages

Paintings or DrawingsPaintings or Drawings– patterns of dots created by “Paint” applicationpatterns of dots created by “Paint” application– Adobe PhotoShop, MS Paintbrush, Corel Adobe PhotoShop, MS Paintbrush, Corel

PhotoPaint, Paint Shop Pro, etc.PhotoPaint, Paint Shop Pro, etc.

Even if it consists only of geometric shapes it’s Even if it consists only of geometric shapes it’s still a bitmapped image if that’s how the still a bitmapped image if that’s how the package, that creates it, stores itpackage, that creates it, stores it– some packages that normally create vector some packages that normally create vector

graphics offer the option of converting the graphic graphics offer the option of converting the graphic into a bitmapinto a bitmap

Natural ImagesNatural Images

Patterns of coloured pixels created by:Patterns of coloured pixels created by:– scanning a photographscanning a photograph– capturing a still image from a videocapturing a still image from a video– using a digital camerausing a digital camera

Always a bitmapAlways a bitmap

Pre-existing Pre-existing ImagesImages

Patterns created by scanning:Patterns created by scanning:– painting or drawing or hand-writing (no matter painting or drawing or hand-writing (no matter

how created)how created)– printed matter: text in book or on magazine printed matter: text in book or on magazine

page - computer printout page - computer printout

Always a bitmapAlways a bitmap– scanned drawings can be converted to vector scanned drawings can be converted to vector

drawing by special software drawing by special software – sometimes called digitisingsometimes called digitising

Conclusion for Nature Conclusion for Nature of Bitmap Graphicsof Bitmap Graphics

They are a static mediaThey are a static media

There are three primary sources of bitmap There are three primary sources of bitmap graphics:graphics:– Human-created ImagesHuman-created Images– Natural ImagesNatural Images– Pre-existing ImagesPre-existing Images

They are a map of the colours used for each They are a map of the colours used for each pixel making up the imagepixel making up the image

Introduction to Introduction to Bitmap FilesBitmap Files

What determines their sizeWhat determines their size

What information the files actually holdWhat information the files actually hold

How this relates to the characteristics of the How this relates to the characteristics of the filesfiles

What standards there are for the colours What standards there are for the colours used in bitmap imagesused in bitmap images

First we’ll consider what bitmap files actually First we’ll consider what bitmap files actually store:store:

Bitmap FilesBitmap Files

Store the colour value (and possibly various Store the colour value (and possibly various other information) of each pixel (picture other information) of each pixel (picture element)element)

File size depends on number of pixels in the File size depends on number of pixels in the image AND the number of colours used image AND the number of colours used (and amount of other information) in the (and amount of other information) in the imageimage

– each pixel must be capable of specifying any each pixel must be capable of specifying any of the possible coloursof the possible colours

– number of colours to be used is specified number of colours to be used is specified initially by creatorinitially by creator

– number of colours may be altered during number of colours may be altered during creation/editing process or finally when savingcreation/editing process or finally when saving

Bit DepthBit Depth

Bit Depth is the amount of memory needed to Bit Depth is the amount of memory needed to store the colour informationstore the colour information

A single bit can only store a 1 or a 0A single bit can only store a 1 or a 0

So a single bit is used to store Black or White So a single bit is used to store Black or White informationinformation

Any number of bits could be used:Any number of bits could be used:– e.g., 4 bits can hold information on 16 colourse.g., 4 bits can hold information on 16 colours– Equally 4 bits could describe Equally 4 bits could describe 1616 shades of grey shades of grey– transparency Information can also be storedtransparency Information can also be stored

Bit Depths for Bit Depths for ImagesImages

1 bit = 2 colours, i.e., Black and White1 bit = 2 colours, i.e., Black and White

8 bits = 256 8 bits = 256 possiblepossible shades of grey shades of grey

or = 256 or = 256 possiblepossible colours colours

But which is it and which 256 greys or colours?But which is it and which 256 greys or colours?

Clearly it is important to knowClearly it is important to know

File starts with header information which File starts with header information which contains such detailscontains such details

How many colours can a 24-bit image hold?How many colours can a 24-bit image hold?

Conclusion for Conclusion for Bitmap FilesBitmap Files

They store information about pixelsThey store information about pixels

Bit depth is how many bit are used per pixelBit depth is how many bit are used per pixel

24-bit images 24-bit images 16.7 million possible 16.7 million possible colours (True Colour)colours (True Colour)

today’s multimedia standard is 24-bit, most today’s multimedia standard is 24-bit, most potential customers have 24-bit graphics potential customers have 24-bit graphics cardscards

Common Common standardsstandards

What is the de factoWhat is the de facto standard for multimedia standard for multimedia and why?and why?

24-bit images 24-bit images 16.7 million possible colours 16.7 million possible colours (True Colour)(True Colour)

48-bit images 48-bit images 281,500 billion possible colours 281,500 billion possible colours

the de facto multimedia standard was 8-bit, the de facto multimedia standard was 8-bit, since 256 colour video adapters were the best since 256 colour video adapters were the best that all potential customers were likely to havethat all potential customers were likely to have

Modern standardModern standard

today’s multimedia standard is 24-bit, most today’s multimedia standard is 24-bit, most potential customers have 24-bit graphics potential customers have 24-bit graphics cardscards

Summary of the Summary of the LectureLecture

bitmap graphics use pixel information to store an bitmap graphics use pixel information to store an imageimage

they enable photographic and painted images to be they enable photographic and painted images to be storedstored

we can create them by:we can create them by:– Painting, capturing or scanningPainting, capturing or scanning

– scanning a photograph or drawingscanning a photograph or drawing

bitmap images are stored with various amounts of bitmap images are stored with various amounts of colour information:colour information:– 24-bit 16.7 M, 16-bit 65,536, 8-bit 25624-bit 16.7 M, 16-bit 65,536, 8-bit 256