Jump to content
You must now use your email address to sign in [click for more info] ×

Creating a Seamless Tiled Background Image


Recommended Posts

A recent post in the Questions forum asked about seamless tiling. There are also video tutorials available, such as the one on Seamless Textures. I describe here how I created a seamless tile to form a repeatable background to the pages on one of my web site.

The website was for a wood, so the starting point for the background image was a photo of the autumn woodland floor covered in leaf litter:

01LeafLitterOriginal640.jpg.11ad95f433978c1c159526175d756a4c.jpg

This image will not tile seamlessly. The first step is to apply the Affine transformation (Filters > Distort > Affine) with an offset of 50% in each of the x and y axes. This gives:

02LeafLitterAffine640.jpg.c155dfb6139890dac681ba6c815e6d31.jpg

The left and right edges of this would now tile seamlessly (as would the top and bottom. But there is the mismatch along the central axes. To get rid of these I placed images of single leaves onto these axes. The leaves were scanned on a flatbed scanner;  the individual images edited to remove the white background and they were then saved as .png images. The leaves were placed onto my background using File > Place, and then resized to some extent to get the right scale, and they were randomly rotated.

03LeafLitterPlaced640.jpg.5c12d9ae11bc3ed05c6d67c2d5e041f6.jpg

This has now masked all the non-seamless axes. The Affine transform is now reversed, using the same procedure as before ( (Filters > Distort > Affine) with an offset of 50% in each of the x and y axes)

04LeafLitterUnAffine640.jpg.08e5aa434c4e8364b4cd9fb99625c1b5.jpg

This has now created a seamless tile. However, in this example, The placed leaves are conspicuously around the edges, so I added some more at random points over the rest of the image:

05LeafLitterFinal640.jpg.2a812dc1557fbe24e601cb6fd73c7b7a.jpg

I could have added more, but I chose to stop there. This image now forms a seamless tile. To demonstrate the effect, I placed four copies of the image together to show how they tile seamlessly (or they would do if I get my placing more precise).

06LeafLitterTiled640.jpg.b5271df5013bf347a389762a52c43383.jpg

In this example, I started off with a background of leaf litter on the woodland floor. I could have started with a blank image and placed leaf images all over it to hide any background. Then I would begin the procedure as above. This would probably have been better since there would be no distinction between the the various leaf images; they would blend in better. However, for my purposes, I liked the original woodland floor image.

For a background page for a website, I faded the image above to as not to be too intrusive. I used this technique for the Friends of Coombe Wood web pages. (Apologies for not updating it. I have been unable to visit for the last few months.)

John

Windows 10, Affinity Photo 1.10.5 Designer 1.10.5 and Publisher 1.10.5 (mainly Photo), now ex-Adobe CC

CPU: AMD A6-3670. RAM: 16 GB DDR3 @ 666MHz, Graphics: 2047MB NVIDIA GeForce GT 630

Link to comment
Share on other sites

  • 1 year later...

Thanks for this forum tutorial.  I like the finished product although might I suggest an improvement (or alternative)?  Sample some other color leaves for the placement after the first Affine 50%,50% action to hide the original edge borders.  This would make it a bit less obvious.  Of course, every original image we wish to make a seamless texture has it's challenges...usually light intensity is the most difficult to handle.  I'm hoping something appears for Affinity Photo (actually in the product or third-party macro) that would behave much like the Map...Tile Seamless... in GIMP.  Cheers!

--

Stuke

Link to comment
Share on other sites

  • 6 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.