Here's the example image:

2. Now, with your SLICE TOOL, make slices exactly like I did below:

3.
Now
you might want to name your slices, because
on bigger projects, there will be LOTS of files,
and it can be hard to find the one you are looking
for if you do not have a name on it.
To name the slices, right click the slice you
want to name and go edit slice options.
Here you can change the name. You can also make
the image a link etc.
4.
Now
we are going to SAVE IT FOR WEB. Go save - save
for web. A box like the one I have below will
appear, only much bigger than mine. Make the
big slices with lots of colors .JPG's and the
smaller ones with less color .GIF's for better
results. Make the files medium sized, not big,
not small.
We want to have good, fast-loading quality on
our websites, OK?
There are a lot of options at this screen, but
we are focusing on just some small ones.
![]() Click to Enlarge |
5.
Now
click save. Call your file index.html. Now your
photoshop 7 will automaticly save your index.html
and make a folder with your images. The paths
of the images are already fixed :)
6. Now, in your .html file, locate the images that you want to have HTML text placed "on". Inside the <TD></TD> remove the <IMG SRC="images/yourImage.jpg" WIDTH=X HEIGHT=X ALT="X">. Now we have removed the image. We want to make the image a background image so that text can be placed upon it.
Inside
the <TD> add background="images/yourImage.jpg"
to it so it should look something like this
(ignore the width) <TD width="X"
background="images/yourImage.jpg">
Now, inside the <TD> you can add ANYTHING,
just make sure the content does not exeed the
height of your TD.
![]() |
|
| You can even put
some stuff here! Got a question on this tutorial? Contact xpeder @ xpeder@hotmail.com |
|
![]() |
The
car like nothing else. I hope this tutorial has taught you how to do some basic slicing! |
![]() |
|
![]() |
|
![]() |
|
Final Result | |











More Photoshop: