home tutorials forums downloads contact-us
Curves Usage Tutorial Levels Adjustment Tool Patchwork Background Effect Modern Layout Complete Fresh Tutorials:
Last Update: 2.14.2007
Online: 113 Users
Advetise on For only $50 per month! Tutorials Photo Effects Seamless Repeating Tile Background

Seamless Repeating Tile Background

In this tutorial you will learn how to take a photograph, or image and turn it into a seamless repeating tile background for using in your HTML documents, web page designs or desktop backgrounds. The steps to creating a seamless tile background are difficult to figure out on your own, which is why we created this tutorial. After following along with this tutorial, and a few simple steps you'll be able to create a seamless repeating tile background out of nearly any image using adobe Photoshop. Here is an example of what we will be creating with this tutorial:
Note: Click image to launch HTML example.

Click for HTML example

Download File Download Seamless Repeating Tile Background Source Package

Page 1 of 1

Step # 1
Open up the photo or image that you'd like to create a seamless tile background with. If you'd like to use the same flower image that was used for this tutorial, simply open the flower.jpg file found in the download pack for this tutorial. Note: Free registration required.

Step # 2
Press CTRL + J on your keyboard to duplicate the layout, and name this new layer "Back Edit" as shown here:

Press CTRL + J on your keyboard again, to duplicate the "back edit" layer we'd just created, and name this new layer "Center Out":

Go to Filter->Other->Offset and set both Horizontal and Vertical to half the image's dimensions.
For instance, the image l'm working with here is 752x500 pixels in size, so l'll use 376x250 for my settings.

If you're using an image other than the flower.jpg"> used in this tutorial, you can get the image dimensions by going to Image->Image Size.


Step # 3
There is now a space in the center of the image, where you can see the old edges meeting. This is where we'll start erasing to expose the image beneath. Get out the Erase tool (), with the following settings:

Now make sure that the layer named "Center Out" is the one that you have currently selected. And begin to erase the central area to expose the contents of the layer beneath it. Here l've turned off the visibility of the layer beneath so you can see where l have erased:

Here l've colored the area that l erased ORANGE, so you can see what portions of the image have been erased:

And here's a real time example with the results of erasing the center portion of this layer:

Step # 4
Finally you'll want to get out the Smudge Tool () and apply similar settings as shown here:

And smudge slightly around the edges of the image, and anywhere that you can see the seam near the center of the image, vertically or horizontally. This can take some time to you'll want to continue to touch up and refine the graphic until the final composition is something that you are happy with. Here is how my example turned out after smudging the edges to create a seamless tile:

Click for HTML example

If you enjoyed this tutorial, please be sure to check out the rest of our Great Tutorials while you're here!

Download File Download Seamless Repeating Tile Background Source Package

Author: DewDrop
Discuss this tutorial on the Forums
9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more  graphics, tutorials, softwares, designing, free training, downloads Windows GUI MODS Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page