COS 125

1
COS 125

• Day 13

2
Agenda

• Assignment 3 Due
• Assignment 4 Posted
• Due March 24
• Left to do
• 6 Assignments (9 total)
• About one per week
• 3 Quizzes
• Capstone projects
• Exam 3 will March 24
• Castro Chaps 1-6
• Today we will look at creating and using images
• Examples
• http//perleybrook.umfk.maine.edu/samples/imagespl
  ay.htm
• http//perleybrook.umfk.maine.edu/samples/bk.htm

3
Factors to Consider for Web Image

• Format
• Color
• Size/resolution
• Speed
• Transparency
• Animation

4
Formats

• 3 Possibilities
• GIF
• Version 87a
• Older
• Version 89a
• Transparency and animations
• Interlaced or non-interlaced
• JPEG
• Compressed (variable)
• PNG
• Optimized or non-optimized palette
• Interlaced or non-interlaced

5
Color

• Depth
• 24 bit
• 16,777,216 possible colors
• true color
• Photo quality
• 16 bit
• 65,536 colors
• 8 bit
• 256 colors

6
Browser Colors

• Most Browser cheat!
• Lock palette to 256 specifics colors
• Because of difference in O/S only 216 colors are
  Web Safe
• http//www.cookwood.com/html/colors/websafecolors.
  html
• Non web safe colors may be dithered or shifted

7
Size and Resolution

• Pixels
• Monitors are 70-90 pixels per inch
• Printers are 200 ppi
• 800 X 600 image
• 10X7.5 inches on monitor
• 4X3 inches (or less) on printer
• The more pixels on a printer means greater detail
• The more pixels on a monitor means larger size
• Standard SVGA monitors are 800X600 16 bit
• XGA monitors are 1024X768 24 bit or better

8
Speed

• How fast can the picture be displayed?
• Factors
• Size of graphic file
• Size of graphic
• Color depth
• Compression
• Interlacing
• Sneak peek

9
How to make graphic load faster

• Use the right image format
• For Photo realistic use jpeg
• Lossy compression
• Use Gaussian blur and re-compress
• Gif using LZW compression
• PNG
• Only covert images to web format after all
  editing is done

10
Transparency

• Only for GIF and PNG
• remove one color from image
• Remove Background to make image non-rectangular
• Remove color in image to create special effects

11
Animations

• Animated Gifs
• Flash
• Both work with frames
• Like cartoons
• Series of images with slight changes between each
  image

12
Where to get images

• Buy or download
• Scan existing images
• Blake library
• Digital camera
• Blake library
• Create using image editing program
• Goggle image search

13
Paint Shop Pro

• File New
• Set image size
• Set depth
• Set background
• transparent

14
Paint Shop Pro

• Resizing Images
• Image resize
• Dont make larger!
• Lose detail
• If image is twice as big
• File is 4 times larger
• 4 time slower
• Better to use image resizing in XHTML

15
Creating Transparent GIFS

• Save image as GIF
• Colors Set palette transparency
• Set dialog as shown
• Select color
• Save

16
Paint Shop Pro

• Reduce Color Depth
• Colorsdecrease color depth
• Make image file smaller
• Show images Progressively
• Save as
• options

17
Playing with photos

• Compressing Images
• ImageblurGaussian blur
• Save as jpeg
• Select options
• Set compression as desired

18
Creating animated Gifs

• Create frames
• Slight change between each image
• Save as series of images
• Image1.gif, image2.gif etc
• Filerun animation shop
• Fileanimation wizard
• Add images in order

19
Gee Whiz Tip of the Day

• Creating Tileable images for backgrounds
• Images must blend on top edge to bottom edge
• Images must blend left edge to right
• Gradient effects
• Use long narrow stripes
• Textures
• Create squares (100x100)
• Cut into four (50X50)
• Swap corners
• Blend middle