Using Seamless Tiles (1)

What is a seamless tile?


If one takes an image like the one on the left and repeats it – horizontally and vertically – the joins will show where shapes cut off and colours vary. This image can be tiled – that is repeated over and over – but the join is noticeable. So it is not a SEAMLESS tile, as can be seen on the right. An image that can be repeated without the join showing is a seamless tile.

In the history of webpages, early tiles were small – often pixel art based – or now mocked cliches, such as starry backgrounds which rendered content illegible and lacked style. Modern web allows for using tiles in many ways, as large patterns for Twitter or YouTube, or as repeated tiles within specific areas of a website.

Additionally, tiles can be used as computer desktop patterns, or as an overlay on an image, as a border, or to make text have more impact.

This tutorial will look at how to use seamless tiles obtained as jpgs, gifs or other file formats, in digital design applications – in this case I am using Photoshop. The methods remain true in most versions of Photoshop, though certain options may have moved or the interface may appear different.

Resizing a Seamless Tile

When you download a seamless tile from a resource such as this site, the tile may be bigger than what you need, so you may need to make it smaller. Making tiles – or images in general – much bigger is never recommended due to pixelation. You can of course increase the size a little if the result looks acceptable.

In the image on the left I have opened a seamless tile in Photoshop. One way to alter the size of any image in Photoshop is to go to Image > Image Size. (Image > Canvas Size will change the document size but not the content.) Get the ruby red pattern used for this tutorial here.

Ensure that Constrain Proportions is checked, as you do not want to distort an image dis-proportionally.

The resampling drop down at the bottom can be changed to a suitable method – bicubic sharper for reducing size, bicubic smoother for increasing size, or leaving it as bicubic. Bilinear and  Nearest Neighbour are only suited to pixel-based content.


Another method of resizing an image, especially for usage in a website, is to simply go to File > Save for Web (or Save for Web & Devices, depending on Photoshop version).

At the bottom right of this dialogue box, you will see an option to alter Image Size (which is circled on the image on the left). Again, width and height should be linked (with a chain icon) to keep the proportion of the image. Enter a new width (or height – no need for both) and click elsewhere to see the size change applied.

Instead of using a pixel value, you could also change the percentage.

Save (and rename) so you have both the original image and the new size one. To use in Twitter or YouTube, you can now upload the saved image. For a website, the saved image would then be referenced in the style sheet or html of the website.

CSS would have the following typically:

tag/object{

background:url(images.filename.jpg) repeat;

}


Using The Tile In Photoshop

To use the image as a tiled background texture or pattern in Photoshop, you have 2 options. (Aside from physically making copies and moving them, which is a silly waste of time!)

Firstly, open the document and then go to Select > Select All (Ctrl/Command A). Then go to Edit > Define Pattern. This pattern is now saved to Photoshop’s tool settings, and can be used again at any time.

Please note – if an image is too big or if you currently have an Adjustment Layer as your active layer the option to Define Pattern may not be available.


To use the pattern as a fill, you can go to Edit>Fill (Shift Backspace as a shortcut). As always in Photoshop, I do suggest making a new layer, rather than doing it directly on the background layer, as it will be more flexible later.

The fill dialogue box, as seen on the left, allows one to fill with foreground, background color or as we currently want to – fill with a Pattern.

All your saved (‘defined’) patterns will show – as ones that come default with Photoshop. Click on the one you want to use as the fill, then click OK.


Applying the fill in this way has its limitations. It cannot be easily moved or resized as it will leave gaps around the sides. Should you have it on a new layer and scale it down, you will get anti-aliasing around the edges – Photoshop automatically wants to smooth edges by making semi-transparent pixels. I have circled an areaa where it can easily be seen, on a zoomed in example.


A better method is to use a Layer Style, accessible from the bottom of the Layers Palette. (The icon is circled on the screenshot on the left). Layer Styles are easily re-edited at any time, and very flexible. These are much used to create drop shadows, outer glows and so on. Click on the icon and choose Pattern Overlay. The settings are discussed below.

PLEASE REMEMBER: if your layer is blank you will see nothing! So, make a new layer and fill it with a solid color – the color you choose does not matter too much, and can be changed later without effecting the style you are applying.


In the options for Pattern Overlay you click on the small arrow (circled) beside the Pattern thumbnail to choose which of your defined patterns you want to use.  The same as using the texture as a fill, you then click the pattern you want. Make sure the Preview option is checked  in order to see the style applied to your layer (just below the OK and Cancel buttons).



In the example on the left, you can see the following:

  • A layer is filled with black, and has a style applied to it (just double click the style in the layer panel to alter it later).
  • In the Layer Style dialogue box, the pattern can now be scaled – up or down. I have made mine 21% and the pattern is small but still looks good.
  • Link with Layer means as the layer is moved or resized the pattern will move with it.
  • To move to pattern, move your cursor over the document / canvas  itself and click and drag to move it.

More options are discussed below.


In this example, I have scaled the pattern upwards – too much! – and it looks fuzzy. This can happen just as easily when using a Layer Style and scaling down a lot – which is why getting it to the approximate right size before starting will have the best result.


You can adjust the Opacity of the pattern – which will reveal more of the original color used to fill the layer the pattern style is applied to. If you want to vary the opacity, you may want to change the color you have filled with (Edit > Fill and use Foreground or Background color).

NOTE: using the Color Overlay style on the same layer will cancel out the pattern – these 2 styles do not work well when used together.


Another option is to change the Blend Mode of the pattern. This will cause the colors within the pattern to interact in different ways with the colors of the layer itself (I have made my layer blue, as black will not work well. Nor will white). You can try out different options (using your Up / DOWN arrows once you select a mode in the drop down to do so quickly). Results will vary from pattern and background color, one thing may work well in one instance but not in another, so you will need to try different options, This method is really only if you do not feel comfortable changing the tiles colors before applying it, or to create an unexpected result.

It also can work well if applied to a photograph. In the example below, the pattern we have been working with is applied to a photo of a woman, the Blend Mode is set to Overlay and the opacity is lowered.




In Part 2 of this Tutorial, seamless tiles will be used to create borders and applied to text. Thank you for reading.

Leave a Reply

Your email address will not be published.