Line25

How To Create Repeating Texture & Pattern Images

Read the full post

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

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.

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.

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.

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

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.

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.

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

Creating pixel patterns

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.

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

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.birondesign.com Chris

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

    • http://www.linetoweb.com Raj Mehta

      Yes , Useful post

      thanks for sharing with us

      :)

  • http://www.a2area.it lxn

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

  • http://www.logoblog.org Nora Reed

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

  • http://travwelb.tumblr.com/ Travis

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

  • http://www.richythomas.com Richy

    Great Tutorial as always Chris.

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

  • sonusmac

    Nice & simple. I love textures. thanks

  • http://www.webmentor.cr/en/ Marco Berrocal

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

  • http://www.webdesignsolution.co.uk web design leeds

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

  • http://www.buzz-webdesign.co.uk web design hessle

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

  • http://www.17ps8.com white

    thank u,i learned a lot.

  • http://www.webdesignlinks.org/ Webdesign links

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

  • http://www.malaysiastreet.com Freelance Website Designer Malaysia

    Nice,
    Keep up the great work!

  • http://www.alurida.com Windows and Doors Accessories

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

  • http://www.newwebtemplates.net New Web Templates

    Nice tutorial. it will gonna useful, thanks