Graphics and the Web

1. Graphics and the Web Visual Design, Ch. 6 CIS 311 – graphics.ppt

2. What are graphics? • How do you use graphics on the web? • Terms about graphics • Issues in using graphics • Acquiring graphics • Editing graphics • Types of graphic compression for the web • Workflow methods for successful use of graphics on your website Graphics

3. Backgrounds • Pictures • 3-D graphics • Charts • Computer-generated graphics, drawings, etc. • Clip art • Buttons • Anything else? • Animated GIFS? What qualifies as Graphics on Web?

4. Avoid gratuitous graphics • Save images in the appropriate format • Reuse graphics • Reduce Image size • Use height & width attributes appropriately • What’s wrong with increasing image dimensions in HTML tag? Reducing image dimensions? • Make the images accessible: How? Principles of using Graphics

5. Graphic types: • content? Has graphic some meaning for the page? • Or is graphic thematic/decorative? • Anti-aliasing –gets rid of the “jaggies” • Transparency of background – transparent GIF & PNG images • Can use Matte color for jpegs in Photoshop “save for web” • Interlacing – downloads successive versions of images – not used much with broadband Terms regarding Graphics

6. Stock photos – do not use for this class • Screen captured images • Import photos from digital camera • Can choose file dimensions & resolution on camera – imported as JPEGs which are already compressed by camera • Raw format includes much all the information the camera records – Digital SLRs / some high-end non digital SLRs • Do not take images from internet sites unless you have specific permission – • check copyright for site & licenses governing uses of its content. Acquiring images

7. Computer screen is low resolution: 72 dpi • Image memory size varies depending on compression and file format • Web color on client varies depending on: • bit-depth settings of computer • Color calibration & gamma default settings of monitor • Operating system, Web browser Issues: Image Resolution

8. JPEG (Joint Photographic Experts Group) • Photos with smooth tonal/value transitions • Preserves the outline of the image • Blurs crisp edges between colors • Reduce JPEG file size by: Cropping out nonessential content Reducing color palette in image • Blurring background or selecting most important areas before compressing • Decreasing the image dimensions • Compression overview: • http://www.csupomona.edu/~llsoe/42101/photoshop/compression.htm Image formats for the Web: JPEG

9. Graphics Interchange Format • Compression works best for images with large areas of flat color • http://www.csupomona.edu/~llsoe/42101/photoshop/compression.htm • Restricted to 256 colors • Doesn’t work well for photos unless you want special effects • 256 color photo is much larger than more compressed JPEG • Indexed color: 256 down to 2 colors, displayed in color palette in Save-for-web window in Photoshop • Supports transparent backgrounds • Can be used to create animated gifs • 216 web-safe colors – why was this color palette created? Image formats for the Web: GIF

10. Newer format – still not widely used – value is similar to GIF – flat images, not photos • Advantages of PNG • 256 colors • True color, which offers 16.8M colors, like JPEG • True grayscale color • Provides indexed transparency & alpha transparency (not much supported, large file sizes) Image formats for the Web: PNG

11. In an interactive product when you have more than one image on the screen, • each image may use a different palette of colors • all of the colors in both images may not be the palette in use • Good ways to limit image file size • reduce the color palette – minimize the range of colors: • All reds/oranges or All greens/blues, • but NOT red, orange, green, blue, yellow, etc. Issues: Color & color Palettes

12. Importing – start with high quality images • More to work with • High resolution images allow you to crop • Use layers to edit images • If each change is done in a layer, you can turn layer visibility on and off, move layers up and down the stack • Save psd (Photoshop) version of file to preserve all your layers for later use • Export files using “save for web & devices” • Turn on layers you want to use in final image Editing images

13. Exporting images – • Sharpen the image the last step before exporting • http://www.csupomona.edu/~llsoe/42101/photoshop/index.htm#sharpen • Photoshop optimizes images better than you probably can do manually via File> “save for web” window • Can scale file dimensions down by % • 4 windows allow you to view results of various levels & types of compression • Can compare differences between different file formats • Select the one you want and click “save” Editing Images

14. Filters: http://www.csupomona.edu/~llsoe/42101/photoshop/index.htm#filters • Adjustment layers: http://www.csupomona.edu/~llsoe/42101/photoshop/adjustmentlayers.htm • Styles: http://www.csupomona.edu/~llsoe/42101/photoshop/styles.htm • Actions –macros to alter images: http://www.csupomona.edu/~llsoe/42101/photoshop/actions.htm • Creating & exporting animations:http://www.csupomona.edu/~llsoe/42101/photoshop/animation.htm Editing Images: Image effects

15. Logo design • Graphics & text • Image effects • Background images for web pages – can be inserted on the stylesheet • Do not overwhelm the text & images on page so tone the background image down • Outline the text • Tile the background image in CSS • repeat-x, repeat-y, repeat • Insert background image inside a <div> tag Editing Images: Logos & Background images

16. Can be done with JavaScript which rotates a series of images with timer • Photoshop has an animation window • Export animated GIF, which is a single file • Flash animation • Flash will export animated GIFs & FLV video • Also can export SWF files, which are much smaller than animated GIFs and which can contain MP3 sound files, and video • Flash also streams FLV files you export from other applications Editing images: Animation

17. Smaller Image Files hasten download • Reduce Image File Size for the Web • Reduce number of colors • Reduce image dimensions • Blur unimportant areas of image • Select important areas before compressing to increase their quality • Compress to reduce color depth • To check download speed of a page in Web Developers Toolbar: Tools>Speed Report File size: Images

18. Always preserve the original image – archive it • Do not compress an image & then compress the compressed image again – degrades • Always compress from an original version of the image (psd) • Types of image files: • Vector – described by mathematical algorithms so increase & decrease in size gracefully: Flash, Illustrator • Bitmapped/raster images – described by pixels. Photographic images (JPEGs) and graphics images (GIFs) • Degrade when scaled up or recompressed Graphics File Compression

19. Buy high, sell low • Digitize images, sound, video at highest possible resolution & reduce it later • Digitizing at low resolution saves memory & storage up front, but loses too much data • Save the best for last • Reduce the resolution of the content last, after you’ve done your editing and altering • Compress from the high quality version – otherwise the file degrades rapidly if you recompress previously compressed documents Develop workflow methods

20. Protect the original copy - • Archive a copy of the original media file (uncompressed psd file) • Keep an audit trail • Use Adobe Bridge to manage files • If you use non-original content, CHECK that you have permission & save that information • List file & its source in your sourcelog document • Keep a record of changes you make to a file • In Photoshop, make each alteration a separate layer & save the PSD version which preserves all the layers • Save versions so you don’t have to go back to beginning Develop workflow methods

21. No Late Projects accepted – • put up what you have finished and start uploading early! • Do the requirements first – then add bells and whistles if you have time • Don’t change the content of your project until AFTER I tell you I finished grading the project. Develop workflow methods

22. Create “alt” text that actually describes image & what its meaning is • convey information contained in the image in alternative format so that disabled person has access to it • Use textual descriptions of charts & graphs • Decorative graphics can have null alt text: alt=“” Accessible images

23. Easiest: Test & fix as you build pages & site with web developers toolbar testing tools • After you upload to www, test the site (links, graphics, CSS, XHTML, etc.) • Be sure that your images show on the web – • file path may be pointing to your hard drive TEST your Website

24. Midterm exam: Tuesday, Feb 9 • Exam Review will be posted later this week. • NO project due next week. • No quizzes due next week. Next