Tutorial 1. Photoshop Image Slicing and HTML Tutorial

We'll do the prep in Photoshop for a three-page gallery. The photos are the property of Italian photographer Clare Natoli, who has given permission for her pictures to be used for my classes.

1. Here is a page as designed in Photoshop layers. It features a image display area and simple arrows to go from image to image (or seem too!).

2. In this image, the page has been divided into areas that will be active using guides. The active areas are the image display area and the arrow buttons. NOTE: Turn snapping on.

3. The same stage as in (2), but with shading to show the active areas of the page.

4. Select the Slice Tool from the Tools Palette. Move it to the corner of an active area (here the image display area), click and drag over the whole area to be sliced; the tool feels and functions much like the Rectangular Marquee Tool. If snapping is on, the outline will snap to the guides (not shown here). Release the mouse button, and the slice will appear.

5. Double click on the new sliced area with the tool, and a Slice Options dialogue box will appear. Call the slice "gallerybox_01" (yes, I know I misspelled it). Note for the first of many times I will name things as a series. This will make handling large numbers of elements far easier to handle! Note the contents of the slice in the "Alt Tag" input area; an "alt tag" is text that will appear when a user rolls over the object and pauses. It will also help you find things in the coding environment.

6. Perform the same procedure for the two buttons; call one "backbutton_00" and the other "fwdbutton_00". The reason for the "00" will become apparent in tutorial 3.

7. The whole page now looks like this. At this point, prepare a file folder for this site somewhere on your machine, call it "site" or as I did in my files "natoli_site".

8. Now go File > Save for the Web: click "Save". The "Save Optimized" dialogue should appear. At the bottom of the box, select "HTML and Images", as shown, now name the file "gallery.html". Make sure that the "Slices" rolldown is set to "All Slices".

9. Photoshop (really its adjunct, ImageReady) will create all the files and folders necessary to display "gallery.html" on a Web browser. Just like that. Note that the slices we took the trouble to name have unique file names. We will soon create a "gallerybox_02.jpg".

10. Looking at the layers menu in Photoshop, turn off the first image and turn on a second, the oranges. Eventually, this image will show on a second page.

11. Select the Slice Select Tool from the Tools Palette. Double click the image display area slice to bring the dialogue back up.

12. Rename the slice and change the alt tag as shown. At this point, the image area slice should be selected; this will be an important distinction.

13. Once again, go File > Save for the Web. When the dialogue comes up, change Format to "Images Only" and Slices to "Selected Slices". This will save out no new HTML while only the image area slice will be saved as a new file. Using the window, go to the site folder; in my example, this would be "natoli_site". The "Save As:" name won't be used, so no need to reset that—the slice name will be the image's name in the Images folder. Click "Save".

14. If you followed the procedure, a new file "gallerybox_02" should have appeared in your site images folder, the one Photoshop made for you. Why will we want this? As we move in the next tutorial to Dreamweaver, we will make nearly duplicate pages that will seem to swap out images in the gallery.

15. Finish this tutorial by creating a third "gallerybox" image, "03". Note that as it created files for your new page, Photoshop, too, chooses to created objects using numerical series. Again, this will make things a lot easier as your files grow increasingly complex.