Definition of a Photoshop slice: a Photoshop slice is a part of a bigger image.  So, if you have a big image, which is usually the case with designs for websites, you want to be able to “slice” that big image into multiple smaller images that will each have a different role on the website.

Step by step

• Press “K” in Photoshop to get the slice tool. You have two of them. One for slicing, the “Slice Tool”, one for selecting and adjusting slices, the “Slice Select Tool”.
• Slice the part of the image you want.
• Zoom in.
• Switch to the “Slice Select Tool”
• Click on your slice and adjust it by dragging on the corners and edges.
• Double click on the slice to bring up the “Slice Options”.
• Rename the slice to “whatever you want” and now you can save just the sliced image.

• File>Save For Web will bring up a window that will allow you to select just the slices you want to save. (Keep “Control” key down as you select the slices you want to save.)
• If you don’t want any HTML pages, make sure you select to save “Images Only” in the “Save as Type” box.

Hints on how to minimize the amount of images your website has

• Don’t slice any solid backgrounds. If your image has a lot of solid background, slice only the image part and set the background using CSS.
• You only need a sliver (1px width or height depending on the direction) for a gradient, which can be repeated with CSS.
• Any solid borders should just be done with CSS.
• The text on links, should never be images, it makes them hard to change and they’re some of the things that are most often modified.

Bits of HTML and CSS code for your images

• Here’s the code to make an image into a link. (It’s a good idea to set the border=”0” for your linked images in case someone still has some ancient browser.  The alt tag is very important, leave it without any value, but never leave it out if you want to have valid HTML. The text in the alt tag is the text that appears if the image is broken or missing.)

<a href=”/”><img src=”/images/logo.jpg” alt=”the name of my website” border=”0”></a>

• Not really about images, but a good thing to check for when things don’t align properly: padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags.
• Example CSS for a gradient that goes from right to left:

div#gradient {

width: 900px;

height: 140px;

background: blue url(/images/banner_gradient.jpg) top right repeat-y;}

• For old times sake, because you can do all of this now with just CSS, here’s how to do rounded corners retro style:

For a box with rounded corners and no border you only need four images, one for each corner. Check out the slices .

There are two ways to code this box, one is with tables and one is using divs. I will show the divs way because it’s the newer way (EDIT: this was written back in year 2006) to do things and the harder way too.

One way to code this using divs is to use five of them and put them all one inside the other. The first one (outer div) will set the width and the background color. Each of the nested divs will add a corner and the most inner div will set the padding and any other styles the content inside the rounded corners box will have.

CSS

.background {width: 200px; background-color: red;}

.top_left_corner {background: red url(top_left_corner.jpg) 0 0 no-repeat;}

.top_right_corner {background: red url(top_right_corner.jpg) 100% 0 no-repeat;}

.bottom_left_corner {background: red url(bottom_left_corner.jpg) 0 100% no-repeat;}

.bottom_right_corner {background: red url(bottom_right_corner.jpg) 100% 100% no-repeat; padding: 5px;}

HTML

<div class=”background”>

<div class=”top_left_corner”>

<div class=”top_right_corner”>

<div class=”bottom_left_corner”>

<div class=”bottom_right_corner”>

<!– content goes in here–>

</div>

</div>

</div>

</div>

</div>

For a box with rounded corners and a border you need eight images. In this case, I would actually use a table, the code ends up being much cleaner.

Of course if your box is always going to be the exact same width you can always just get a slice for the top and one for the bottom and solve your problem in three divs. Having the corners divided like this creates a more flexible box that can be used for different widths across the website. If you get even more advanced you can write yourself a JavaScript of PHP function which you could call like this: drawRoundedCornerBox(mycontent, width).