Tutorial | How To Use Seamless Patterns

This post contains Affiliate Links. This means that I earn a small commission if you purchase through my links, at no additional cost to you. Please read my Affiliate Policy to find out more.

Seamless patterns are repeating graphics that you can use infinitely on different surfaces in a number of different ways. They are an incredibly versatile resource and can enhance your websites, merchandise and even your home. In this post I show you how to use seamless patterns in Adobe Photoshop and Illustrator and give examples of where you can apply them.

I have a few seamless patterns available in some of my products. These are normally part of a larger product, but you can find patterns all over. A great place to start is Creative Market.

Patterns can typically be applied to:

• Textiles (clothing, home furnishings)
• Digital backgrounds (websites, social media, app design)
• Merchandise (journals, stickers, mugs, pens)

Pattern Files

To get started, you need to be aware of what file type you need. I always include Illustrator files (.ai) in my products, but also .png files because not everyone has access to Illustrator. You can use seamless patterns easily in Photoshop and Affinity Designer, too. If you don’t have access to Illustrator or any other vector editing software, always check for .jpg or .png files before you download a product.

Installing Patterns in Photoshop

First, open the pattern file (.jpg or .png) in Photoshop. I use CC 2020 so older versions may vary.

Click File – Define Pattern.

A box should pop up where you can name your pattern.

Now open a new document in Photoshop and click Edit – Fill.

In the Fill box, click on the Contents box drop-down and select Pattern if it’s not already selected. Here you will see a list of the installed patterns on your computer. Scroll down to find the one you just added and click it (depending on how you preview your patterns, you might be able to see the tile as shown in the screenshot above). The pattern should now fill your new document.

Don’t worry about manually tiling your pattern. By selecting the Layer – New Fill Layer – Pattern options in Photoshop, your pattern tile will automatically repeat.

Adjusting the Pattern Size in Photoshop

You can adjust how big or small your pattern scales in Photoshop.

Create your document.

Go to Layer – New Fill Layer – Pattern…

A new box will pop up. Where it says Scale you can set your own number. This will adjust how big or small the pattern elements display.

Installing Patterns in Illustrator

Open the pattern file in Illustrator. This should have a .ai file name extension. You can open .jpg and .png in Illustrator but they will not scale bigger without losing quality.

Go up to Object – Pattern – Make. The pattern will now be added to your Pattern Swatches (see the panel open in the top-right of the screenshot below). If you can’t see your Swatches panel, go to Window – Swatches. (You can also open the Swatches panel and manually click + drag the pattern onto the swatch panel. This will add the pattern to your swatches.)

Adjusting the Pattern Size in Illustrator

Once you have your pattern applied to your shape, double click it to select the pattern. Now right-click your mouse to open the adjustments pop-up box. Go down to Transform – Scale.

Make sure that in the Options section you only have Transform Patterns ticked. Un-check everything else. Now when you change the number in the Scale – Uniform box your pattern will scale smaller or larger. Any number under 100% will make the pattern display smaller, with more tiles. Any number above 100% will make the pattern bigger, with fewer tiles.

Using Patterns in Clipping Masks

You might want to fill just a small section of your artboard with a pattern, rather than your entire document. This can be achieved by using Clipping Masks. You can use Clipping Masks in both Photoshop and Illustrator.

Photoshop

Create a new document and draw your shape.

Now select the shape using the Magic Wand Tool. It will have a small dashed outline when it’s selected. Go to Layer – New Fill Layer – Pattern. Click OK and your shape will be filled with your last used pattern. You can use this pop-up box to change the pattern, or adjust the scale and angle.

Illustrator

In Illustrator, open your new document and draw or select your shape. You can re-import your pattern into this new document the same way you installed it previously, but if you think you’ll use the pattern again in another document it is often easier to save your Swatches. Then you can re-load them exactly as they are into your next project.

Once your shape is selected, click on your pattern swatch in the Swatches panel.

If you select your shape again and right-click, you will open the pattern options pop-up box where you can change the scale. Remember to only select Transform Pattern if you just want to make the pattern smaller or larger within the shape (without changing the shape itself).

Again, bear in mind that if you’re using older versions of Adobe the installation and usage might be slightly different.

Pattern Recommendations

Below you’ll find a few pattern products that I recommend. There are many gorgeous patterns out there so feel free to browse on Creative Market too.

Powered by Creative Market Powered by Creative Market Powered by Creative Market

There you have it. If you have any further questions about using patterns, feel free to drop a comment here or get in touch via my contact form.