1 / 9

Art 128 Interface Programming 1 In-class Presentation Week 13A

Art 128 Interface Programming 1 In-class Presentation Week 13A. :: in-class examples. Coded sites from last semester’s Art 249 - Interface Design 2 class: http://www2.hawaii.edu/~gargiulo/f2005_art249.html. :: today’s agenda. Image Optimization Jpeg vs. Gif vs Png

karenwelch
Download Presentation

Art 128 Interface Programming 1 In-class Presentation Week 13A

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. Art 128 Interface Programming 1 In-class Presentation Week 13A

  2. :: in-class examples • Coded sites from last semester’s Art 249 - Interface Design 2 class: • http://www2.hawaii.edu/~gargiulo/f2005_art249.html

  3. :: today’s agenda • Image Optimization • Jpeg vs. Gif vs Png • Bottom line: (see the next two slides) • Saving out transparent images • Bottom line: PNG’s are great, but PC IE6 doesn’t support alpha transparency without a filter. Until IE7 comes out and becomes a standard, I recommend using transparent Gifs set to your background color. If you have a complex background, you need to avoid using transparency. • Two techniques for image optimization: • Old school “manual” approach: a combination of using photoshop only to manually crop, flatten (if needed), and “save for the web”. • New school “slices” approach: a combination of using photoshop and imageready to create slices and save out individual or groups of images.

  4. :: in-class lesson • More on PNG’s:From http://www.wpdfd.com/editorial/wpd0400a.htm“PNGs still aren't fully supported in current browsers. There are two main PNG formats, PNG-24 and PNG-8. PNG-24 is so much bigger than JPEG, it isn't really worth considering for Web images at all. PNG-8 uses a 256 (maximum) colour palette and gives a similar file size to GIF but, depending on the nature of the image and the number of colours, either format can win out under some circumstances. With the Big Deal image, most programs give slightly smaller PNGs than GIFs.”

  5. :: in-class lesson • More on PNG’s and transparency • With JavaScript, it can be done. You need to first detect the browser, then serve the correct code depending upon which browser is viewing the page.http://www.alistapart.com/articles/pngopacity/

  6. :: in-class lesson • Bottom line: when to use Jpgs vs. Gifs • Jpg: When you are saving out an image with lots of colors (i.e. photographs) • Gif: when you are saving out images with a limited color pallete (i.e. logos, vector-style artwork)

  7. :: calendar

  8. :: final assignment due :: 04.25.06 • Coded Web Site from Interface Design 1 • Use your designs from Interface Design 1 and create a fully functional web site. • The number of pages will vary depending upon your designs • The level of interactivity and functionality will depend upon how many pages you will be creating.

More Related