Photoshop Tiled Backgrounds

Warning! MyCSSMenu may have been blocked by IE-SP2's active content option. This browser feature blocks JavaScript from running locally on your computer.

This warning will not display once the menu is on-line. To enable the menu locally, click the yellow bar above, and select "Allow Blocked Content".

To permanently enable active content locally...

1: Select 'Tools' --> 'Internet Options' from the IE menu.
2: Click the 'Advanced' tab.
3: Check the 2nd option under 'Security' in the tree (Allow active content to run in files on my computer.)

Top 3 Products & Services

1.
2.
3.

Essential Products & Services

Dated: Sep. 28, 2004

Related Categories

Photoshop Graphics Suite

By Jonathan Thompson creator of CerealKillers Help Desk

The image we're starting with here (and, feel free to snag that image and do this example along with me) is 100pixels by 100pixels. For this technique, we create a new image that is twice the size of the original (200pixels by 200pixels), with the same resolution (150), same color mode (RGB), and a transparent background. If you're starting with a gif, it might be wise to change it's mode from Indexed to RGB to help stop color shifts and *blocky* pixels.
Start by dropping your tile in the bottom right corner. It doesn't always have to be this corner, but you'll have to change the steps and placements of the next layers to make it work. For now, just use the bottom right corner. To *drop* the tile, click on the move tool, then click on the image itself... drag that image over to your new project until you see the edges of the new project light up. You could also copy and paste it there, but this is easier.
Make 3 copies of this layer, so that now you have 4 layers with the same thing.
Move the first copy up to the top right corner.
Go to Layer > Transform > Flip Vertical. This will set the whole right side. If it isn't completely in place, don't worry about that now. We can fix it later =]
Now go to the second copy, and move it to the top left side.
Go to Layer > Transform>Rotate 180°.
Go to the last copy (3rd), and move it over to the bottom left corner.
Layer > Transform > Flip Horizontal. This will finish up the seamless tile, but if your blocks aren't quite touching each other, the easiest way to fix this is to click the move tool (you should already have that one selected), then use the little arrow keys on your keyboard to nudge it into place. Here's what I made out of the first image:

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!