Line25

How To Create Repeating Texture & Pattern Images

How To Create Repeating Texture & Pattern Images
Home » Tutorials » How To Create Repeating Texture & Pattern Images

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Repeating background images are safest method of styling up your website background other than a plain old CSS background color. Websites are viewed in all types and sizes of browser these days, so a repeating background ensures the whole of the user’s screen will be filled with your design, unlike a static image that can often end up being cropped off or lost in a sea of flat colour. Let’s take a look at how seamless or repeating textures and patterns can be created in Photoshop.

Creating seamless textures

Pin

Anyone who’s followed any of my tutorials or seen my work before will know how much I love using textures in my design work. Textures really help add a tactile feel to an otherwise flat and digital design. Open up a texture file and crop it in Photoshop to exclude any marks that would stand out when repeated.

Pin

Go to Filter > Other > Offset then enter a figure in the Horizontal and Vertical fields that’s half the dimensions of your image. My texture file is 800x800px, so I enter 400px in the fields.

Pin

The offset filter will show obvious lines where the file is repeated, but these can be blended in using the Healing Brush. Hold ALT while selecting a sample area, then draw over the lines with a soft brush. Photoshop will disguise the hard lines to blend the four corners together.

Pin

Give the new file a test in a new document by duplicating and butting up the copies against each other. You should be left with a seamless file that doesn’t leave any obvious gaps.

Creating repeating patterns

Pin

Repeating pattern files are also a popular choice for website backgrounds. Patterns come in all shapes and designs, from vintage wallpaper to simple stripes like these. Whatever pattern you’re creating the same simple steps apply.

Pin

Zoom in and pick a focal point on the design, in this case it’s a point in the design where the pink line changes to yellow. Drag out a marquee until you reach the same point elsewhere on the design.

Pin

Crop the image to size then make duplicates to check whether the file tessellates and creates a seamless pattern.

Creating pixel patterns

Pin

Pixel patterns have been popular in web design since the early days of Photoshop designed table layouts. They really help add subtle detail to your website background or page elements. Create a new document at 3x3px.

Pin

Zoom as far into the document as possible, then use the Pencil tool to fill three pixels to create a diagonal line.

Pin

When this pattern file is applied to an element at normal zoom it creates an intricate diagonal line pattern. Check out my pack of free pixel patterns, containing similar diagonal lines amongst other pattern swatches.

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

15 Comments

Would you like to say something?

  1. New Web Templates says:

    Nice tutorial. it will gonna useful, thanks

  2. Windows and Doors Accessories says:

    Thank you ! It is very helpful for me ,i like that !

  3. Freelance Website Designer Malaysia says:

    Nice,
    Keep up the great work!

  4. Webdesign links says:

    Very useful post! These techniques can be used in almost every design project!

  5. white says:

    thank u,i learned a lot.

  6. web design hessle says:

    Nice tutorial, I always seem to struggle with repeating backgrounds, so very useful… thanks

  7. web design leeds says:

    The tutorial is very useful and essential for all designers because repeating images for backgrounds is really hard. . Really useful tutorial .

  8. Travis says:

    Creating repeating images for backgrounds can be challenging, thanks for the tutorial!

  9. Marco Berrocal says:

    One small detail with the offset feature; it doesn't work on smart objects. You have to flatten the layer first.

  10. sonusmac says:

    Nice & simple. I love textures. thanks

  11. Nora Reed says:

    Nice tut :))) As a designer this is would be useful! thanks :)

  12. Richy says:

    Great Tutorial as always Chris.

    I love your use of textured and repeated background throughout your sites.

  13. lxn says:

    It sounds obvious but it is a very useful article! Great Chris!

  14. Chris says:

    Nice tutorial.
    Textures can be a really nice enhancement to websites when used well

Please Share