1 / 13

COS 125

COS 125. Day 6. Agenda. Assignment 2 DUE Assignment 3 Posted Due February 16 @ 9:35 AM Today we will look at creating images (again) Thursday will be a lab/help day for assignment 3 Attendance optional Examples http://perleybrook.umfk.maine.edu/samples/imagesplay.htm

evelyn-stanton
Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. COS 125 Day 6

  2. Agenda • Assignment 2 DUE • Assignment 3 Posted • Due February 16 @ 9:35 AM • Today we will look at creating images (again) • Thursday will be a lab/help day for assignment 3 • Attendance optional • Examples • http://perleybrook.umfk.maine.edu/samples/imagesplay.htm • http://perleybrook.umfk.maine.edu/samples/bk.htm

  3. Images • Creating text banners • Creating Transparent images • Creating animations • Placing images in web pages • Sizing vs. Scaling images • Background color and images

  4. Creating text banner • Determine size for banner in a pixels • Create blank image • Set drawing color • Use Text tool • Save for web

  5. Creating NEW Transparent Images • MUST be GIF 89a • You can start with a transparent back ground in Paint Shop Pro or Photoshop • Create image using application tools • Save as GIF 89 a

  6. Making a color tranparent • Start with a an image with a palette of 256 colors • In Photoshop • Use save for web and select color from color table • In paint shop pro • Use colors\set plalette transparency

  7. Creating animations • For Photoshop Image Ready • http://www.mediacollege.com/adobe/discontinued/imageready/animation/ • Start with first images and create transitions and tweens • For Paint Shop Pro Animation Shop • Create a series of images with slight changes between images • Use animation wizard and include iamges in order • For animated text banner use Banner Wizard

  8. Gee Whiz Tip of the Day • Creating “Tile”able images for backgrounds • Images must blend on top edge to bottom edge • Images must blend left edge to right • Gradient effects • Use long narrow stripes • Textures • Create squares (100x100) • Cut into four (50X50) • Swap corners • Blend middle

  9. Placing images in web pages • < imgsrc=“daPicture.gif alt=“aPicture” /> • Other attributes • width=“# of pixels or %” • height =“# of pixels or %” • align = “left or right or top or middle or bottom” • Use <p></p> to float text in opposite direction • hspace=“x’ and/or vspace=“x+

  10. Sizing or Scaling • To make an image larger in a web page use width=“150%” or height=“150” • To make an image smaller use a Graphics programs and re-size to smaller image • If picture is bitmapped image than you will lose detail • If picture is a vector image than you will not lose detail

  11. Adding Backgrounds • To add a background image • <body background=“iamge.url"> • To add a background color • <body bgcolor=“color”> • You can add both a background color and image • Color will load first

  12. Creating Shortcut Icons • Requires Icon Editor • MS visual studio • IcoFX • http://icofx.ro/ • Icon nust be 16x16 pixles to 32x32 pixles • <link rel="SHORTCUT ICON" href=“myicon.ico“ type””image/x-icon” / ty> • Mixed results in IE

More Related