2. Pixels 101 10 Minute University Richard Fisher

3. 2/4/2002 Richard Fisher2 PixelsPixels  Picture Element  A single point in an electronic image  The greater number of Pixels, the higher the resolution or quality of the image

4. 2/4/2002 Richard Fisher3 4 x 5 Pixels Arrays OOOO OOOO OOOO OOOO OOOO OOO OOO OOO OOO OOO OOO OOO OOO

5. 2/4/2002 Richard Fisher4 Screen Resolution (in pixels)  640 X 480  800 X 600  1024 X 768

6. 2/4/2002 Richard Fisher5 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

7. 2/4/2002 Richard Fisher6 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

8. 2/4/2002 Richard Fisher7 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.

10. 2/4/2002 Richard Fisher9 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.

11. 2/4/2002 Richard Fisher10 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.

12. 2/4/2002 Richard Fisher11 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!

13. 2/4/2002 Richard Fisher12 Graphic Programs  Adobe Photoshop Elements ~ $50  Adobe Photoshop – expensive, used by many professionals  Macromedia Fireworks – good for preparing images for web  ACDSee with Real Optimizer (batch)

14. 2/4/2002 Richard Fisher13 Graphic Program Uses  Change size of graphic  Change format of graphic  Optimize graphic for web Change color depth for GIFs Change quality for JPGs

15. ColorsColors Color =“rrggbb” r=red, g=green, and b=blue intensity From 0 – 255 [decimal] or 00-FF Hex

16. Decimal to Hex Conversion Windows Calculator (in Accessories Group) Excel’s DEC2HEX Function

17. 2/4/2002 Richard Fisher16 Common Color Schemes RRGGBB Pattern Color 000000Black 0000FFBlue 00FFFFCyan 00FF00Green FF0000Red FF00FFMagenta FFFF00Yellow FFFFFFWhite

18. 2/4/2002 Richard Fisher17 The End Questions ? Richard Fisher rfisher@utdallas.edu