Creating Tiled Images

Support for tiling website images

Software
Allwebco uses Photoshop for editing images, but most any graphics software will work. It is possible that your digital camera or scanner came with image editing software.

Note: Some graphics software and plug-ins offer a tiling tool. You may want to check your software for this tool and use this instead of the techniques outlined below.


Technique "A" copy, slide & clone
With this editing option we'll cut the image to the clipboard, then paste it back, slide it halfway over, paste it in a second time on the same layer and slide it the other way to make the non-tiled ends meet, clone the unmatched area, select and copy again, paste twice, sliding it back into position. See the following visual.



Note: This is the technique Allwebco uses to create tiled images used in their web templates.


Montage image option
Instead of tiling your image you can optionally create a montage picture instead as in this example. Montages work well for images with a banner type orientation (images from the Chicago Botanic Gardens).




Technique "B" match up ends
In the steps below, we'll replace the "contact.jpg" from an Exec drop menu template model and tile the left and right edges of our new image. This Image is 720 x 80 pixels and has already been tiled. Click the following visual.



In the sample above the ends are already matched. We will now use a new image to replace the "contact.jpg" and match the ends.


Step #1
Open the "contact.jpg" in the "picts" folder in your graphics software. Then open the new picture you want to use instead at the same time (Click to view our new image example). Make your new picture 720 pixels wide. Do a "select all" on your picture, choose copy, then select the "contact.jpg" anywhere and choose paste. The pasted image should be floating over the old image. You should be able to left click, hold down and drag the image around until it is located how you want it. This is called "image cropping".



Notice in the example above the ends do not match.


Step #2
Once you have this located how you want, select about 30 to 50 pixels on the right end of the image. Choose feather on the menu and feather about 12. Choose copy, then select a small part of the right end of the image and choose paste. Now choose "reverse" or "mirror" or "reverse image" on the menu. You may need to check your software help area for info on your feather and reverse tools.



Notes: For the technique above you may have to experiment with how much you select and how much you feather the image. You may also want to combine the above technique with the one below.


Advanced: Rubber stamp or clone technique
In some cases a designer might do the steps above and then if the image looks a little too "mirrored" they might try the following technique.

1. Open your 720 x 80 contact.jpg and select all, choose "copy".
2. Start a new image perhaps 800 x 150 and paste into this. You should have your contact.jpg with some white space around it.
3. Draw a black line above the image on the very right end to keep track of the image end. (see visual below).
4. Select and copy about 100 pixels of the left end of the image and paste this at the right end.
5. Now unselect the end, use the stamp or clone tool, or even your smear tool and fool around on the end between the right end and the pasted left end.
6. Once this looks good, select the image after the black line on the right and paste this back over on the left end.
7. Now select the image area from the left until the black line and paste this back into your contact.jpg. See visual below.

Other options
Instead of editing your images to tile you can change the HTML image code in most cases. See changing main image code on the template.


Related Topics:
Replacing the template pictures
Changing main image code on the template