Slicing Tutorial (easy one)
Here's the example image:
2. Now, with your SLICE TOOL, make slices exactly like I did below:
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.
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,
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
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.
the <TD> add background="images/yourImage.jpg"
to it so it should look something like this
(ignore the width) <TD width="X"
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 @ firstname.lastname@example.org
The car like nothing else.
I hope this tutorial has taught you how to do some basic slicing!