Web Pages with Photoshop

Ok, we have come a long way since our first rough draft sketches. We have our page laid out. We have it ready for code on our graph paper. And we have all of our guides telling use where we want to cut up the page for use in HTML coding. Now we have to slice it up and save the images.

Photoshop and Image Ready come bundled together. We often don’t use Image Ready, because Photoshop is so powerful now and it has a lot of features for optimizing web graphics. We are going to use Image Ready today for one easy trick that Photoshop doesn’t have.

Push the button at the bottom of the tool bar and that will take us to Image Ready with our document.

Once we are in Image Ready, make sure that the guides that you made are visible and then hit Slices -> Create Slices from guides. Easy as pie, all of our sections are now slices. Very cool.

At this point you can either stay in Image Ready or switch back over to Photoshop. I am going to stay in Image Ready for a little while, but everything I do here can be done in Photoshop just the same. I am going to concentrate on my navigation area for now.

Ok, you see that in each slice there is a two little boxes with a number in them. This is the slice number. Select the slice selection tool from the toolbar. It looks like the image below.

With this tool, double-click on those little boxes in a slice A pop-up window will appear with the name of the slice and some entry boxes. Here is where the fun begins. Replace the name of the image with the name that you want to refer to in your HTML markup. I replaced my first image’s name with gallery1. I did that to all the images in my navigation bar. Each one was replace by the name I am going to use in my markup.

If you use GoLive, another Adobe product, you can easily punch in all this information, including the URL for a link, the target, size attributes etc... Then you can export the images with HTML formatting directly from Photoshop and stick it into GoLive. This is very powerful and should be used if you use GoLive. It will make your job very easy. GoLive and Photoshop link together seamlessly, so you should take advantage of that. If you updated to Photoshop 6, you can get GoLive for $99 until the end of March, 2001. You may want to take advantage of that.

Anyway, now we have our slices named. I am not going to worry about the rest of the information right now, only the image name. Once you are done with all of this, and you can do as many images as you want on the image. In other words, if I were actually doing my page right now, I would rename every slice that I wanted to use as an image. We will talk more about this next week. For now, I am only going to worry about my navigation. I am going to switch back into Photoshop now. I suggest you do the same for ease of discussion.

Now that I am back in Photoshop, I am going to press File -> Save for Web. This will bring up a window with entire page in it.

Look in the upper left-hand corner of the image, and you will see the Slice Select tool again. Grab it. Click on the first image you want to save. Then holding the Shift key, select all the rest of the images you want to save as well. They will be shown slightly darker than the rest of the image. Now you can modify how the images will be saved, in the upper right of the screen. I chose GIF with 64 colors etc...

Now hit OK. It will bring up the window that you select a file name for. I am only going to save the images that I want, so at the bottom of the window select "Images Only" from the drop down menu, and "Selected Slices" from the other drop-down menu. This will save the images that you want only.

You don’t need to worry about the name of the image in the box. Select the folder you want to save to and then hit save. Photoshop will create a folder named Images inside your selected folder and save all the images under the names that you gave them as slices. Here is the folder that I had.