How to Create a Seamless Background Pattern in Photoshop
8 easy steps for composing a raster background pattern from PNG icons.
Seamless patterns can be applied on any background you can imagine, from a website or application to your Tinder photo.
What You Will Need to Perform the Mission
1. Adobe Photoshop. If you came across this tutorial, chances are high that you already have this program. However, here’s the link to download a free test version.
2. Icons8 for desktop. It’s a free app containing lots of icons and working well with Photoshop.
3. Icons or other images you want on your pattern. We took our Nature icons for this tutorial. FYI, they are free in PNG of any size, so you can save them in your account and use for the pattern as well.
8 Steps for Creating a Pattern in Photoshop
1. Make a Base for Your Pattern
Create a new file of any size with the equal width and height. In our case, each side is 200px.
2. Add the Icons
Drag and drop the icons from Icons8 for desktop (or any other icons) to the Photoshop file. We went for a Crab, a Fish, a Clown Fish, and a Seahorse.
3. Place Each Icon on a Separate Layer
Press Enter to finish the icon pasting process. You have to press it as many times as needed until you do not see the black frame anymore.
It should look like this in the end:
Now each icon is on its own layer in your file.
4. Set up the First Layer
Select one layer in the layers panel and go to Filter > Other > Offset:
Set the parameters Horizontal and Vertical to be half of the file’s side length. Remember the Width and Heigth of your square? Those are the two settings you need.
The size of our file is 200x200px, so we set 100px for both parameters. Make sure you check the Wrap Around option in the lower part of the pop-up window. Click OK. The first layer is done:
5. Set up the Second Layer
Select another layer in the layers panel. Now go to Filter > Other > Offset again.
Then set Horizontal at 0px and press OK:
6. Set up the Third Layer
Select yet another layer and go to Filter > Other > Offset. Now flip the Horizontal and Vertical values. For our case Horizontal will be 100px, and Vertical 0px. Click OK.
Now we have the pattern tile ready.
7. Merge the Layers
Select all the layers except Background in the layers panel and use the hotkey combination Ctrl+E. The selected layers will be merged.
8. Create Your Pattern
First, use one more hotkey combination Ctrl+A (select all).
Then go to Edit > Define Pattern:
Name it and press OK. Ta-da! Your pattern is ready!
How to Apply the Pattern
You have the pattern, fine. Now let’s see how to use it on a background.
1. Create a New File
Make it bigger than your pattern tile to see the result. Ours is 800x600px.
2. Choose the Pattern Overlay
Double-click on the Background in the layers panel. Click OK in the pop-up window.
Go to Layer > Layer Style > Pattern overlay:
Select your newly created pattern in the pop-up window and click OK.
3. Enjoy Your Pattern!
Originally published at icons8.com on January 12, 2016.
