Cos 125
Download
1 / 19

COS 125 - PowerPoint PPT Presentation


  • 61 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' COS 125' - gary-norris


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Cos 125

COS 125

Day 13


Agenda
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
Factors to Consider for Web Image

  • Format

  • Color

  • Size/resolution

  • Speed

  • Transparency

  • Animation


Formats
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
Color

  • Depth

    • 24 bit

      • 16,777,216 possible colors

      • “true color”

      • Photo quality

    • 16 bit

      • 65,536 colors

    • 8 bit

      • 256 colors


Browser 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/websafecolors.html

    • Non web safe colors may be dithered or shifted


Size and resolution
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
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
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
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


Animations
Animations

  • Animated Gifs

  • Flash

  • Both work with frames

    • Like cartoons

    • Series of images with slight changes between each image


Where to get images
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
Paint Shop Pro

  • File >New

  • Set image size

  • Set depth

  • Set background

    • transparent


Paint shop pro1
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
Creating Transparent GIFS

  • Save image as GIF

  • Colors>> Set palette transparency

  • Set dialog as shown

  • Select color

  • Save


Paint shop pro2
Paint Shop Pro

  • Reduce Color Depth

    • Colors>>decrease color depth

    • Make image file smaller

  • Show images Progressively

    • Save as

    • options


Playing with photos
Playing with photos

  • Compressing Images

    • Image>>blur>>Gaussian blur

    • Save as jpeg

    • Select options

    • Set compression as desired


Creating animated gifs
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
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


ad