Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Creating patterns/textures (PAT files) in Photoshop

Comments and suggestions in here

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.


46 Responses to “Creating patterns/textures (PAT files) in Photoshop”

  1. Julian
    April 18th

    Man this is one hell of a post, I have always used textures that I took with my camera and I have to say that with these techniques I can save a lot of time and achieve similar results, great work guys!

    • TS Editorial
      April 19th

      Thanks Julian, perhaps we will publish an article on photo textures later on :)…

    • Very valid, pithy, succnict, and on point. WD.

  2. Matt
    April 30th

    Since I’m back into digital graphic design your tutorials have come just in handy for me. Hoping to see more on Photoshop and Illustrator. 

    • TS Editorial
      May 2nd

      Thank you Matt, what other tips and tutorials would you like to see in our site?…

  3. Very good post and thank you soo much for the freebies!

    • TS Editorial
      May 17th

      Hey no problem mate, we’re glad you liked the article :)…

  4. CherryMood
    May 23rd

    this is awsome. it’s such a complete and informative review, gotta take full advantage of it. Luvs!

    • TS Editorial
      May 24th

      Thanks Cherry, what’s your motto for working with patterns in PS?…

  5. Monica Green
    June 13th

    I’ve seen a lot of online tutorials about how to use and create textures, but this one is, by far, the best one ever. Congratulations! keep up the good work.

    • TS Editorial
      June 13th

      Thank you Monica!!!, we did our best to explain this matter carefully…

  6. Hey, i love your post! thanks for the help!

  7. AlliMacDesigns
    September 8th

    I’ve just put together a .psd and used a background pattern for my client’s website. I’m wondering how to export the pattern out of photoshop so that the coding team can use it as a repeating background image. Is this possible? I got the pattern from brusheezy as a .pat file… Thanks in advance for any info!

  8. Richer
    April 18th

    Thanks for the great collection. It really helped me in my domain as a website builder. I think it is amazing when people compress more assets so it will be easy find something you like. I mean I don’t see many websites that have a various assets, where everyone can download in order with their preference. I want to specify that there are some website but it costs if you know other websites with free assets pleaaaasee let me know. Thanks again!!  

  9. zennia
    November 10th

    Best article on patterns ever seen . Thanx a lot

  10. Thank you very much!

    #learning

    Greetz,

    @thomas_inckx

  11. I am totally wowed and peraperd to take the next step now.

  12. TYVM you’ve solved all my prbolmes

  13. There is a critical shortage of informative arictles like this.

  14. That great Mande! feel free to share your creations with us!

  15. You’re welcome Azia, come back soon for more amazing articles!

  16. You’re right Nelia, that’s why we are continuously publishing this great content and more!

  17. [...] 60+ Tileable and repeatable pixel perfect photoshop patterns (PAT) #dd_ajax_float{ float:left; margin-left:-70px; margin-right:10px; margin-top:10px; !important; margin-bottom: 10px; !important; padding-top: 10px; !important; padding-bottom: 10px; !important; position:absolute; z-index:1; } .dd_button_v { margin: 10px 0; }$j=jQuery.noConflict(); $j(document).ready(function($) { //put content div class, when scroll beyond this y, float it var $postShare = $('#dd_ajax_float'); if($('.dd_content_wrap').length > 0){ var descripY = parseInt($('.dd_content_wrap').offset().top) – 20; var pullX = $postShare.css('margin-left'); $(window).scroll(function () { var scrollY = $(window).scrollTop(); var fixedShare = $postShare.css('position') == 'fixed'; //make sure .post_share exists if($('#dd_ajax_float').length > 0){ if ( scrollY > descripY && !fixedShare ) { $postShare.stop().css({ position: 'fixed', top: 16 }); } else if ( scrollY < descripY && fixedShare ) { $postShare.css({ position: 'absolute', top: descripY, marginLeft: pullX }); } } }); } });jQuery(document).ready(function($) { if($(window).width()> 1280){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } $(window).resize(function() { if($(window).width()> 1280){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } }); });We have created this amazing set of seamless and repeatable psd pixel patterns, more than 60 patterns ready to use with a simple .PAT file. Just change the background color and you will have unlimited possibilities. As always, you can download them for free, yes, totally free and ready to use in your next design. In order to load the patterns, just use the load pattern function inside the pattern overlay effect window.  If you want to learn more about pattern design and how to create PAT files, check the latest article from TutorialShock named Creating patterns/textures (PAT files) in Photoshop. [...]

  18. [...] Creating patterns/textures (PAT files) in Photoshop [...]

  19. [...] Creare pattern e texture con Photoshop [...]

  20. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/fycHQsp (via @webdesignshock)

  21. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/DGF2ow8 (via @webdesignshock)

  22. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/pQFxnAK (via @webdesignshock)

  23. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/unA8huP (via @webdesignshock)

  24. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/6IwW2Z8 (via @webdesignshock)

  25. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/rdwbAx5 (via @webdesignshock)

  26. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/cQ81Ujg (via @webdesignshock)

  27. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/koYOhTy (via @webdesignshock)

  28. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/pfp7910 (via @webdesignshock)

  29. Creating patterns/textures (PAT files) in Photoshop http://t.co/pfp7910 via @webdesignshock

  30. Creating patterns/textures (PAT files) in Photoshop http://t.co/koYOhTy via @webdesignshock

  31. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/SpQcijt (via @webdesignshock)

  32. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/L155bcw (via @webdesignshock)

  33. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/PRZXMNX (via @webdesignshock)

  34. #Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/YMoKjRf (via @webdesignshock)

  35. Creating patterns/textures (PAT files) in Photoshop http://t.co/zWY2KLhT (via WebDesignShock)

  36. Good #tutorial on making patterns and a few freebies to boot.Creating patterns/textures (PAT files) in Photoshop http://t.co/9zZ2D1wm

Leave a Reply

Comments

*