Create a new document that's 1 pixel wide and at least 2 pixels high. The height will determine the amount of spacing between the stripes. In this example, my document is 1 pixel wide and 4 pixels high. Then select the Pencil Tool (b) and select a foreground color for your stripe. I've used gray. On a new layer, draw a gray dot near the bottom of the canvas, as shown at right (you may need to zoom in to do this).
Next, hide the background layer by clicking on its D
eye icon in the Layers palette. Select File > Save for E=
Web... and save your image as a transparent GIF. =
The image at right shows what this image looks like when it's applied to a web page; the very
Striped background applied to a web page tiny background tile is highlighted.
This is almost the same as creating a horizontally-striped background. Just make sure that your new document is 1 pixel high and at least 2 pixels wide, and draw your dot on the vertical edge of the canvas.
Create a new document with "square" dimensions. I've created a 5 pixel by 5 pixel document to make my diagonal background. Use the Pencil Tool (b) to draw a diagonal line from one corner of the document to another. (You'll have to do this pixel-by-pixel, so zoom in for accuracy.)
Creating a striped background
Hide the background layer by clicking on its eye icon in the Layers palette, and save your background using Save for Web. . This example shows what our image looks like when it's used on a web page, as well as what the pattern looks like zoomed-in.
Was this article helpful?