Vector Graphics Vector Graphics Digital Media Module – Digital Media Module – week 3 week 3
Dec 21, 2015
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