1. 13 June 2016 7134 – Session 41 7134: Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing Where to obtain graphics on the web

2. 13 June 2016 7134 – Session 42 Learning Outcomes/Objectives 1 n Understand the important differences between image formats for the web n Understand important features of web image editing software n Understand the different types of image editing software n Understand where to obtain further information on web graphics n Understand where to obtain further information on image editing software.

3. 13 June 2016 7134 – Session 43 Learning Outcomes/Objectives n Use image editing software to crop, resize and optimise quality for the web n Good practice for editing web images n Use web development software to add images to a webpage n Use FTP software to upload a webpage containing images to Hyperdisc n View webpages containing images they have created on Hyperdisc

4. 13 June 2016 7134 – Session 44 Recommended Text Books n Web Style Guide by Patrick Lynch & Sarah Horton n “ classic guide to all the basic rules of web design, maybe slightly too academic, but still excellent. And it is also available online - for free. ” http://www.webstyleguide.com

5. 13 June 2016 7134 – Session 45 Bitmap Graphics n Composed of pixels

6. 13 June 2016 7134 – Session 46 Vector Graphics n Lines described mathematically n “Paths”

7. 13 June 2016 7134 – Session 47 Graphics Software n Image Editing/Creation Software –Adobe PhotoShop –Adobe ImageReady –JASC PaintShop Pro –Macromedia Fireworks –Adobe Illustrator –Macromedia Freehand –etc etc etc Bitmap graphics software Vector graphics software

8. 13 June 2016 7134 – Session 48 Graphics Formats n BMP n PSD n TIFF n PCX n GIF n JPG n PNG Uncompressed:Compressed: n Must use compressed formats for the web n To limit download time

9. 13 June 2016 7134 – Session 49 GIF Summary (.gif) n Graphics Interchange Format n Standard introduced 1987, revised 1989 n Indexed, limited to 256 colours n Some colours can be transparent n Can be interlaced n Can be animated (frame by frame)

10. 13 June 2016 7134 – Session 410 JPEG Summary (.jpg) n Joint Photographic Experts Group n Standard introduced early 1990's n Millions of colours (24-bit "true colour") n Can be progressive downloads

11. 13 June 2016 7134 – Session 411 PNG Summary (.png) n Portable Network Graphic n Standard introduced mid 1990's n Millions of colours n Can be animated (frame by frame)

12. 13 June 2016 7134 – Session 412 Interlaced GIFs n A poor quality version of the image is shown to start with, which gradually gets better quality http://info.med.yale.edu/caim/manual/graphics/gif_files.html

13. 13 June 2016 7134 – Session 413 Progressive JPGs n A poor quality version of the image is shown to start with, which gradually gets better quality

14. 13 June 2016 7134 – Session 414 A computer screen is made up of pixels

15. 13 June 2016 7134 – Session 415 GIF compression n GIF compression is based on blocks of the same colour n For images with less than 256 colours, compression is loss-less Compressed: 8x0,2x0,2x1,4x1 Un-compressed: 0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1

16. 13 June 2016 7134 – Session 416 JPEG compression n JPEG compression is based on mathematically describing shapes n JPEG compression is always lossy JPEG compression is good for photos of people Less good for complex shapes like trees, patterned material, etc. Poor, when the photos contain hard edges, e.g. signs with text

17. 13 June 2016 7134 – Session 417 GIF compression artefacts n GIF compression is poor on photos, it adds pixels of wrong colour

18. 13 June 2016 7134 – Session 418 JPEG compression artefacts n JPEG compression is poor on hard edges

19. 13 June 2016 7134 – Session 419 JPEG compression artefacts n JPEG compression is poor on hard edges Also see: http://www.siriusweb.com/tutorials/gifvsjpg/http://www.siriusweb.com/tutorials/gifvsjpg/

20. 13 June 2016 7134 – Session 420 Which graphics format to use? n Use GIF for: –diagrams, –drawings –navigation graphics, –graphics with text –hard colour transitions/edges n Use JPG for: –photos –art –smooth colour & tonal transitions

21. 13 June 2016 7134 – Session 421 Image Processing for the web n Rotating n Cropping n Change Resolution n Sharpening n Resizing n Colour correction n Save for web (choose compression quality)

22. 13 June 2016 7134 – Session 422 Cropping an image n Often a first step is to remove unwanted portions of the image, e.g. borders, edges

23. 13 June 2016 7134 – Session 423 Change Resolution n Often you will be given images at 150 dpi (dots per inch) or 300 dpi or even 600 dpi n All images for the screen must be 72 dpi n Changing resolution is often a first step

24. 13 June 2016 7134 – Session 424 Sharpen n Often a first step is to sharpen the image. –Sharpen filter is 100% or 0%, on/off filter. –Unsharp Mask allows control over sharpen

25. 13 June 2016 7134 – Session 425 Adjust brightness, levels, curves n Don’t just use the brightness/contrast slider. n Use levels and curves as well. n The best way to adjust these is to create a new adjustment layer n At bottom of layers palette

26. 13 June 2016 7134 – Session 426 Adjust brightness, levels, curves n The best way to adjust these is to create a new adjustment layer n This is better than just applying it to the image because you can go back and change it

27. 13 June 2016 7134 – Session 427 Adjust brightness, levels, curves n This is better than just applying it to the image because you can go back and change it n And you can reduce the strength of each adjustment by changing the opacity of the layer

28. 13 June 2016 7134 – Session 428 Resizing Images n Changing the pixel dimensions is necessary to make smaller downloads n Often people make full-size versions and thumbnails or insets that link to them

29. 13 June 2016 7134 – Session 429 Resize Images – don't use HTML n Visual web-editing software allows you to resize images using the height and width attribute of the tag. n Don't do this because it distorts image quality and disguises large file sizes

30. 13 June 2016 7134 – Session 430 Thumbnails or “inset” images: Balance between crop and resize n This large photo: n Will look bad at 100 pixels wide: n So it is good to crop in as well:

31. 13 June 2016 7134 – Session 431 Two ways to use the crop tool n With nothing entered in the crop box: n Can adjust the crop area to any size. n With pixels entered in the crop box: n Dimensions are set and an image resize will be performed as well

32. 13 June 2016 7134 – Session 432 Good Practice n Always work from the original n Don’t resize then resize then resize –This reduces the quality (and increases filesize) n Resize, save, back to original, resize, save n Should save original scans in loss-less format like TIFF –Archive these on CD to save disk space

33. 13 June 2016 7134 – Session 433 Graphics archives n There are many graphics archives n There are also graphics generators n Is the graphic really copyright free?

34. 13 June 2016 7134 – Session 434 Graphics for the website assignment n You will lose marks if you don't have enough images that you have created, –webpage header images –webpage navigation buttons –photos of the authors –screenshots of reviewed websites –images to illustrate technical reports

35. 13 June 2016 7134 – Session 435 Graphics for the website assignment n You will lose marks if your images: –have borders that should have been removed –are poor quality –have too large a file size –are in the wrong format (GIF instead of JPG) –are only the images that come with the web authoring software