Not too long ago I stumbled across the US Air Force site, and was immediately struck by it’s style and slick patterns. The inner pages of the site focus on large background images with a cool mesh overlay. I decided to play around in Photoshop to see if I could replicate the effect. It turns out to be rather easy, so I wanted to share this quick tutorial with you.

Step 1

Fire up Photoshop and open up your picture. I’m using this photo that I found on Flickr.

Step 2

The easiest way that I could think of to create this style mesh overlay is through the use of a custom made Photoshop pattern. Create a new document, sized at 3px by 3px, and select ‘Transparent’ for the Background Contents. Zoom in to 1600%.

Step 3

Now, create the pattern shown below. Use the rectangle marquee tool (‘M’) to make selections, and fill those selections with black by clicking Edit->Fill and choosing black. Then choose Edit->Define Pattern.

Step 4

In this step we’ll add our custom mesh pattern on the photo. Go back to the original photo you opened. choose Layer->Layer Style->Pattern Overlay. Select your custom pattern you defined in the previous step, and drop the opacity of the pattern overlay to around 60%.

Step 5

That’s pretty much it for creating the mesh pattern overlay effect, but I think the image could benefit from a subtle vignette effect. Add a new layer to the top of the layers palette and grab the gradient tool (‘G’). Change the left side of the gradient to transparent and the right side to black. Drag out a gradient from the center of the image out to a corner. Change the blend mode to Overlay and the opacity to around 20%.

Step 6

In this last step I added a white background, and some text just below the vignette layer. Lower the opacity quite a bit, then add your text. I used Aldo for the font.

Parting Thoughts

I hope you enjoyed this quick tip. The potential uses for patterns are numerous, experiment with different ones, and different layer styles.