This tutorial will show you how to create your own Photoshop patterns with ease, following some simple steps. If you're a web designer, you certainly used some background patterns for beautifying your designs and make them unique.
Building a website firstly requires building the design which is actually an image of your future website made in Photoshop. There are many tutorials on the web, created especially for showing you how to do such a design and many of them are using patterns as backgrounds. But what is actually a Photoshop pattern? A pattern is an image that is repeated, or tiled, when you use it to fill a layer or selection. Photoshop comes with a variety of preset patterns.
You can create new patterns and save them in libraries for use with different tools and commands. Preset patterns are displayed in pop?up palettes in the options bar for the Paint Bucket, Pattern Stamp, Healing Brush, and Patch tools, as well as in the Layer Style dialog box. You can change how patterns are displayed in the pop?up palettes by choosing a display option from the pop?up palette menu. You can also manage pattern presets using the preset manager.
Photoshop also provides the Pattern Maker filter to create pattern presets, or fill a layer or selection with a custom pattern.
Let's build a pattern! I'm going to show you how to create a simple grid pattern as the one from your summing books. Many websites are using for their backgrounds this type of pattern instead of a simple color...is cool and catchy.
Open Photoshop and create a new document of 21x21px. Why these dimensions? because we'll create a grid with 2 columns and 2 lines each of 10x10px...at the middle of the box, there will be 1 pixel for a vertical line and another one for a horizontal line. Make sure to set the Background Contents to "Transparent" in order to make the pattern ready for external use. You'll want to save the image as a transparent png.
Make sure to increase the zoom of the image as much as you need. I made it from 100% to 1600%. If you don't know how to do it, just hit Ctrl++ or View->Zoom In.
Now grab the Line Tool(U) and with a weight of 1px, draw a vertical line between the pixel 10 and 11. At high zoom, you'll notice what is called "feathering", caused by Photoshop.
To fix this, grab the Convert Point Tool (is in the Pen Tool second menu), select the shape mask of your layer by clicking on the mask, Right-Click on the vertical line and hit "Free transform Path". Transform the path until you'll obtain a black line of 1px.
Now that you have a line, duplicate the layer and rotate it 90 degrees to obtain an horizontal line. Go to Edit->Transform->Rotate 90 degrees CW. you should have now a grid.
To define a pattern, go to Edit->Define Pattern, give a name to your pattern and hit OK.
To use a pattern, create a new project, paint the transparent layer with any color you want, using the Paint Bucket Tool(G) and to the layer, add the layer style called "Pattern Overlay". Choose the new pattern from the Pattern Picker and the small image of 21x21px created earlier, will be applied to the entire canvas.Cool, huh?
In just a few steps, you've learned how to create and use your own patterns...Now, the sky is the limit...using this technique, you can create all types of patterns you want, oblique lines, horizontal and vertical lines, any type of pattern! I hope you've learned something today but if you have any questions, drop us a comment below!
