SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop ImageReady Animation Slicing Tutorial (easy one)

Slicing Tutorial (easy one)

RBP ImageReady Animation Dec 17, 2004

1. First off we want to open the image we want to slice. So basically we want to be able to make text "inside" the image using nothing but HTML.
Here's the example image:

image 1

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

image 2

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.

Slicing Tutorial (easy one)
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

   
subscribe to newsletter