Easiest way to tile a background?

J
Posted By
Johnny
Oct 4, 2004
Views
389
Replies
3
Status
Closed
What is the easiest way to create and implement a tileable background image in Photoshop 6 for use on a Web page?

Are there tutorials? Is there a single best method everyone agrees on?

Thanks.

–Johnny
johnnyg aattssiiggnn kc.rr.com
barelybad.com

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

C
Corey
Oct 5, 2004
Johnny,

The best tiling images are ones that leave no seam. One way I’ve done this is to create a file that would be suitable for a background, and then change the canvas size to double the height and double the width. It’s probably a good idea to "make a layer" first or copy the image into a new layer to maintain transparency around the image. Then move the image to the upper right corner, ALT-drag a copy of the image and place it below the first. Go to Edit> Transform>Flip vertical. Now the two edges match up since they are mirror images of each other. merge the two layers together and ALT-drag a copy of the merged image to the right. Now flip this layer horizontally. The edges will again match up perfectly. Now merge all layers together and you have your background tile. You may want to shrink it down a bit to reduce the file size.

One thing to keep in mind though is the old saying, "Wrapping paper makes poor stationary." If you have text on top, try to be subtle with the graphic. If it’s a background that is outside the main text area, you may be able to be a little more bold.

Another option is to use some of Photoshop’s patterns. Many seem to tile OK without copying and flipping. Even something as simple as adding noise and rendering a lighting effect with a texture channel can make cool backgrounds that don’t distract from the site contents. I’ve even seen sites that use animated gifs for tiling! Many were very hideous in my opinion. It might work on something like an astronomy page that uses twinkling stars as the background or something, but most were very distracting.

Corey 🙂

"Johnny" wrote in message
What is the easiest way to create and implement a tileable background image in Photoshop 6 for use on a Web page?

Are there tutorials? Is there a single best method everyone agrees on?
Thanks.

–Johnny
johnnyg aattssiiggnn kc.rr.com
barelybad.com

C
Corey
Oct 5, 2004
Oops!

In my previous comment, make the second Alt-drag to the right, a left! Two wrongs don’t make a right, but three lefts do.
L
Larry
Nov 10, 2004
Two things..offset and smudge.
Offset to half the image size, width and height, then smudge the lines.

"Johnny" wrote in message
What is the easiest way to create and implement a tileable background image in Photoshop 6 for use on a Web page?

Are there tutorials? Is there a single best method everyone agrees on?
Thanks.

–Johnny
johnnyg aattssiiggnn kc.rr.com
barelybad.com

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections