Web Graphics

Lesson 1

Purpose: students will be able to merge two photos together using Adobe Photoshop and save it in the images folder.

  1. Netscape Communicator>open>go to Yahoo search engine>(animal photos)>Yahoo animal photos>choose your animal
  2. right click image>save as>s: drive>it10>it10(your class)(d or f)>your folder>web folder>images folder>file name: animal.jpeg (no .gif images, please)>save
  3. windows explorer>open>s: drive>it10>it10(your class)(d or f)>teacher folder>photos>find your photo>copy
  4. go to your own folder>open>web folder>open>images folder>open>paste>rename>yourname.jpeg...i.e. kkim.jpeg
  5. Photoshopv.4>open
  6. kkim.jpeg>open
  7. image>image size>adjust width and height of image to the size of your animal.jpeg face
  8. lasso tool>drag around kkim.jpeg>edit>copy
  9. animal.jpeg>open>edit>paste
  10. layer>free transform>rotate/stretch/skew
  11. click move tool>apply transformation>drag to fit
  12. layer>flatten image>OK
  13. text tool>I'm an animal!>choose own font and color>OK
  14. file>save as>file name: animal.jpg>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open>save

Lesson 2

Purpose: students will be able to create a body background using Adobe Photoshop.

  1. file>new>100 pixels width by 100 pixels height
  2. filter>texture>texturzier>scaling: 100%, relief: 8%
  3. layer>new layer
  4. line tool>double click>opacity 100%, width: 2, anti-aliased on, arrowheads at start (keep arrows to bottom and angled right so offset filter will work)
  5. select>select all
  6. filter>other>offset>horizontal: 80 pixel right, vertical: 20 pixel down, undefined areas: wrap around
  7. layer>layer 1 options>opacity: 20% (this is done so not to interfere with the opacity of the text)
  8. image>image size>72 pixels width by 72 pixels height
  9. file>save as>file name: arrow.jpg>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open>save

*to preview the tiled image: select>select all>edit>define pattern>new>300 pixels width by 300 pixels height>edit>fill pattern>opacity: 100%

Lesson 3

Purpose: students will be able to create a body border with a drop shadow using Adobe Photoshop.

  1. file>new>640 pixels width by 200 pixels height
  2. view>show grid
  3. rectangular marquee>select 2 inches on the left side
  4. select>save selection>channel 4
  5. eyedropper tool>select color>fill color of your choice
  6. view>hide grid
  7. layer palette>pull down>duplicate channel>channel 5>click channel 5
  8. filter>blur>gaussian blur>radius: 15 pixels>click alt+right arrow key (this will extend the drop shadow by 2 pixels)
  9. composite channel>load the selection>channel 5>load selection>add to selection> channel 4>subtract from selection
  10. edit>fill>black>opacity: 80 %
  11. select all>edit>copy
  12. file>new>1024 pixels width by 70 pixels height
  13. edit>paste
  14. layer>flatten image>OK
  15. file>save as>file name: border.jpg>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open>save

*to preview the tiled image: select>select all>edit>define pattern>new>300 pixels width by 300 pixels height>edit>fill pattern>opacity: 100%

 

Lesson 4

Purpose: students will be able to create a body border using Adobe Photoshop.

  1. file>new>640 pixels width by 200 height
  2. view>show ruler>snap to guide
  3. add vertical guides at 1 inch and 1 1/4 inches
  4. add five horizontal guides at 1/2 inch apart
  5. pen tool>draw path of hinge points (0,0) (0,1) (1/2,1 1/4) (1,1) (1 1/2, 1 1/4) (2,1)
  6. convert anchor point>click hinge point at (1/2,1 1/4) and drag down to create a curve
  7. repeat at hinge point (1 1/2, 1 1/4)
  8. double click the work path in the paths palette>save path as a selection
  9. paths pop-up menu>fill>path>use foreground color
  10. view>hide ruler>hide guides
  11. paths pop-up menu>delete paths
  12. rectangular marquee>select one curve of the full width of the image (640 pixels)
  13. edit>copy
  14. file>new>1024 pixels width by 70 pixels height
  15. edit>paste
  16. file>export>gif89export>OK>file name: scallop.gif>s: drive>it10>it10(your class)(d or f)>your folder>web folder>open>images folder>open> save

*to preview the tiled image: select>select all>edit>define pattern>new>300 pixels width by 300 pixels height>edit>fill pattern>opacity: 100%

 

Hosted by www.Geocities.ws

1