Create Seamless Web Background Textures in Minutes

by on 13th May 2010 with 89 Comments

Ever wondered how some web designers come up with such great background textures? It’s actually way easier than you might think. It only takes a few minutes and a single Photoshop filter that you’ve probably never used.

Intrigued? Read on to see the step by step instructions for creating tileable textures out of almost any image.

The Easy Way or the Hard Way

There are two ways you can go about starting this project. You can either go grab a pre-built texture or create your own from scratch. For this tutorial I want to give you your money’s worth so we’ll be taking the high road and creating our starter texture from the ground up.

However, if you’re in a hurry just grab a free texture from somewhere and skip the first few steps. Here are three great resources to get your started (from our article “40 Amazing Resources for Design Freebies”).

Lost and Taken

screenshot

CG Textures

screenshot

Texture King

screenshot

If you want something more unique, open up Photoshop and follow along.

Step 1: New Canvas

Tiling background images can be fairly easy to spot when they’re small so I’m going to make mine fairly large. We’ll be saving it as a JPG so the file size should stay plenty small enough to load quickly on most connections. If you disagree with the large size, simply make yours smaller!

In Photoshop, create a new document that’s 800 pixels by 800 pixels at 72 DPI and in RGB.

screenshot

Now fill your canvas with a mid range to dark solid color. You can choose anything you like, but I went with #80ac4b.

screenshot

Step 2: Create a Custom Brush

I’ve noticed that bokeh textures seem to be really popular lately I decided to show you how to build one. It’s a good example because it’ll make a texture that’s a little trickier to tile than most.

To start off, create a new document, grab a hard round brush and click once in the center of the canvas to make a black dot. I’ve given mine a slight black outer glow to add to the bokeh effect a bit. Now go to Edit>Define Brush Preset.

Name your brush, save it and switch back to your other canvas.

screenshot

Now select that brush, go to your brushes palette and apply the following options to give it a nice scatter effect.

screenshot

Ste 3: Paint It

Now that you’ve got a nice brush to work with, paint in some bokeh. Don’t get too carried away, remember that the more complex it is the harder it will be to go in and fix when we convert it to a repeating pattern.

Here’s the pattern that I came up with:

screenshot

Step 4: Offset

This is the part where Photoshop takes over and does a neat trick that saves us a lot of time. First make sure your layers are merged into a flat document. Now go to the menu and choose Filter>Other>Offset.

Set your horizontal and vertical offset to half the pixel dimensions of your canvas and select the wrap around option.

screenshot

Voila! A seamless background texture. Ok maybe not. However, much of the work has been done for us and we just need a little cleanup to make it work.

Step 5: Cleanup the Seams

If we were working with a photographic texture, we’d go in and clone along the seams to make sure everything looked decent. However, here we’ve got a solid color background so we can actually just paint with a green brush.

Go in and completely paint over any problematic areas. It’s all right if you destroy some bokeh in the process. As you can see in the picture below, I’ve flattened out one of my circles a bit while repairing the texture. We’ll fix this in the next step.

screenshot

Step 6: Adding Some More Bokeh

Now grab the bokeh brush that you made and turn off any scattering effects you turned on earlier. Add in some extra bokeh one click at a time where there are noticeable gaps in the center of the image (stay away from the edges!). Use a few layers and varying opacities to make it look nice and replace any circles you messed up with the previous step by painting right over the top of them.

screenshot

When you’re finished with this step, you should have a beautiful and perfectly tileable background graphic. Now save that out as a JPG, keeping your file size as low as possible while maintaining a crisp image. I decided to save mine out at 500px by 500px so I could easily spot the repeating pattern and look for troublesome areas.

Next we’ll test it out in a web browser to be sure it works.

Step 7: Throw it in a Web Page

The best way to test out the texture is just to create a quick web page. Create an empty HTML document and style the body with the following CSS:

body { background-image: url(yourFilenameHere.jpg); background-repeat: repeat; }

Now preview it in your browser to see how you did. Don’t worry if it’s not perfect, just go back and tweak any areas that need to be fixed. As you can see in the image below, we’re tiling pretty well! Not bad for only a few minutes of work.

screenshot

Organic Textures

Just to be thorough, I want to also show you how this works with a texture that’s a little more typical with the resources you’ll find online. Here’s one that I grabbed from Flickr.

screenshot

First cut off the edges, they’ll be too easy to spot in a repeated pattern. Then run the offset command like we did before.

screenshot

As you can see in the image above, this texture is so perfect for this technique that it’s hard to spot the seams even before we do any cleanup! Still, go along the seams with either the clone tool or healing brush to make sure the transitions are nice and gradual.

When you’ve done that, save it out and load it up in the browser like before to see if you’ve got any ugly areas.

screenshot

The image above shows my final product. Going through it a second time with a much easier texture to work with I was able to cut my time down to about two minutes!

Conclusion

This method is so quick and easy you really have no excuse not to give it a shot the next time you want to spice up your web design’s background. Creating your own tiled textures rather than grabbing a ready made one will help keep your site looking unique and gives you a lot more freedom in what type of texture you want.

Let us know in the comments below if you were able to come up with a decent tile using this method. Leave a link to your final product so we can check it out!

Comments & Discussion

89 Comments

  • Carmen Anzelmo

    It’s very, very useful! I looked for a tutorial like this. Great job.

  • http://www.fenotype.nl Lourens

    Finally a good tutorial about making patterns. Read two more tuts which didn’t use the amazing offset tool. Thanks mate!

  • matt

    thanks! very helpful. in truth, i was pretty surprised to learn how easy this is.

  • http://www.designshack.co.uk Joshua Johnson

    Thanks for the feedback guys! Glad you found it useful.

  • http://www.vivrocks.com VIVROCKS

    THATS AWESOME, and just in time :) TWEETED

  • Zlatan Halilovic

    I was struggling to make a tiled background in photoshop, but after reading this tutorial, the process seemed smooth as a babies bottom :)

  • http://jamesduncombe.com James

    Like it, cheers mate. I learnt about the offset tool in Photoshop a while back and it’s so useful for creating seamless textures for tiling etc.

    As you said the clone tool helps neaten up the seams.

    Cheers,

    James

  • http://www.thatdeadpixel.com Mike

    great method, I’ve never seen this method described before. Hopefully the next time I need to make a background I remember it!

  • http://www.jordanwalker.net Jordan Walker

    Excellent tutorial, this is something that has been a challenge for me.

  • Pingback: The Tweek List, 5-14

  • http://www.BertrandLirette.com Bertrand

    That is neat, thanks for showing the technique! I didn’t know that filter either.

  • Pingback: Friday Focus 05/14/10: Icon Parade | Devlounge

  • Chris B

    This is a great tut. Thanks for all the work and the excellent visuals.

  • Tom

    So simple yet so powerful. This is a great technique for accomplishing something I’ve struggled with getting professional results. Love the tutorial. Would love to see more about working with textures.

  • John A.

    NICe! thanks! didnt know that was that easy :)

  • http://www.bistro-site.ru Roman

    Great method! Here my experience with photo:
    http://www.bistro-site.ru/bgs/index.html

    some grossly, but i’ll fix it.

  • http://blog.larsjung.de Lars

    Handy tutorial, easy and useful!

  • http://jimfmunro.com Jim Munro

    Cool, thanks. Even I might be able to follow this tutorial! Bigger thanks for the texture art sites, I already had one but I can always use more!

  • Pingback: Things I Found Interesting Around May 17th | Chris Coyier

  • http://www.webpixel.be Pieter

    Very usefull photoshop trick ! Thanks

  • http://www.mattstow.com Matt Stow

    Or you could just use PaintShop Pro Photo’s Seamless Tiling feature and have complete control over how it tiles.

    That feature alone is worth the price tag.

  • http://www.mohdesign.de Marvin O. Hassan

    Quick and helpful. Very nice!

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    Great, love this thanks.

    The first tut is very Evato ;)

  • http://design83.pl jahoo

    Great & very usefull tutorial! Tahk You.

  • Atika

    Thanks a lot ! I am always surprised by Photoshop functionalities I don’t know. Very very useful ;)

  • John Smith

    Thank you very very much. I have been searching for a tutorial like this for years. Probably the most immediately useful and practical tutorial I’ve ever read.

  • http://www.gicreative.com Gary E. Irwin

    Amazing tutorial…I had no idea about that very handy offset function. Thanks a bunch for sharing.

  • http://www.free-ebooks.gr Dimitris Savvopoulos

    Really useful and fast. Thanks.

  • http://www.goblinridge.co.uk Ted Thompson

    Excellent tutorial, very helpful!

  • http://www.cvul.com/ cvul

    Thanks for sharing. Really handy trick.

  • http://ru-anime.ru Nana

    I think something like that I have seen since 10 years ago. But something is newer?

  • http://www.kensfi.com ken the tech

    hadn’t got that far with ps but you’re article gave me the curiosity to do more :) glad to find this blog. Thanks!

  • http://www.cssrex.com/ CSSReX

    Nice tut man! Appreciated :)

  • Flick

    Straightforward tutorial = brilliant! Thanks ;)

  • http://markus@slivka.se Monsoon

    Thanks for a great and well done tutorial! Big ups.

  • Pingback: This Week’s Favourites – May 28th 2010

  • http://www.janslyn.dk Jan Krogh

    Very helpful – Thanks for sharing!

  • Haziq

    Excellent! Learned something new. :)

  • Niti Arora

    Great tutorial! very useful!

  • Pingback: Inspiración en Internet Junio 2010 | El Rincón de JaviGracci

  • http://www.jmdesign.info Mirko

    Great tutorial, good and simple explanation, for everyone!

  • Pingback: Create A Moveable Sticky Note with MooTools and CSS3 | Design Shack

  • http://startwmlife.com wantfee

    That’s the most useful tutorial I have ever seen. I’ll use this tech on my own site. Thanks very much!

  • Pingback: 在Photoshop中创建不规则无缝拼接图案 - 飞鱼的声纳

  • http://w3spor.no Åsel

    Nice and useful tutorial! Thanks for sharing your technics :-)

  • http://mcsparrandesign.com kim

    I made the dot . but when I went to edit it wouldn’t allow me to select the define brush preset. What do Ido?

  • http://www.kropped.com kropped

    Nice collection

    I’d like to suggest my site http://www.kropped.com for free 3d textures ideal for use in photoshop or 3d modelling.

    Thanks

  • http://www.babypages.org Jennifer

    Very nice. With a little time spent cool repeating backgrounds look very good on websites I think!

  • http://chrismcallister.net Chris McAllister

    Thats a wonderfully simple answer to a very difficult problem and has opened up a lot of options for my future designs. Thanks

  • DmitriyTL

    Texturelib – free texture library.
    Excellent quality. Conveniently categorized. Most of the images are
    3264 x 2448. Free for commercial and personal use.

  • http://www.darrenrivers.com Darren

    Wow just what I have been searching the net for! Many thanks for sharing this. I have Bookmarked the page for future reference.

    Nice one
    Darren

  • Pingback: Linen love. « sideoats + scribbles

  • Pingback: PhotoShop偏移(Offset)命令制作无缝拼接图案 – 离恨天文库

  • Pingback: HTML/CSS Recap + Advanced CSS « IM190-1: Web Basics

  • Pingback: HTML/CSS Recap + Advanced CSS « IM190-2: Web Basics

  • http://youtube Adrijana

    hi

  • http://Arizonalandforsale.info Tom Woods

    Very useful. Thank you!

  • http://gsanmiguel.ca Giselle

    Thanks for this! I never knew there was such a tool in photoshop to make it so easy.

  • Pingback: ( the graphic designer's club ) - Page 1835

  • Pingback: Enlaces que quizá necesites para diseñar una web | CSSBlog ES

  • http://villancikos.com villancikos

    It’s neat, I wasn’t looking for this but it’s good to know!

  • Pingback: Enlaces que quizá necesites para diseñar una web » Blog diseño web Valencia

  • http://www.tri-win.com Michael

    I appreciate the tutorial. I never new what the offset filter did until now.

  • Pingback: [Novedad] Proyecto - Portal MU ONLINE CONTINENT of LEGEND

  • Pingback: Texture tile in web-based image editor - SitePoint Forums

  • http://plantillas.net78.net Tonny

    Excelente tutorial. Gracias :D

  • Sara

    Thank you!!

  • http://www.peterson.com Carl

    Wow! I can’t believe how easy that is. I just made a perfectly tiled background texture in under two minutes. This is cool.

  • Jodie

    EXTREMELY helpful. Thanks so much for taking the time to post these instructions. Well done. :)

  • Pingback: beautiful textures - eyelearn

  • Erin

    This was extremely helpful. Thank you so much!

  • elkidogz

    Very well done, simple to follow.

  • Betagod

    Thank you so much, really very helpful article indeed, I shall now go forth and multiply!

  • Adina

    Whew! a Dumbed down tutorial!! Thanks so much! this made it sooo easy!!!!

  • http://teamcvoter.com Shah faisal

    Really Very nice and useful ………!

    Thanks……

  • Carolyn

    This is _exactly_ what I was looking for. Thank you!!!

  • http://smartedesigners.com Smart eDesigners

    Thanks. I searched, i found!

  • Pingback: How to Create Seamless Background or Tiled Patterns | Learning from Lorelle

  • Pingback: Photoshop for the web - eyelearn

  • Pingback: How Can I Tile This Background Image ?

  • Pingback: 3.4.13

  • Pingback: Create a Moveable Sticky Note With MooTools and CSS3 | IT Swapps!!

  • Pingback: Muster, Hintergrundmuster, Pattern, Kacheln

  • Pingback: Designers TO DO – 10th July | Free Oxford

  • Pingback: Designers TO DO – 10th July | Free Oxford

  • Pingback: Photoshop for the web - eyelearn

  • Pingback: Photographer Resources and Downloads-The ever growing list | AMSW Photography Blog

  • Pingback: Week Ending December 20, 2013-Backgrounds | Ms. Cleary~Business Education

  • Pingback: eyelearn » bitmap images for the web

Subscribe
Membership
About the Author