Web graphics
Download
1 / 20

Web Graphics - PowerPoint PPT Presentation


  • 144 Views
  • Updated On :

Web Graphics. By Chris Harding. Contents. Software Vector Graphics and Pixel Based Transparent Images Compression GIF vs. JPEG Animated GIF. Software . Fireworks (Part of Macromedia Suite) Photoshop Paint Shop Pro Microsoft Paint. Web Graphics. Should be kept small. Around 100K mark

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 'Web Graphics' - lave


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
Web graphics l.jpg

Web Graphics

By Chris Harding


Contents l.jpg
Contents

  • Software

  • Vector Graphics and Pixel Based

  • Transparent Images

  • Compression

  • GIF vs. JPEG

  • Animated GIF


Software l.jpg
Software

  • Fireworks (Part of Macromedia Suite)

  • Photoshop

  • Paint Shop Pro

  • Microsoft Paint


Web graphics4 l.jpg
Web Graphics

  • Should be kept small. Around 100K mark

  • Large graphics take time to download

  • Lots of small graphics can make a sight look good

  • But cause long page loading times


Types of web graphics l.jpg
Types of Web Graphics

  • BMP

  • PNG

  • JPEG

  • GIF


Vector graphics pixel l.jpg
Vector Graphics/Pixel

  • Vector:

    • Mathematical formula

    • Smooth edges

  • Bitmap/Rasterised:

    • Pixelated


  • Transparent image l.jpg
    Transparent Image

    • Can be JPEG or GIF

    • Best done with GIF

    • Can select one colour to be transparent or background

    • Best results make Background one colour (like pink!)

    • Select background for transparent layer


    Compression l.jpg
    Compression

    • Compacting information

      • Lossless

      • Lossy

  • Lossless

    • All information retained

  • Lossy

    • Information is lost


  • Compression lossless 1 3 l.jpg
    Compression: Lossless (1/3)

    • Selected information is retained

    • Example:

      • aabbbccdddddee

      • 2a3b2c5d2e


    Compression lossless 2 3 l.jpg
    Compression: Lossless (2/3)

    • PSD: 6.9 MB

    • BMP: 1.37 MB



    Compression lossy 1 2 l.jpg
    Compression: Lossy (1/2)

    • Image information

      • Entropy – data kept

      • Redundancy – data removed


    Compression lossy 2 2 l.jpg
    Compression: Lossy (2/2)

    • Original: 453KB

    • JPEG: 4KB


    Compression methods l.jpg
    Compression Methods

    • RLE (Run Length Encoding)

      • Lossless: common Windows file formats.

  • LZW (Lemple-Zif-Welch)

    • Lossless: TIFF, PDF, GIF, and PostScript.

    • Most useful for large areas of single color.

  • JPEG (Joint Photographic Experts Group)

    • Lossy: JPEG, TIFF, PDF and PostScript.

    • Continuous-tone images ie photographs

  • ZIP

    • Lossless: PDF and TIFF.

    • Most effective for large areas of single color.


  • File save as what 1 2 l.jpg
    File>Save as... what?! (1/2)

    Original

    2.9 MBs

    JPEG

    275 KBs

    GIF

    161KBs


    File save as what 2 2 l.jpg
    File>Save as... what?! (2/2)

    Original

    372 KBs

    JPEG

    13 KBs

    GIF

    7KBs


    Animated gif l.jpg
    Animated GIF

    • Number of different frames

    • Saved in one file (can be very large)

    • Play once or looped

    http://www.webreference.com/dev/gifanim/


    Animated gif18 l.jpg
    Animated GIF

    • Made up of 7 frames

    • 4 frames below

    • Looped file


    Web graphics with css l.jpg
    Web Graphics with CSS

    • Use CSS with images to create visual effects

      • Add round border to tables

      • Roll over images

      • Menu items

    • Practical tutorial on this topic next week


    Summary l.jpg
    Summary

    • Software

    • Vector Graphics and Pixel Based

    • Compression

      • Lossless

      • Lossy

    • GIF vs. JPEG for different uses

    • Introduce Animated GIF


    ad