1. Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5

2. Things You Need to Know About types of graphics color resolution size file formats file naming how graphics are used software.

3. About Graphic Types Raster bit-mapped, not BMP pixel by pixel color GIF, JPG, PNG Photoshop, Fireworks, Paint. Vector mathematical formulas smooth resize, no pixelation Flash, Freehand, Illustrator.

4. About Color K CMYK (printing) cyan, magenta, yellow, black ink RGB (TV/monitor) red, green, blue light 8-bit color (binary) 2 to the 8 th power 256 colors 216 web safe PC and Mac display comparable in NN and IE

5. More About Color hexadecimal code conversion from 0-255 system conversion 2-digits RED 2-digits GREEN 2-digits BLUE values 0-9, A-F low to high saturation dull to bright “red” = FF 0000 “green” = 00 FF 00 “blue” = 0000 FF 00 33 66 99 CC FF

6. About Resolution print – minimum 300 display – minimum 72 display – minimum 72 Mac 72 dpi PC 96 dpi lowest common denominator For cross-application work (print and web), start big (high DPI), compress later (low DPI)

7. About Size Size = memory Consider download speed of user Appropriate content Monitors on campus set to 800 width by 600 height As low as 640 x 480 As high as 1280 x 1024 Consider settings for the majority of your audience

8. More About Size

9. About File Formats PSD PhotoShopDocument saves layer – huge file size JPG JointPhotoExpertsGroup millions of colors GIF Compuserve GraphicInterface transparency PNG PortableNetworkGraphic lack of browser support

10. More About File Formats JPG photos, gradients, shading better compression = lots of visual information with faster loading GIF line drawing, cartoons, animations transparency, interlacing, motion How to choose?

11. File Naming keep it simple 8.3 format short, but descriptive no “9X349LG.jpeg” okay to go longer NO spaces NO special characters hyphen or underscore, OK NO capitals (though it won’t kill ya)

12. About Graphic Elements banners, logos backgrounds, buttons desktop wallpaper animations navigation bars image maps photos/cartoons

13. About Software Paint (all labs) Photoshop 5.5 Photoshop 6.0 (G104) Fireworks MX Illustrator (G104???) Freehand MX Many others available…

14. Online Tools and Articles Death of the Websafe Color Palette? Visibone Color Lab (http://www.visibone.com/colorlab/)http://www.visibone.com/colorlab/ WebMonkey Color Chart (http://hotwired.lycos.com/webmonkey/ref erence/color_codes/)http://hotwired.lycos.com/webmonkey/ref erence/color_codes/ Color Calculator (http://sessions.edu/ilus/)http://sessions.edu/ilus/

15. Our First Look at Photoshop 5.5 New file settings for web graphics Tools / Options / Layers (TAB key) History vs CTRL+Z (undo) Paint Can and Color Picker Pencil and Airbrush Gradients and Creating New Ones Filters Rulers and Guidelines Saving for Web (optimization tools)