Getting the Basics

Graphics for the Web

McIntyre, Period 2

Kellogg, Period 5

Things You Need to Know About

types of graphics color resolution size file formats file naming how graphics are used software.

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 .

About Color

CMYKK (printing) cyan, magenta, yellow, black ink

RGB (TV/monitor) red, green, blue light

8-bit color (binary) 2 to the 8th power 256 colors

216 web safe PC and Mac display comparable in NN and IE

More About Color hexadecimal code

conversion from 0-255 system 2-digits RED 2-digits GREEN 2-digits BLUE

values 0-9, A-F low to high saturation dull to bright “red” = FF0000 “green” = 00FF00

“blue” = 0000FF

00336699CCFF

About Resolution

print – minimum 300 display – minimum 72display – 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)

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

More About Size

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

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?

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)

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

About Software

Paint (all labs) Photoshop 5.5 Photoshop 6.0

(G104) Fireworks MX Illustrator (G104???) Freehand MX Many others

available…

Online Tools and Articles

Death of the Websafe Color Palette? Visibone Color Lab

(http://www.visibone.com/colorlab/) WebMonkey Color Chart (

http://hotwired.lycos.com/webmonkey/reference/color_codes/)

Color Calculator (http://sessions.edu/ilus/)

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)