|
Large images, whether physically
or file size-wise, will load slowly, and web users
on a modem line may get frustrated and leave your
site. Here are some easy instructions on how to make
a large image load faster using slices. Using Adobe
ImageReady, you will cut your large image into additional,
smaller images, which you will later put back together
in the web page using a table. Here's the steps:
1. If you don't already have it,
download the latest version of Photoshop from the
Applications Server. Photoshop will have ImageReady
bundled with it. ImageReady is the software you will
use for the slices.
2. Open ImageReady.
3. In ImageReady, click on File
> Open and open your large image.
4. Click on View > Create Guides
(show
me)
5. The guides are lines that will
be drawn where your image will be sliced into additional,
smaller images. Try not to make too many slices, as
for each slice that you make, you will then have at
least two more images. For most images, creating 2
slices in the horizontal and vertical direction will
be plenty.
6. Click on Slices > Create
Slices from Guides. You'll notice each slice now is
individually numbered. (show
me)
7. File > Save Optimized As.
Choose where you want to save your slices.
8. Go to the directory where you
saved your slices. You'll now see many images with
the original file name but also with numbers after
them. (show
me)
9. To put these back together
in your web page, you will want to create a table,
with the same number of rows and columns as you created
in your sliced image.
10. In the table tag (<table>),
set the cellspacing and cellpadding to 0. (show
me)
11. Place the images in the table
cells and make sure the table cells fit the images
tightly. (show
me)
|