1. Graphics in the web Digital Media: Communication and Design. 06.03.2007

2. Digital Media: Communication and DesignF2007 Comments Mandatory assignment  Don’t panic!!  Photoshop  photoshop.html in public_html  Picture of yourself

3. Digital Media: Communication and DesignF2007 Goals of the lecture What is a digital image Different formats we can use in the web  GIF, JPEG, PNG Basic things about Photoshop  Continued in the assignment

4. Digital Media: Communication and DesignF2007 Index Digital image GIF JPEG PNG Image editing

5. Digital Media: Communication and DesignF2007 Digital image Rectangular grid of pixels Resolution: width x height in pixels 9 x 12 = 108 pixels Colour depth: amount of information in each pixel 123456789 1 2 3 4 5 6 7 8 9 10 11 12

6. Digital Media: Communication and DesignF2007 Digital image II

7. Digital Media: Communication and DesignF2007 Vector image Shapes are defined by mathematical expressions Can scale without losing detail Example with Flash

8. Digital Media: Communication and DesignF2007 600 400 800x600 1024x768

9. Digital Media: Communication and DesignF2007 Resolution

10. Digital Media: Communication and DesignF2007 Resolution 2272 x 1704  3.8 megapixels  11.1 MB uncompressed  1.5 MB JPEG 640 x 480 (web size)  0.3 megapixels  900 KB uncompressed  106 KB JPEG

11. Digital Media: Communication and DesignF2007 Colour depth Bit: unit that represents either a 0 or a 1 Binary image:  Black and white  1 bit per pixel  80x100 = 80 Kbits = 10 KB

12. Digital Media: Communication and DesignF2007 Colour depth II Greyscale image:  8 bits per pixel = 256 possible values

13. Digital Media: Communication and DesignF2007 Colour depth III RGB colour:  Combine Red, Green and Blue light  Values usually given in hexadecimal base  R: 241 = #F1  G: 21 = #15  B: 109 = #6D

14. Digital Media: Communication and DesignF2007 Colour depth IV True colour:  24 or 32 bits per pixel = 16.777.216 values  8 bits for each colour and alpha channel  85% of users (thecounter.com)

15. Digital Media: Communication and DesignF2007 Colour depth V Indexed colour  8 bits per pixel = 256 colours at one time  The possible colours are stored in a palette (colour map)

16. Digital Media: Communication and DesignF2007 Index Digital image GIF JPEG PNG Image editing

17. Digital Media: Communication and DesignF2007 GIF Graphic Interchange Format Indexed images with max 8 bits per pixel Lossless compression May contain transparent areas May contain multiple images

18. Digital Media: Communication and DesignF2007 GIF II: Palette Contains the colours that can be used Maximum of 8 bits = 256 colours Common palettes:  Exact  Adaptive  Perceptual  Selective (default in Photoshop) Example: blue.jpg, brown.jpg

19. Digital Media: Communication and DesignF2007 GIF III: Compression Lossless compression Good when compressing areas with the same colour Not good for gradients or photos

20. Digital Media: Communication and DesignF2007 GIF IV Number of colours:  Find minimum number of colours needed Dither: “create” colours with a limited palette  Example

21. Digital Media: Communication and DesignF2007 Index Digital image GIF JPEG PNG Image editing

22. Digital Media: Communication and DesignF2007 JPEG Joint Photographic Experts Group RGB 24-bit colour image Lossy compression No transparency

23. Digital Media: Communication and DesignF2007 JPEG II Very good compressing photographic images Not good compressing flat colours  Example in Photoshop Lossy compression:  It’s possible to specify the degree of compression

24. Digital Media: Communication and DesignF2007 Index Digital image GIF JPEG PNG Image editing

25. Digital Media: Communication and DesignF2007 PNG Portable Network Graphic Created for the web 24- or 48-bit colour, 16-bit grayscale and 8-bit indexed colour images Lossless compression 8- or 16-bit alpha channel W3C and ISO standards

26. Digital Media: Communication and DesignF2007 PNG II Better compression than GIF Larger files than JPEG  But better quality IE6 doesn’t support transparency

27. Digital Media: Communication and DesignF2007 Which format to choose PNG JPEG GIF

28. Digital Media: Communication and DesignF2007 Index Digital image GIF JPEG PNG Image editing

29. Digital Media: Communication and DesignF2007 Some basic Photoshop Dark Mid Light

30. Digital Media: Communication and DesignF2007 Some basic Photoshop II

31. Digital Media: Communication and DesignF2007 Some basic Photoshop III

32. Digital Media: Communication and DesignF2007 Some basic Photoshop IV