Graphics

1
Graphics

• AGCJ 407
• Web Authoring in Agricultural Communications

2
Overview

• 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.

3
Graphic 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

4
Graphic 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

5
General 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

6
Joint 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

7
Shrinking 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
8
Creating Images in Photoshop
9
Saving Images to the Web
10
Saving Images to the Web
11
Saving Images to the Web
12
Creating Images for Mouseover
13
Creating Images for Mouseover
14
Creating Images for Mouseover
15
Saving Photoshop Images
16
Saving Photoshop Images
17
Coding 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
18
Coding Images for Mouseover
19
Coding Images for Mouseover
20
Coding Images for Mouseover
21
Coding 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
22
The Final Result
23
Thats All Folks!