Creating Tiled Images
The banner images on many Allwebco templates are coded in the HTML as backgrounds. This is done so the images can stretch across the entire browser width. Below are some hints for creating seamless tiled banner or background 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. You can also pick up the novice Adobe software called "Photoshop Elements" at Best Buy, CompUSA, Amazon.com or on ebay.
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 below.
Starting the edit
We will replace as our example in the steps below the "contact.jpg" from the CobaltPro template model. This is a tiled 720 x 80 .jpg image. Click below to see this image.
In the sample above the ends are already matched. We will now use a new image to replace the "contact.jpg" and match these 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.
Open your 720 x 80 contact.jpg and select all, choose "copy".
Start a new image perhaps 800 x 150 and paste into this. You should have your contact.jpg with some white space around it.
Draw a black line above the image on the very right end to keep track of the image end. (see visual below).
Select and copy about 100 pixels of the left end of the image and paste this at the right end.
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.
Once this looks good, select the image after the black line on the right and paste this back over on the left end.
Now select the image area from the left until the black line and paste this back into your contact.jpg. See visual below.
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.
