Jump to content
AndiR

Create Tiles/Pattern Repeats?

Recommended Posts

I'm trying to make repeating patterns or tiles but do not know how to do it in Affinity. In Illustrator I set up a square artboard (say 8"), place a motif, and then I can double-click the selection arrow. A pop up allows me to make a copy of the motif and place it precisely 8" to the right or above or below. Once I have all my motifs placed, I make a square (no fill, no stroke), place it at the back of the layers, and select all. Drag these into my swatches and I have a new pattern that seamlessly fills any size object I create. (See sample tile)

 

Is there a way to do something similar in Affinity?

 

Thanks,

Andi

post-38912-0-26546700-1476714601_thumb.gif

Share this post


Link to post
Share on other sites

Having created your seamless tile, export it as an image. Select a shape on the canvas, choose the Fill Tool, go to the Context toolbar and set the type to 'Bitmap'; when you do this, a dialog will pop up so that you can browse to the exported tile image. Use the node handles on the fill to adjust its position, size, shape and rotation as desired.


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

Thanks, Alfred, that worked well to fill the shape! But what I REALLY want to be able to do in Affinity is create the seamless tile. I only have a trial version of Illustrator, and I MUCH prefer working in Affinity :). Is there some way to easily do the seamless tile other than manually measuring and moving each and every motif?

 

Andi

Share this post


Link to post
Share on other sites

You can enter calculations in the boxes on the Transform panel. If you have an 8" square with an object overhanging the left-hand edge, you just need to duplicate the object and set the X value for the duplicate to +=8" or +=8in (or simply +=8 if your measurement units are already set to inches). You can do a similar thing with the Y value for an object which overhangs the top edge of the square, or use negative values if the objects overhang the right-hand or bottom edges.


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

So that worked okay although it's a bit awkward. I had to add 8+ in front of the current value in the Transform panel to go to the right or bottom. Then had to add -8+ if I were going up or to the left.

 

Once I have my tile, how can I save it in AD as a bitmap to use as a fill?

 

Thanks for your help, Alfred!

 

Andi

Share this post


Link to post
Share on other sites

So that worked okay although it's a bit awkward. I had to add 8+ in front of the current value in the Transform panel to go to the right or bottom. Then had to add -8+ if I were going up or to the left.

 

No, you don't have to add anything in front of the current value. As per my previous post, you can completely replace the current value with +=8 to add 8 to it (or replace it with -=8 to subtract 8).

 

Once I have my tile, how can I save it in AD as a bitmap to use as a fill?

 

Select the tile objects, choose 'File > Export...' and then choose the appropriate 'Area' option in the Export Settings dialog.

 

Thanks for your help, Alfred!

 

You're welcome, Andi!


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

No, you don't have to add anything in front of the current value. As per my previous post, you can completely replace the current value with +=8 to add 8 to it (or replace it with -=8 to subtract 8).

Got it! I must have typed something wrong yesterday as it didn't seem to work, but now it does!!

 

Select the tile objects, choose 'File > Export...' and then choose the appropriate 'Area' option in the Export Settings dialog.

 

 

 

But there is no option to save as a BMP. If I save in another format I can't use it as a fill.

 

Sorry to be so full of questions, but if I can get this to work it will help me immensely and I won't have to revert to using AI ;)

Share this post


Link to post
Share on other sites

Got it! I must have typed something wrong yesterday as it didn't seem to work, but now it does!!

 

You're not alone, Andi! I keep finding myself typing things like =+8 instead of +=8 and having to redo it when nothing happens. ;)

 

But there is no option to save as a BMP. If I save in another format I can't use it as a fill.

 

There have been a few requests for BMP as an export format. I expect it will be added in due course, but in the meantime it looks as though the only option is to export to a 'non-lossy' format such as PNG or TIFF and then use another app to convert to BMP.


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

Another method for creating a seamless tile is the replicate option. First, hold Ctrl/Cmd while dragging the tile to create a duplicate. Then press Ctrl/Cmd J dozens of times to make dozens of duplicates. The replicate option can also create a scale difference. See my example.

 

Video


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

Another method for creating a seamless tile is the replicate option.

 

No, Brian, that's a method for replicating the tile after you've created it. ;) BTW, your example isn't seamless! :P

 

The replicate option can also create a scale difference.

 

When you 'power duplicate', you can not only scale the copy but also rotate it. :)

post-8358-0-60955300-1476964503_thumb.png


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

Hello Alfred,

I'm aware of the rotation difference, but by seamless, I just meant continuous duplicates. What you mentioned is a great feature, and it's what I think is best for the job too, but I just wanted to make sure that Andi knows that there is also a faster way than copying and pasting vectors. Knowing all techniques makes the user experience all worth while.

 

Andi,

Something also good to know in Alfred's technique is checking off that lock icon on the fill tool's context toolbar. It will maintain the proportion. If you resize the shape constraining it's size, you can then use the handles to constrain the pattern. Hold Shift to keep the rotation degree steady.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

by seamless, I just meant continuous duplicates

 

Ah, OK. The attached is an example of what I would call "seamless". :)

post-8358-0-26603800-1476987805_thumb.png


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.3.155 • Designer for iPad 1.7.3.1 • iPadOS 13.2.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

Yeah I guess it would actually.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

Alfred, any chance you could do a quick sample with pictures to show how to get the seamless tile?  I really did try but I was totally lost and would love to know how to do that.  I have a number of nice patterns but they are not seamless.


Windows 10 Home
Affinity Designer 1.6.4.104
Affinity Photo 1.6.4.104

Share this post


Link to post
Share on other sites
10 hours ago, MaryLou said:

Alfred, any chance you could do a quick sample with pictures to show how to get the seamless tile?  I really did try but I was totally lost and would love to know how to do that.  I have a number of nice patterns but they are not seamless.

 

Hello MaryLou, did you by any chance click on that lock icon after inserting your bitmap on a shape? The icon is "Maintain fill aspect ratio." After doing that, it is much easier to scale and get the seamless result better.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites
11 hours ago, MaryLou said:

Alfred, any chance you could do a quick sample with pictures to show how to get the seamless tile?  I really did try but I was totally lost and would love to know how to do that.  I have a number of nice patterns but they are not seamless.

This may not be what you want but if you have Affinity Photo & are trying to create seamless bitmap (raster) tiles, take a look at the Affinity Photo - Seamless Textures video.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites

@MaryLou, I used something like this to create a seamless image of leaf litter for the Friends of Coombe Wood website. I started with a square image of the woodland floor with full leaf cover. I then applied the Affine transform, with 50% shift. I then placed single leaves onto the main image covering the joins. Finally I reversed the Affine transform. The image was then faded to produce the final background image.

The single leaf images were done by scanning the leaves on a flatbed scanner then removing the white background.

Apologies for not updating this site, but I have not been able to get to the woods in recent months.

John


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

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

Share this post


Link to post
Share on other sites

I think we're all on a different page here.  Maybe I wasn't clear enough with what I meant.  As I said, I have a bunch of tiles that are not seamless so they can't be used as a background for something like a web page.  In my old graphic program (which was discontinued 10 years ago), I could make a tile seamless with the click of a button.  I still fall back on that program when I need to but I would like to be able to do the same thing in Affinity Designer.  I am attaching a sample of what I mean.  The larger image is the original (not seamless) and the second one is one that has been tiled.

birds.jpg

seamless.jpg


Windows 10 Home
Affinity Designer 1.6.4.104
Affinity Photo 1.6.4.104

Share this post


Link to post
Share on other sites

So you are looking for a solution to create a proper cutout out of a picture that is not yet seamless so it can be seamless when tiling. Got it. I tested that second tile, and it looks like the edges are actually slightly transparent and cloned. Something like this would have to be done perfectly, and I'm afraid it's beyond me. What discontinued program did you use to do this? That is a pretty impressive way of tiling.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites
2 hours ago, MaryLou said:

I think we're all on a different page here.

I think so too. In general, a "seamless tile," a.k.a. a seamless pattern, ususally means what is discussed here:

Quote

A seamless texture is an image that can be placed side-by-side with itself without creating a noticeable boundary between two copies of the image.

 

Your flamingoes sample can't be made into this kind of a seamless tile as it is because (among other things) some parts of the blue-necked flamingo are missing from the image so there is no way to supply the missing part of its body on a tile to the left or most of it on a tile below another tile.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites
1 hour ago, R C-R said:

Your flamingoes sample can't be made into this kind of a seamless tile as it is because (among other things) some parts of the blue-necked flamingo are missing from the image so there is no way to supply the missing part of its body on a tile to the left or most of it on a tile below another tile.

 

Actually, the result of that second picture that MaryLou used to demonstrate came out very well when I tried it in Designer. You are correct that at first glance, it does not look seamless, but apparently the program she used modified the original which was not seamless and made it seamless. The adjustments I mentioned in the previous post that the program seemed to have used actually worked out.

Flamingo.png


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

You can tile any picture but how convincing it looks in the end depends on how much information you have in the original picture plus how much time you want to spend with the healing brush after the offsetting.

The attached image was done in Affinity Photo using MaryLou's original (not seamless) image and would be fine for a kid's bedroom wallpaper but I would not enter it into any graphics competition.

@MaryLou (assuming you also have Affinity Photo) just follow this YouTube link but bear in mind Affinity has an Affine Filter not an Offset one but it does the same thing

Not sure how you would do this if you only have Designer

https://www.youtube.com/watch?v=chFSIUXe1Ro

 

 

tile.jpg


Due to the fact that Boris Johnson is now our Prime Minister, punctuation, spelling and grammar will never be worried about ever again.  We now have far bigger problems to be concerned about.

Share this post


Link to post
Share on other sites
3 hours ago, Bri-Toon said:

So you are looking for a solution to create a proper cutout out of a picture that is not yet seamless so it can be seamless when tiling. Got it. I tested that second tile, and it looks like the edges are actually slightly transparent and cloned. Something like this would have to be done perfectly, and I'm afraid it's beyond me. What discontinued program did you use to do this? That is a pretty impressive way of tiling.

Yes, that's exactly what I want.  There was an oldie by Ulead called PhotoImpact.  It was purchased by Corel around 2008 and since Corel also sells PaintShopPro, they discontinued PhotoImpact which eliminated some of the competition. That was a shame because PhotoImpact was a far better program.  There was also a filter that worked with the older programs that did it as well.  This works very well for most images, especially those used for background images. 

I do have Affinity Photo but have only opened it a few times.  Haven't had time to learn my way around nor the motivation since I have no interest in photo processing of any kind.  I also don't enter contests but I often want to use a pattern as a web page background and not many people really inspect it to see if all the pieces match up so this method works just fine. If I were to enter a contest, it would be all 100% original work.

 

The example that Bri-Toons made came out great!  Thanks for trying.  I will look on YouTube and see if I can find a simple tutorial there. 


Windows 10 Home
Affinity Designer 1.6.4.104
Affinity Photo 1.6.4.104

Share this post


Link to post
Share on other sites

I have placed a description on Creating a Seamless Tiled Background Image (in Photo) in the Tutorials Section. This method is not of universal application, but it may work for @MaryLou. It has the advantage of not needing the healing brush (unless you want to).

John


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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.