One of the ongoing challenges web designers have is with background images. Background images are found within the background of a web page, specific DIVs, menus and navigation, sidebars, all over the place.
A well designed pattern or texture that is seamless and tiles well is one that repeats gracefully in the background, complementing the purpose of the site and not distracting. A non-distracting background is one that is literally seamless, no distinction between the edges of the graphic. It doesn’t look like a bunch of repeating blocks. It is one smooth, evenly repeating pattern that is flexible, stretching into the background no matter what the width or length of the web page.
The process involves developing graphics that, when tiled together, appear as one single image, or a gentle repeating pattern. This is often done by selecting simple graphics and blurring the edge or positioning the elements to they bookend to each other, repeating the pattern over and over again.
You can make your own or find free seamless patterns to use for your own projects.
One of the fastest tools to accomplish this is with GIMP, a popular free graphic program. Creating Seamless Backgrounds with the GIMP from Gimp Tips lists the specific steps.
To make your own, you will need a graphics program. I’ve included a list of instructions for Photoshop, PaintShop Pro (Corel), GIMP, and other graphics programs.
- Creating Seamless Backgrounds with the GIMP | Gimp Tips
- How to Turn a Texture into a Seamlessly Tiled Background | Psdtuts+
- Creating Seamless Textures Without Even Leaving Your Browser with Avairy – online photo editing tool) – DesignFestival
- Create Seamless Web Background Textures in Minutes in Photoshop | Design Shack
- How to Make a Seamless Tile – Examples and Instructions
- Make Repeating Seamless Tile Backgrounds with Photoshop
- Tile Repeated Background Image Photoshop Step 4
- Make A Seamless Tiling Background for Webpages In About Ten Seconds – How-To Geek
- Creating Seamless Tiled Wallpaper by Instructables (with images you create yourself)
- PSPUG Tutorial – Making Seamless Backgrounds in Paint Shop Pro (old but still works)
If you wish to take the easy way out and find a seamless pattern all ready to go, check out these resources for free seamless patterns. Some of these are pattern generators, too, so you can use their online tools to make your own quickly.
- 100+ Seamless Patterns Great for Creating Website Backgrounds | WebDesignLedger
- Citrus Moon Patterns: Archives
- everyday icons – Patterns
- Fractured Sanity[Dot]Org – Vers. 09 – Brushes, Patterns, Art …
- Free Seamless Patterns in PNG Format
- liajedi’s deviantART gallery
- Free High Resolution Textures – Lost and Taken – 30 Free Seamless Background Textures
- Download Free Repeat Patterns
- ava7 patterns /// 1707 free seamless background patterns
- Patterns- Patterrific
- SHIZOO DESIGN… your daily websource drug.
- Free seamless background tile image picture of nature, forest, wood, flower, tree, leaf, rose, fern and more by StarFields
- AppendixSquared V.5 || Homecoming
- BgPatterns — Background Patterns Maker
- Browse Patterns :: COLOURlovers
- DinPattern – Free seamless patterns » Patterns
- Tiles & Patterns
- Background Textures and Images Library, Free Download – GRSites
- Freebies | Hybrid Genesis (includes more than just tile patterns)
- Free Background Patterns
- Dromoscopio – Libreria di Background Pattern / Background Pattern Library
- 50 Useful and Free Seamless Pattern Sets
- Seamless Pattern Background Designs
- Free vector patterns | Illustrator patterns | Free patterns from Patternhead
- Squidfingers / Patterns
- Stripe Generator – ajax diagonal stripes background designer
- Stripemania – Striped background generator
- Tartan Designer – Tartan Maker – Tartan Background pattern generator
Hat Tip to Fractured Sanity for the free pattern.
If you can, please let me know how did you create the word cloud for your header. Thanks in advance.
It is a Wordle. Available online for free.
Hi Lorelle, just wanted to add this seamless iconic pattern generator service – http://patternico.com to your compilation.
Originally we had created it for ourselves because it just was waaay to long to do this task in Photoshop every time but now we decided to release it in public so everyone can use it, hope you like it!