Home Tutorials Special Effects Creating Patterns/Textures (PAT files) in Photoshop

Creating Patterns/Textures (PAT files) in Photoshop

Added: Apr 15, 2011 Level: Beginner Software: Photoshop

Author: tutorialshock More by this author

When we're working on a new design, whether if this is a website design, a flyer or even a logo, we usually like to incorporate textures to the process; textures can be achieved in 2 basic ways: Real-life textures or digital. Real-life textures are regularly taken from photographs and subsequently digitalized for being used. As for digital textures, they are created directly in graphic programs such as Photoshop and Illustrator, these textures have the advantage of being squeaky clean when they're made by a pro.

On this article we're going to study the creation process behind digital patterns in Photoshop, from its construction to the exporting as PAT files. You will also find some pretty cool examples of digital textures in web design.

Unlike real-life textures that are usually big images that you place in a design and then you change its opacity and blending mode to make it more subtle, digital patterns often came from small images that can be repeated in all directions. Using digital patterns can save you a lot of work while giving excellent results.

Photoshop's default patterns

When you install Photoshop, it comes with some basic patterns within its library ready to be incorporated in your designs. If you want to take a look at which patterns do you have access, you can go to Edit - Preset Manager and then change from Brushes to Patterns.

In our case, the Preset Manager is only displaying two patterns, so does this mean that we only have these 2?. Well the answer is no, what happens is that you're only seeing one library and to display more patterns you will need to click on the small arrow icon next to the 'Done' button.

Once you select the pattern library that you want to incorporate, the following message will pop up:

You can sense what happens next, if you hit OK the new patterns will replace the current ones, but if you click Append instead, the new patterns will join the library without deleting the older ones.

Loading a new pattern library

Now that you know how to take advantage of all the default patterns, what if you have downloaded a new library to utilize in your new website?. Well in that case you need to know that all pattern libraries come as .pat files, look for that file inside your download package and place it inside the Patterns library, the root is usually something like 'C:Program FilesAdobeAdobe Photoshop CS5 (64 Bit)PresetsPatterns'

And then look for the directory where you placed your patterns, select them and hit OK.

Note: Don't hesitate if you don't find your patterns in your 64 bits version, remember that there are 2 different folders, one for the 32 and one for the 64 bits version of your Photoshop.

Making a new pattern

The exercise of creating patterns has a lot of trial and error, so what we can do is explain how the making process works technically speaking. For start let's make a new Photoshop file with the same characteristics that the following screenshot displays:

We suggest you to utilize the Pencil tool to create canvas because it gives you a precise control over every pixel, you can play with the opacity values to generate some interesting designs. The color that you choose won't affect the pattern, only opacity adjustments will remain at the end.

Once you're satisfied with your pattern, go to Edit - Define Pattern so you can save your design and use it in all your designs.

Give your pattern a proper name and then hit OK, now your pattern is accessible from the Preset Manager of Photoshop.

And now your pattern is available and ready to be used, but what if you have more than one pattern and you want to save them as a PAT file?, let's see how that is done.

Holding Ctrl, make click over each pattern that you want to incorporate in your PAT file, you can choose as many patterns as you want.

You can save your patterns in any folder and then move it to its final position, just remember to give it a name that you'll never forget in case you forget its location.

We removed all the patterns so you can clearly notice the moment when we import the PAT file, first go to the Preset Manager and then hit 'Load'.

Voila, now we have our custom pattern library in the Preset Manager. If you want to carry it to another computer, just copy the PAT file and all the patterns will travel along with you.

How to use Photoshop's patterns

Now that you know how to find all the default patterns, create custom designs and import them and work with PAT files, let's see how these patterns are used in an average Photoshop document. You can either use them through the Pattern Stamp Tool, Pattern as a fill or Pattern Overlay.

Pattern Stamp Tool

The Pattern Stamp Tool works similarly to Clone Stamp but instead of taking a sample from a picture, it uses a pattern. This can be really useful when you want to add a pattern in just certain parts of a design or just use a pattern as an artistic brush.

On the top you will find the main options where you can switch the opacity, blending mode and some other great options.

Pattern as a fill

Using pattern as a fill can help you establish them as backgrounds or decoration for an artwork. To use a pattern in this way you just need to look for the option at the Layer's panel.

Then a small window will show up where you can configure the main options before placing your pattern in the canvas.

And that will do it, using a pattern as a fill only requires these two quick steps, now let's take a look at the last method.

Pattern Overlay

Pattern Overlay is probably the smoothest way to use patterns in Photoshop due the amount of options that you can adjust. To give you a clear example of how does this work, let's place a random gradient in a Photoshop canvas.

And now we go to the 'Layers' panel and click on the Fx button, then choose Pattern Overlay.

Let's take a look at the different options that we can work with while staying on this panel.

Blend Mode: This option works exactly like the one you find on the 'Layers' panel.

Opacity: Set the transparency value for your pattern.

Pattern: Choose between the available patterns.

Snap to Origin: Takes the upper left corner as the starting point of the pattern.

Scale: Set the size of the pattern, values above 100 % will usually pixelate your design.

Link with Layer: Attaches the pattern to the selected layer.

On this case we used our custom pattern along with the following values:

And this is what we obtain, a really nice texture on top of our gradient that adds a really nice detail to the gradient. If you want to read more about textures in web design we suggest you the latest WebDesignShock article named 'Helpful design elements you should be using & great related freebies'.

Good pattern examples

At this point you have mastered all the basics on the creation and manipulation of patterns in Photoshop, now let's take a look at some websites where you can find beautiful implementations of patterns on their interfaces.

A lovely checkered pattern that plays perfectly with the whole academic look of the site.

Beautiful fabric texture carefully applied to highlight the typeface and the entire design of the page.

Dotted patterns always look great (don't overuse them) in minimal designs like the previous picture.

To generate grunge textures you can define a custom pattern and then manually modify it in Photoshop to make it look like the previous screenshot.

A few great freebies

Now that we have reached the end of this article, we want to help you get inspired before working in your own custom patterns, here's a short list featuring some great and free Photoshop patterns ready to be used in your designs:

60 Tileable and repeatable pixel perfect Photoshop patterns