How to I create a fill pattern for a shape?

How do I create a clean fill pattern to use in a shape? This is not a standard fill pattern, I want to define my own. I would like to do the following pattern:

23%20PM

and place it in a bezier shape (pen tool) so I could use around/behind other shapes as in:

29%20PM

This works but I have lost crispness going from the pattern to the fill because I had to do a screen shot and use that as the fill.

Is there no way to create a repeating vector pattern?

I have been able to improve the image quality using PDF instead of JPG or other but it still bloats the document size with all the images.

Has anyone else been able to use SVG or other vector snippets to make a fill pattern?

If you can try cropping the image and using it as a tiled image background on an object.

After discussing with a Canvas (Windows) user, I found a way to use the vector pattern directly. It takes a mix of ‘masks’ to do but allows some flexibility in maneuvering the pattern, too. So far, I am liking the new way better.

Of note, I removed about 40-50 of the fill patterns (which were imported from a PDF export) and file only shrunk 2MB. I will be interested to see when I have 40-50 put back how the file size compares.

@DerekM: I have tried multiple times to get tiling to fit but there seems to be a couple pixels between images, no matter how tight I crop or even clip the image. A setting to control the tiling (space between tiled images with negative options also an option if you wanted overlapping) would be helpful.

Hmm, are we doing this the same way? There are no gaps between the tiles for the image tile fill option. Do you have a PDF of the exact single tile instance or does it have extra info you’re trying to crop out? Here’s 3 examples of a tiled PDF. I’m not seeing any gap between them
Tiles.graffle (96.6 KB)

So here is an example of what I have run into. I create a pattern, export as PDF, then create a shape. I set the image as the pattern and select tile. On the left is the ‘pattern’ (just a gray box with a border). On the right is the resulting tiled pattern I get. I have tried with a border and without but still get ‘spacing’ between the image:
Screen Shot 2020-05-15 at 5.07.05 AM
Screen Shot 2020-05-15 at 5.08.36 AM

Ah, so you’re creating the PDF with OmniGraffle? The issue might be in that step. Try setting a 1x1 pt grid, turn on snapping and make sure the shapes are pixel aligned. If you’re using a stroke, set that to be a inner stroke type. The default stroke type centers itself on the edge of the shape so if you have a 10pt by 10pt square and a 1pt stroke, the whole shape is actually a 10.5pt square. When exported the total image dimensions are a 11pt square so there’s a small amount of blank space on the edges. That’s where this gap is coming from when you tile it. I’m having troubling find the bug on this to check what we’ve already researched about this.

Or if getting everything pixel aligned is really difficult because of the geometry, you can try creating an artboard of the appropriate size that’s pixel aligned and use that to crop the objects.

Uploading my test file (Test.graffle.zip)

The first pattern was a “No Stroke” shape.
I am using “Snap to Grid” so I can align the objects correctly.
I am using a default file so units are pixels and 1pt=1px.
Grid is set to 4px major grid spacing with 4 steps in the grid so 1px.
Export settings are PDF, Current Select (single object), Transparent background, no non-printing layers, no margins, size 100%.
Still get a blank space around the tiled item when brought back in as an image.

So taking your brick object, if you zoom in in it, you’ll see what’s causing this. Part of the gap is the alignment of the components. Another part of the gap is due the lines. The line strokes have the same issue as an object stroke and you can see parts of it sticking outside the group bounds. Another part is the width of that group being 120.2px.


So using an artboard could help here, but you’ll need to get the right alignment to get the desired crop. You could also try creating these bricks from rectangles instead of lines and using an inner stroke and crop that with an artboard.

ARTBOARDS! Of course! Thank you Thank you Thank you Thank you!

So, now how do I rotate the image within a shape? So if I have a rectangle, I can have a pattern level or I can rotate the pattern so it is tilted 5 degrees (without creating an image for various angles).

1 Like

Rotating the image separately from the shape isn’t possible. I believe you already emailed about that :) I can’t think of any tricks to avoid having to make individual images.

Okay. I redid my pattern smaller - since tiling is going to work! - but still getting a gap between horizontal tiles.
Screen Shot 2020-05-15 at 6.19.32 PM
You can see the artboard is inside the bounds of the image so there shouldn’t be any white space on the sides. But I get:
Screen Shot 2020-05-15 at 6.19.49 PM
Very weird.
Yes I have already asked about the rotating the image…but if didn’t think it hurt to try! You all have some interesting ways to get things done and not everyone does things the same. (Options are good)