 |
If you like wikis, why not get a Photoshop wiki. Several people have started integrating wikis on web site pages. In fact you can run a website which is entirely free wikis. One of the best aspects is these programs are downloadable at no cost on the web
PhotoshopForce.com
»
Tutorials
»
Photo Effects
»
Seamless Repeating Tile Background
Seamless Repeating Tile Background
In this tutorial you will learn how to take a photograph, or image and turn it into a seamless repeating tile background for using in your HTML documents, web page designs or desktop backgrounds. The steps to creating a seamless tile background are difficult to figure out on your own, which is why we created this tutorial. After following along with this tutorial, and a few simple steps you'll be able to create a seamless repeating tile background out of nearly any image using adobe Photoshop. Here is an example of what we will be creating with this tutorial:
Note: Click image to launch HTML example.
 Download Seamless Repeating Tile Background Source Package
Page 1 of 1
Open up the photo or image that you'd like to create a seamless tile background with. If you'd like to use the same flower image that was used for this tutorial, simply open the flower.jpg file found in the download pack for this tutorial. Note: Free registration required.
Press CTRL + J on your keyboard to duplicate the layout, and name this new layer "Back Edit" as shown here:
Press CTRL + J on your keyboard again, to duplicate the "back edit" layer we'd just created, and name this new layer "Center Out":
Go to Filter->Other->Offset and set both Horizontal and Vertical to half the image's dimensions.
For instance, the image l'm working with here is 752x500 pixels in size, so l'll use 376x250 for my settings.
If you're using an image other than the flower.jpg"> used in this tutorial, you can get the image dimensions by going to Image->Image Size.
Result:
There is now a space in the center of the image, where you can see the old edges meeting. This is where we'll start erasing to expose the image beneath. Get out the Erase tool ( ), with the following settings:
Now make sure that the layer named "Center Out" is the one that you have currently selected. And begin to erase the central area to expose the contents of the layer beneath it. Here l've turned off the visibility of the layer beneath so you can see where l have erased:
Here l've colored the area that l erased ORANGE, so you can see what portions of the image have been erased:
And here's a real time example with the results of erasing the center portion of this layer:
Finally you'll want to get out the Smudge Tool ( ) and apply similar settings as shown here:
And smudge slightly around the edges of the image, and anywhere that you can see the seam near the center of the image, vertically or horizontally. This can take some time to you'll want to continue to touch up and refine the graphic until the final composition is something that you are happy with. Here is how my example turned out after smudging the edges to create a seamless tile:
If you enjoyed this tutorial, please be sure to check out the rest of our Great Tutorials while you're here!
Download Seamless Repeating Tile Background Source Package
Author: DewDrop
Website: http://www.dewdropwebs.com/
Discuss this tutorial on the PhotoshopForce.com Forums
|  |
