Title: Graphics
1Graphics
- AGCJ 407
- Web Authoring in Agricultural Communications
2Overview
- Discuss the importance of graphics in a Web site.
- Determine the basic components of graphical
files. - Understand the difference in saving psd versus
Web files - Create images for Mouseover effects using
Photoshop. - Comprehend the javascript coding for Mouseover
effects.
3Graphic Files
- Binary files
- Graphic files have specific file extensions
- Many graphic formats or standards on the Net
- Most common format for pictures are
- .gif
- .jpeg or .jpg
4Graphic Interchange Format
- .gif
- 256 colors
- used for high resolution graphics
- displayed on a variety of software
- intended as an exchange and display mechanism for
graphic images
5General Rules
- When to use GIF
- Small, icons and images
- Graphics, logos, logotype
- Flat color areas
- When you absolutely want to support every browser
- When not to use GIF
- Photographic continuous-tone images
- When .gif is bigger than a .jpeg
- Lots and lots of colors
6Joint Photographic Experts Group
- .jpg or .jpeg
- designed for compressing either full-color or
gray-scale images of natural, real-world scenes. - works well on photographs, naturalistic artwork,
and similar material not so well on lettering,
simple cartoons, or line art. - handles only still images
7Shrinking the Web
- File size directly relates to download speed
the general rule is that every kilobyte of data
takes about one second to download over average
Web viewers modem. - Both JPEG and GIF files formats support
impressive compression for slimming files.
http//www.zdnet.com/macuser/mu_0896/dtm/shrinking
.html
8Creating Images in Photoshop
9Saving Images to the Web
10Saving Images to the Web
11Saving Images to the Web
12Creating Images for Mouseover
13Creating Images for Mouseover
14Creating Images for Mouseover
15Saving Photoshop Images
16Saving Photoshop Images
17Coding Images for Mouseover
atm.gif
atm2.gif
lta onMouseOut"MM_swapImgRestore()"
onMouseOver"MM_swapImage('Image1','','Images/atm2
.gif',1)" target"_blank" href"http//www.tamu.ed
u"gt ltimg src"Images/atm.gif" name"Image1"
border"0" alt"Texas AM University" width"90"
height"86"gtlt/agt
18Coding Images for Mouseover
19Coding Images for Mouseover
20Coding Images for Mouseover
21Coding Images for Mouseover
atm.gif
atm2.gif
lta onMouseOut"MM_swapImgRestore()"
onMouseOver"MM_swapImage('Image1','','Images/atm2
.gif',1)" target"_blank" href"http//www.tamu.ed
u"gt ltimg src"Images/atm.gif" name"Image1"
border"0" alt"Texas AM University" width"90"
height"86"gtlt/agt
ltbody onLoad"MM_preloadImages('atm2.gif','ace2.pn
g','coals2.gif','act2.gif','agc2.gif','aged2.gif')
" bgcolor"808080"gt
22The Final Result
23Thats All Folks!