Image Slices and Tables
Part One-The Image Slices
© Mitch Peifer
This is designed to be a basic walk thru on how to turn a graphic into slices in Adobe Photoshop, and reassemble it as an HTML table. By the time you are finished, you should have a decent basic understanding of what is going on. Well, not all of you. I fully expect some of you to come to your senses, and find something better to do with your time. For the rest of us......
Part One-The Graphics
Open Adobe Photoshop, and then open any graphic you have hanging around. For the sake of this tutorial, do whatever cutting , cropping and resizing to make it 200 X 200 pixels. Before we start cutting, SAVE the image in a new folder on your hard drive named tablestuff. Go to VIEW> RULERS, to make your rulers visible. Reach into the top ruler, click and pull down a blue guide line, placing it at the 100 pixel mark, halfway down the image. Next, reach into the left hand ruler and pull a guide line halfway thru the image, at the 100 pixel mark. If your ruler is set to read something other than pixels, you need to go to preferences and change it to read pixels. Since we will be working in both graphics and HTML coding, you need to get that straight now, this whole tutorial gives all measurements as pixels, and if your working with HTML and browsers, you need to get used to working in pixel measurements. Once you have placed your 2 guidelines, your image should look like this.
Go to VIEW> SNAP TO GUIDES, and make sure it is checked. Using your Rectangular Marquee Tool, start in the upper left hand corner of the top left blue outlined section, click and drag down to cover the whole square, as shown. Now, go to EDIT> COPY, then immediately go to FILE> NEW, click OK at the New Image box that presents itself. Do not alter the image size options. Photoshop has already determined what size it should be. Then go immediately to EDIT> PASTE, and you should have a new image that is a ¼ slice of the original, 100 X 100 in size. Save a copy of this slice as top-left.jpg. If you want to, you can save the ¼ slice as a PSD file as well. It is always wise to do that. All we need for this tutorial is the jpg file for our HTML table. Now go to the upper right hand square of your original image, and select it with the marquee tool, as before. Once again, go to EDIT> COPY, then FILE> NEW, then EDIT> PASTE, and you should have another new image that is a ¼ slice of the original, 100 X 100 in size. Name it top-right.jpg, and save. Repeat this procedure on the remaining squares on your original image, naming them bot-left.jpg, and bot-right.jpg.
When you are done, you have all four images saved as jpg's, 100 X 100, top-left, top-right, bot-left, and bot-right in the tablestuff folder on your hard drive. With all this done, you have completed the graphics part of the tutorial.
