A growing repository with 690 lists & 8496 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
bypeople

Creating patterns/textures (PAT files) in Photoshop

Created by Admin on Nov 19 2014

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.

patterns01

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.

patterns02

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

patterns03

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.

patterns04

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’

patterns05

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

patterns06

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:

patterns07

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.

patterns08

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.

patterns09

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

patterns10

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.

patterns11

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.

patterns12

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.

patterns13

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’.

patterns14

Voilá, 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.

patterns15

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.

patterns16

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

patterns17

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.

patterns18

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

patterns19

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.

patterns20

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

patterns21

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

patterns22

  • 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:

patterns23

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’.

patterns24

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.

patterns26

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

patterns27

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

patterns28

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

patterns29

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

Design11trends81

Download link: http://www.wordpressthemeshock.com/60-tileable-and-repetable-pixel-perfect-photoshop-patterns-pat/

Free vintage wood texture

Design11trends82

Download link: http://www.wordpressthemeshock.com/free-vintage-retro-texture-pack/

Boxes Pattern 2.0

patterns25

Download link: http://sed-rah-stock.deviantart.com/art/Boxes-Pattern-2-0-198298454

Baby Pink and Blue Photoshop Patterns

Download link: http://webtreats.mysitemyway.com/baby-pink-and-blue-photoshop-patterns/

Starry Sky Photoshop Vector Pattern

Download link: http://www.shapes4free.com/vector-photoshop-patterns/starry-sky-photoshop-vector-pattern/

12 Free Repeating Pixel Patterns for Photoshop

Download link: http://line25.com/articles/12-free-repeating-pixel-patterns-for-photoshop

Free floral pattern for Photoshop and Illustrator

Download link: http://pehaa.com/2010/10/free-floral-pattern-for-photoshop-and-illustrator/

Bonus link: Modular Grid Pattern

On this site you can create simple modular patterns directly online and download them as PNG, PAT files or transparency masks.

Original link: http://modulargrid.org/#app

And that’s it, we have covered all the fundamental aspects of working with patterns in Photoshop, if you know any other great trick, please share it with the community by leaving a comment :). We hope this article can be helpful for all of you and well, stay tuned with us for more great articles and tips, we’ll see you guys soon.

This a test message in global notification
Your download will start shortly.
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople