 |
 |
|
|
|
Parkland
College > CSIT
Dept > Web
Technology > See
IT ALL > Photoshop
PHOTOSHOP WEB DESIGN SEMINAR
Hands-On Exercise
Instructors: Alex Jerez and Paul Young
Adobe Photoshop is a very powerful professional image-editing
software. In this hands-on session, you'll be introduced to how
Photoshop's layers can be used for image editing, special effects
and animation. When we're happy with our Photoshop layers, we'll
ask Photoshop to export the necessary images and write the HTML
code necessary to create a working web page. And we'll do all this
in about 30 minutes.
Preview the finished web page
Download starter files
|
| |
Procedure
|
|
introduction to Photoshop layers
- open "1-people.psd" in Photoshop
- window > layers: click eye to turn layer on/off
- reveal your favorite combination
- layer > flatten image
design a web page
- open "2-web.psd" in Photoshop
- drag flattened image from "1-people.psd" into current window
- restack layers
- edit "name" layer: type your name (text tool)
- choose a font
and color
- edit "info" layer: add personal information
- file > save
adding effects
- select "name" layer
- layer > layer style: drop show, bevel & emboss
- layer > duplicate layer (hide original layer)
- filter > stylize > wind (method=stagger, direction=from right)
- delete debris (square marquee tool: select, delete)
- reveal "name" layer, hide "name copy" layer,
animating your name
- window > animation
- add 10 frames
- turn off "name" layer on even frames
- frame 3: reveal "name copy" layer (instead of "name")
- adjust timing: frame 3=.5 sec; frame 5 & 9=.2 sec
- file > save for web (type=HTML & images, slices=all, location=desktop)
- preview web page in browser (double-click HTML file on desktop)
|
|
|
