Concept Of Photoshop Custom Pattern

I’ve decided to write a more in-depth explanation for Creating Custom Pattern, hope this will clear some clouds for those who want to create their own custom pattern.

Custom patterns are all about creativity. Once you’ve got the logic of out it, it’s up to you to experiment and create your very own custom pattern and use it whenever applicable.

Dissecting a sample button

Here’s a simple button with Custom Pattern background. It’s made up of Text, Custom pattern and a solid color background. [Source attached]. Our focus here is on the Custom Pattern.

Button: Break down

This final custom pattern (image below) came from..

Custom Pattern

.. this raw custom pattern (image below).

Custom Pattern

Let’s zoom this 1600% and see at how it was originally formed. Custom patterns are usually made up of one single small image (image below) that I usually call the Repeater.

1600% Zoomed in

When this Repeater duplicate itself, it forms a pattern (image below). Take a look at the image below, when a single Repeater duplicates its surrounding it forms a small slanting pattern.

Single pattern starts duplicating

And when this small pattern repeats itself, this (image below) is what you will be in final.

Custom Pattern

Repeating the loop

In the end, its your Repeater that gives you your custom pattern. Determining a Repeater that duplicates flawlessly can be hard sometimes. Keep experimenting with it, once you’ve got the flow you might just came out with some nice looking custom patterns.


Here’s a method how I play with custom patterns:

  1. Create a small canvas, 9x9px, 3x3px, 8x8px, etc.
  2. Draw some patterns on it. Custom Pattern
  3. Save it with a simple filename, say "cp.gif"
  4. Launch a notepad, and insert these following codes.

    <html> <body background="cp.gif"> </body> </html>

  5. Save it with as a HTML, say test-cp.html
  6. Launch a browser, open test-cp.html and preview your pattern. Custom Pattern preview in browser

Related article: How to Create Custom Patterns in Photoshop