Austin Web Design Blog

Make a Pattern in Photoshop

Start a new document with width & height 12px. You may choose to make the pattern larger or smaller, but this is a good size for creating background patterns to use on websites.

Add guides to help you. Go to View – New Guide and then select vertical or horizontal with the pixel position. For my example I put guides at the 3px 6px and 9px mark vertically and horizontally. Add as many guides as you think might help you even every pixel if you like. It’s important to get the measurements of your graphic exact so that your image tiles the way you want. If the graphics aren’t lined up you will get some unexpected results.

Use your Magnifying Glass tool to zoom in quite a bit. Add a graphic on a new layer. Consider circles, straight lines, or diagonal lines. Make it simple at first, such as just a series of straight lines. As you become better with your patterns, you can make more complex designs.

View with and without guides of your pattern in Photoshop

In the image above (1) is the actual size of your image with guides visible. This is too small to work with. (2) is your image zoomed in. Make it big enough to work with, and use the guides as starting and ending points for your image. I placed a small circle exactly in the middle, gave it a 1px stroke, then in the layers pallet reduced the Fill to 0%. Then I added vertical lines from the top of the circle to the top of the image, and likewise at the bottom. I added a diagonal line from the corner of the circle to the corner of the image, then copied it and put it up top right as well. (3) is the view of the image with guides removed and back again at original size.

Select all your layers, right click, and select Merge Layers. If you want this pattern to have a transparent background be sure to remove the white background layer before you merge.

Now save your design as a pattern. Go to Edit – Define Pattern. Name your pattern so you will easily be able to pick it out of the pattern list. Now let’s test our pattern.

Three Ways to Test Use Your Pattern

From the Main Menu

Create a new document 500px x 500px. Use the Rectangular Marquee tool to select the entire background. Go to Edit – Fill, choose Pattern from the list, then select your pattern which is at the end of the list by default.

As a Layer Style

Use the Shape Tool or the Pen Tool to create a shape. Double–click on the layer, then select Pattern Overlay. Select your pattern from the pattern box, and then experiment with the different options such as Blend Mode, Opacity, and Scale.

As a Texture

Make a shape as you did in the previous section, then again double-click on the layer. This time select Texture under the Bevel and Emboss item. This will make your pattern pop out in 3D! Select Invert to make the pattern appear inward as opposed to outward.

Experiment with different sizes of graphics, different colors, and then use the three different methods above to see what your pattern is capable of achieving. Have fun making patterns!

Wed, 14 Dec 2011 10:39

Tags , , , , , , , , , , , , ,

Comment Make a Pattern in Photoshop