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.
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
Contribute
Kevin
November 24, 2009
cool and simple effect. this is great for website backgrounds
Design Informer
November 24, 2009
Great effect. I have personally used this many times.
designfollow
November 24, 2009
thank for the great tutorial
Xpirt Design
November 24, 2009
That’s a great but simple effect. I’m sure I’ll find use for it for one of my projects. Thanks for the tutorial.
WPCONCEPT
November 25, 2009
Interesting :) Thanks for sharing.
Luis Lopez
November 25, 2009
Excellent tip, honestly, more simple it couldn’t be, but is really efective
w3planting
November 26, 2009
very nice tip, how a simple effect can change the whole perspective of an image !
Susan
November 26, 2009
Great effect! Thanks for sharing!
Thorton
November 27, 2009
Step 1. NEVER put this effect over text.
Step 2. NEVER use this effect as stark black dots. They need to have an opacity value less than 1, or be a less constrasty color than pure black.
Step 3. The actual correct way to make this effect is to have the pixels not touching, but spaced 1 pixel apart. So a 2×2 pattern with the top left pixel filled in.
Step 4. Make sure when demonstrating an effect like this you show an image at 100% crop, so that you don’t try to sell this effect and instead show nasty moire patterned images
DeSiGn LoVeR
November 28, 2009
simple but great .thanks a lot buddy
@Thorton ; thanks for demonstration
Roland
November 30, 2009
Hmm…:) it lookes a bit strange :) I didn’t quite like the result. But, maybe the image wasn’t good enough for this :) But anyway thanks for sharing :)
Laurent Jouvin
November 30, 2009
I agree with Thorton above. I think the pattern is a little too tight. The pixels should be further apart. I totally get the procedure but I think it is up to the designer to adjust and decide what looks best for their design/image.
Thanks for posting!
Mark Carter
December 13, 2009
I remember this design style used to be popular on websites a long time ago. That was in the days of dial-up being the most common connection and file-size being everything. Creating this sort of overlay on top of large images drastically cut down on the resultant file size. Hence its popularity!
Interesting how things come around again …