Shadowed Table Tutorial - Page 4
We did the same thing to the remaining lines being sure that the width of the 3 left side pieces, Top Left corner, Middle, and Bottom Left corner are all the same. We made our Top Left corner 16 pixels wide, so when we cropped one of the middle row images to make the Left Middle image, we needed to be exact in sizing it to the same 16 pixel width. When we cropped one of the Bottom row images to make the Bottom Left Corner, we made it 16 pixels wide as well.
When we created the right side images, we followed the same basic procedures so that the width of all three pieces, Top Right corner, Right Middle, and Bottom Right corner are all the same as the Top Right corner. Since we made the Top Right corner 24 pixels wide, we cropped the 2nd Middle row image to 24x16 to make the Right Middle, and we cropped the 3rd bottom row image to 24x24 for the Bottom Right corner.
So, we ended up with 8 images as shown here.
Next we created a rectangle the same color as our target web page background color so that the semi-transparent shadow will blend correctly. Then we saved each of the 8 images into separate JPG files and named them:
TL, TOP, TR, RIGHT, BR, BOTTOM, BL, LEFT
