cos 125
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 PresentationTRANSCRIPT
![Page 1: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/1.jpg)
COS 125
Day 6
![Page 2: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/2.jpg)
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
![Page 3: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/3.jpg)
Images
Creating text banners
Creating Transparent images
Creating animations
Placing images in web pages
Sizing vs. Scaling images
Background color and images
![Page 4: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/4.jpg)
Creating text banner
Determine size for banner in a pixels
Create blank image
Set drawing color
Use Text tool
Save for web
![Page 5: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/5.jpg)
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
![Page 6: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/6.jpg)
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
![Page 7: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/7.jpg)
![Page 8: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/8.jpg)
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
![Page 9: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/9.jpg)
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
![Page 10: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/10.jpg)
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+
![Page 11: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/11.jpg)
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
![Page 12: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/12.jpg)
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
![Page 13: COS 125](https://reader036.vdocuments.us/reader036/viewer/2022082818/56813057550346895d960fc9/html5/thumbnails/13.jpg)
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