: Testing if a BG will Repeat Tile Properly in Photoshop? I am frequently working to create background textures in Photoshop to be used on the web. Unfortunately I usually have to guess, or just
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:
More posts by @Shakeerah625
7 Comments
Sorted by latest first Latest Oldest Best
I wrote a Chrome extension called Tile View that lets you right click an image and see how it tiles.
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.
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.
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.
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.
DA01 answers how to make it but your question is how to test it. The answer to that question is:
Select your pattern layer
Edit > Define Pattern
Create New Layer
Select All
Edit > Fill > Pattern > Choose your pattern
Hit okay and see if it looks good
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.