Photoshop - Seamless Patterns

Let's learn how to create a seamless pattern that you can use for a repeating background image.

Follow These Steps

Step #1 - Create a New File

  1. width and height should be 500px
  2. background contents should be transparent

Step #2 - Add Guides

  1. View » New Guide
  2. Check Horizontal
  3. Position 50%
  4. then repeat to add a Vertical guide

When you are done, it will look like this:

Step #3 - Place First Image

  1. File » Place Embedded
  2. Drag by corners to resize
  3. Click outside corners and drag to rotate
  4. Place first image in the center

Here is the image after you place it:

Step #4 - Place Other Images Along Guides

Place more images along the guide lines only. Not the corners! Space them out evenly.

Step #5 - Convert Images to Smart Objects

  1. Hold Ctrl and click each image layer
  2. Right-click » Convert to Smart Object

Step #6 - Add Offset Filter

With the images layer selected, add an offset filter.

  1. Select the images layer
  2. Filter » Other » Offset
  3. Set Horizontal to +250
  4. Set Vertical to +250
  5. Check Wrap Around
  6. Click OK

Step #7 - Fill in With More Images

Now you can fill in the empty space with more images. Try to space them out EVENLY.

Step #8 - Export as a PNG-24

Save your PNG background image. File » Export » Save for the web.

Step #9 - Save Your PSD

You might want to move or add some more characters later. Save the Photoshop file, the PSD. You can open it later and make changes.

Step #10 - Use it as a Background Image

Background Image

body {
  background-image: url(img/among-us-bg.png);
}

Background Image with Color Underneath

Since this is a transparent PNG, you can put a linear gradient underneath. Learn more about linear gradients.

body {
  background-image: url(img/among-us-bg.png), linear-gradient(to bottom right, #F7B2FD, #BFF172);
}

Smaller Background Image with Color Underneath

You can control the size of the background image with background-size.

body {
  background-image: url(img/among-us-bg.png), linear-gradient(to bottom, #f58442, #67bef0);
  background-size: 200px, cover;
}