1 / 16

Creating Web Graphics

Creating Web Graphics. Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3 Bitmapped Graphics 2.4 Graphics for the Web 2.5 GIF (Graphics Interchange Format) 2.6 JPEG (Joint Photography Expert Group) 2.7 PNG (Portable Network Graphics). 2.1 : Graphics Types.

nellie
Download Presentation

Creating Web Graphics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3 Bitmapped Graphics 2.4 Graphics for the Web 2.5 GIF (Graphics Interchange Format) 2.6 JPEG (Joint Photography Expert Group) 2.7 PNG (Portable Network Graphics)

  2. 2.1 : Graphics Types • Why do we need graphics on the web pages? • Use to create successful Web pages • Enhance user experience • Free generic graphics on the Web • Create original graphics to make your site unique • There are two types of graphic that you can create using computer: • Vector graphics • Bitmapped Graphics

  3. 2.2: Vector Graphics • A vector graphic uses objects; lines, circles, curve with instruction as where to place them on your drawings • Uses vector equations to define graphic properties • Shape, size, color, relative positions (starting and ending points), etc. • Resolution independent • Resize without image quality loss • Ideal for solid areas of color • Ideal for logos, font and line drawings • Handles complex color poorly

  4. Advantages and Disadvantage of Vector Graphics

  5. 2.3: Bitmapped Graphics • Also called raster graphics or pixelized graphics. • Graphics defined by colored areas of pixels • Uses a table of data addresses and instructions to light up each pixel on the monitor • An object is stored as a group of pixels with information about each pixel color • Resolution dependent • Image quality is lost when image is resized • Interpolation • Ideal for images with complex color (i.e. photographs, artwork)

  6. Advantages and Disadvantage of Bitmapped Graphics

  7. Raster image Vector image 100% 200% 100% 200% Vector v. Bitmapped Graphics

  8. 2.4: Graphics for the Web • There is not less than 50 different graphics file format that you can create using any graphic editor. • For the web, you can use only three: GIF, JPEG and PNG • Anti-aliasing is a technique for smoothing jagged edges in a graphic by fooling your eye.

  9. 2.5: GIF (Graphics Interchange Format) • Ideal for: • screen captures, line drawings, sharp-edged graphics and images with transparency • Not good for: • Photographic images, artwork with complex colors • Supports 256 colors (8 bits/pixel) • Lossless format • Quality is not reduced by compression process

  10. The gif format supports interlacing, transparency and animation • Interlacing begins with a low-resolution image and increases details as the file continue to load (progressive display) • Transparent gif is where part of the image shows through (transparent) • Ancillary information: textual comments and other data can be stored within the image file

  11. Advantages and Disadvantages of GIF Format

  12. 2.6: JPEG (Joint Photography Expert Group) • Ideal for: • Photographic images, images with rich color transitions (i.e: images of natural, real world scenes) • Not good for: • Images with sharp edges, text, transparency; drawings; lettering; simple cartoons • Supports millions of colors (24 bits/pixel or 16 million colors) • Lossy format • Image quality is reduced by compression process

  13. Advantages and Disadvantages of JPEG Format

  14. 2.7: PNG (Portable Network Graphic) • Newer format recommended by W3C • www.w3.org/Graphics/PNG • Ideal for: • Both color complex-images and images with transparency • Supports millions of colors • Lossless format • Good alternative for both GIF and JPEG

  15. Advantages and Disadvantages of PNG Format

  16. GIF or JPEG or PNG? • Two choices of web graphics file-type: GIF and JPEG (Since not all browsers supports PNG) • The difference is that the way the data are being compressed. • GIF: If the graphic is a simple black-and-white line drawing, or a picture with (relatively) large areas of equal colors. • JPEG: For picture that is best describe as "photo-like“. • For animations or have a transparent color graphic, then you are stuck with GIF. If you want interlacing then you have two choices either interlaced GIF or progressive JPEG

More Related