Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 3 down vote favorite
3

I am frequently working to create background textures in Photoshop to be used on the web. Unfortunately I usually have to guess, or just use freebies from other websites.

I would like to build my own textures in Photoshop and check if they tile properly before exporting the image. Is there a way to do this quickly? I remember a method using offset, but I'm not familiar with the tools.

Below are a couple example background tiles so you can see what I'm talking about:

tile1

tile2

share|improve this question

6 Answers

up vote 10 down vote accepted
  • create your image. For example, let's say it's 200px square
  • go to FILTERS > OTHER > OFFSET and type in x and y numbers that are half your image size (in this case 100px)
  • this will shift your image over that many pixels and put the pixels that were moved off the canvas on to the other side. You now will see a seam running down the middle of your image where the pattern doesn't quite repeat fully.
  • touch up this seam to make it a smooth blend using whichever tools you like (clone tool is a common option).
  • save your new image.

For more complex images, you may need to do a final offset of say 1/4 the pixel dimensions to touch up the edges you might have missed the first time that fell near the edge of the canvas.

share|improve this answer
Thank you this is perfect! Exactly what I was looking for – Destiny Islands Apr 18 '12 at 16:21
up vote 3 down vote

DA01 answers how to make it but your question is how to test it. The answer to that question is:

  1. Select your pattern layer
  2. Edit > Define Pattern
  3. Create New Layer
  4. Select All
  5. Edit > Fill > Pattern > Choose your pattern
  6. Hit okay and see if it looks good
share|improve this answer
1  
ugh. I totally misread the question! Good tip. Another option is to simply make a test HTML file with a repeating background. Then just keep re-saving the file and reloading the browser. – DA01 Apr 18 '12 at 16:29
1  
Yes I knew how to do it in HTML/CSS but wasn't aware that Photoshop could test as well. Thanks for the advice! – Destiny Islands Mar 23 at 17:26
up vote 1 down vote

I traditionally save the image as a jpg or png and then use basic html to test the tiling.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Open that in a browser and you can see the tiling and simply re-save "image.jpg" and refresh the web page to check revisions.

share|improve this answer
up vote 1 down vote

There is also another way to do this, but the limit is that all the other patterns must be of the same size you will see why.

Steps:

  • Make a 200px by 200px box.
  • Convert it into an smart object.
  • Duplicate and align it so there are 3 boxes horizontally. Make sure no overlapping or spaces in between.
  • Duplicate the three boxes selected into 3 vertical columns.
  • If not already enabled, enable floating windows in Preference.
  • Double click and open the smart object.
  • Align both windows as so that you can see both files.
  • Fill the smart object with whatever pattern you want and see it in action in other window simultaneously.
share|improve this answer
up vote 0 down vote

The way I do it is just save the tile as a jpg and set it to tile on my desktop. Pretty quick and easy.

share|improve this answer
up vote 0 down vote

There's a great (freeware for personal use) tool called AMP Tile Viewer that lets you very quickly check whether an image is tileable and how it will look tiled. I use it all the time and it works just great. No need to make patterns in Photoshop you will never use or have to delete afterwards.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.