Learn Adobe Photoshop Free

Tiling Textures 2

Making Seamless Tiles or Pattern Fills

The previous tutorial covered how to make uniform background tiles and fills. This tutorial shows how to make them mate together seamlessly. When you first create an image it doesn't necessarily mate seamlessly together when it is used as a background tile on a web page or as a pattern fill in Photoshop®. You have to edit the edges in a way that they blend together seamlessly when the image is used as a tile.

1. The way to do this is to divide the image into 4 equal sections, rearrange them, edit the edges then reassemble them into their original positions. Figure 1 below represents how an image is to be divided into 4 equal sections. Figure 2 shows how to rearrange them for editing:

Figure 1

Figure 2

Adobe has provided the Offset filter in Photoshop which handles all the steps of dividing the image into sections, rearranging them, then reassembling them into their original positions.

2. The first most obvious requirement, then, would be to make the image with an even number of pixels in both width and height. This way you can divide the image into 4 equal sections. For this tutorial we will start by making a new RGB image 100 x 100 pixels at 72 pixels per inch. Save the new image as "GREENBK.PSD" Set the foreground color to R=73 G=125 B=128. Using the bucket tool

flood fill the image with the foreground color:

Note: The images in this tutorial will be displayed twice their normal size for clarity.

3. Next apply the texturizer filter by clicking:

Filter > Texture > Texturizer > Sandstone

Then select:

Scaling=100%
Relief=4
Light Direction=Top

Then Click "OK".

4. This gives you a raw fill. It may or may not tile seamlessly.

5. Next apply the Offset filter by clicking:

Filter > Other > Offset...

Then select:

Horizontal=50
Vertical=50

Wrap Around

Then click "OK"

6. You can now see how the edges will mate when the image is used as a tile. The seams will show up in the horizontal and vertical centers of the image:

7. Select the Rubber Stamp Tool

(the cloning stamp) and a small, smooth brush from the brushes palette. Next select a uniform area of the image as a source point to clone from. Then with short, quick clicks carefully blend the horizontal and vertical centers to smooth away the hard edges. Take care to avoid the outside edges of the image so as not to upset these areas when the image is reassembled:

8. Now reapply the Offset filter by clicking Ctrl-F, or with the menu commands:

Filter > Other > Offset...

This will reverse the first application of the filter and reassemble the image into its original order:

9. Now it would be wise to test the tile using the same technique as the previous tutorial. With GREENBK.PSD still active, click Ctrl-A to "Select All", then:

Edit > Define Pattern

Next make a new RGB image 800 x 800 pixels at 72 pixels per inch. Then click:

Edit > Fill

Select:

Contents:
Use=Pattern

Blending:
Opacity=100%,
Mode=Normal.

Then click "OK" to apply the pattern fill to the image. You will be able to see if the image tiles seamlessly or not. When you are finished with the test you can discard the new 800 x 800 image.

10. The finished background texture is shown below at normal size:

Tiling Textures 1

Giving a Texture or Fill a Uniform Appearance

Tiles are used as background images on web pages. Tiles are also used as wallpaper in Microsoft® Windows®. Pattern Fills are used in Photoshop® image editing as a means to fill an area in an image. The following guidelines should be followed in order to achieve a good result.

When making background tiles or fills, care should be taken so that...

A. The overall appearance is uniform when the image used as a background tile or fill, and...

B. The edges of the tiles mate seamlessly together.

This tutorial covers one way to achieve A above. The next tutorial addresses B.

Making a background tile using the sandstone texture (applied with the Texturizer Filter) is very popular and is a good example of the use of this technique.

1. Start by making a 4" x 4" RGB image at 72 pixels per inch with a white background. Save the file as TILE01.PSD or other name. Pick a color from the swatches palette that appeals to you and set it as the foreground color. By moving the mouse over the swatches, the cursor turns into an eyedropper. Simply clicking the mouse on any color swatch will set the foreground color to the one you pick.

2. Next use the bucket tool and click anywhere in the image area to flood fill it with the foreground color you selected

3. Next apply the sandstone filter to the image with the command:

Filter > Texture > Texturizer > Sandstone

In this example set Scaling=100, Relief=4 and the Light Direction=Top. Click "OK" to close the dialog and apply the texture to the image.

4. Make a new 4" x 4" RGB image at 72 pixels per inch with a white background. This image will only be used to test the tiling of a selected portion of the first image. It will not be saved.

5. Click the rectangular selection tool. In the Marquee Options palette select Style=Fixed Size, Width=100 pixels, Height=100 pixels and Feather=0 pixels.

6. Click anywhere in the image area. A 100 x 100 pixel selection marquee will appear. You will be selecting an area that will serve as a pattern that fills the second image. Since the defined pattern will simply be a tile, the trick of this technique is to select as uniform an area as possible. The goal is twofold:

a) The defined area should be as uniform as possible without any distracting flaws or unusual patterns that will repeat throughout the fill.
b) The outer edges of the defined area should mate smoothly together when they are tiled, although this is not as important as a) above because the next tutorial will explain how to overcome this.

7. Using any selection tool, click inside the selection and while pressing the mouse button, drag the marquee to a suitable location

Once you have selected the area to define as a pattern, click:

Edit > Define Pattern

8. Next make sure the test image is the active window then click:

Edit > Fill

You will see the following dialog. Select:

Contents:
Use=Pattern

Blending:
Opacity=100%,
Mode=Normal.

Then click "OK" to apply the pattern fill to the image.

9. Now check the results of the pattern fill on the image. Look for smears, ridges, or any uneven repeating texture picked up from the pattern definition in step 7 above. If you see any undesirable repeating pattern, simply drag the selection marquee to a new location in the TILE01.PSD file and repeat the command:

Edit > Define Pattern

Repeat steps 7 and 8 as necessary until the image is filled with a smooth, even texture.

10. Once you are satisfied with the results make the TILE01.PSD the active window and click:

Image > Crop

This will crop the image down to a 100 x 100 pixel tile.

11. Below is the finished tile. You can use it for your own backgrounds. If you are using Netscape® or Internet Explorer, simply right click on the image below and save it to disk.

Custom Textures 3

Obtaining New Textures By "Cloning"

This third tutorial on the subject of Photoshop® textures shows how to take advantage of the Texturizer Filter by "cloning" the texture qualities from one image and applying them to another.

1. The image on the left below was scanned into the computer as an RGB image. The scan was made of a common stationery "accordion file" which was selected because of the simulated leather pattern printed on it. When choosing images for textures, pick ones with a broad enough range of grayscale pixel values. This will give your textures depth and dimension.

2. The image on the right below is was created by saving the scanned image as a new Photoshop .PSD file then converting it into a grayscale image with the command:

Image > Mode > Grayscale

It is not necessary that the image be saved in grayscale mode. But since Photoshop only uses the grayscale information in the image, it uses less disk space than a color image. You may want to do this tutorial on your own computer and use this image in your own texture library. If you are using Netscape® or Internet Explorer, simply right click on the grayscale image below and save it to disk. Then open the image in Photoshop and save it as a Photoshop .PSD file.

The new file can be stored in the same folder with other Photoshop texture files (described in a previous texture tutorial). It is this file you will be loading and applying to images with the Texturizer Filter.

Original Scanned Image:

Grayscale Image of Original Scan:

3. Once you have saved the texture file as a grayscale Photoshop .PSD file you are ready to apply the texture to an image. Make a new RGB image at 72 pixels per inch. The image below is 256 pixels square. Click the foreground color square in the color palette and set the color values to R=199, G=159 and B=109 (it is one of the colors on the default swatches palette in Photoshop). Next click the bucket tool and flood fill the image with the foreground color.

4. Now comes the real magic. Issue the command:

Filter > Texture > Texturizer > Load Texture

Then load the .PSD file saved in step 2 above. In this example set Scaling=100, Relief=10 and the Light Direction=Top. Click "OK" to close the dialog and apply the texture to the image.

5. The result is a dazzling effect on a mono-colored tile that can now be used as a background or fill. You can apply this texture to any image, not just to background tiles or fills.

Custom Textures 2

Customizing The Sandstone Texture

This second tutorial on the subject of custom textures shows how to take further advantage of the use of custom textures via the command:

Filter > Texture > Texturizer > Load Texture

Creating a new adjusted texture from a default texture is the topic of this tutorial. You may ask, "Why would I need to adjust a default texture provided by Photoshop® ?" The images below illustrate the point:

Both images have the sandstone texture applied to their backgrounds. However both images have custom textures applied. The image on the left has a more coarse version of the sandstone texture and the image on the right has a finer version. Short of making your own custom textures there is only one way to accomplish the above effect:

Resample the image up then apply the default texture for a more fine appearance, or...
Resample the image down then apply the default texture for a more coarse appearance.

Note: Although the filter has a "Scaling" feature which allows you to vary the coarseness of the texture, this tutorial provides a means to vary the texture outside the limits of the scaling range.

It is undesirable to resample the image, then apply the texture, then resample the image again to its original size because the image will lose data in the process. So here is how you do it.

1. For this exercise we will make two RGB images each having a resolution of 72 pixels per inch. Make one 2" x 2" and one 8" x 8":

2" x 2"

2. Set the foreground color to a medium gray (Red=128, Green=128 and Blue=128), then flood fill both images with the medium gray foreground color. Next apply the default sandstone texture to each image:

Filter > Texture > Texturizer > Sandstone

Then select:

Scaling=100%
Relief=7
Light Direction=Top

Then Click "OK".

3. Next duplicate the 8" x 8" image twice with the command:

Image > Duplicate

4. You now have three 8" x 8" images and one 2" x 2" image each filled with the same texture. Maintain a resolution of 72 pixels per inch and resample each image according to the following::

2" x 2" - resample to 4" x 4"...makes the coarse texture
8" x 8" - resample to 6" x 6"...makes a fine texture
8" x 8" - resample to 5" x 5"...makes a extra fine texture
8" x 8" - resample to 4" x 4"...makes an super fine texture

The finished textures are shown below:

Coarse	Fine
Extra Fine	Super Fine

5. Name the image files:

SANDSTN1.PSD (Coarse)
SANDSTN2.PSD (Fine)
SANDSTN3.PSD (Extra Fine)
SANDSTN4.PSD (Super Fine)

6. To apply the new textures to an image click:

Filter > Texture > Texturizer > Load Texture

Load either SANDSTN1.PSD, SANDSTN2.PSD, SANDSTN3.PSD or SANDSTN4.PSD. You can then apply any of the filter settings as you normally would using the default sandstone texture.

Custom Textures 1

Obtaining Textures For Your Images

This first tutorial on the subject of textures illustrates how to take advantage of a feature in Photoshop® that allows the loading of textures via the command:

Filter > Texture > Texturizer > Load Texture

Before you can load any textures, you have to obtain them or create them. Adobe includes several textures on the Photoshop Application CD-ROM disk. In the GOODIES folder on the CD there is a sub-folder called TEXTURES. Simply drag and drop this folder onto your hard disk. You may put it in the Photoshop application folder, but this is not required.

Textures are simply Photoshop grayscale .PSD files from which the texture information is applied with the above filter. It is not required that the image be saved in grayscale format. The texture can just as well be saved in color although Photoshop only uses the grayscale data in the file. There is an advantage to saving it in grayscale format to save disk space.

Because these texture files are simply grayscale images, this offers great flexibility in obtaining and/or cloning them. One great source for textures is Paint Shop Pro™ 5.0. If you accepted the default folders during the installation of Paint Shop Pro 5.0 on your system there will be a folder:

C:\Program Files\Paint Shop Pro 5\Papers

In this folder are paper texture files with the file extension .TEX. Open the files in Paint Shop Pro 5 and save them as .PSD files. You can then apply these textures on Photoshop images in the same manner as the ones supplied with Photoshop.

The following background tiles were all made very rapidly in Photoshop by applying the texture filter using the "Load Texture" option. The textures were made from .PSD files using the Paint Shop Pro 5 .TEX files located in the "Papers" folder.

Background Tiles For Web Pages

To download in Windows®:		Right click image and select "Save Image As..."
To download in Mac®:		Drag image onto the Desktop

The tiles were all made by duplicating a single file with a uniform color background. To make these yourself click:

File > New

Make a new 2" x 2" RGB image at 72 pixels per inch. Click the foreground color square in the color palette and set the color values to R=247, G=228 and B=186. Then click the bucket tool and flood fill the image with the new color. Save the file in JPEG format. Duplicate the file as many times as you want with the command:

Image > Duplicate

Then apply a texture to each image with the command:

Filter > Texture > Texturizer > Load Texture

Then select from the .PSD texture files on your hard disk.