Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
Graphics as Content

Graphics as Content

Ratings: (0)|Views: 47 |Likes:
Published by raluk555

More info:

Categories:Topics, Art & Design
Published by: raluk555 on Jan 27, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

01/27/2011

pdf

text

original

 
Chapter 11(Yale)Graphics as content: number of purpose
1.
 
Illustrations thousands words2
.
 
D
iagrams can explain concepts visually3
.
 
uantitative data: can help explain financial, scientific
...
 4
.
 
A
nalysis and causality: graphics can help take apart a topic or show what caused it5
.
 
Integration: graphics can combine words, numbers and images in a comprehensiveexplanationModern looking infographics spread from Joseph Pulitzers the great Sunday world of the latenineteenth and early twentieth centuries
..
these spreads are the direct ancestors of today;s richworld 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 addressableelement of a screenScreen resolution = rfers to the number of pixels a screen can display within a given area; pixelper inchGamma refers to the degree of contrast between the midlevel gray values of an image
.
Forwindows 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
.
 
A
s a compression method it uses LZW  squeezes out inefficiencies in data storagewithout losing data or distorting the image
.
Lzw compression scheme is best atcompressing images with large fields of homogenous colour such as logos and diagrams
.
 
D
ithering = 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 agrainy image
.
 2
.
 
JPE
G
- joint photographic expert group compression scheme  at least 24 bits of memoryto each pixel 
1
6
.
8 million colors; uses a mathematical technique called a discretecosine transformation  its also called a lossy compression technique because itdiscards unnecessary data as it compresses the image
.
 3
.
 
PN
G graphics
  portable network graphic is a nonprorietary alternative to the gif imageformat
.
Png images can hold a text description of the images content, which allowsinternet search engines to search for images based on these embedded textdescriptions
.
 
Gif and png are good for logos and icons
A
dvantages 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
A
dvantages 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 pagesthere are 2 advantages: true color(24 or 32 bit) diaplays; the light transmitted from display monitorsshows 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)
.
 
 
T
he 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 equivalentsize
.
 Color is the response of our eye and brain to various wavelengths of light
.
Mixed together and atmaximum brightness, all the RGB colors turn whiteHue  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-grayversions
.
 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 
P
icture this! Using Images on your Web SiteBrenan lecture (02.09.2010)
Vectors are mathematical shapes  you can zoom without having the image disturbed; must have afill 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 thescreen)Bitmaps and
A
liasing 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 R
A
M, in screen memory or VR
A
M,on the screen itself 
.
 Color system:*indexed (uses a Color palette) for older systems, handheld systems or to savespace/memory/download time  uses a small set of colors (from 2 to 256); color Look-Up table(CLU
T
) or palette
...
 Bit depths
1
bit=2colors (2); 2bit=4colors(2*2); 8bit=256(2 la puterea 8)High color RGB (
1
6 bit) up to -65536 colors  5 bits each of RE
D
GREEN BLUE
1
bit unused or more
T
rue color RGB (24 bit)
1
677772
1
6 colors  8 bits each of RGB 256 levels of intensity for eachprimary color, hexadecimal representation RRGGBB*RGB for screen*CMYK Cyan Magenta Yellow BlacK for print*Lab Color for pro video & photo
A
dditive and SubstractiveOne binary digit per dot 
BIT
=
BI
nary
D
IGI
T
T
wo possibilities for each dot: black or white 
T
wo bits per dot*Four possibilities for each dot;0
1
2 3 4 5 6 7 8 9
1
0
11
 
1
2
1
3
1
4
1
5
0
1
2 3 4 5 6 7 8 9
A
B C
D
E FOr: letter are bigger than numbers; F is bigger than
A
;
T
he bigger the brighter (depends on theposition)Hexadecimal Values (CSS example)p {color: #FF0088}purpleh
1
{color: #ccc}light grey;h2{color: #f} white

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->