Patterned Background Tutorial

You Don't Have to be a Computer Genius to...
Create a Patterned Background in Photoshop!!!

Previous Article<<<

Next Article>>>

There are so many different features in Photoshop, most web designers never get to use half of them. I wanted to learn some fun Photoshop tips to spruce up my website and impress my friends. I thought it would look cool if my website had a pattern background instead of just a flat color background. Do you know what I discovered...YOU DON'T HAVE TO BE A COMPUTER GENIUS TO...Create a Patterned Background in Photoshop!!!

Here's a sstep-by-step guide. ONE DISCLAIMER, I WILL BE DESCRIBING THE STEPS I TOOK USING THE WEBHOSTING AND SOFTWARE SERVICES I HAVE CHOSEN. IF YOU HAVE DIFFERENT BACK-END SUPPORT, YOU WILL HAVE TO ADJUST ACCORDINGLY.

My Tools:

Windows 98
Web2010 as my hosting company, using UNIX
WS_FTPLE (32-bit) for my file transfer protocol
Dreamweaver as my web page designing software
Photoshop 5.5
REMEMBER...Directories (or Files) should always be named in small letters not CAPS!

Summary: You can create a background for your website that uses images such as an image of a computer or the image can be a simple pattern. This article specifically addresses "tiled" patterns such as checkerboard or diagonal lines etc. Note, in Dreamweaver, a pattern will be "tiled" (or repeated) automatically by clicking "Modify" then "Page Properties" and inserting the background image where indicated.

Step-by-Step:

Open Photoshop 5.5. Once you launch Photoshop 5.5., go to the menu option "File" and click "New." A new image canvas will appear called "untitled." You'll have to designate a size in pixels or inches for your image and select RGB if you want the pattern image to be in color (not black and white). I just want to create a striped pattern so I opened an image 3 pixels by 6 pixels. Because it's so hard to work with such a small image, I hit "ctrl +" to enlarge it.
Open Swatches. Open the "color swatches" window and click on the color you want the pattern image to be. The color you choose will appear in the "tools" window in the foreground box. The other box is the background color.
Open The Pencil (Paintbrush) Tool. Click the "pencil" or "diagonal line" on the tool box. Make sure the size of the pencil point is just one pixel by going to the brush panel and picking the size.
Pencil in the image. Pencil in the image with the different colors you want. If you are trying to create a checkerboard look, then you will probably have to color 2 pixels with one color and 1 pixel with the other. When the 2 x1 image is "tiled" in Dreamweaver then you'll have your checkerboard pattern.
Test Pattern Image. To see how your pattern image will look "tiled" as a full background image, you must "define the pattern" as described in the next step.
Define The Pattern. First go to "Select" and click "all" or you can use the marquee tool to "select all". Then go to "Edit" and click "Define Pattern." The image you want as your background should be highlighted. Then open a "New" canvas under "File." The size of the new image is not important...I picked 5 inches by 5 inches. Next, go to "Edit" and click "Fill." A window will pop up and prompt a drop down, click "use pattern." You should now see how your pattern image will look as a background on your website.
Export as a GIF. Once your happy with how your pattern image looks, save the smaller image as a GIF by going to "Save for Web" and naming your image.
Insert Pattern Image. When in Dreamweaver, you can insert your new "pattern image" just as you would any image. NOTE: If this is a background image, then go to "Modify" and then click "Page Properties" and insert the image under "background image."