Resources for Web Development Students @ Robin’s Blog

Today we will work on creating simple vertical, horizontal, and diagonal striped background images in Photoshop. These background images can be used as backgrounds for pages, paragraphs, headings, and other elements.

Creating horizontal stripes

In Photoshop click File > New

Set the Width of the image to 1 pixel

Set the Height of the image to 4 pixels (the height controls the amount of space between stripes. The higher the number the more space between each stripe).

Set the Background to Transparent

This is going to create a very tiny image. You don’t need a huge image to create a nice background because you can repeat the background with CSS.

Press CTRL and + on your keyboard about six times to zoom in on the image. Still pretty small, eh? That’s ok, you don’t need to see too much of the image to create the background, but if it’s really too small continue to zoom in until you feel comfortable with your view.

Click the Foreground color chip and select a very light color for a more subtle stripe. I selected a very light shade of green.

Select the Pencil tool located in the Brush group. If necessary, hold down your left mouse button on the bottom, right corner of the Brush tool until the flyout appears. Click the Pencil tool.

By default the Pencil tool has a 1 pixel diameter. You can check the diameter in the toolbar below the menu at the top of the Photoshop window.

Position your cursor at the very bottom of the image as illustrated in the image to the right and click once to paint the area. The image to the left illustrates the color at the bottom of the image – this image is zoomed in by 3200%.

Time to save your image as a transparent gif file. Click File > Save for Web or Save for Web & Devices depending on the version of Photoshop you’re using. Set the file type to Gif (it may be set as JPEG), make sure that Transparency is checked, set the colors to 2 since you’re only using one color in the image. It’s important to adjust the number of colors used on a GIF image since the fewer the colors the smaller the file size. Click Save. Save the image into the images folder of your site.


This very small image will repeat across and down the element that you apply it to with CSS, creating stripes across the background of the element.

You can add this image as a background to most elements. Below is the code for adding the image to the background of the page.

body {
	background: url(../images/greenstripe.gif);

}

You could also apply it to the background of an h1 element like this:

h1 {
	background: url(../images/greenstripe.gif);

}

Because you don’t set any repeat properties the background image automatically repeats across and down the page or element. This is the default behavior for a background image.

You can use this same technique to create vertical stripes by creating a 4 pixel wide and 1 pixel high image and painting the leftmost pixel. Try adjusting the size of the image and the size of the pencil to see what different stripe variations you can come up with.

Inspiration for this short tutorial came from the book The Photoshop Anthology by Corrie Haffly. This book is filled with great techniques for creating Web graphics.

If you don’t have Photoshop there are several Web sites that will create stripe images for you. Try Stripemania and Stripe Generator.

I’ve got to run, my Labrador is eating my yellow stickies!!!