Warning: This page takes a little while to load, but I wanted it all on one page, because I find step by step instructions where you need to constantly load each step to be very painful, and I never get through them. So go to another window and read your mail, and give this a minute or two to load in toto. Also, because this is very image oriented (I mean, it's instructions for creating images...) you'll need to be in a graphical browser with images turned on. Well, you won't need to be, but my instructions are probably much clearer if you can see the pretty screen shots from Photoshop.
Shakespeare's Little Way of Making Tiled Images
This is my way of making tiled images out of repetitive texture photographs. There are a lot of them out there, but very few of them have been made to be seamless tiles suitable for the web. This 8-step method requires that you have an image to tile with a sufficient size that trimming it a little won't hurt it, Photoshop 3.0 or better (I can't guarantee everything that you need is in earlier versions, because I learnt on 3.0), and a little knowledge of Photoshop. If you find yourself really stumped, feel free to send me email (thespian@sleepingcat.com), but remember that I've written this as clearly as I can possibly think of, and I might not be able to help you any further.
My Requests, in Exchange for this Teaching Stuff
First, if you make tiles using what I have here, I'd like it if, in your cool links section (or whatever you call it), you put a link to my page (http://sleepingcat.com. You could also tak a look at http://sleepingcat.com/info.html, if you'd like a pretty button. ). I don't demand you do a Web Counter-esque thing or anything (you don't need to tell people that you used these instructions or anything), just point a few people my way so I can show off my pages. ;-) Also, let me know, so I can take a look; if you want, I'll provide a sub-listing so other people can see what sort of tiles people have done from these instructions.
Second, if you happen to be in the UK or Canada, or near someplace that sells Smarties, the chocolate depicted in this tile, I'd be very happy if you'd mail me a box or two (email me for current address). I'm Canadian and I really really miss pretty much every Rowntree product. Feel free to send Aeros or Coffee Crisp, too. (Though also note, I'm living in the south currently, and so you might want to wait until October to mail the candy. It'll be on sale then for Hallowe'en, anyways.)
 |
Step OneFirst, select the image that you wish to tile; I tend to pick things that are simple and brightly coloured. This image comes from Image Club's Snackgrounds collection. The first thing you will want to do is use the marquee tool to turn the image into a square (by dragging the marquee across the image while holding down shift; this constrains the marquee to selecting a square). |
 |
Step TwoZoom in closely to one of the edges of the image. |
 |
Step ThreeUsing the lasso tool, you will want to carefully select and delete all of the incomplete objects at the edge of the picture; anything that gets cut off at the edge, or that is covered partially by something that gets cut off, so that eventually, you have nothing along the edge of the image but whole objects. |
 |
Step FourThe result should look something like this. Rough edges like you see in the orange smartie about a quarter of the way down are going to be ok. you can clean them up a little later if they are glaringly obvious. |
 |
Step FiveRepeat the above steps with an edge at a right angle to the one you did. You want to have one side and either the top or the bottom be nothing but complete, uninterrupted objects. |
 |
Step SixSelecting the edge of the tile can be tricky. my way of doing it is to use the marquee tool to select everything inside the tile, and then the magic wand to select the white space around the outside edge. Then I go to Select-Inverse, and the edge is selected, as shown. You can sort of see what I mean about selecting the inside part of the tile by where the straight edge of the selection is, here. |
 |
Step SevenUsing the arrow keys, move the selected area straight across the rest of the image. You can drag the selection over, but I tend to prefer to use the arrow keys, to assure that the selection moves straight across, instead of possibly drifting up or down a pixel or two. Repeat this step and the one before (about selecting) with the other edge. |
 |
Step EightUse the crop tool to remove the whitespace left around the image from moving the edges over. |
Optional Step
Select the entire finished tile. Create a new layer, and paste the tile into it. Make sure you're at the default Photoshop settings (command-D on a Mac; sorry I can't tell you what's on an IBM). Delete the tile from the background. Returning to your new layer, play with the Opacity until you get a background that is "faded" enough for you. This is a handy one for web pages because it's often hard to read text on a brightly coloured background. |
 |
 |