I needed a camouflage background for a web project I was working on recently, and after playing around in Photoshop a bit, I came up with a quick and easy way to make a tileable digital camouflage pattern ideal for use as a website background. First I did some Googling to see what different real-life digital camouflage patterns look like, so I could get a feel for colors and arrangement and I kept these in mind as I worked on my own background. Most of them are too contrasty and busy for a website background, so I purposely toned mine down so that it was recognizable as digital camouflage, but not so bold as to detract from the overall website. Ready to dive in? Here are the steps I took to create my tileable background:
Step 1: Creating a Brush
I started out by making a quick grunge brush. Selecting my brush tool, I chose one of the rough chalky-looking brush tips and changed some of the settings in the brush palette. Under "Shape Dynamics" I set the size jitter and angle jitter to 75%, and under "Scatter" I set the scatter at 100% with "Both Axes" checked.
Step 2: Painting the Camo
Next I opened up a 300px x 300px (at 72ppi) canvas. In this example I'm making blue urban camouflage, but you can make desert camo using beiges and browns, forest camo using greens and browns, or even purple or pink (or whatever) camo. You want to pick three colors for your camo--a light, a medium and a dark--and you want to make sure the shade values are spaced out enough so that there is good contrast between all three colors. Fill your canvas with your lightest color and on a fresh layer, use the grunge brush you created to color splotches of your medium and dark colors (see my example below). Refer back to the Googled camo images for pattern inspiration if you need to.
Step 3: Digitizing the Camo
Once you have your camo pattern layer the way you want it, make sure the layer is selected in the layers palette and go to Filters > Pixelate > Mosaic. Set the cell size to around 8 and click okay.
Step 4: Making it Tileable
Now to make our tiny square of camo a seamless tile. Merge your layers together, and then create a layer from the background (right click on the background layer and choose "Create layer from background"). Next, go to Filters > Other > Offset and offset your pattern so that the lines where the edges of the pattern don't line up (on the top and bottom) make a cross somewhere in the center. If you play with the offset settings and you can't see a visible line where your pattern very obviously doesn't match up, then you're finished! If you do have obvious visible lines, continue on to step 5.
Step 5: Cleaning Up the Pattern
Get out your grunge br ush again and paint along the lines where the pattern doesn't quite match up (I put red lines through mine to show you where I was working) to cover up those lines. Then run the Mosaic filter again (still set to 8).
Step 6: Testing the Pattern
To test your pattern, turn it into a pattern by going to Edit > Define Pattern. Give your pattern a name and hit Okay. Then open up a new, larger canvas and select your Fill Tool. In the Fill Tool's settings bar up top, set the fill to Pattern, and in the pattern drop-down menu find and select the new camo pattern you just defined. Then fill the canvas with your new pattern.
Perfecting a Camouflage Background for the Web
If you're creating your tileable camouflage pattern for use on a website, be sure to consider the size of the space you're planning on filling with your pattern. If you're using your pattern as a background for the entire site, you'll want a larger pattern with subtler contrast between your colors so that your background isn't too distracting. Start with a larger canvas and create a pattern with more variation. If you're planning on using your pattern in smaller accent areas, then you'll want your pattern to be smaller with more contrast between the colors so that the pattern is recognizable as camouflage even in small doses.