1 / 63

CoED 105-Introduction to Multimedia Lecture #3 GRAPHICS

CoED 105-Introduction to Multimedia Lecture #3 GRAPHICS. Instructors: Mohamed MAGANGA. Intro to Graphics Digitization Pixels Color Coding & Models Break  Bitmap vs. Vector Graphics Image Resolution Image Bit Depth File Formats Graphics Software. Lecture #3 GRAPHICS.

elga
Download Presentation

CoED 105-Introduction to Multimedia Lecture #3 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. CoED 105-Introduction to Multimedia Lecture #3 GRAPHICS Instructors: Mohamed MAGANGA

  2. Intro to Graphics Digitization Pixels Color Coding & Models Break  Bitmap vs. Vector Graphics Image Resolution Image Bit Depth File Formats Graphics Software Lecture #3 GRAPHICS Today’s Agenda:

  3. Introduction to Graphics

  4. Which would you rather use to learn about the water cycle?

  5. Intro to Graphics We rely on images for Information Explanations Entertainment VISUAL APPEAL

  6. So You Want to be a Designer? • Focus on: • How to create the graphics • Learn pkg and tools to change the effects • But need to know the concepts

  7. Intro to Graphics: Originate? Non-digital medium (paper copy of a photo) Outside world Create image

  8. What is Digitization ? • Digitizationrefers to the process of translating a piece of information (text, images, sound, video etc) into digits(because that’s what computers “understand/speak”) • Bit is the fundamental units of information in a computer system Computers are built from electronic devices that have only two possible states... On (High) or OFF (low) High volt is a 1Low volt is a 0 “On” “Off” Value of either“0” or “1” • Electric signals translate into “BITS” Digits “0” and “1” • Conversion from analog to digital using Bit representation

  9. Converting Analog to Digital • Conversion is a 2 step process: • Consider digitizing an image, sound, video, animation, text etc... • Step 1: sampling how often do I take a sample (measurement) to represent the “thing” (how many parts will I break the thing up into) • Step 2: Quantizing  how many discrete values will I use to represent the parts the “thing” where “thing” means image, sound, video, animation, text

  10. Sampling for Images Images taken from scanner, digital camera,graphics application • Represented by a grid (array, matrix) of squares called • pixel • It is smallest image component and thus shows the smallest detail • Arranged in column and rows Sampling(how many parts will I break the image up into)

  11. Sampling for Images  Original Image Am I going to try to represent this image with 4 samples (= 4 pixels?)

  12. Sampling for Images Am I going to try to represent this image with around 64 samples (pîxels)? Am I going to try to represent this image7500 samples?

  13. Quantizing for Images Quantizing  How many discrete values (bits) will I use to represent each pixel ----represents ___________________ • Each pixel is given a ___________________ that represents the corresponding colour • Use ________ measurement scale Do I have 1 bit to represent the colour of each pixel (square) (only have 2 colours) Do I have 8 bits to represent the colour of each pixel (square)(have 256 colours) Do I have 24 bits to represent the colour of each square (have about 16 million colours)

  14. Quantizing for Images How are Colors Coded? Black/White: Use 1 bit to represent the colour of each pixel? (black, white) Color:Use 24 bits to represent the colour of each pixel? (color spectrum) • How many bits do we assign to each pixel to define a color?- 1 bit, 2 bits, 3bits 4 bits etc.?

  15. Quantizing for Images • Measurement for each bit is based on _______________________ • 1 Bit is either “0” or “1” • (1 bit) 21 = 2 values (0, 1)  (black , white) • (2 bit) 22 = 4 values (00,01,11,10)  (black, light gray, dark gray, white) • (3 bit) 23 = 8 values (000,001,011,…111)  (black,…… white) • (4 bit) 24 = 16 values (0000,0001,0010…) • (x bit) 2x = y values = ___________________(values ) Importance with Quantizing 2x = # of combinations = Maximum number of colors available to assign to a pixel to represent image 1 bit = max of ______colors to represent color of each pixel 8 bits = max of _______ colours 24 bits = max of _______colors

  16. How are Colors Coded? For Gray Levels • Assume for each pixel we have 1 bit to represent the colour • 1 bit can be either 0 or 1 • If a pixel color is represented by1 bitonly • Value 0 = Black • Value 1 = White • So we say • 1 bit allows ____________2 colours

  17. How are Colors Coded? For Gray Levels • If a pixel color is represented by 2 bits • Value 00 = Black • Value 01 = Grey • Value 10 = Light Grey • Value 11 = White • Thus, 2 bit allows for 4 colours

  18. How are Colors Coded? For Gray Levels • 4 bits  24  16 grey shades • 0000, 0001,0010, 0100, 1000 …… 1111 0000 0001 0010 Rule: More bits, more shades (colors)

  19. 2 2 = 4 shades What will it look like? # of bits 2 1 = 2 shades 2 4 = 16 shades http://en.wikipedia.org/wiki/Color_depth#Direct_color http://www.modernimaging.com/bit_depth.htm

  20. How are Colors Coded? Gray Levels • 8 bits  28  256 shades (gray levels) A normal greyscale image has a bit color depth of 256 grey levels http://www.modernimaging.com/bit_depth.htm

  21. Quantizing for Text Based on 8 bits = 28 = 256 values Abyte is collection of 8 bitsHow many possible combinations if using 8 bits? 1 byte = (28)= 256 values • Each letter represented by 1 byte Called the ASCII code system • DOG would be encoded as: • D – 01000100 • O – 01001111 • G – 01000111

  22. So….. How is color handled?

  23. http://www.sketchpad.net/basics4.htm Color Models Used for ________ Used for ________ • Additive Model (RGB): • Primary colors are Red, Green, Blue • “adding” light to a black background(monitor) in order to obtain color shades • Subtractive Model (CMYK) • Cyan, magenta, yellow • Ink when applied removes(“subtracted”)from a white background

  24. Did you know?Why use RGB rather than CMYK model for web? • Since cathode ray tube devices, such as computer monitors, display color withred, green and blue light, this is the color system of the Web. • RGB colorThe red, green, and blue (RGB) color system can represent a large portion of the color spectrum by mixing these three primary colors. http://en.wikipedia.org/wiki/Color_depth#Direct_color http://www.modernimaging.com/bit_depth.htm

  25. How are Colors Coded? Color Images In “true color”,each pixel represents some color shade Uses ___ color representation = 16 million colors = ____ • Color can be expressed in: • RGB code • Hexadecimal code

  26. How are Colors Coded? RGB Code: • Each pixel is represented by3 values (R,G,B) • Eg. Light yellow=<255,255,127> • Syntax: • each value ranges from 0 – 255 • 0 represents no amount • 255 represents max amount • 256 color shades= 28bits

  27. How are Colors Coded? Color Images Red = <255, 0, 0> Green = <0,255,0> Blue = <0, 0, 255> • What does it mean: • 256 shades of red = 28 (8 bits=1 byte) • 256 shades of green = 28 (8 bits=1 byte) • 256 shades of blue = 28 (8 bits=1 byte) • Need 3 bytes for True Colour • 1 byte for red • 1 byte for green • 1 byte for blue <256 shades, 256 shades, 256 shades> <28, 28 , 28> _____________________________

  28. How are Colors Coded? Do you know the Western Color purple? Hexadecimal Code: • Notation is: #RRGGBB • #FF0000  Red • #00FF00  Green • #0000FF Blue • #000000  Black • #FFFFFF White • Allowable symbols 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,A, B, C, D, E, and F • Note: FF means 255

  29. http:/www.christiansitehosting.com/Hexadecimal%20Color%20Coding%20Chart.gifhttp:/www.christiansitehosting.com/Hexadecimal%20Color%20Coding%20Chart.gif

  30. Are they the same color? RGB = <66,00,99>?Hexadecimal = #660099 • You can convert from: • RGB to Hexadecimal • Hexadecimal to RGB • Nice utility: Bookmark it! • http://www.translatum.gr/converter/hexadecimal.htm Answer: ______________

  31. Question • Does anyone know approximately how many colours the human eye can discern (detect)? • Less than 100,000 • About 1 million • About 10 million • About 100 million • About 500 million

  32. Break  • Painting the Mona Lisa • http://www.youtube.com/watch?v=uk2sPl_Z7ZU&mode=related&search=

  33. Types of Graphics Graphics are categorized as being either: Bitmap or Vector • Affects how the graphics are displayed on a computer screen

  34. Types of Graphics - Bitmap • Bitmap Graphics________ • Bitmapped images are made up of small squares called pixels. • Editing pixels = changing color, shade and brightness

  35. Types of Graphics - Bitmap • Bitmap Graphics • If you start with a small image (100 x 100 px) • (As the image is made larger by resizing not zooming) • Squares become larger , edges more jagged • Quality decreases • File size increase • Advantages of a small image: • Shorter time needed to display it on the screen • because file size is smaller • Disadvantage: • Distortion that occurs when the image is enlarged. From larger to smaller No distortion

  36. Types of Graphics –Vector Graphics • Vector Graphics • Image is represented with • lines and arcs that have a ____________________ • describes the drawing of the shape • To draw a: • Line - ______________________ • Rectangle: - _________________ • Circle: - _______________________

  37. Types of Graphics –Vector Graphics • Vector Graphics • It doesn’t matter what size the image is • As the image is resized larger/smaller • Edges stil clean, crisp • No _________ going up/down in size • Quality is ____________ • File size ____________ (if resized larger)

  38. So why do we need different graphics software? Vector-based: - geared towards drawings • Greater control and precision with free-hand tool • Display more accurately on screen • Download faster because of .svg format (less info recorded – smaller file) • More details can be drawn in vector-based illustrations • Must use a “Draw “ program – draw and edit paths • Adobe Illustrator or Macromedia FreeHand, Corel Draw • Bitmapped- Based: editing an image’s pixels • images from - scanners, cameras etc • Need a “Paint” program • PhotoShop, PaintShop Pro, PhotoPlus • But Photoshop v6.0 – vector features in it Vector-based is smaller file recording a mathematical relationship Remember: Vector ->Bitmap

  39. In this next section … • Now that we know what a pixel is • What affects image quality? • Explore terms: • Resolution (camera, monitor, image) • Bit Depth

  40. So what else affects Image Quality? Assume that we are creating the image from a graphics pkg ie. Photoshop IMAGE QUALITY

  41. Resolution • Image Resolution: • Controlled through graphics pkg • The number of pixels per square inch • In Photoshop, decide on intent of image • For web: set to ___min________ • Lower resolution smaller file size, faster download time • For printing: set to __max_______ or more • Higher resolution larger size

  42. Image Resolution Which resolution would give a finer, less blocky result?

  43. Image Resolution Comparison for different output delivery Decide: To create image for the: • Web – set to 72 dpi • Laser Printers - 300 – 600 dpi • High end imagesetters 1200 dpi, 2400 dpi, or higher (printed for newspapers and magazines)

  44. Image Resolution • Recap: (bitmapped images) • Resizing: Increase size (smaller >larger) • Increasing the size of an image ______lowering_____ its resolution • Resizing: Decrease size (larger > smaller) • Decreasing the size of an image__increasing________ its resolution FIXED

  45. Image Bit Depth • Image Bit Depth(also Color Depth) • Refers to the total number of colors in an image • Amount of digital storage space used to record information about the color of a pixel 1 bit= 2 colors (= 21) - black or white 4 bit = 16 colors   (= 24) 8bit = 256 colors (= 28) 16bit = 65,536 (= 21624bit = 16,777,216 (= 224 True Color This translates to: CONTROL!! _________________ _________________  Quality improves  Larger file size Review

  46. Bits per Pixel: 1 Maximum Colors: 2 Bits per Pixel: 4 Maximum Colors: 16 Bits per Pixel: 8 Maximum Colors: 256 Bits per Pixel: 16 Maximum Colors: 65,536 (high color) Bits per Pixel: 24 Maximum Colors: 16,777,216 (true color) Image Bit Depth Image Bit Depth (BPP)

  47. File Formats • wide variety ofFile Formats • Not all file formats are suitable for all purposes Universally supported files Universally supported by graphics industry ( ie. JPG, .GIF ) Proprietary • Bitmap or vector formats used by specific graphics programs(ORIGINAL DEFAULT FORMATS) ex. Photoshop,AutoCAD,MacPaint • Can save in both: Native format- _________________ Universally format: ______________

  48. File Format File Extension Type of File Tagged Image File Formats .TIF, .TIFF Bitmapped Encapsulated Postscript .EPS, .EPSF Vector Windows Bitmap .BMP Bitmapped Graphics Interchange Format .GIF Bitmapped Photo CD .PCD Bitmapped PC Paint .PIC Bitmapped Joint Photographic Experts Group .JPG, .JPEG, .JPE Bitmapped PhotoShop .PSD Bitmapped CorelDraw .CDR Vector AutoCAD Vector Windows Metafile .WMF Bitmapped, Vector Graphic conversion software can change the file format so that you can import and export graphic images from one application to another Ex. PhotoShop, Paintshop Pro File Formats - continued .DWG

  49. File Format File Extension Tagged Image File Formats (.TIF, .TIFF) • Most widely used bitmapped file format • Supported by image-editing applications, scanning software, page-layout programs, and word processing software. • Supports bit depths from 1 to 32 bits • Cross platforms for MAC, PC, and Unix systems • Most commonly used when the output is printed Encapsulated Postscript (.EPS, .EPSF) • Vector based graphic • Popular image files since they can be imported into nearly any application. Windows Bitmap (.BMP) • Standard bitmapped format on the Windows platform • Supported by most Windows applications. Graphics Interchange Format (.GIF) • Bitmapped graphic • May see it as “CompuServe GIF” since Compuserve created it • One of two standards used on the Web without plug-ins • Gif format only supports up to 256 colors File Formats - continued

  50. File Format File Extension Photo CD (.PCD) • Kodak’s Photo CD graphics file format • Bitmapped format that contains different image sizes for each photograph PC Paint (.PIC) • Used by the PC Paint program (bitmapped) Joint Photographic Experts Group (.JPG, .JPEG, .JPE) • Bitmapped graphics • Creates a very compact file, thus easy to transmit across networks (due to compression) • One of two graphic file formats supported by the World Wide Web without plug-ins PhotoShop(.PSD) • Proprietary format used with Adobe PhotoShop • PhotoShop is popular in editing images, and so many other software support this format CorelDraw(.CDR) • Vector based software • Popular for desktop publishing ie. Brochures, pamphlets AutoCAD • Vector-based graphics format used with CAD (Computer Aided Drafting) and drawing programs Windows Metafile(.WMF) • This is a metafile, bitmapped, and/or vector-based file created by Microsoft File Formats- continued

More Related