1 / 13

Image Creation Techniques and Assignments for COS 125

In today's session of COS 125, we will focus on creating images, including text banners, transparent images, and animations. Assignment 2 is due, and Assignment 3 has been posted, with a due date of February 16 at 9:35 AM. Thursday will be a lab/help day for Assignment 3, and attendance is optional. For resources and examples, please visit the provided links. We will cover essential topics like sizing vs. scaling images, using background colors, and placing images on web pages.

evelyn-stanton
Télécharger la présentation

Image Creation Techniques and Assignments for 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