13 June – Session : 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

13 June – 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.

13 June – 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

13 June – 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. ”

13 June – Session 45 Bitmap Graphics n Composed of pixels

13 June – Session 46 Vector Graphics n Lines described mathematically n “Paths”

13 June – 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

13 June – 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

13 June – 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)

13 June – 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

13 June – 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)

13 June – Session 412 Interlaced GIFs n A poor quality version of the image is shown to start with, which gradually gets better quality

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

13 June – Session 414 A computer screen is made up of pixels

13 June – 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

13 June – 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

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

13 June – Session 418 JPEG compression artefacts n JPEG compression is poor on hard edges

13 June – Session 419 JPEG compression artefacts n JPEG compression is poor on hard edges Also see:

13 June – 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

13 June – 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)

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

13 June – 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

13 June – 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

13 June – 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

13 June – 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

13 June – 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

13 June – 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

13 June – 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

13 June – 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:

13 June – 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

13 June – 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

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

13 June – 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

13 June – 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