1. Digital Media SM1001 Digital Media, Semester A School of Creative Media © Week 04, 2011 Digital Image (Part 1 of 2) An introduction to the technical side of digital image where important concepts such as the pixel, image resolution and various types of graphics will be explored.

2. Learn the Concepts We will introduce some basic technical details of digital images. We will introduce some basic technical details of digital images. The concepts to be discussed will be important to a digital designer. The concepts to be discussed will be important to a digital designer.

3. Digital Image A digital image is a representation of a two-dimensional image using ones and zeros (binary). A digital image is a representation of a two-dimensional image using ones and zeros (binary). Binary: 0101001 …

4. Pixel, the basic element The most basic element in digital imaging is a pixel (px). The most basic element in digital imaging is a pixel (px). A pixel is a square with a variable (x) height and width. A pixel is a square with a variable (x) height and width. The value of x is determined by different factors. The value of x is determined by different factors. X X

5. Pixel 1 pixel

6. The basics – A Pixel A pixel is usually small that when it is alone, it is difficult to observe. A pixel is usually small that when it is alone, it is difficult to observe. But when you group a large number of pixels next to each other, you can see the image they create. But when you group a large number of pixels next to each other, you can see the image they create. You won’t be able to see the specific pixel this arrow is pointing at the current scale. However, if you put a lot of pixels close to each other, it forms a larger image that we can see.

7. The basics – A Pixel Again, below is an illustration of how the same image might appear at different pixel resolutions Again, below is an illustration of how the same image might appear at different pixel resolutions

8. Image Size (or pixel resolution) If one pixel were as big as this square: If one pixel were as big as this square: If we want to have an image that has the size of (4 x 2)px, it would look like this: If we want to have an image that has the size of (4 x 2)px, it would look like this: Notice 4 x 2 is the image dimension corresponds to WIDTH x HEIGHT, this is the common format used. Notice 4 x 2 is the image dimension corresponds to WIDTH x HEIGHT, this is the common format used.

9. Image Size Further, if one pixel were as big as this square: Further, if one pixel were as big as this square: Then a (4 x 2)px image would be: Then a (4 x 2)px image would be:

10. Image Size A (4 x 2)px image from the 1 st example: A (4 x 2)px image from the 1 st example: A (4 x 2)px image from the 2 nd example: A (4 x 2)px image from the 2 nd example:

11. Image Size Both examples are a (4 x 2)px image. Yet they look different to the eye. Both examples are a (4 x 2)px image. Yet they look different to the eye. A pixel is an abstract unit in which the exact size is determined by: A pixel is an abstract unit in which the exact size is determined by: 1.Screen resolution (virtual size) 2.The device that is displaying it (physical size) This is different from fixed units like inches or meters. This is different from fixed units like inches or meters.

12. Screen Resolution Monitors often refer to their screen resolutions with numbers like 800 x 600 or 1024 x 768. Monitors often refer to their screen resolutions with numbers like 800 x 600 or 1024 x 768. Remember, it is WIDTH x HEIGHT. Remember, it is WIDTH x HEIGHT. An 800 x 600 screen resolution really means that there are 800px for the screen’s width and 600px for the height. An 800 x 600 screen resolution really means that there are 800px for the screen’s width and 600px for the height. The actual width of the monitor does not change, but the resolution changes. The actual width of the monitor does not change, but the resolution changes.

13. Screen Resolution Now, lets say if our monitor’s actual width is: Now, lets say if our monitor’s actual width is:

14. Screen Resolution Now, if I set the screen’s resolution to 800x600: Now, if I set the screen’s resolution to 800x600:

15. Screen Resolution If I had an image that was 500 x 400 like this: If I had an image that was 500 x 400 like this: 500 px 400 px

16. Screen Resolution And we put that image on a monitor with an 800 x 600 resolution: And we put that image on a monitor with an 800 x 600 resolution:

17. Screen Resolution However, if I set the monitor to 1024x768: However, if I set the monitor to 1024x768:

18. Screen Resolution The image with the same pixel resolution is now smaller in a higher resolution screen (get this!). The image with the same pixel resolution is now smaller in a higher resolution screen (get this!). Due to the fact that the actual width of the monitor and the number of the pixels for the image are fixed. Due to the fact that the actual width of the monitor and the number of the pixels for the image are fixed. The monitor is still 14” x 10.5”, but now, within 14”, there needs to be 1024 pixels! So, The monitor is still 14” x 10.5”, but now, within 14”, there needs to be 1024 pixels! So, Why the image has become smaller? Because each pixel has to be smaller in size. Because each pixel has to be smaller in size.

19. Screen Resolution Since the baby image’s has a fixed number of pixels, the smaller pixel leads to a small image on the same screen. Since the baby image’s has a fixed number of pixels, the smaller pixel leads to a small image on the same screen. This concept will be very important (and often overlooked by users) in future lectures about web technologies and is something you must pay attention to if you want to be a digital photographer. This concept will be very important (and often overlooked by users) in future lectures about web technologies and is something you must pay attention to if you want to be a digital photographer.

20. Screen Resolution Real case in Web Design

21. Pixel density “What is the resolution of the image?” “What is the resolution of the image?” It would be wrong to tell them that it is “500 x 400 px” – this is the image’s size. It would be wrong to tell them that it is “500 x 400 px” – this is the image’s size. When we say resolution of a digital image on the screen, we must refer to: When we say resolution of a digital image on the screen, we must refer to: Pixels per inch (PPI). Pixels per inch (PPI).

22. Pixel density To find out the resolution of an image on a computer screen (pixels per inch, PPI) or pixel density, we need two values: To find out the resolution of an image on a computer screen (pixels per inch, PPI) or pixel density, we need two values: Number of pixels in the image;Number of pixels in the image; Number of inches that the image takes up.Number of inches that the image takes up.

23. Pixel density PPI = 5 5 Pixels in 1 inch PPI = 10 10 Pixels in 1 inch

24. What is the pixel density of iPhone 4?

25. What is the pixel density in iPhone 4?

26. What is the pixel density of mobile devices? iMac has 92-100 PPI iMac has 92-100 PPI NDS has 110 PPI NDS has 110 PPI MacBook Pro 15-inch has 117 PPI MacBook Pro 15-inch has 117 PPI Sony PSP has 130 PPI Sony PSP has 130 PPI iPad has 132 PPI iPad has 132 PPI iPhone 3Gs has 163 PPI iPhone 3Gs has 163 PPI Google Nexus One has 252 PPI Google Nexus One has 252 PPI iPhone 4 has 326 PPI iPhone 4 has 326 PPI Human Retina ~ 318 – 716PPI Human Retina ~ 318 – 716PPI

27. What is the pixel density of mobile devices?

28. Pixel density For example, a monitor that has a width of 14” for 800px, we get: For example, a monitor that has a width of 14” for 800px, we get: 800px / 14” = 57.1 PPI (nearest decimal). If for the same 14” width but with 1024px: If for the same 14” width but with 1024px: 1024px / 14” = 73.1 PPI (nearest decimal).

29. Pixel density Remember: Remember: 800px / 14” = 57.1 PPI (nearest decimal)800px / 14” = 57.1 PPI (nearest decimal) 1024px / 14” = 73.1 PPI (nearest decimal)1024px / 14” = 73.1 PPI (nearest decimal) So if our image’s width is 500px, then on a monitor with 800px width our image is: So if our image’s width is 500px, then on a monitor with 800px width our image is: 500px / 57.1PPI = 8.8” long500px / 57.1PPI = 8.8” long And on a monitor with 1024px width: And on a monitor with 1024px width: 500px / 73.1PPI = 6.8” long500px / 73.1PPI = 6.8” long

30. Pixel density - Conclusion Don’t worry if you don’t understand all the formulas right now, calculating resolution will soon be a routine task to you. Don’t worry if you don’t understand all the formulas right now, calculating resolution will soon be a routine task to you. Just remember: Just remember: Image width in pixels = WImage width in pixels = W Image width in inches = IImage width in inches = I Pixels per inch (PPI) = W / IPixels per inch (PPI) = W / I

31. Pixel Density for Screens of Equal Size

32. More about Resolution

35. Bit-depth Have you heard of 1-bit, 8-bit and 24-bit images? Have you heard of 1-bit, 8-bit and 24-bit images? This might sound weird, but it’s not really complicated, just some simple calculations, but the concept important enough for anyone who’s doing serious digital media work. This might sound weird, but it’s not really complicated, just some simple calculations, but the concept important enough for anyone who’s doing serious digital media work.

36. Bit-depth Take a look at this image, it has only 2 colors – black and white: Take a look at this image, it has only 2 colors – black and white:

37. Bit-depth Look closely: Look closely: A black pixel A white pixel

38. 1 0

39. Bit-depth: 1 bit Think about it, each pixel can only be either black or white (0 or 1). So each pixel can be either 0 or 1. Think about it, each pixel can only be either black or white (0 or 1). So each pixel can be either 0 or 1. The computer needs only 1 bit of memory to remember this information. The computer needs only 1 bit of memory to remember this information. That’s why an image with only 2 colors is called a 1-bit image (because the computer only needs to remember 1 number per pixel). That’s why an image with only 2 colors is called a 1-bit image (because the computer only needs to remember 1 number per pixel).

40. Binary The black-white image was 1-bit. The black-white image was 1-bit. It can represent 2 colors which is commonly denoted in binary: It can represent 2 colors which is commonly denoted in binary: 2 = 2 1. (2 to the power 1)

41. Bit-depth : 8 bits grey scale Now take a look at this grey scale image: Now take a look at this grey scale image:

42. Bit-depth : 8 bits grey scale If you look closely, you will see that the image is made up of a continuous grey tone: If you look closely, you will see that the image is made up of a continuous grey tone:

43. 8 bits grey scale

47. Bit-depth : 8 bits color

56. Bit-depth (8 bits grey scale or color) On each pixel, there is a possibility of 256 different shades of grey (or color). On each pixel, there is a possibility of 256 different shades of grey (or color). If you notice 256 = 2^8 If you notice 256 = 2^8 (in binary: 2^8 = 2 8, 2 to the power of 8 ) 256 different shades is 2 8 = 8-bits 256 different shades is 2 8 = 8-bits

57. Bit-depth: 24 bits color Now moving on to the most commonly used type nowadays– the 24-bit image. Now moving on to the most commonly used type nowadays– the 24-bit image. In binary it is: 24 = 8 x 3 (right?) In binary it is: 24 = 8 x 3 (right?) Have you heard of the Red (R), Green (G), Blue (B) channels in an image? Have you heard of the Red (R), Green (G), Blue (B) channels in an image?

58. Bit-depth: 24 bits color A color image on screen is actually made up of 3 different images, a red, green and blue image: A color image on screen is actually made up of 3 different images, a red, green and blue image: + +

59. Red (R), Green (G), Blue (B)

61. Bit-depth: 24 bits color Normally: Normally: RED channel = 8bitsRED channel = 8bits BLUE channel = 8bitsBLUE channel = 8bits GREEN channel = 8bitsGREEN channel = 8bits Then a color image (RGB) would be: Then a color image (RGB) would be: 8 x 3 = 24 bits Offer 16.7 million different color shades: Offer 16.7 million different color shades: 256 x 256 x 256 = 16, 777, 216 colors (!) This is a lot of color!

62. Bit-depth: 24 bits It’s simple to remember, 1-bit is 2 (2 1 ) colors: black and white. It’s simple to remember, 1-bit is 2 (2 1 ) colors: black and white. 8-bit is 256 (2 8 ) colors. 8-bit is 256 (2 8 ) colors. 24-bit is 16.7 (2 24 ) million colors: RGB. 24-bit is 16.7 (2 24 ) million colors: RGB. These are the most common image bit-depths. These are the most common image bit-depths.

63. More about Bit-depth http://en.wikipedia.org/wiki/Color_depth http://en.wikipedia.org/wiki/Color_depth http://en.wikipedia.org/wiki/Color_depth Different Mobile phone has different Bit-depth: Different Mobile phone has different Bit-depth: http://mobilesdomain.blogspot.com/2009/01/f eature-includes-tft-display-65536.htmlhttp://mobilesdomain.blogspot.com/2009/01/f eature-includes-tft-display-65536.htmlhttp://mobilesdomain.blogspot.com/2009/01/f eature-includes-tft-display-65536.htmlhttp://mobilesdomain.blogspot.com/2009/01/f eature-includes-tft-display-65536.html http://www.mobile- xps.com/index.php?option=com_content&view =article&id=67&Itemid=60&lang=enhttp://www.mobile- xps.com/index.php?option=com_content&view =article&id=67&Itemid=60&lang=enhttp://www.mobile- xps.com/index.php?option=com_content&view =article&id=67&Itemid=60&lang=enhttp://www.mobile- xps.com/index.php?option=com_content&view =article&id=67&Itemid=60&lang=en

64. Image file-sizes Calculating the file size is the last topic in which you will see mathematical formulas for the rest of this lecture! Calculating the file size is the last topic in which you will see mathematical formulas for the rest of this lecture!

65. Image file-sizes Remember this image? Let’s say its 300 x 400 px and has a bit depth of 24-bits: Remember this image? Let’s say its 300 x 400 px and has a bit depth of 24-bits: 300 px 400 px

66. Image file-sizes (1) The number of bits in an image: (1) The number of bits in an image: Image width X image height X bit-depthImage width X image height X bit-depth E.g., 300 x 400 x 24 = 2, 880, 000 bitsE.g., 300 x 400 x 24 = 2, 880, 000 bits (2) And, 1 byte = 8 bits (2) And, 1 byte = 8 bits 2880000 bits / 8 = 360, 000 bytes (3) And, 1 kilobyte (K or KB) = 2 10 = 1024 bytes (3) And, 1 kilobyte (K or KB) = 2 10 = 1024 bytes 360000 bytes / 1024 = 351.6 KB (rounded) So the file size is 351.6 kilobytes. (351.6 KB) So the file size is 351.6 kilobytes. (351.6 KB)

67. Formulas As much as they might look complicated, these formulas are rather simple to work out, but needs a little attention. As much as they might look complicated, these formulas are rather simple to work out, but needs a little attention. File-size in bits: File-size in bits: Image width X Image height X bit-depth

68. The end of the numbers That’s all the numbers you need to see for the rest of this lecture! That’s all the numbers you need to see for the rest of this lecture! However, I still recommend that you make sure you fully understand the concepts of the calculations discussed before However, I still recommend that you make sure you fully understand the concepts of the calculations discussed before

69. Moving on to something more visual…

70. Image types There are two different image types available in digital imaging: There are two different image types available in digital imaging: Raster (bitmap) graphicsRaster (bitmap) graphics Vector graphicsVector graphics Raster images use fixed pixel values Raster images use fixed pixel values Vector graphics use paths and mathematical calculations Vector graphics use paths and mathematical calculations

71. Image types Right now they might look the same… Right now they might look the same… A raster/bitmap graphicA vector graphic

72. Image types Once you zoom in… Once you zoom in… A raster/bitmap graphicA vector graphic

73. Image types Notice that when a raster image is zoomed in (scaled up), the edges are no longer as sharp as before. Notice that when a raster image is zoomed in (scaled up), the edges are no longer as sharp as before. This is because the size of each pixel in the graphic is made bigger during zooming and so each pixel becomes visible to the naked eye. This is because the size of each pixel in the graphic is made bigger during zooming and so each pixel becomes visible to the naked eye.

75. Image types On the other hand, even after scaling the vector graphic up, the image is still sharp. On the other hand, even after scaling the vector graphic up, the image is still sharp. This is because a vector graphic is based on mathematical calculations that draw the image while it’s being zoomed. This is because a vector graphic is based on mathematical calculations that draw the image while it’s being zoomed. So if I scaled the image up to 200%. So if I scaled the image up to 200%. The vector graphic just multiplies its formulas by 2 (because I made the image 2 times as big as the original). The vector graphic just multiplies its formulas by 2 (because I made the image 2 times as big as the original).

76. Raster vs. Vector Raster images are resolution-dependent. Raster images are resolution-dependent. As you saw, scaling up a raster image makes it lose its quality. As you saw, scaling up a raster image makes it lose its quality. Vector images, on the other hand, are resolution-independent. Vector images, on the other hand, are resolution-independent. No matter how big or small you print or create vector images, they will always have sharp edges. No matter how big or small you print or create vector images, they will always have sharp edges.

81. When to raster or vector images? Raster images allow images to have high details in them, like continuous tone (contone) images: Raster images allow images to have high details in them, like continuous tone (contone) images:

82. When to use raster or vector images? If I tried to use vector graphics for the previous contone image, it would probably look like this: If I tried to use vector graphics for the previous contone image, it would probably look like this:

83. When to use raster or vector images? If you were making, for example, a company logo, you would use vector graphics: If you were making, for example, a company logo, you would use vector graphics: Because, say, if one day, the company wants to print their logo on a building… Because, say, if one day, the company wants to print their logo on a building…

84. When to use raster or vector images? The logo would still be perfectly sharp The logo would still be perfectly sharp

87. See you next week!!

88. Supplementary Note

89. Resolution – PPI vs DPI Earlier on, we talk about the resolution of an image seen on screen, we used the term pixels per inch (PPI). Earlier on, we talk about the resolution of an image seen on screen, we used the term pixels per inch (PPI). However, a lot of people use this interchangeably with dots per inch (DPI). However, a lot of people use this interchangeably with dots per inch (DPI). It should be noted, these 2 terms are different. It should be noted, these 2 terms are different.

90. Resolution – PPI vs DPI On a screen and a scanner, every point has a unit of pixels. On a screen and a scanner, every point has a unit of pixels. On a print-out (like images on paper, magazines, etc.), these images have a unit of dots. On a print-out (like images on paper, magazines, etc.), these images have a unit of dots. So just remember, be careful not to mix them up, they similarity end at numbering the point: they are still different. So just remember, be careful not to mix them up, they similarity end at numbering the point: they are still different.

91. Resolution – PPI vs DPI Scanners and monitors have resolutions in terms of pixels per inch (PPI). Scanners and monitors have resolutions in terms of pixels per inch (PPI). Press and inkjet printer have resolutions of dots per inch (DPI). Press and inkjet printer have resolutions of dots per inch (DPI). Example: http://www.epson.com.hk/en/prd_svc/prd _detail/details.html?prdid=832 Example: http://www.epson.com.hk/en/prd_svc/prd _detail/details.html?prdid=832

92. Two creative projects in digital imaging Pushing Raster and Vector to the extreme

93. Colin Smith photoshopcafe.com A Raster Guitar made in Adobe Photoshop (A very popular and powerful bitmap editing program)

94. A raster guitar

96. Chapter3.net Cotton Farmers Vector graphics made from 3D programs and Adobe Illustrator (a leading illustration/vector program)

97. Cotton Farmers

98. Since it’s vector, that means even if we scale it up, it stays just as sharp as before: Since it’s vector, that means even if we scale it up, it stays just as sharp as before:

99. Other resources A great and frequently updated place to see fresh and innovation digital images: A great and frequently updated place to see fresh and innovation digital images: http://www.deviantart.comhttp://www.deviantart.comhttp://www.deviantart.com This is one of the most popular sites that allow people to share their designs as well as sell printable versions of their illustrations. This is one of the most popular sites that allow people to share their designs as well as sell printable versions of their illustrations.

100. More to learn There is a lot to digital image and what you’ve learnt today was just some of most important and basic the foundation. There is a lot to digital image and what you’ve learnt today was just some of most important and basic the foundation. There are a lot of people who might know how to use programs like Adobe Photoshop or Illustrator. There are a lot of people who might know how to use programs like Adobe Photoshop or Illustrator. But a lot of them have no idea when it comes to the technical side of digital image. But a lot of them have no idea when it comes to the technical side of digital image.

101. Look deeper There are a lot of free in-depth tutorials available on the Internet. There are a lot of free in-depth tutorials available on the Internet. A lot of good books about digital design can be found in the City University Library. A lot of good books about digital design can be found in the City University Library. Look at books on the art of digital image and books on the science of digital image. Look at books on the art of digital image and books on the science of digital image.