Updated: January 16, 2007

Penn State


  Introduction: Graphics...

  Objectives

 Part I: Basic File Formats for the web
 Part II: Importing Images
 Part III: Creating Text, Titles, and Backgrounds
 Part IV: Colors for the Web
 Part V: Resizing & Rotating Images
 Part VI: Filters
 Part VII: Layers
 Part VIII: Exporting for the Web

          Resources & Links

 Part I: Basic File Formats for the web
                   
file formats
    Click to move to the top

Part II: Importing Images

  • Graphics, some are Royalty Free ( links )
  • Scanning ( example )
  • Digital Photography
    • A closer look at t the Digital Cameras here at PSGV
    • Sony Digital FD Mavica, Sony CyberShot
  • Digital Video
    • Sony Digital Camcorder
  • Digital Audio
    • Audacity
    • iPods and recorders
    Click to move to the top

Part III: Creating Text and Titles ( example at top )

  • Create a title or your name.
  • Adding effects to text.
    Click to move to the top

Part IV: Colors for the Web
                  colors

   Click to move to the top

Part V: Resizing & Rotating Images (use photos at right for practice.)
  • Resizing images in a web editor vs. adjusting the size of an image in photoshop
  • Cropping
  • Image / Image Size
    size
  • Rotating an image
    Click to move to the top

Part VI: Layers

  • Layers
  • Opacity
    layers
   Click to move to the top

Part VII: Filters
  • Filter and then Select a Filter
  • Modifying an image
    • Layer / Effects
    • Select / Modify / Border / choose number of pixels / Filter / Select Filter
    • Embossing an Image
    • Adding a Drop Shadow
    • Feathering
   Click to move to the top


Part VIII: Exporting for the Web

                   wo

  1. File / Save for Web
  2. Optimize the image you are exporting for the web. ( view )
  3. Review all the versions
  4. Click the best version
  5. Click OK
  6. Then save to the folder in your web site designated for av
    Click to move to the top
Examples:

example # 1
before

example # 2
after


Use of Layers to highlight an area.


Image Map Example Pic of Julie Pic of Julie's Dad
image map
animated gif created in fireworks
animated image

(does not work in firefox.)
Arrow Roll-over
Roll Over

Example photo to work with
Water photo to work with

Flower Photo to work with
Flower Photo to Work with

belagio
Belagio Fountains Photo to work with

dark photo
Dark Photo (link)

statue
Dark Photo that
needs to be rotated.

venetian
Venetian photo to work with.

Resources & Links

 

 


Click to move to the top
--back to Julie's Home Page--
notes