Embed Size (px)
Citation preview
Pixels 101Pixels 101
10 Minute University
Richard FisherRichard Fisher
2/4/2002 Richard Fisher 2
PixelsPixelsPixelsPixels
Picture ElementPicture Element A single point in an electronic imageA single point in an electronic image The greater number of Pixels, the The greater number of Pixels, the
higher the resolution or quality of higher the resolution or quality of the imagethe image
2/4/2002 Richard Fisher 3
4 x 5 Pixels Arrays
OOOOOOOOOOOOOOOOOOOO
OOO OOO
OOO OOO
OOO OOO
OOO OOO
2/4/2002 Richard Fisher 4
Screen Resolution(in pixels)
640 X 480
800 X 600
1024 X 768
2/4/2002 Richard Fisher 5
Two Types of Web Graphics
Two primary image file formats are used on the Web: GIF & JPG.
These formats all compress images to create smaller files.
General Rule of thumb: Photos use JPG Simple (solid) color graphics and line art
2/4/2002 Richard Fisher 6
Gif Format
GIF uses a loss-less compression technique, meaning that no color information is discarded when the image is compressed
The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors
GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics
2/4/2002 Richard Fisher 7
GIF Transparancy
With GIF files, you can choose any one color in an image to appear as transparent in the browser.
The background color or pattern will show through the areas that you have designated as transparent.
Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle.
2/4/2002 Richard Fisher 9
JPEG Images
JPG is best for photographs or continuous tone images.
JPGs are 24-bit RGB images that allow millions of colors.
JPGs use a “lossy” compression routine especially designed for photographic images. When the image is compressed, some color information is discarded, resulting in a loss of quality from the original image.
2/4/2002 Richard Fisher 10
JPEG Format
When you create the JPG file, you can also manually balance the amount of compression versus the resulting image quality.
The higher the compression, the lower the image quality. You can play with this setting to create files that are as small as possible but still look good.
Many photos can sustain quite a bit of compression while still maintaining image integrity.
2/4/2002 Richard Fisher 11
Where to Find Images
Public-domain and other Web sites (right click image)
Clip art Create your own (PowerPoint) Scanner Digital Cameras Stock photo collections Remember to respect copyright laws!
2/4/2002 Richard Fisher 12
Graphic Program Uses
Change size of graphic Change format of graphic Optimize graphic for web
Change color depth for GIFs Change quality for JPGs
2/4/2002 Richard Fisher 13
Graphic Programs
Microsoft Photo Editor – comes with MS Office Macromedia Fireworks – great for preparing
images for web ACDSee (viewer, editor, optimizer, batch) -
www.acdsee.com Adobe Photoshop – expensive, used by many
professionals Adobe Photoshop Elements 2.0 – www.adobe.com
ColorsColor=“rrggbb”
r=red, g=green, and b=blue intensity
From 0 – 255 [decimal] or 00-FF Hex
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000">
Decimal to Hex Conversion
Decimal Hexadecimal Decimal Hexadecimal DecimalHexadecimal0 00 243 F31 01 244 F42 02 245 F53 03 0 00 246 F64 04 51 33 247 F75 05 102 66 248 F86 06 153 99 249 F97 07 204 CC 250 FA8 08 255 FF 251 FB9 09 252 FC
10 0A 253 FD11 0B 254 FE12 0C 255 FF
(Rule of 51)
• Windows Calculator (in Accessories Group)• Excel’s DEC2HEX Function
2/4/2002 Richard Fisher 16
Common Color Schemes RRGGBB Pattern Color
000000 Black0000FF Blue00FFFF Cyan00FF00 GreenFF0000 RedFF00FF MagentaFFFF00 YellowFFFFFF White
