1. Introduction to Vector Graphics Graphics

2. Graphics L1 Introduction to Vector Graphics Learning Objectives All to create and manipulate a simple group of objects to form a logo design Most to understand the characteristics of a vector and bitmap graphic and how they are stored Some to compare the different characteristics, strengths and uses of vector and bitmap images

3. Graphics L1 Introduction to Vector Graphics Properties of a Vector Graphic Vector images comprise geometric shapes The properties of each shape are recorded: – Shape type (e.g. Circle) – Radius – Centre point (x,y) – Fill Colour – Line Colour x,y r

4. Graphics L1 Introduction to Vector Graphics Simple Vector Images Often used as Clip Art Used in PowerPoint and other applications

5. Graphics L1 Introduction to Vector Graphics Features of a Vector Graphic Vector graphics consist of shapes called objects. You can edit each object separately to change the shape, colour, size and position. Recording the properties of vector shapes doesn’t take up much memory. This usually makes the file size of a vector graphic very small. Vector graphics are scalable – you can change their size without any loss of quality.

6. Graphics L1 Introduction to Vector Graphics Colour Schemes Adobe Kuler (kuler.adobe.com)

7. Graphics L1 Introduction to Vector Graphics Create a logo Geometric logo Gradients, Fills, Shapes Grouping Objects Try resizing and editing as different colours

8. Graphics L1 Introduction to Vector Graphics Complex Vectors Logos Animation Sign making Used for cartoon imagery General graphic design

9. Graphics L1 Introduction to Vector Graphics Vector Art Not limited to cartoon graphics Used in Adobe Illustrator by Graphic Artists

10. Graphics L1 Introduction to Vector Graphics Vectors are used in... Computer Aided Design Architectural Plans 3D Modelling Maps

11. Graphics L1 Introduction to Vector Graphics 3D Modelling Wireframe modelling Motion vectors Computer Generated Imagery (CGI)

12. Graphics L1 Introduction to Vector Graphics Text Even text is vector based Each letter comprises several shapes, lines and curves

13. Bitmap Graphics Graphics

14. Graphics L1 Introduction to Vector Graphics What are Bitmap graphics? A Bitmap graphic is also known as a Raster graphic A bitmap graphic is composed of tiny squares, called pixels It is possible to edit each individual pixel. The computer stores information about the colour value of every pixel in the image. This can mean a large file size Resizing a Bitmap graphic causes it to pixelate and lose quality

15. Graphics L1 Introduction to Vector Graphics Representing Graphics Images are made up of Pixels (Picture Elements) Each pixel is set to one colour Together they look like an image Pixels small enough are unidentifiable

16. Graphics L1 Introduction to Vector Graphics Using Picture Elements for an Image Not a new idea to use small squares of colour The ancient Romans created mosaics

17. Graphics L1 Introduction to Vector Graphics Modern Picture Elements Structured in a Grid Each pixel is given a numeric value Each value represents one colour

18. Graphics L1 Introduction to Vector Graphics Creating an Image Each Pixel is given a binary value Each value represents a different colour Using one bit per pixel allows only 2 values, 0 and 1 1 = White, 0 = Black 1111111111 1111001111 1110000111 1100110011 1100110011 1100000011 1100000011 1100110011 1100110011 1111111111

19. Graphics L1 Introduction to Vector Graphics Creating an Image More bits per pixel = more colour combinations – 1 bit = 2 Colours – 2 bits = 4 Colours – 3 bits = 8 Colours – 4 bits = 16 Colours How many bits per pixel required for 256 colours? 11 00 11 001011 01 10 1101 1101 11 00 =11 = 01 =10 =

20. Graphics L1 Introduction to Vector Graphics Bits and Bytes 0 or a 1=1 Bit (Binary Digit) 8 Bits=1 Byte 1024 Bytes=1 Kilobyte (Kb) 1024 Kb=1 Megabyte (Mb) 1024 Mb =1 Gigabyte (Gb)

21. Graphics L1 Introduction to Vector Graphics Colours vs File Size How many bits in this picture? What if each pixel was one of 256 colours? How does the number of colours affect file size? 1111111111 1111001111 1110000111 1100110011 1100110011 1100000011 1100000011 1100110011 1100110011 1111111111

22. Graphics L1 Introduction to Vector Graphics Bitmap images are used for... Digital camera images Scanned Images Magazine covers Photographs

23. Graphics L1 Introduction to Vector Graphics Natural porcelain skin? Photo-editing can manipulate individual pixels using a Bitmap file format such as.jpg or.png

24. Graphics L1 Introduction to Vector Graphics How a camera ‘sees’ an image Each tiny square on the sensor captures the average light value of the colours it ‘sees’ This is interpreted as a colour and becomes a pixel of solid colour

25. Graphics L1 Introduction to Vector Graphics Bitmap or Vector graphic? Will the image need to be resized? Will the image need to be drawn to scale? Will the image need to be realistic? Are there any restrictions on file size?

26. Graphics L1 Introduction to Vector Graphics Simple Vector Art Comprises 2D or 3D geometric shapes

27. Graphics L1 Introduction to Vector Graphics Exploding a vector image Ungroup the shapes You can isolate individual elements and change their properties

28. Graphics L1 Introduction to Vector Graphics Pixelation

29. Graphics L1 Introduction to Vector Graphics Comparing Bitmap graphicsVector graphics Made up ofColoured pixelsObjects File sizeLargeSmall ResizingLose qualityNo loss of quality AppearanceRealCartoon-like File formats.bmp.jpg.gif.svg.wmf

30. Graphics L1 Introduction to Vector Graphics Finally… Complete the plenary questions to show me what you have learnt today.