Repeating Seamless Background Image Tutorial
A trick often employed on webpages is to use a seamless background that can tile both vertically and horizontally. If your website gets alot of traffic and you don’t like paying for extra bandwidth costs you need to optimize your site for every single kilobyte. This generally translates to NOT using a giant JPG as a background. (unless you’re doing silly myspace layouts) This tutorial will explain how to make seamless backgrounds for your webpages.
Step One -- Identify image you want to use as your seamless background
In this case I’ve put together a 500x500 red and gray image that I think will work as a textured background that I created using some of my own custom Photoshop brushes. (created using the custom Photoshop brushes tutorial) It’s important to know the height and width of your image for the next step in the tutorial so be sure to write down or remember what your height and width are. 500x500 may be too large for some websites since you may want to use something more like 100-200px in height and width, but for this example we’ll use a fairly large image:
Step Two -- Offset the image
The second step to properly making a tile-able background is to offset the image. My image is 500px wide and 500px high so I will be offsetting this image by 250px both vertically and horizontally. To do this I use the offset filter. (Filter>Other>Offset in Adobe Photoshop CS3)
I set the Horizontal and Vertical offset values to exactly 50% of my image height and width and set the undefined areas to wrap around. After clicking ok I get an image that looks like this:
This isn’t quite what we want our background to look like… Ideally our background has no seams in it and appears to be one large image which leads us into step three of the process
Step Three -- Clone Stamp out the seams
One of my personal favorite tools that Photoshop has to offer is the Clone Stamp Tool (s key on keyboard to select it) I’m not going to go into great detail about how to use it except to say that if you’re not using the clone stamp tool then you need to start to.
After selecting the Clone Stamp Tool you need to choose a sample area in the image. Hold the alt button, (or option on mac) and a crosshair will appear, you then need to click in an area away from the seems preferrably in the lower left or lower right area. After clicking you can release the alt/option button and your brush will appear again. You can at this time use the clone stamp tool just like you would a brush and draw over the seams. As you drag the mouse over your seams you will see that is has cloned the portion of the image you just sampled. Here’s a video on Youtube that outlines how exactly the Clone Stamp works in detail:
One trick I like to use when sampling the areas of the image is to use either a soft brush:
Or for instances like this where I have a textured image I like to use my textured brushes:
After you’ve clone stamped out your seems your image should look something like this:
Step Four -- Check to make sure it tiles properly without seams
To make sure it will look alright for for tiling I recommend using the Offset filter again by hitting cntrl+F or apple+F or you can just goto Filter>Other>Offset and hit ok. The image should re-wrap itself by 250px vertically and horizontally and you should still not see any seams. If you do, repeat step three and clone stamp out the seams.
Step Five -- Define Pattern to save for later use
If your image is going on the web you can export it now and use the necessary CSS code to tile your background either vertically, or horizontally and vertically as you can with our image and you can see your results on your webpage. Ex:
background: url(path/to/image.jpg) repeat-x repeat-y;
If you want to use the tile-able seamless graphic in Photoshop then you need to create a defined pattern for your image.
To do this, select all (cntrl+a or apple+a) and goto Edit>Define Pattern… then name the pattern and hit ok.
Step Six -- Fill with Defined Pattern
To fill an area with your newly defined pattern goto Edit>Fill… and you should see the fill window popup. Set the “Use” drop down to “Pattern” and then select your pattern from the list below as I have:
After clicking ok you should see that the image (or selection) has been filled in with your seamless texture. You can see the result of my tiled image by clicking on the thumbnail below:
Conclusion
One thing you’ll notice about my image is that it will have a repeating area of lighter red texture and some gray splotches that may be easily seen when tiled over and over again. The way to get rid of this is to keep resampling the original image with the clone stamp tool in the begining steps to get rid of clearly noticeable areas of pattern. The less variation in the texture/colors of the image the less noticeable it will be that the image is a tiled graphic. This technique is currently in use in the main content area of the Assault website.
Additional Links:
- Assault Blog (hint: you’re on it now)
- Assault Shirts -- also using tiled image in center of website
- Creating Custom Photoshop Brushes Tutorial
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
Repeating Seamless Background Image Tutorial…
Repeating Seamless Background Image Tutorial | Assault Appa…
[...] Se poi magari le texture volete realizzarle da soli, potrebbero fare al caso 40 excellent Photoshop tutorials for texture and background e Repeating Seamless Background Image Tutorial. [...]
Thanks dude!
After scouring the www, here’s a tutorial that’s fast, direct to the point and, best of all, it’s the right thing to do.
Hi Nice Tutorial
But images are missing ….
Thank You,
Biju Subhash
[...] a gigantic background image can be circumvented with some skillful clone tool stamping and tile-able background image placement with CSS, but in case you need it there is a way to make your background image be scalable for [...]
Hi, I appreciate your tutorial- I used it, and it worked! Thanks so much!
[...] – Repeating Seamless Background Image Tutorial [...]
This totally worked! Thanks so much!!!! I was getting so frustrated! =)
One of the best concise tutes i have seen.Hardcore i want any more you have please direct me.
[...] Repeating Seamless Background Image Tutorial [...]
[...] Repeating Seamless Background [...]
Where did my seams go? Don’t care! Thanks for the tutorial, fast and easy…
[...] Repeating Seamless Background Image Tutorial [...]
Awesome tut! Thanks so much!
[...] used this tutorial by Assault Blog to teach me the basics on adjusting a pattern to make it [...]
Thank you so much for the tutorial. I was reading my assignment and realized I was totally alone with an assignment I did not know how to complete. It will be very helpful in my project.