Photoshop - Gradient HTML Tables

This little demonstration is going to walk you through the process of implementing a gradient into the background of your HTML tables. You must have some HTML experience, at least enough to understand how to place images into the background of your HTML table cells. Refresh your memory with our HTML Background tutorial or with our CSS Background.

A Tale of Two Images

To accomplish our goal we are going to make two publications - two .gif files to place in the background of our top and bottom table rows. Here's an example of our finished product.

Gradient Sample:

The Top of the Table

HTML Table Top:

1. Create a new publication in Photoshop Ctrl+N or (Command+N)to bring up the new publication box.
2. Set the dimensions to 20 pixels high by 200 pixels wide.

3. Select a foreground and a background color for your gradient.

4. Select the gradient tool: G and then Shift+G.

5. Make sure you have a linear gradient and the foreground to background gradient options selected from the gradient editor.
6. Draw a gradient (use shift to keep it nice and straight) on a new layer or the background layer.

Now, it will probably take a few tries before you get a gradient that you are happy with so keep drawing gradients until you get a look that suits you. Also, take note that the width of your creation is not very important as we will be trimming the width down. The only reason we stated a 200 pixel width is to make the canvas large enough to work with and see how the gradient looks on a semi large scale.
Be creative and flexible and keep at it until you are satisfied with how the gradient looks. Now is also a great time to save your work as a .pdf file and then continue along below.

Work Big; Save Small

Since these are going to be graphics for use on the web, we want to reduce the image size as much as possible for an optimal web experience. Large web graphics can become cumbersome and greatly slow down your web sites. If you are familiar at all with the behavior of background images in HTML you might have seen this technique before.
What we are going to do now is shrink the image to 1 pixel in width and 20 pixels high. We can get away with this because when this image is applied to the background of our table, it will be repeated over and over thus filling our HTML table cell no matter how wide we want the cell to be.

1 X 20:

1. Flatten the image Layer>Flatten Image.

2. Select the Single Column Marquee Tool and then select a single column.

3. Select the inverse Ctrl+Shift+I or Select>Inverse.

4. Clear the selection, press Delete.

5. Trim the canvas; Image>Trim....

We're finished, save the image File>Save for the Web. Save the file with a .gif file extension and set it to the background of your table row.