Your SlideShare is downloading. ×
  • Like
  • Save
Artdm171 Week6 Images
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Artdm171 Week6 Images

  • 378 views
Published

 

Published in Education , Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
378
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide






















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!