• Save
Artdm171 Week6 Images
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Artdm171 Week6 Images

on

  • 635 views

 

Statistics

Views

Total Views
635
Views on SlideShare
592
Embed Views
43

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 43

http://www.gilbertguerrero.com 42
http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Artdm171 Week6 Images Presentation Transcript

  • 1. ARTDM 171, Week 6: Images for the Web Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  • 2. Images Web Style Guide: Graphics
  • 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 – http://www.lynda.com/hex.asp 3
  • 4. Open Photoshop
  • 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. Photoshop • Photoshop has a built in tool to save images for the Web. File > Save for Web and Devices...
  • 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. GIF: Halo Effect • Transparent GIFs: for buttons, logos, etc • Smooth edges cause the “halo” effect • Tip: Use a similar background to avoid this
  • 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. 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. 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. Open Dreamweaver… 12
  • 13. Alt text Alt text: • Communicate purpose not appearance • Adds accessiblity to your site <img src=“graphic.gif” alt=“company logo” />
  • 14. Free fonts http://dafont.com 14
  • 15. Text Graphics • Text can be turned into graphics to avoid font issues
  • 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. 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. 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. MTV backgrounds An example of a large background image combined with color http://www.mtv.com/music/
  • 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. Resizing and Sharpening • Filters > Unsharp Mask... • Use sharpening when resizing photos for the Web 21
  • 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!