In Part 1, I discussed creating the perfect background image, and now I'll go over making a seamless texture. A repeating texture will work great if you want your background to fill all screens and look the exact same. Your web pages will also load faster this way, since it only has to load one small square image over and over, rather than an entire background at once.
There are lots of places to find great (and free) background textures and tiles. I found this texture that I liked over at CG Textures, and opened it in Photoshop. Next, I chose the marquee tool and held down my shift key so I could select a perfect square of this wooden texture.
I cropped it by choosing Image - Crop and I can see that my image is now 400px wide by 400px tall by choosing Image - Image Size. Now to make it repeat seamlessly! Chose Filter - Other- Offset from the top menu, and then set the image to be offset by Horizontal: 200 pixels right, and Vertical: 200 pixels down (half of the image’s size). Make sure Wrap around is chosen, and click OK.
You can see my little square image has some visible lines or seams in it now, and we're going to remove those using the Clone Stamp Tool. This tool can take a bit of trial and error to get used to, but it's a very handy one. The clone tool basically overwrites an area of your image by sampling other areas. You can choose the area you'd like to sample from by holding your ALT key and clicking a spot. So for my paper seam, I held ALT and then clicked my mouse above the seam, and clicked and dragged down over the seam to paint over the edge. I did this all the way across, basically smoothing out the line with samples from other areas of my canvas.
Here is my finished image!
Now to upload it to my custom style, I click edit on the style in my Design and Options tab, and then add the wood square image to the Page section. You'll want to set the option to repeat: both.
Don’t have Photoshop but still want to make your own pattern? Try opening pixlr.com and create a document that is 400px wide by 400px tall. Then choose a color to fill your background with. I chose this off white color.
Next, choose the brush tool. To get a few interesting brushes, click MORE and then choose a set. I tried out these crushed paper ones, and set my color to be slightly darker than the off white. Then click the brush a few times over the canvas, making sure not to touch or overlap the edges, and then save your image to your computer as a jpg file.
Upload your image to the custom style editor now, and choose repeat:both.
If you find this a bit daunting but still want to try to use a repeating background, you can keep your eyes out for a pattern you like that already repeats. I found this interesting vintage wallpaper texture at Lost and Taken, and cropped a square out of it. Then I uploaded the square to my Custom style, and voila!
Here are my three different backgrounds in use!
Anyone out there using a seamless, repeating background? Let me know how you made it and what it looks like!
Why not share this with your friends?
Build a stunning band website and store in minutes
- Promote your music on your own unique website.
- Sell music & merch directly to your fans. Keep 100%.
- Grow your fan base with built-in marketing tools.
Free 30 day trial, no credit card needed.
Comments