Preparing Files for the Web
Basic Online Media Design Concerns• File naming• File types• Resolution• Color & Palettes• Compression• Media Conversion• ...
File naming conventions• No spaces• No special characters (*&^%$#@!(){}[]:;?/><,.”’+=~`|)• No Caps• Alpha numeric only• Ma...
File Types• Web pages                • .wmv (Windows Media)  • .htm .html             • .mov (Quicktime)  • .css          ...
Resolution
Are They The Same Resolution?    213 x 320 pixels     213 x 320 pixels     .71” x 1.067”       2.958” x 4.444”        300 ...
Anti-aliasing
Anti-aliasing Fringe
Colors and Palettes                      8-bit                      16-bit                      24-bit
Palettes & Dithering
Compression
Imaging Guidelines• Digitize at the highest possible resolution• Reduce to final resolution as the last step• Keep a recor...
Content Capturing – Scanning or DigitalPhotography• Use 72 ppi for the web and onscreen presentations• Set image dimension...
Photoshop Demo
Upcoming SlideShare
Loading in...5
×

Preparing File for the Web

1,704

Published on

This is a presentation I use in my Digital Portfolio Production class to introduce students to the primary concerns for preparing image files for upload and display on the web.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,704
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • dpi vs. ppi - dots per inch are for print. pixels per inch are for screen\ndesign for 800x600 pixel screen resolution\n\nhttp://images.google.com/imgres?imgurl=http://weblogs.macromedia.com/xd/resolution.jpg&amp;imgrefurl=http://weblogs.macromedia.com/xd/archives/process_and_concept/index.cfm&amp;h=216&amp;w=391&amp;sz=29&amp;hl=en&amp;start=5&amp;sig2=wdsbrml6ZMs1Yd26SZcGBw&amp;um=1&amp;tbnid=wGqmuUFAl_KxYM:&amp;tbnh=68&amp;tbnw=123&amp;ei=Nf69R7yYFKmipwSz5rTsDQ&amp;prev=/images%3Fq%3D%2Bscreen%2Bversus%2Bprint%2Bresolution%26um%3D1%26hl%3Den%26safe%3Doff%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official%26sa%3DG\n
  • This is a trick question. They are the same screen resolution but different print resolutions.\n
  • \n
  • \n
  • \n
  • http://www.lynda.com/hex.asp\n
  • Lossless &amp;#x2013; TIFF, PSD\nLossy &amp;#x2013; JPEG\n
  • \n
  • Photoshop demonstration of:\n\nFile Formats: JPEG, GIF, PNG \nSave for Web&amp;#x2026;\n\n
  • Save for Web&amp;#x2026;\n
  • Transcript of "Preparing File for the Web"

    1. 1. Preparing Files for the Web
    2. 2. Basic Online Media Design Concerns• File naming• File types• Resolution• Color & Palettes• Compression• Media Conversion• Browser/Platform compatibility
    3. 3. File naming conventions• No spaces• No special characters (*&^%$#@!(){}[]:;?/><,.”’+=~`|)• No Caps• Alpha numeric only• May use - and _• short descriptive names• ALWAYS include dot three extensions (.jpg .gif .pdf .png .htm)
    4. 4. File Types• Web pages • .wmv (Windows Media) • .htm .html • .mov (Quicktime) • .css • .avi (Windows) • .mpg .mpeg (cross-platform)• Images • .rm .ram (Real Media) • .jpg .jpeg • .gif • Text • .png • .pdf (Adobe Acrobat) • .txt (plain text)• Video • .swf (flash) • .flv (flash video)
    5. 5. Resolution
    6. 6. Are They The Same Resolution? 213 x 320 pixels 213 x 320 pixels .71” x 1.067” 2.958” x 4.444” 300 ppi 72 ppi
    7. 7. Anti-aliasing
    8. 8. Anti-aliasing Fringe
    9. 9. Colors and Palettes 8-bit 16-bit 24-bit
    10. 10. Palettes & Dithering
    11. 11. Compression
    12. 12. Imaging Guidelines• Digitize at the highest possible resolution• Reduce to final resolution as the last step• Keep a record of every process used on an image, video or audio file• Keep an original high resolution version for archiving• Test on as many varying platforms as possible
    13. 13. Content Capturing – Scanning or DigitalPhotography• Use 72 ppi for the web and onscreen presentations• Set image dimensions so that all designs fit on a users screen. Target 1024 x 768 user screen resolution.• Use RGB color mode not CMYK• When saving web versions of your images use “Save for Web” option in photoshop.• Use “.jpg” for photographic images use “.gif” for images with flat color fields.
    14. 14. Photoshop Demo

    ×