Chapter 11(Yale) Graphics as content: number of purpose 1. Illustrations thousands words 2. Diagrams can explain concepts visually 3.

Quantitative data: can help explain financial, scientific... 4. Analysis and causality: graphics can help take apart a topic or show what caused it 5. Integration: graphics can combine words, numbers and images in a comprehensive explanation Modern looking infographics spread from Joseph Pulitzer s the great Sunday world of the late nineteenth and early twentieth centuries.. these spreads are the direct ancestors of today;s rich world of integrated text and visual media. Characteristics of Web Graphics Pixel = shortcut for picture element 24 or 32 bits for every pixel it s the smallest addressable element of a screen Screen resolution = rfers to the number of pixels a screen can display within a given area; pixel per inch Gamma refers to the degree of contrast between the midlevel gray values of an image. For windows is 2.2 target dama Graphic file formats Gif(jiff); jpeg(jay peg); png(ping) 1. GIF graphic interchange format 8-bit graphics and can only accommodate 256 colours. As a compression method it uses LZW squeezes out inefficiencies in data storage without losing data or distorting the image. Lzw compression scheme is best at compressing images with large fields of homogenous colour such as logos and diagrams. Dithering = the process of reducing many colours to 256 or fewer. Pixels of 2 colours are juxtaposed in order to create the illusion that a third colour is present. It produces a grainy image. 2. JPEG- joint photographic expert group compression scheme at least 24 bits of memory to each pixel 16.8 million colors; uses a mathematical technique called a discrete cosine transformation it s also called a lossy compression technique because it discards unnecessary data as it compresses the image. 3. PNG graphics portable network graphic is a nonprorietary alternative to the gif image format. Png images can hold a text description of the image s content, which allows internet search engines to search for images based on these embedded text descriptions. Gif and png are good for logos and icons Advantages of GIF files: y Gif is the most widely supported graphics format on the web y GIF s of diagrammatic images look better than JPEG s y GIF supports transparency and interlacing Advantages of JPEG images y JPEG archieves huge compression ratios, which means faster downloads y JPEG produces excellent results for most photographs and complex images y JPEG supports full color (24 bit, true color) images Images on the screen primary challenge is low resolution, but when you display on web pages there are 2 advantages: true color(24 or 32 bit) diaplays; the light transmitted from display monitors shows more dynamic range and color intensity than light reflected from printed pages. Four color printed images are separated into four subtractive printing colors (cyan, magenta, yellow, and black).

The bottom line: the computer screen is lower in resolution, but because of the other advantages of computer displays, images in web pages can easily rival color images printed on paper at equivalent size. Color is the response of our eye and brain to various wavelengths of light. Mixed together and at maximum brightness, all the RGB colors turn white Hue the wavelength of color along the spectrum of visible light. Saturation describes the intensity of a color, ranging from pure high chroma colors to near-gray versions. Brightness: the lightness or dark of a color or how close to either black or white a given color is. Chapter 5 Web site the right way Picture this! Using Images on your Web Site

Brenan lecture (02.09.2010) Vectors are mathematical shapes you can zoom without having the image disturbed; must have a fill or stroke, or both. Vectors are stored on a disk as mathematical ecuations. File formats are .eps, .ai, .svg(open standard for vectors in web browser !!! you can write code to draw the image on the screen) Bitmaps and Aliasing How does an image get on to a web page? If you turn the computer off what you had on ram will disappear, what you had on disk will be there. Image take up space: in a network stream, on disk, in memory or RAM, in screen memory or VRAM, on the screen itself. Color system: *indexed (uses a Color palette) for older systems, handheld systems or to save space/memory/download time uses a small set of colors (from 2 to 256); color Look-Up table (CLUT) or palette ... Bit depths 1bit=2colors (2); 2bit=4colors(2*2); 8bit=256(2 la puterea 8) High color RGB (16 bit) up to -65536 colors 5 bits each of RED GREEN BLUE 1 bit unused or more True color RGB (24 bit) 167777216 colors 8 bits each of RGB 256 levels of intensity for each primary color, hexadecimal representation RRGGBB *RGB for screen *CMYK Cyan Magenta Yellow BlacK for print *Lab Color for pro video & photo Additive and Substractive One binary digit per dot BIT=BInary DIGIT Two possibilities for each dot: black or white Two bits per dot *Four possibilities for each dot; 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0123456789A B C D E F Or: letter are bigger than numbers; F is bigger than A; The bigger the brighter (depends on the position) Hexadecimal Values (CSS example) p {color: #FF0088}purple h1 {color: #ccc}light grey; h2{color: #f} white

White: FFFFFF Black: 000000 Red: FF0000 Green: 00FF00 Blue: 0000FF Light grey: CCCCCC Dark Grey: 333333 Yellow: FFFF00 Cyan: 00FFFF Magenta: FF00FF When switching to indexed color you may lose some color data! Many Photoshop features only work in RGB mode. True Color with transparency Millions + Each pixel can have: y 8 bits of red, 8 bits of green, 8 bits of blue y 8 bits of alpha (256 levels of transparency) y File format: png -24 with transparency y Same issues with IE6 and other older browsers The image will be easier to compress efficiently if y The number of colors is reduced/limited y There are fewer details/edges y There is more space, flat colors or gradients y There is less essential information Lossy and Lossless Compression can be either Lossy or Lossless Lossless = i want the picture exactly as it is.. no transformation(zip, rar) png 24 Lossy= we lose information at compression jpeg for that it s efficient bcs it throws away data which is not needed; recompressing in a lossy format will cause further data loss.

Min 32x32; max 64x64 Make a Progress Throbber 10 16 - done Dodge? Flicker blending layer palettes

Web Style Guide chapter 4 Interface Design GUI Graphic User Interface of a computer system comprises the interaction metaphors, images and concepts used to convey function and meaning on the computer screen. Wayfinding has four core components: 1. Orientation: Where am I right now? 2. Route decision: Can I find the way to where I want to go? 3. Mental mapping: Are my experiences consistent and understandable enough to know where I ve been and to predict where I should go next? 4. Closure: Can I recognize that I have arrived in the right place?