Horizontally-striped Background

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.

Vertically-striped Background

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.

Diagonally-striped Background

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.

Creating a diagonal pattern

Was this article helpful?

0 0
Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook

Post a comment