1 / 33

Graphics in the web

Graphics in the web. Digital Media: Communication and Design. 06.03.2007. Comments. Mandatory assignment Don’t panic!! Photoshop photoshop.html in public_html Picture of yourself. Goals of the lecture. What is a digital image Different formats we can use in the web GIF, JPEG, PNG

brooks
Download Presentation

Graphics in the web

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. Graphics in the web Digital Media: Communication and Design. 06.03.2007

  2. Comments • Mandatory assignment • Don’t panic!! • Photoshop • photoshop.html in public_html • Picture of yourself

  3. 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. Index • Digital image • GIF • JPEG • PNG • Image editing

  5. 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

  6. Digital image II

  7. Vector image • Shapes are defined by mathematical expressions • Can scale without losing detail • Example with Flash

  8. 600 400 800x600 1024x768

  9. Resolution

  10. 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. 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. Colour depth II • Greyscale image: • 8 bits per pixel = 256 possible values

  13. 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. 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. 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. Index • Digital image • GIF • JPEG • PNG • Image editing

  17. GIF • Graphic Interchange Format • Indexed images with max 8 bits per pixel • Lossless compression • May contain transparent areas • May contain multiple images

  18. 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. GIF III: Compression • Lossless compression • Good when compressing areas with the same colour • Not good for gradients or photos

  20. GIF IV • Number of colours: • Find minimum number of colours needed • Dither: “create” colours with a limited palette • Example

  21. Index • Digital image • GIF • JPEG • PNG • Image editing

  22. JPEG • Joint Photographic Experts Group • RGB 24-bit colour image • Lossy compression • No transparency

  23. 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. Index • Digital image • GIF • JPEG • PNG • Image editing

  25. 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. PNG II • Better compression than GIF • Larger files than JPEG • But better quality • IE6 doesn’t support transparency

  27. Which format to choose PNG GIF JPEG

  28. Index • Digital image • GIF • JPEG • PNG • Image editing

  29. Some basic Photoshop Dark Light Mid

  30. Some basic Photoshop II

  31. Some basic Photoshop III

  32. Some basic Photoshop IV

More Related