|
Ok, we have come a long way since our first
rough draft sketches 4 weeks ago. 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.
 |