Questions to consider when creating website (View this page in IE):

-Who's your target?

-What do you want to communicate?

-What do you feel are some colors that are appropriate for this purpose?

To create an actual website in Photoshop 7.0 go to:

1. To create a new page go to: File -> New

2. Pixel size -> 750 x 525 (compliant with 800 x 600 pixel screen size

3. Create Banner

1) Go to layer panel and create new layer

2) Use marquee

3). Go to Toolbox: select background color

4). Edit fill

4. Find and choose an image online

1) Resource Page to look for Photos (refer to bottom of handout):

2) Design Gallery: Office.microsoft.com

3) Google Images: - Google.com

4) Photodisc: www.photodisc.com (free membership)

5. Insert image in Photoshop

1) Right click and copy image

2) In photoshop: go to edit -> paste

3) To resize image: go to edit -> free transform

-click and drag corners of image to resize

-hold “shift” key to constrain image

4) Go to toolbar and select: “Move” tool

6. Popular effects for images

A. Colorize

1) Go to: Image -> Adjustments -> Hue/Saturation

2) Click on colorize and adjust image color

B. Feather

1) Go to Layer panel and hold “control” key and click layer that contains web image

2) Go to: Select -> Feather

3) Type in feather radius (3-25 for web images)

4) Go to: Select -> Inverse

5) Hit delete key (multiple times will create stronger feathers)

6) Go to: Select -> Deselect (control “d” - shortcut key)

C. Gradient Mask

1) Go to: Layer -> Add Layer Mask -> Reveal All

2) Select the Gradiant tool in the toolbox

3) Go to: Gradiant options bar -> choose gradiant type (second one on the left)

4) Click about an .5 inche away from image and drag towards center of image

D. Apply Layer Effects

1) Go to layer panel and double click on image layer icon

2) Check on style(s) on left menu

3) Have fun!

7. Create a Header

1) Go to toolbar and click on “Type” tool

2) Click anywhere on banner (ex: right of image)

3) Go to type options bar and select font type

4) Go to type option bar and select font size (ex: 18 - 36 pt)

5) Apply layer effects-See 6d (optional)

8. Creating Links

1) Follow Step 7 to create your first link

2) To create a second link: go to layer panel: click and drag your first link layer to “new layer”

icon

3) Go to toolbar and select “move” tool and hold “shift” key and click link and drag

4) Go to toolbar and select “type” tool and click on link duplicate

5) Edit link

6) Repeat steps 2-5 for more links

9. To Make a Web Page

1) Go toolbar and click on “Jump to Image Ready” icon

10. Use Rulers to Separate Images

1) Go to: View -> Rulers

2) Go to toolbar and select “move” tool

3) Click and drag from ruler to items on page

(try to separate photographs from text horizontally and vertically on all four sides)

11. Knife Tool and Optimization

1) Go to: View -> Make sure “snap” is checked

2) Go to toolbar and select “knife” tool

3) Click and drag from top right corner diagonally across to opposite corner (of image or text)

4) Go to “Image Slice” panel and type a name for your image (do not use spaces)

5) Go to “Optimize” panel and select from settings

-photographs use “jpegs”

-text and low color graphics use “gifs”

6) Go to “optimized tab” within your canvas to check your optimization

7) Repeat steps 3-6 for all items on page

12. Create web page

1) Go to: File -> Save Optimized As -> title.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

For more info contact: Kei Wakabayashi at: kei@IMMOTION.net