Skills in Adobe Photoshop and ImageReady

(for Web Design and integration with Dreamweaver)

Ed Tec 6452

Revision 3, 2/28/05

Parts of Adobe Photoshop and ImageReady:

· Menu Bar

· Tools Window along the left hand side (selection, text, paint tools, etc.)

· Special Palettes along the right hand side (Navigator, Color, History, etc. -- ImageReady has two key Special Palettes: Web Content & Animations)

Important tools and commands: Make selections with the marquee tool, lasso tool, and magic wand tool, plus menu items for Select > All, Select > Inverse, and Select > Similar). Move with the Move Tool. Transformations with Edit menu > Transform > Scale or Rotate. Fill with the Gradient or Paint Bucket Tool (the latter is a toggle with the Gradient tool)

These are the main skills you need in manipulating images for the Web:

1) Resizing Images

a. Open the image in Photoshop

b. Image Menu > Image Size
Make sure to leave the proportions constrained. Choose sizes in pixels, to take up appropriate proportions of the screen you want to use, based on the size of screen you are targeting (640x480, 800x600, or 1024x768)

2) Optimizing for the Web

a. File Menu -> Save for Web …

b. In the dialog box, try out Previews of different Presets. For photos, you are likely to want JPEG Low, Medium or High. For schematics or solids, you are likely to want GIF. Notice the filesize and estimated download time in the lower left hand corner of the image preview. Choose the smallest size that looks good enough for your purposes.

3) Creating a gallery of images:

a) Put all the images you want in the gallery into one folder, and open Photoshop

b) Choose File > Browse to open the File Browser.

c) In the Folders palette of the File browser, click the folder containing the photos you want to include on your Web page. Photoshop displays thumbnail versions of the images in the order they will appear in the gallery.

d) To rearrange the order of the images, drag the thumbnail images to the location you want. As you drag, a black band appears between the images to indicate where the image will be inserted.

e) If you want to include only some of the images in your gallery, select the thumbnails of the images you want to include. Shift-click to select contiguous images. Ctrl-click to select additional images.

f) In the menu bar at the top of the File Browser window, choose Automate > Web Photo Gallery.

g) In the Site area of the Web Photo Gallery dialog box, choose a layout from the Styles menu. A preview of the selected gallery style appears at the right side of the dialog box.

h) In the Source Images area, click the Destination button and create a folder in which you want to save the gallery. The ideal place to save your gallery is in a subfolder you add to your Dreamweaver working web folder (e.g., make one named “gallery”). [Important: Do not save the gallery directly in your working web folder, because it may overwrite your “index.html” file.] Once you have the folder made and selected, click OK.

i) In the Options area, choose Banner from the Options menu. Highlight the Site Name field, and type a name for the site.

j) To customize other elements of the gallery, such as the size of the thumbnails or linked images, choose other options from the Options menu, and change the settings as appropriate.

k) When you are satisfied with the settings, click OK. Photoshop creates the gallery page and a separate page for each image in the gallery. The pages can be directly edited in a web design program like Dreamweaver—you may change any colors, sizes, layout, and text.

4) Making a GIF Web Animation

a) Get or prepare base images
For example, I went to www.coolarchive.com, and found two pieces of clip art: one vehicle and one building with a street in front of it. I resized the building, copied it, and since it was going to be my background, made a new Photoshop file and pasted it in. I opened the other file in Photoshop too.

b) In Photoshop, make layers that you can use to constitute the frames of your animation, with either desired movement, rotation, or other changes.

c) Go to ImageReady by choosing File Menu > Edit in ImageReady (same as )

d) Make sure Layers and Animation Palettes are visible

e) Hide and show appropriate layers for first animation frame, by using the eye icon in the Layers Palette to hide a layer or the empty eye column to show a layer

f) To add the next frame, click the Duplicates Current Frame button at the bottom of the Animation palette.

g) Hide and show appropriate layers for next animation frame, by using the eye icon in the Layers Palette to hide a layer or the empty eye column to show a layer

h) Add more frames by repeating steps f-g as necessary. If you want ImageReady to calculate some “between” frames, experiment with changing the contents of frames and using the Tween tool to show a transition in location or other property.

i) When you have created all of the animation frames, click the Play button at the bottom of the Animation palette to preview the animation. Click the Stop button to stop it.

j) If the animation is moving too quickly, select a specific frame whose display time you want to adjust, or select all the frames to change their display time uniformly. Then, click the arrow next to 0 sec. at the bottom of a selected frame, and choose the desired time from the pop-up menu.

k) To set how many times the animation loops, choose Other from the pop-up menu on the bottom left-corner of the Animation palette (it defaults to Forever). Enter a value for Play, and click OK.

l) When you are satisfied with the animation, save the file in Photoshop format (File > Save As… keep as a PSD). This preserves all components of the animation and allows you to make changes later if necessary.

m) Once you have saved it as a PSD file, you can optimize the animation for the Web. Choose File > Save Optimized As … (it will default as GIF format).

l) You may then copy the GIF to your Dreamweaver working web folder, and insert the image as you would any other.

5) Making a Rollover Button (in this case a Beveled one) or Navigation Bar from a “template” file

a) Go to http://www.umsl.edu/~edujpolm/webresources.html and then save the “Up image” (bevel-button-up.psd) and “Down image” (bevel-button-down.psd) to your hard drive

b) Open the files in Photoshop

c) Change the image size to whatever is appropriate for your site. Image menu > Image Size … > whatever width and height you wish. Feel free to uncheck “Constrain proportions”

d) Change the button text to whatever is appropriate. Choose the “text-layer” in your “Layers” palette, choose the Text tool in the Tool palette, and select the text “link-name” in the button file. Select your desired font, size, and color. Type your button name.

e) Change the background color to whatever you choose. Choose the “bg-upbevel” or “bg-downbevel” Layer in the Layers palette, and choose the Paint Bucket tool in the Tool palette (by default, it is hiding underneath the Gradient Tool ). Choose the foreground color you want (web safe colors are best), and click in the button body to paint that color.

f) Save a GIF version of both the up and down images. File > Save for Web … > GIF

g) Repeat the above steps for as many button names as you wish.

k) In Dreamweaver, you can either make one Rollover Button, or a whole Navigation Bar with multiple buttons within it (if you made multiples in step g).
1) To make one Rollover Button, click on the Insert Palette (Common Tools) > Rollover Image . In the resulting dialog box, name the image whatever you want, browse for the Original Image (your "up" state GIF saved in step h), the Rollover Image (your "down" state GIF saved in step i), the alternate text, and the link (a file in your site selected by browsing, or a website URL with “http://...” pasted in). You are done.

OR
2) To make a Navigation Bar consisting of multiple buttons, click on the Insert Palette (Common Tools) > Navigation Bar . In the resulting dialog box, name the top button element whatever you want, browse for the Up Image (your "up" state GIF saved in step h), the Down Image (your "down" state GIF saved in step i), the alternate text, and the link (a file in your site selected by browsing, or a website URL with “http://...” pasted in). Add as many elements as you have buttons. At the end, click OK and you are done.

6) Making a Rollover Button (in this case a Beveled one) or Navigation Bar from Scratch

Adapted from a tutorial at http://forum.weborum.com/index.php?showtopic=183&hl=

a) Make a new image. The size I used is 200px by 75px. Choose white as the background color.

b) Create a new layer (Layer > New … Layer …). Select the whole canvas by choosing Select menu > All.

c) After selecting the image, choose a color you want for the button. It is safer to “Use only web colors”. Fill the selection by choosing Edit menu > Fill… > Foreground color.

d) Next, choose layer Layer Menu > Layer Styles > Bevel and Emboss). In the dialog box, make these settings:
Style: Inner Bevel
Technique: Smooth
Depth: 140%
Direction: Up
Size: 6px
Soften: 8px
Angle: 120, 30. Use Global Light is checked
Highlight mode: screen, white. Opacity: 75%
Shadow mode: multiply, black. Opacity 75%

e) Duplicate the layer with the beveled effect (Layer menu > Duplicate Layer) and rename it to “down”. Double click on the Bevel and Emboss layer style in the layer window . Click the down option. If you want to change the color of the “down” state, do so by Filling the beveled layer with the other color, and changing the text to another color.
Remember that layers cover one another--you shouldn’t be able to see any changes in the lower layer unless you click the eye next to the layer above to hide that layer.

f) Add your text label using the Text tool . Make it in a color that has high contrast with the background. Once you have sized and positioned it, duplicate the text layer and rearrange the order the so that the text is on top of each embossed button (text above "up" state, then text above "down" state). If you want to adjust the location of the down state text a bit down and to the right, do so.

g) When you are satisfied with the way the button looks, save the file in Photoshop format (File > Save As… keep as a PSD). This preserves all components of the button and allows you to make changes later if necessary.

h) You will now save two GIF images for each Rollover Button or Navigation Bar element to use in Dreamweaver. Make just the top text layer and the "up" state layers visible, and then choose File > Save for Web … > GIF. Name this image something like "button-name-up.gif"

i) Hide the up state layers using the Eye tool in the Layers Palette, and make sure the down state layers are showing properly. File > Save for Web … > GIF. Name the second image something like "button-name-down.gif"

j) If you want to make identical buttons with other labels for multiple buttons or navigation bar elements, just choose the text layers, edit them with the Text tool, and then repeat steps h-i as necessary.

k) In Dreamweaver, you can either make one Rollover Button, or a whole Navigation Bar with multiple buttons within it, as described in step 5-k above.