 |
 |
|
|
|
Parkland
College > CSIT
Dept > Digital Media > CIS 152 >
Calendar > Lesson 6
CIS 152 WEB DESIGN I
Lesson 6: Introduction to Photoshop
Instructor: Paul
Young
|
| |
Objectives
|
|
To become comfortable in the Photoshop
environment by creating graphics for a simple web site.
See sample site
|
| |
Discussion
|
|
The best way to learn Photoshop (and
any software package) is to simply start working in it. Photoshop
is essentially a pixel editing tool. However, it is so powerful
that professionals are using it for many functions including retouching
photographs, special effects, page layout for web sites, and much
more. Anyone can start using Photoshop right out of the box, but
it takes many years to master the application.
When using Photoshop for web work, keep in mind that images can
be very large in file size and take a long time to download. Fortunately,
Photoshop has very good optimization tools to help reduce file
sizes.
|
| |
Procedure
|
|
Overview: Download images. Resize images and optimize for web publishing. Import optimized images into Dreamweaver and publish.
Resizing images in Photoshop
- duplicate "cis152/upload/lesson4_html"; rename "lesson6_html"
- download starter files (location: cis152/prep/lesson6)
- note file sizes, note dimensions
- open "jvalazquez.jpg" in Photoshop
- practice Photoshop navigation keyboard shortcuts: space=hand;
space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in
window
- image > adjust > levels
- image > adjust > hue/saturation
- image > image size: 640x480
- filter > sharpen > unsharp mask (radius=1, threshold=2, amount=??)
- file > save for web
- settings: JPEG high (check download time,
what does Internet
statistics tell you about download times?)
- click SAVE (images only, location="upload/lesson6_html/gallery/jvalazquez-640.jpg")
- save
- image > image size: 200x150
- file > save for web: settings=JPEG medium (location: cis152/upload/lesson6_html/gallery/jvalazquez-200.jpg)
- repeat with other gallery images
- move "logos" folder to "upload/lesson6_html"
Creating a spacer image in Photoshop
- file > new: 1x1 (bg=transparent)
- file > save for web: GIF 32 (location: cis152/upload/lesson6_html/images/spacer.gif)
Importing images into Dreamweaver
- launch Dreameaver
- define a new site (site > manage sites > new site): name=lesson6,
local root folder=jsmith/cis152/upload/lesson6_html
- open "program.html"
- insert > image "maya_logo.jpg", repeat with other logo
- save, preview in browser (F12), close
- open "gallery.html"
- insert > table (rows=5, col=3)
- view > table mode > expanded
- select all cells: vertical=top
- drag thumbnail gallery images into column 1 and 3
- drag "spacer.gif" into row 2, column 2 (make size 30x20)
- repeat with row 4, column 2
- save, preview in browser (F12), close
- open "index.html"
- insert > table (rows=1, cols=7)
- select all cells: vertical=top
- choose 4 thumbnail images and drag them into col 1, 3, 5, 7
- view > table mode > standard
- save, preview in browser (F12), close
Adding javascript for pop-up windows
- select first image
- window > behaviors: add "open browser window": "1.html" (720x560)
- repeat with other images
Creating gallery pages
- file > new "1.html"
- insert > image "jvalazquez-640.jpg"
- insert > table (rows=1, col=3)
- view > table mode > expanded
- add text "<< PREVIOUS", "CLOSE WINDOW", "NEXT >>"
- link "previous" to "6.html"
- link "next" to "2.html"
- link "close window" to "Javascript:onClick=self.close()"
- add "close window" link as a snippet (window > snippets)
- change title to "Parkland College Digital Media"
- save, close
- duplicate "1.html" to make "2.html", etc
- swap image (double-click)
- change links
- preview "gallery.html" in browser (F12)
- grading: publish this site and make a link from your personal web site (see
Project 1)
|
|
|
