posted by Matt Ward on Sep 29, 2009.
Patterns are an awesome design element that can be used in so many different ways. This article features 17 different pattern related resources to help you become a pattern master.
I love seamless patterns. For me, they are one of the coolest and most useful design elements that you can collect, and they come in all sorts of different varieties. You can also use them in Photoshop, Illustrator and as background in web designs. That’s some pretty wicked flexibility.
Of course, not all designers have the time, skill or motivation to create their own seamless patterns. It can be pretty tedious work. Fortunately, there’s a ton of really great resources out there on this vast internet of ours. In today’s post, we’re going to look some of these totally free resources, which you can turn to when the need for a pattern arises. With these various sites at your disposal, you’ll have a really strong foundation for becoming a pattern master!
Let’s start with the basics. There are a number of different sites that offer free seamless pattern downloads. These patterns can come in a variety of forms, from basic JPGs, to transparent PNGs, right through to fully editable vectors or complete Photoshop pattern libraries.
Patternhead is an awesome pattern blog, in which creator John Rawsterne freely gives away really awesome patterns on a fairly regular basis. He also occasionally posts about other pattern freebies that he has found across the internet, and has a few tutorial and inspiration posts, too.
There is also a premium shopping section to Patternhead, where you can actually purchase licenses for any one of a few dozen more detailed patterns.
Pattern8 is actually a sister site to Patternhead, and is designed to make browsing patterns really simple. Instead of working through the different patterns post by post, you can actually view large collections of patterns on single pages. When you find a pattern you like, just click it to be taken to its own unique page, where you can download it.
All of the patterns on this site are actually provided in straight pixel format, unlike Patternhead, where the patterns are come in vector format. Fortunately, John also includes a link from Pattern8 back to Patternhead, so that you can pick up the vector pattern if you want.
Another really great feature of this site is the ability to browse the various patterns by colour. Just click on any of the tiny colour swatches across the top of the page, and all the patterns of that particular colour will be served up for you! That can make it a whole lot easier when looking for a pattern to match a specific palette.
Ava7 Patterns is a really nifty little site offering over 1300 free seamless patterns (as of the time of posting) for you to download. Like Pattern8, it also has the functionality to allow you to filter the patterns by their primary colour. Additionally, there is a similar tool which filters the patterns based on their basic shape. Tres cool.
This is also a really fun site. The design uses simple, bold colours, and there is an interesting effect in which, when you scroll the page, the patterns appear to stay locked in place. There are also a few features that really appear to be nothing more than a bit of fun, such as the “kill the fly” icon, containing a somewhat obscured but still very recognizable Internet Explorer icon. Try moving your mouse over the fly, to see it pounced upon by the bigger and stronger Firefox spider! Too funny!
Things don’t get much simpler than the PatternWall when it comes downloading seamless patterns. It’s pretty much exactly what it sounds like – a whole collection of different patterns all posted on a single page. Just click on the pattern you’re interested in to bring up a larger, tiled preview and a download button. Click the button to start the download.
It really is that simple. Oh, and just so you know, there are some patterns obscured by the cardboard header and advertising sidebar. To get these patterns, just click the hovering “hide cardboard” button at the bottom of the page and watching the obscuring elements slide away.
DinPattern is another site with dozens and dozens of really cool patterns that you can download for free. I have to say that the detail in a lot of the patterns on this site – all designed by Even Eckard – is really outstanding. The quality here is at a level that I would expect from premium pay-for textures.
Now, I should note that these patterns all appear to be pixel based. No scalable vectors here. The size of the patterns is also pretty small. They will work great for website backgrounds, but can’t really be blown up. Still, in my view that doesn’t take anything away from the quality of this site.
The Design Inspiration is a site that collects all kinds of design related materials. There are logos, illustrations, websites, fonts, articles and, of course, patterns. A quick count suggests that there are about 243 different patterns here, which is a fairly decent collection!
Unlike most of the other sites in this article, this one doesn’t actually store all of its patterns on its own server. A few of them are immediately downloadable, but for the most part you will be redirected to the creator’s site. That’s not necessarily a bad thing, as it can be a great way to find other cool resources, and certainly shouldn’t dissuade you from checking this site out.
Vecteezy is probably one of the best collections of free vector downloads on the internet. I know that, of all the sites that I have submitted my own vectors to, I see the most traffic from Vecteezy. There have been a number of different seamless vector patterns posted to this site, and you can see them all just by filtering the gallery to display items in the pattern category. Fortunately for you, the links I’ve included here already have this filter activated.
There is no standard format for the packaging of these patterns, so you can expect to find all kinds of different things in the zip files. Some will just contain a simple EPS. Others, like my Imperial Leaf pattern (featured in the thumbnail above), contain multiple colour schemes in both AI and PNG formats.
If you don’t already know, Brusheezy is a sister site to Vecteezy, with one key difference, which should be obvious from the names. Instead of focusing on vectors, this site focuses on Brushes. But wait, you ask, isn’t this a post about patterns not brushes? True. However, in addition to their huge assortment of incredible (and sometimes not-so-incredible) Photoshop brushes, Brusheezy also has a section dedicated entirely to patterns.
Unlike the patterns on Vecteezy, though, these files are actually Photoshop pattern presets, meaning that you can just load these directly into Photoshop and start using them right away, provided your version is compatible with the set. Some downloads will also include a PNG or other file of the pattern, too, giving you a bit of flexibility or allowing you to use the image as a background in a website.
In addition to all the really wicked stock patterns you can download from the sites listed above, there are also some pattern generation sites out there that actually allow you to create or customize patterns. With these tools, you are basically taking a stock pattern of some sort and using a variety of different settings to modify and customize the pattern to your liking.
At first glance, PatternCooler may look a lot like some of the other pattern galleries that we have seen so far, but don’t be fooled. There’s actually a lot more to it than that. If you check out the little icons beneath each pattern preview, you should notice that, in addition to having the option to download the pattern, you can also change the colours and size of the pattern!
Making your own pattern is basically a two step process. First, you can change the colours of different parts of the pattern. This basically turns a simple design into the blueprint for millions of different combinations. Secondly, you can also change the size of the pattern. Once you’ve set your colours and size, your pattern will become available for download! Some of the designs are really sweet, too, so this is an awesome resource.
You can also create an account on this site, which allows you to save your various creations. Even cooler, though, is the fact that it lets you save your colours. This makes it really easy to create a number of different patterns all based on the same palette.
COLOURLovers is a site all about colour (go figure). You can browse and create palettes and colours and such, but there is also a section dedicated to patterns! In some respects this section of the site bridges the (narrow) gap between pattern galleries and pattern generators, in that it actually is both. There are all sorts of pre-fabricated patterns that you can browse and download. Additionally, you can also create a new pattern based on their various templates
The pattern generator is actually really easy to use. The only thing that I can’t get to work is to figure out how to actually save the pattern. I think I have to complete the form below the generator, but I didn’t really want to post a test pattern for everyone on the site to see, and I didn’t really have a source of inspiration for my playing around. But if you want to complete the form and post your own design, hopefully you can get it to work!
If not, the site still works as a really great gallery type resource, whereby you can download a ton of already customized patterns.
Who doesn’t love stripes? They are very Web 2.0, and with this handy tool, you can create all the stripes you want. This simple generator has a number of options that allow you to customize your stripes, including size, spacing, background options, shadowing and orientation. When you combine all of these different options, you have a really powerful and flexible tool!
The only thing that I wish this tool had is the ability to add gradients to your stripes. Fortunately there is another stripe generator that allow for gradients, which we’ll get to below.
Ever wanted to create your own Scottish-inspired tartan? Or maybe you actually are Scottish and want to make a pattern based on the colours of yer clan! Then Tartan Designer is the tool for you. True to its name, this site allows you to create your own repeating tartan pattern with a few simple controls! Just pick your colours, the width of your bands, the size of the tread and the orientation, then press the download button. Simple as pie. Or haggis.
The Tartan Designer site was also created by the same people who created the Stripe Generator, and uses some pretty similar functionality! There is also a really cool connection between the two. Hop back over to Stripe Generator and have a look at the icon just below the preview, which says “create a tartan with these colors”. Clicking this icon will actually open a new window and send you over to Tartan Designer, with a new tartan based on your stripe colours! Yet another awesome way to maintain some continuity between colour palettes.
Stripemania rules. Of all of the pages in this article, this is probably one of the ones that I have been using the longest. And, of the two different stripe generators, this one is certainly my favorite. There’s not really all that much to say about this particular site, though. It really is what it sounds like – another site dedicated entirely to the creation of stripe patterns.
A lot of the controls on this one are really similar to Stripe Generator, and though the later does have a few more options, the one thing that Stripemania offers that Stripe Generator doesn’t seem to have is the ability to create gradient filled stripes. This may not seem like that big of a deal, that simple gradient can really add a lot of depth to the pattern.
The one thing that does drive me absolutely nuts about this site, though, is the colour sampler. You can move around it’s colour visualizer, much like you would in Photoshop. Select a colour this way and the main swatch will update accordingly. However, while entering a hexadecimal colour code will change the colour in the visualizer, I can never seem to get it to update the actual swatch. I can usually approximate the colour I need, but for precise colour control, this apparent glitch really throws a wrench in what would otherwise be a top notch tool!
Maybe, after having seen all of these awesome pattern resources, you’ve been greatly inspired. Maybe, in all that material, you just can’t find what you’re looking for. Whatever reason you might have, if you want to try your own hand at making some wicked looking patterns, I’ve also collected a few tutorials to help arm you with the knowledge you’ll need.
This is a pretty simple tutorial in which GoMedia’s own Adam Wagner explains the process that he used to create a ridiculously detailed seamless vector pattern, based on just a few simple ingredients. As you’ll see, it’s a long and involved process, but the basic principal is actually really simple, as evidenced by the brevity of the steps
Be sure to read the comments, too, many of which actually offer some alternate methods for creating patterns. The comment by Track6 is particularly useful. Oh yeah, and the pattern that Adam creates? Freebie! That’s right, it’s available for download thanks to the endless generosity of the fine folk at GoMedia.
In this tutorial, Illustrator all-star Veerle Pieters explains how to create an Illustrator pattern swatch. Of course, many of the same techniques would be used for creating just a basic vector pattern that you could then import into Photoshop or save as a PNG or JPEG for use on the web.
Some of the writing on this one is a bit dense, and some of the steps come at your in almost rapid-fire succession, so be sure to pay close attention. There’s really nothing deep, dark and mysterious here, but I will say that a couple of the tips at the end were news to me! I don’t use pattern swatches in Illustrator all that often, but it was really cool to learn that you can actually scale and rotate them using basic transform tools!
I’ve posted about this tutorial before in my Two Useful Design Articles post. As always, I have to say how much I really love BittBox. There is so much great and useful knowledge and freebies there. Anyhow, this tutorial basically explains how to use Illustrator’s alignment tools to create a really basic seamless pattern.
The example used here is probably not the most brilliant pattern ever created, but I think it works well for illustrative purposes. I actually used some of what I learned from this tutorial to create my Imperial Leaf pattern, which I think is a little more interesting. It’s really all about learning how to take the elements of your pattern and line them up properly in order to achieve perfect seams.
Here is still another tutorial about how to create a seamless pattern in Illustrator. This one is probably the closest to the technique that I actually use, though it’s not quite the same. I use the concept of repeating my elements and letting them all hang over the edge of the art box or art area, however, this tutorial seems to be missing some of the mathematical precision that I like to use (and which I learned from the BittBox tutorial).
Still, if it works it works, right?
One thing to note about this tutorial though – while the information is pretty good, the writing is horrid. More specifically, the punctuation is just downright bizarre, and for me (a grammar fiend) it’s just plain distracting. Hopefully you will have an easier time reading this than I did.
So there you have it folks, 17 different pattern resources for you to devour. Have fun, but please remeber to read the license agreements for any patterns that you download! Oh, why not leave a comment and let everyone know which resources are your favorites, or whether there are any other great resources that I missed!Post A Comment
Also from Echo Enduring Media: