COS 125
13
COS 125 Day 6
-
Upload
evelyn-stanton -
Category
Documents
-
view
15 -
download
0
description
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 - PowerPoint PPT Presentation
Transcript of COS 125
COS 125
Day 6
AgendaAssignment 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
Images
Creating text banners
Creating Transparent images
Creating animations
Placing images in web pages
Sizing vs. Scaling images
Background color and images
Creating text banner
Determine size for banner in a pixels
Create blank image
Set drawing color
Use Text tool
Save for web
Creating NEW Transparent ImagesMUST 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
Making a color tranparentStart 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
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
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
Placing images in web pages< img src=“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+
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
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
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
