Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
Creating patterns/textures (PAT files) in Photoshop
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’.
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.
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
Download link: http://www.wordpressthemeshock.com/60-tileable-and-repetable-pixel-perfect-photoshop-patterns-pat/
Free vintage wood texture
Download link: http://www.wordpressthemeshock.com/free-vintage-retro-texture-pack/
Boxes Pattern 2.0
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.
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
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!
April 19th
Thanks Julian, perhaps we will publish an article on photo textures later on :)…
September 13th
Very valid, pithy, succnict, and on point. WD.
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.
May 2nd
Thank you Matt, what other tips and tutorials would you like to see in our site?…
May 17th
Very good post and thank you soo much for the freebies!
May 17th
Hey no problem mate, we’re glad you liked the article :)…
May 23rd
this is awsome. it’s such a complete and informative review, gotta take full advantage of it. Luvs!
May 24th
Thanks Cherry, what’s your motto for working with patterns in PS?…
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.
June 13th
Thank you Monica!!!, we did our best to explain this matter carefully…
August 25th
Hey, i love your post! thanks for the help!
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!
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!!
April 19th
We’re glad this helped you in your projects
November 10th
Best article on patterns ever seen . Thanx a lot
January 21st
Thank you for your comment :)
September 13th
I am totally wowed and peraperd to take the next step now.
September 13th
TYVM you’ve solved all my prbolmes
September 13th
There is a critical shortage of informative arictles like this.
September 13th
That great Mande! feel free to share your creations with us!
September 13th
You’re welcome Azia, come back soon for more amazing articles!
September 13th
You’re right Nelia, that’s why we are continuously publishing this great content and more!
[...] 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. [...]
[...] Creating patterns/textures (PAT files) in Photoshop [...]
[...] Creating patterns/textures (PAT files) in Photoshop [...]
[...] Creare pattern e texture con Photoshop [...]
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/fycHQsp (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/DGF2ow8 (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/pQFxnAK (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/unA8huP (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/6IwW2Z8 (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/rdwbAx5 (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/cQ81Ujg (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/koYOhTy (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/pfp7910 (via @webdesignshock)
Creating patterns/textures (PAT files) in Photoshop http://t.co/pfp7910 via @webdesignshock
Creating patterns/textures (PAT files) in Photoshop http://t.co/koYOhTy via @webdesignshock
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/SpQcijt (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/L155bcw (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/PRZXMNX (via @webdesignshock)
#Useful for designers: Creating patterns/textures (PAT files) in #Photoshop http://t.co/YMoKjRf (via @webdesignshock)
Creating patterns/textures (PAT files) in Photoshop http://t.co/zWY2KLhT (via WebDesignShock)
Good #tutorial on making patterns and a few freebies to boot.Creating patterns/textures (PAT files) in Photoshop http://t.co/9zZ2D1wm