Artdm171 Week6 Images


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Artdm171 Week6 Images

    1. 1. ARTDM 171, Week 6: Images for the Web Gilbert Guerrero
    2. 2. Images Web Style Guide: Graphics
    3. 3. The Digital Image • Monitors use the RGB “additive” color model • Pixels (short for “picture element”) make up images on the screen, each with a different color • Browser-safe color palette: 216 colors. ‣ In the past, monitors were capable of displaying up to 256 colors (8-bit color system). 40 differed on the Mac & PC. Things have changed. It's not a concern now. ‣ Linda Weinman's Browser-safe color palette – 3
    4. 4. Open Photoshop
    5. 5. Screen Resolution: 72 ppi • Standard resolution for images on the Web is 72 ppi. • dpi and ppi are used interchangeably. Although dpi refers to printed material. • Based on a 15” monitor set at 800x600. The horizontal screen width is 11.04”. Divide this by 800 and the result is about 72. So an inch would be measured by 72 pixels. • However, monitor resolution can range from 72 to 96 ppi.
    6. 6. Photoshop • Photoshop has a built in tool to save images for the Web. File > Save for Web and Devices...
    7. 7. GIF–Graphic Interchange Format • Created by CompuServe, uses Lempel Zev Welch, or LZW compression, good for large fields of homogeneous color, not complicated or detailed graphics • Limited to 8-bit (256 colors) color palette • Use for line drawings, icons, or functional elements • Can be saved to download as Interlaced. • Editing: Switch to RGB Mode, Image > Mode > RGB Color. • Can drop number of colors to shrink file size • Animated GIFs, will cover more later
    8. 8. GIF: Halo Effect • Transparent GIFs: for buttons, logos, etc • Smooth edges cause the “halo” effect • Tip: Use a similar background to avoid this
    9. 9. GIF: Halo Effect • Using a similar background to the final background on which the image will be placed minimizes the halo effect • The above image was on a black background in Photoshop
    10. 10. JPEG–Joint Photographic Experts Group • Lossy compression • Images are 24-bit (“True Color”) • Use for photographs or artwork with smooth color and tonal transitions. Creates artifacts in line drawings. • Progressive JPEGs similar to Interlaced. • Quality can be from low to high to maximum (0-100). Usually 80 works well, or drop to 65 if need smaller files.
    11. 11. PNG–Portable Network Graphic • Nonproprietary compression scheme • Support full range color depths, 24-bit • Sophisticated image transparency, • Automatic color correction, • Embedded text description • Not widely supported yet, which makes them difficult to use. IE known for the most issues.
    12. 12. Open Dreamweaver… 12
    13. 13. Alt text Alt text: • Communicate purpose not appearance • Adds accessiblity to your site <img src=“graphic.gif” alt=“company logo” />
    14. 14. Free fonts 14
    15. 15. Text Graphics • Text can be turned into graphics to avoid font issues
    16. 16. Aligning images with CSS • Use CSS to align images with text ‣ CSS float allows text to wrap ‣ Add margin-right, margin-bottom .left { float: left; margin-right: 12px; margin-bottom: 12px; }
    17. 17. Imagemaps • Create "hot spots" that are links over images • Use Dreamweaver to make image maps • Cut and paste imagemap code <area></ area> and move it next to the img tag to improve accessibility
    18. 18. Image backgrounds • Make text and links distinguishable from the background • Combine a background color with a background image body, td, th { background: #FF0000 url('images/bg.gif') repeat-x; } Use CSS in the same way for backgrounds in tables
    19. 19. MTV backgrounds An example of a large background image combined with color
    20. 20. Elements with backgrounds • Specify color and other backgrounds for H3 tags • Use span tags for rounded edges h3 { background: url('images/left.gif') no-repeat top left; } h3 span { background: url('images/right.gif') no-repeat top right; }
    21. 21. Resizing and Sharpening • Filters > Unsharp Mask... • Use sharpening when resizing photos for the Web 21
    22. 22. Homework due March 9 • Read “Chapter 1: Process” in the online book Web Style Guide • Read an essay by Guillermo Gómez-Peña: ‣ Virtual Barrio @ The Other Frontier – Communication, Mobilization, Utopias, Identity, Language, and the Internet • Watch a video with Jaron Lanier ‣ Jaron Lanier talks about the failure of Web 2.0 with Aleks Krotoski (5:25) • Finish Group Projects, due next week!