• Save
Preparing File for the Web
Upcoming SlideShare
Loading in...5
×
 

Preparing File for the Web

on

  • 1,967 views

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.

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.

Statistics

Views

Total Views
1,967
Views on SlideShare
985
Embed Views
982

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 982

http://aaablogs.uoregon.edu 981
https://www.linkedin.com 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
  • \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&imgrefurl=http://weblogs.macromedia.com/xd/archives/process_and_concept/index.cfm&h=216&w=391&sz=29&hl=en&start=5&sig2=wdsbrml6ZMs1Yd26SZcGBw&um=1&tbnid=wGqmuUFAl_KxYM:&tbnh=68&tbnw=123&ei=Nf69R7yYFKmipwSz5rTsDQ&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 – TIFF, PSD\nLossy – JPEG\n
  • \n
  • Photoshop demonstration of:\n\nFile Formats: JPEG, GIF, PNG \nSave for Web…\n\n
  • Save for Web…\n

Preparing File for the Web Preparing File for the Web Presentation Transcript

  • Preparing Files for the Web
  • Basic Online Media Design Concerns• File naming• File types• Resolution• Color & Palettes• Compression• Media Conversion• Browser/Platform compatibility
  • 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)
  • 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)
  • Resolution
  • 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
  • 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 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
  • 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.
  • Photoshop Demo