Transcript COS 125 day 13

COS 125
Day 13
Agenda
• Assignment 3 Due
• Assignment 4 Posted
– Due March 25
•
Left to do
– 6 Assignments (9 total)
•
About one per week
– 2 Quizzes
– Capstone projects
•
Exam #3 will first week of April
– Castro Chaps 1-10?
• Today we will look at creating and using images
• Examples
–
–
http://perleybrook.umfk.maine.edu/samples/imagesplay.htm
http://perleybrook.umfk.maine.edu/samples/bk.htm
Factors to Consider for Web
Image
•
•
•
•
•
•
Format
Color
Size/resolution
Speed
Transparency
Animation
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
Color
• Depth
– 24 bit
• 16,777,216 possible colors
• “true color”
• Photo quality
– 16 bit
• 65,536 colors
– 8 bit
• 256 colors
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/websafe
colors.html
– Non web safe colors may be dithered or
shifted
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
Speed
• How fast can the picture be displayed?
• Factors
– Size of graphic file
• Size of graphic
• Color depth
• Compression
– Interlacing
• Sneak peek
How to make graphic load faster
• Use the right image format
– For Photo realistic use jpeg
• Lossy compression
• Use Gaussian blur and re-compress
– < 256 colors (logos, text, cartoons)
• Gif using LZW compression
• PNG
• Only covert images to web format after all
editing is done
Transparency
• Only for GIF and PNG
– “remove” one color from image
– Remove Background to make image nonrectangular
– Remove color in image to create special
effects
Animations
• Animated Gifs
• Flash
• Both work with frames
– Like cartoons
– Series of images with slight changes
between each image
Where to get images
• Buy or download
• Scan existing images
– Blake library
• Digital camera
– Blake library
• Create using image editing program
• Goggle image search
Paint Shop Pro
•
•
•
•
File >New
Set image size
Set depth
Set background
– transparent
Paint Shop Pro
• Resizing Images
• Image >> resize
• Don’t 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
Creating Transparent GIFS
•
•
•
•
•
Save image as GIF
Colors>> Set palette transparency
Set dialog as shown
Select color
Save
Paint Shop Pro
• Reduce Color Depth
– Colors>>decrease color depth
– Make image file smaller
• Show images Progressively
– Save as
– options
Playing with photos
• Compressing Images
– Image>>blur>>Gaussian blur
– Save as jpeg
– Select options
– Set compression as desired
Creating animated Gifs
• Create frames
– Slight change between each image
– Save as series of images
• Image1.gif, image2.gif etc
– File>>run animation shop
– File>>animation wizard
– Add images in order
Gee Whiz Tip of the Day
• Creating “Tile”able 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