How to Seamlessly Tile an Image to Create a Repeating Pattern Using Photoshop

How to seamlessly tile an image to create a repeating pattern using Photoshop. An image with a repeating pattern created in Photoshop is often referred to as a tiled image- that is, a composite formed from a single image that lines up edge to edge like identical square tiles. An image tiled in Photoshop can be used for many purposes, such as the background of a web page, or for printing patterns on fabric or paper.

Creating a pattern using Photoshop that will seamlessly repeat an image is not difficult once you learn the technique. Note that screen shots of the main steps of this process can be seen in the author's easy-view slide show tutorial (link here and in Resource section below)

1. Start by creating a new file with a perfectly square background. In this case, the image size is 7.5 inches by 7.5 inches at 72 pixels/inch, with a solid black fill. I chose this size background to place an image of a Halloween Jack-o-lantern that is about 3.5 by 3 inches. Save the image as a .psd file.

2. Before proceeding, make a note of the size of your image in pixels. (Go to "Image" at the menu bar at top, then select "Image Size" from the drop-down The dialog box will show the image size in pixels at the top.) In this example, the image is sized at 540 pixels by 540 pixels.( refer to Image #2 above)

3. Create a new layer and place an image in the center of the square. Size the image so that there is a border around the image about equal to its height and/or width. The image on this layer should have a transparent background. From the menu bar at top, choose "Select All" then copy and paste the image to a new layer. You will have two identical layers above the background layer.

4. Hide the top layer by clicking on the eye icon in the Layers palette. Select the layer above the background. Then, from the menu bar at top, select "Filter", then "Other", then "Offset" from the drop-downs

5. In the Offset dialog box, you will need to type in a number in both the Horizontal and Vertical offsets that is exactly half of the image dimensions in pixels. In other words, the image size is 540 pixels by 540 pixels. 540 divided by 2 is 270. So, in this example we type 270 in both the horizontal and vertical offset boxes.
Notice that there are 3 check-boxes below the offsets with other options. Check the last option, which is labeled "Wrap Around". Then click OK. The image on the layer is instantly divided in quarters. Each quarter of the image is automatically placed in a corner of the square. (refer to image #3 above)

6. Now make the top layer with the copied image visible again by clicking in the space for the eye icon in the layers palette. Save your image.

7. In order to save the tiled pattern you have created, next click on "Edit" in the menu bar at top, then select "Define Pattern" from the drop-down Save it with a suitable name: by default it will place the name of your current image, which is fine if you like. The pattern you have defined is now saved permanently as an Effect and can be accessed from the Layers palette on any Photoshop file you open or create new. (refer to image #4 above)

8. So let's make a new image that uses the tiled pattern. You can create the new file at at any size, and the pattern will fill the available area of the image. (Set the image resolution at the same pixels/inch as your tiled image) Note: when you create a new image file, you must either duplicate the background layer or create a layer form the background to enable the effects dialog. This can be done by right-clicking on the background layer in the layers palette and selecting the available option.

9. Next click on the small icon labeled " fx " at the bottom of the layers palette. Then select "Pattern Overlay" from the drop-down. By default you see a square thumbnail with an image of gray bubble-like forms. On the right side of the bubbles is a vertical bar with a small black triangle. Click on the bar and, from the drop-down, select the small icon picturing your saved tiled image. Presto! Your tiled image instantly repeats and fills the entire image area. (refer to image #5 above)

Resources:
Slide Show Tutorial by the Author: http://www.associatedcontent.com/slideshow/57152/how_to_create_a_seamless_tiled_image.html?cat=59