Friday, March 1, 2013

Seamless Patterns for Web

Illustrator CS6 comes with an excellent pattern making tool - it takes care of all the overlapping and gives a lot of flexibility for your tiling options. The patterns will be completely seamless.

For example, this is the original piece that I made for the pattern:



This is the pattern creation / editing tool.



It has a couple modes for tiles - Grid, Brick by row, Brick by column, Hex by row (the one used here), Hex by column. The tile will have different bounds than the actual swatch - I'm displaying both here - the hexagon is obviously the tile bound and the blue rectangle around it is the swatch bound.

You can move the actual pieces around, resize them and do all kinds of nifty things. Once you play enough you save it.

The problem is it will save the pattern for current file. It's not a big deal since you're saving it as a swatch in the current file, and any swatch is accessible in any other file - you just have to import it. Just annoying a bit - Would be great if you could just save your own patterns as a swatch and be done with it.

That's a small problem to have and it has maybe not perfect but still a solution.

Now, problem 2 is a lot bigger - you can't save your actual pattern as a file or output it for web. So basically you're bound to using it in Illustrator files only... and if you want to save it for web you have to do it manually and the old fashioned way. It's not too bad if you're using a Grid mode. If you chose Hex mode then well good luck.

After reading on the subject on blogs and forums I decided to try one thing.

I dragged the pattern from swatches onto the artboard, ungrouped everything, deleted unnecessary objects, turned the pixel view on, added 4 guidelines that would contain the piece that I needed, and resized artboard to the rectangle defined by the guides. It was not fun but well it worked and I didn't get any white spacing or overlaps.

Second time I noticed one of the rectangles created after I dragged the pattern onto the artboard was exactly the swatch size (at least so it seemed to me). So I ungrouped everything and fitted the artboard to that rectangle. I had to readjust the artboard though it was 0.3px to the left for some reason. Just zoom in all the way turn the pixel preview on and make sure there are no lines or anything.

Now, some people were recommending using the tile size which would work great unless you got funny measurements like 100.2807px or if the tile and swatch sizes don't match.

Hopefully someday Adobe will decide to have pity over people with this problem and put a feature in for saving the actual pattern. One can dream.

No comments:

Post a Comment