Patterned backgrounds are an all-time classic you can use anywhere from web design to package design. Here’s how to make one in a couple of minutes.

In the world of backgrounds, monochromatic and gradient backgrounds are the absolute favorites. They are easy to pair with any font, work well with all types of content, and don’t take long to create. However, for some types of design, patterned backgrounds work much better. You can never go wrong with a pattern: it can be as vibrant or subtle, as complex or minimalistic, and as densely or sparsely filled with details as you want.

With this step-by-step guide, you can make your own custom patterned background in just a couple of minutes using Photoshop. Here, we’re going to show you how to create rater patterns in Photoshop. If you prefer vectors, check out this tutorial instead.

What you need to get started

  • Adobe Photoshop. If you came across this tutorial, chances are high that you already have this app. However, just in case, here’s the download link to the latest version of Adobe Photoshop. You’ll get a free 7-day trial once you install the application.
  • Icons8’s Pichon for desktop. It’s a free app containing massive libraries of carefully curated icons, photos, and illustrations. They are all sorted into different styles and categories, so you can create perfectly consistent designs. It works on Windows and macOS and is compatible with Photoshop.
  • Icons or other images you need for your pattern. In this tutorial, we went for the Sea life icons from our Color icon style. You can download them for free as PNGs of any size up to 100×100 px.

Creating your own pattern in Photoshop

It only takes 8 quick and easy steps. Get your Photoshop and Pichon ready and let’s begin.

Create a new file

Create a new file of any size with equal width and height. We recommend that you go for a size that is at least 4x bigger than the size of your icons. That is because if you choose a smaller size, the pattern is going to end up crammed and messy. If you want more space between the elements of your pattern, experiment with even bigger file sizes.

In our case, since we downloaded 100×100 pixel icons, we created a 400×400 pixel file as a base for our pattern.

creating a new document in photoshop sized 400×400 pixels

Add the images

Open Pichon next to your Photoshop canvas and import the icons. Select the ones you need and simply drag-and-drop them onto the canvas. We went for a sea life-themed pattern and picked a Crab, a Fish, a Clown fish, and a Seahorse.

If you decide to use monochromatic icons, you might need them in different colors. Here’s how to recolor PNG icons in Photoshop.

Once you have all the images on the canvas, click “Done” for each of them. It should look a bit messy after you import them. This is completely fine as long as you see each image as a separate layer in the Layers panel.

importing images for a custom pattern adobe photoshop

Set up the first layer

Our main instrument for creating a pattern in Photoshop is the Offset layer filter. To open it, click Filter → Other → Offset.

creating layer offset adobe photoshop

There, you need to set both the vertical and the horizontal offset to 200 pixels. We recommend choosing the offset that is half the size of your base layer. Since we chose ours to be 400×400 pixels in the first step, we are going with 200 pixels here. If your file size is, say, 900×900 pixels, the offset should be 450 pixels for a perfectly symmetrical pattern. Also, make sure the Wrap Around option here.

adjusting offset settings 1st layer

Set up the second layer

Select the next layer in the Layers panel and open Filter → Other → Offset again. This time, we need to leave the vertical offset at 200 and switch the horizontal offset back to 0. Wrap Around has to be activated at all times.

adjusting offset settings 2nd layer

Set up the third layer

Pick the third layer and go to Offset settings one more time. Now you need to do the opposite and set the vertical offset to 0 and bring the horizontal offset back to 200.

adjusting offset settings 3rd layer

Voilà, this is the final pattern and we’re almost done! We don’t need to offset the fourth layer because we already have it right in the middle.

Merge the layers

Select all the layers except Background in the Layers panel and press Ctrl+E (Cmd+E). The layers should merge into one, and you should be able to see your pattern in the layer preview.

merging the layers adobe photoshop

Save your pattern

First, select all your layers by pressing Ctrl+A (Cmd+A). Then click Edit → Define Pattern.

saving a custom pattern photoshop

Name it and press OK. All done, now you can apply the pattern to your designs.

How to apply the pattern

We came all this way to have a custom pattern for backgrounds, so let’s make one.

Create a new file

Make sure your new file is bigger than the one you used to create the pattern. Otherwise, you won’t be able to see the result. We went for 1000×600 px.

Once your new canvas is ready, double-click on the Background in the Layers panel. In the pop-up window, click OK without tweaking any settings.

creating a new layer adobe photoshop

Apply pattern overlay

Go to Layer → Layer Style → Pattern Overlay. Select your newly created pattern in the pop-up window and click OK.

setting up pattern overlay in adobe photoshop
choosing pattern overlay in adobe photoshop

Enjoy the pattern

Remember what we said about the size of your canvas for the pattern at the beginning of the tutorial? The bigger your canvas is compared to the size of the images, the looser your pattern is going to be. Here is our final pattern with 100×100 pixel icons on a 400×400 pixel canvas with a 200 pixel offset.

background with a sea life pattern version 1

And here is that same pattern created with those same 100×100 pixel icons on a 500×500 pixel canvas with a 250 pixel offset respectively.

background with a sea life pattern version 2 looser pattern

Sources with textures for Photoshop

Textures are the easiest way to create a clean, cohesive patterned background in Photoshop. There are plenty of nature-inspired textures that imitate wood, stone, water, and other materials. You can find entire sets of free Photoshop textures online: for example, FixThePhoto has hundreds of free textures. There are also lots of free textures on Adobe Stock.

Further Reading

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty-free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together

Also, get the lists of free vector software and free photo editing software.

Subscribe to
Icons8 Newsletter!