In the process of designing, there will be times that you will need to create your own tileable textures from scratch. This comes in handy when working on background, interface, texture map and virtual fabric designs. On this page, you will learn how to create a tileable texture in Photoshop that you can easily customize.
How to Use the Offset Filter
In this video clip, the instructor discusses how to apply the offset filter in Photoshop. He demonstrates how to use it to fix an image that doesn't tile properly. Although he is discussing a slightly different use for the tool, it still gives you an idea of how to operate the filter and expounds on further areas to explore. The running time is 5:34.
Introduction
Although this tutorial was written for Adobe Photoshop, you can use any standard image editor such as Paint Shop Pro or Gimp to accomplish it. This how to is suitable for those at beginner level and takes 6 to 12 minutes to finish. Below you will learn how to align an image and use the offset filter.
Step 1: Make the Corners
To begin, you should decide what you want your tile to look like. Then, figure out what shape will be in the corner edges.
- Create a new document by typing Ctrl+N.
- Set the width and height to 500 pixels and give the file a transparent background.
- Name the transparent layer base.
- Fill the layer with the color of your choice.
- Add your shape on a new layer and call it corners. Shift + Ctrl + N adds a new layer.
- To center it on the background, select all by entering Ctrl+A. Go to the main menu and pick Window -> Align Layers to Selection - > Vertical (and Horizontal) Centers. Alternatively, you can use the top alignment toolbar that becomes visible after selecting the move tool with the shortcut V.
- Open Filter -> Other -> Offset'. Enter 250 in both input boxes. Make sure Wrap Around is checked. Your offset should always be half the height and width of your document.
Center the Image
Step 2: Fill in the Center
To finish up your tile, you need to attach a center motif and some accents if applicable to your layout.
- Add a new layer. Name it centerpiece.
- Place a large shape in the middle using your preferred method. Then, center it in the window.
- Once again, make a new layer and call it accents.
- Place these around your center.
- Finish it by adding color if necessary.
Offset the Corner Shape
Centerpiece and Accents Added
Final Picture
Step 3: Test it
Now, you need to test your tile to make sure it is seamless.
- Go to Image -> Image Size and shrink the width and height of your document by 50%.
- Select the whole image with Ctrl + A then go to Edit -> Define Pattern. Name it myTile.
- Save the file and close it.
- Open a new 1000 x 1000 pixel document.
- Fill it with your new pattern. Go to Edit -> Fill and click pattern from the drop down. After that, just find myTile in the browser.
Sample Tiling
