Creating Seamless Textures Without Even Leaving Your Browser

Tweet
Yale University School of Art

Yale University School of Art takes a somewhat ol' school approach to tiled backgrounds

Last week someone pointed me to the Yale University School of Art and their .. well .. interesting and arguably ironic use of tiled backgrounds. Depending on your vintage, you may have flashbacks to MySpace, Angelfire or even the recently-departed Geocities, but it got me thinking.

Tiling backgrounds are like the crocodiles of the web design world. They first evolved in the ‘Jurassic’ period of the web, outlasting dinosaurs like table-based layouts and font tags. Sure, they can be ugly and scary as hell but, like crocodiles, they’ve stuck around a long time because they work.

Ok, that may have been a conceptual stretch, but I watch a lot of Discovery channel.

Looking forward, we’re only likely to see more tiling backgrounds. Now that all the current browsers (IE9, Chrome, Firefox, Opera, and Safari) are finally supporting the use of multiple backgrounds on a single element, there seem to be some great opportunities to weave different sized tiles together in new and interesting ways. However most of the time you’re going to want your image swatch to tile without visible edges or seams.

So, how do we do that?

The most common method to produce seamless tiles involves using Photoshop’s offset filter to move the joins to inside the image area, and then to manually retouch the joins with either the healing brush or clone tool. Now there is no argument: this gives you a good result but it does require some work and, when complex patterns are involved, often some considerable skill.

There are some excellent commercial seamless tiling tools that are primarily aimed at game developers and 3D modellers (Genetica, Pattern Studio and PhotoSEAM are good examples).

If you see a regular use for these tools they are great, but maybe overkill for us. There are some paid Photoshop plugins and some raw, homemade apps out there, but I have to say nothing impressed me. What if you could make a quality seamless tile without installing anything, or even leaving your browser?  Read on.

  1. Sampling a wallpaper texture from Lost & Taken

    Sampling a wallpaper texture from Lost & Taken

    Today, we’re going to use some of the Aviary suite of online graphics tools, To play along, you might want to consider installing the Chrome or Firefox extensions that interface your browser directly with their service. It’s not necessary to get a result, but it will streamline your process. It’s your call.

  2. I’m going to start with an old wallpaper texture from Caleb Kimbrough’s stunning and ever-growing collection at Lost & Taken. When you’ve found a texture you like, use the Aviary extension to screen capture the browser window. It should load straight into Aviary’s Image Markup Editor (aka Talon), where you can use the crop tool to trim your image down to a nice section of texture. You don’t need to be too precious about exactly where you crop your patterns — we can fix that later — but try to select an area that is relatively flatly lit.
    Talon Markup Editor

    Crop your image to a workable size and then transfer it to the effects editor

    Next, hit the green ‘Image Effects’ button on the top right to transfer our image to Aviary’s Effects Editor (aka Peacock)– this is where the nifty stuff happens. When it is loaded, the workspace should show tile of your texture (labelled ‘Resource’) with an output canvas below it.A connecting arm automatically joins our sample texture to the canvas.

  3. Now open the ‘Effects’ tab on the left edge and you’ll find a drawer containing around 40 effect types. Rummage around till you find the ‘Seamless’ effect and drag ‘n’ drop it between our texture tile (Resource) and the canvas.
  4. Connect your resource, effect and canvas together

    Connect your resource, effect and canvas together

    We need to ‘wire’ these elements together. If you positioned the seamless effect just right, they may have wired themselves together automatically.

    If not, it’s no big deal. Just drag a connecting arm from the tiny handle on the bottom edge of our sample and the handle on the top edge of the Seamless effect tile. Follow the same process to connect the Seamless effect to the Canvas. You should now have a nice daisy-chain of Resource to Seamless to Canvas.

  5. Select the Seamless effect and you’ll see its properties displayed in the panel on the right. Frankly, the default settings aren’t very useful, so reset the horizontal and vertical blends to zero and the horizontal and vertical offset to 50%. This will move the hard-edged seams to the center of the canvas, making them much easier to work with.
  6. Now for the magic. Begin gradually sliding the horizontal blend settings and the hard-edged vertical seam should start to evaporate before your eyes. If your original sample texture is an organic texture (paper, grass, marble, etc), almost any blend of around 10% should work fine. Man-made, repeating patterns such as wallpaper and fabric will take a little more fine-tuning on your part, but it’s not super difficult.

    Peacock in Action

    Slide the horizontal blend settings and the vertical seam should start to evaporate

  7. You’ve probably guessed the next step. Use the vertical blend slider to remove the horizontal join.
  8. When you’re happy with the result, click on your canvas element and check the ‘Adapt Display Size to Input Bitmap’ checkbox in the properties panel. This will automatically crop off any empty image area for you. Voila! You should nowbe looking at a perfect seamless tile.
  9. Now you just need to download it. In the ‘File’ menu at the top you can use the ‘Export Canvas as Bitmap’ option to download a copy. You can also save a copy to your Aviary account if you have one.

Here’s the finished tile from the example and I’ve created a little demo page to show it action.

The final seamless tile

The finished seamless tile

Note: You may notice an Aviary watermark in the bottom corner of your image. This is turned on by default, but can be turned off in your profile settings. You need to have an Aviary account, but it doesn’t cost you anything.

Summary

As you’ve probably already worked out, the Effects Editor does a lot more than just generate seamless tiles. Peacock is a sophisticated tool designed to let you mix and match photographic source files, generated fractal patterns, procedural textures, lens effects and filters to create almost any surface you can conceive of. We’ve barely scratched the surface today, but the seamless tile generator is a great way to get something of value from Aviary while getting your feet wet.

Texture samples

You're probably walking past or eating off great surfaces every day. Stow them away for a rainy day.

In this demo I started with one of Caleb’s textures, but if you scour the web, you’ll find great, free, raw materials everywhere. In the past I’ve sampled textures from commercial tile retailers, specialty paper suppliers, fabric wholesalers and brick manufacturers.

What’s more, most of us carry high-quality ‘texture capturing devices’ in our hip pockets. Just be aware of what your eyes are seeing, grab and stow it away. It shouldn’t be long before you’ve got your own super-useful collection of free raw textures.

Have fun.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Untriangulated

    awesome article. thank you!

  • http://twitter.com/jhapik jhapik

    Great tutorial, Alex! I have read about Aviary, but I have never watched its results. Thanks a lot. :-)

  • http://www.facebook.com/profile.php?id=559080627 Chris Smola

    I gave this a shot and the image produced (a .jpg in this case) was slightly corrupted when I opened it in Photoshop. Why did I open it in PS? Because when I tiled the image it had a bottom border that was a bluish color, defeating the purpose of a tiled image. When I attempt to make another, the app stalls when I hit the Image Effects button. I shut down my browser (FF3.6.15 using the extension) and reopened it to no avail. Maybe restarting my Mac will do the trick, but it shouldn’t have come to this. =

    • http://twitter.com/alexmwalker Alex Walker

      Hey Chris,

      The bluish tinge is a strange one. It shouldn’t be introducing anything new into the image, so I wonder if it was hidden in the original image. Tough to say without seeing the source file.

      Most of the Aviary apps are Adobe Air, which means they have the same potential performance issues that Flash has on the Mac. I’ve mostly used Aviary with Chrome — that might give you more stability.

      However, it is true that this new class of cloud-based apps are still evolving and, for now at least, aren’t quite as robust as their desktop equivalents.

      Still, when they are free, machine-independent, and cross platform, I think that’s a pretty compelling case. I could see a time in 2-3 years time where I’m doing most of my work in apps like this.

  • http://twitter.com/christopherscot Christopher Scott

    good stuff; i’ve used aviary in the past, but i had no idea you could do stuff like this. Thanks for the tip!

  • Ashli

    Thanks for the informative post. I can point my friends without photoshop here so I dont have to make their images tileable all the time :)

  • http://twitter.com/AstroTim Tim Holt

    This is so awesome. I am always looking for good seamless tiling images for backgrounds and I’m not the best at ‘shopping them myself. I just made an entire brick wall in 5 minutes!

  • http://twitter.com/mistercorso Mister Corso

    A million thank you’s for this. I’m tired of messing around with PS’s offset (it’s the only time I miss ol’ ImageReady and its tile-maker), especially when I’m in a time crunch and need to experiment with a quite a few large background tiles. Your article came just in time…

  • CarinaT

    What a nice tutorial! It opened my eyes to a whole new world (not really that experienced and this is so easy) – thanks!

  • http://www.intellisites.com Web Design Albany

    NEAT. I used that photoshop offset filter trick thingy before. Worked well, but definitely required some elbow grease. Results weren’t perfect, either.

    Thanks for the tip.

  • Explosiv

    Got it to eventually work once, then had problems with app freezing each time I hit Image Effects (using Firefox 4.0) even after restsrt. Nice potential, but not worth the hassle when it plays up.

  • Blitzgone

    I just have to say, that was great! I need a smoke now.

  • http://profiles.google.com/carebridges r2 test

    thanks for this online alternative
    with the gimp, it have for years now been as easy as Menu Filter > Map > Tile

  • http://www.facebook.com/evildarren Darren Rogers

    Great little tutorial, never used the Aviary software before…..but will be certainly having a longer look when I get chance….thanks :)

  • http://cleversomeday.wordpress.com/ Kay

    Thanks for the great tutorial. Wish PS had the sliders and tiled preview to make it this easy.

  • http://projectpoint.in Ram Kishor Agrawal
  • James Martindale

    I’m just happy with using the ‘Make seamless’ filter in GIMP :)