Scribd
Upload
143 views3 pages

Chapter 11 (Yale) Graphics As Content: Number of Purpose

1. The document discusses different types of graphics that can be used as content, including illustrations, diagrams, and quantitative data visualizations. 2. It covers common graphic file formats like GIF, JPEG, and PNG and their characteristics and uses. GIF is best for simple images while JPEG achieves high compression for photos. 3. Graphics on screens have lower resolution than print but allow true color and more dynamic range compared to reflected light from printed pages. Color is perceived based on wavelengths of light and described in terms of hue, saturation, and brightness.

Uploaded by

raluk555
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
143 views3 pages

Chapter 11 (Yale) Graphics As Content: Number of Purpose

1. The document discusses different types of graphics that can be used as content, including illustrations, diagrams, and quantitative data visualizations. 2. It covers common graphic file formats like GIF, JPEG, and PNG and their characteristics and uses. GIF is best for simple images while JPEG achieves high compression for photos. 3. Graphics on screens have lower resolution than print but allow true color and more dynamic range compared to reflected light from printed pages. Color is perceived based on wavelengths of light and described in terms of hue, saturation, and brightness.

Uploaded by

raluk555
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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:
 Gif is the most widely supported graphics format on the web
 GIF’s of diagrammatic images look better than JPEG’s
 GIF supports transparency and interlacing
Advantages of JPEG images
 JPEG archieves huge compression ratios, which means faster downloads
 JPEG produces excellent results for most photographs and complex images
 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:
 8 bits of red, 8 bits of green, 8 bits of blue
 8 bits of alpha (256 levels of transparency)
 File format: png -24 with transparency
 Same issues with IE6 and other older browsers
The image will be easier to compress efficiently if
 The number of colors is reduced/limited
 There are fewer details/edges
 There is more space, flat colors or gradients
 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?

You might also like